はじめてのiOSアプリ開発

リセットボタンを作ってみよう

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
作成した色をいったんリセットして、すべてのスライダを真ん中の値に戻すボタンを作成します。
講師:
10:59

字幕

これまでプログラミングをしてきたところで カラーエディタの基本的な機能が 実装できました スライダーを動かして色を作る という機能が実装できています では 最後に このカラーエディタに対して リセットボタンを用意して リセットボタンが押された時に 今まで作った色を 50% の グレーに戻す操作を 実装したいと思います では 「実行停止」ボタンを 一度押しながら Xcode に戻って 作業を行いたいと思います まず リセットボタンを追加する時の 1つめの作業は 見た目を追加する ユーザーインターフェイスを追加する ということですから 「 Main.storyboard 」で 最初に作業を行います では この右側のユーティリティ領域を 表示するボタンを一度押して iPhone のボタン群を表示しておきます ここからボタンを選ぶわけです ボタンはスライダーのすぐ上にあります 勿論スライダーと同じ様に ボタンの名前から 見つけることもできますけれど 大体 よく使うコントロールは 1つにまとめられて表示されて 上の方に表示されていますから ここからドラッグ & ドロップで ボタンを追加して 今回は画面の真ん中の下です こうやって iPhone の 画面の真ん中の所でも 下の所でも ガイドが表示されるようになっていますので これでボタンを画面の下の所に追加して ダブルクリックすることで タイトルを変更できます 今回は ここに「リセット」と 名前を入力して リセットボタンを作成してください タイトルを入力し終えたら それ以外の所を― グレーになっている所を クリックすることによって リセットボタンの作成が完了できます こうして用意したリセットボタンなのですが 注意して頂きたいのは あまり小さすぎると ボタンが押しにくいということです 必ず このボタンは間を広げて 左右に幅を持たせて下さい これは何故かと言いますと 人の指は結構大きくて 画面に対して「リセット」の 「ト」の辺りを押しても はみ出てしまう 領域が大きくあるので 大きめにボタンの領域を取っておくことで 人間が「ここ ボタンだよね?」と 思う所が 的確に押した感じになってくれる ということです ですので ボタンは サイズを大きめにしてください 但し ボタンの大きさを 大きくし過ぎると 押しやすくなるのですが リセットボタンは 今まで自分が頑張って作った色を 全て消してしまう 結構 恐ろしいボタンですから この様に大きく用意しすぎると ちょっと怖いと思いますので そこまで大きく用意する必要は ありませんから 下の方に控えめに サイズが これで 40 の 30 かな? 横方向に 100 ピクセルくらいで いこうと思います 100 とか 120 とか それくらいで良いと思いますので 真ん中に寄せて ちょっと大きめに用意したボタンを この様にして作ります これまでのスライダーとか カラービューと同じ様に このボタンに対しても 制約を追加しておきます ボタンに対して設定する制約は ボタンの大きさはコロコロ 変化させる必要はありませんので ピンのこのボタンから 「 width 」と「 height 」にチェックを入れて 横方向の大きさと 縦方向の大きさを固定しておきます それぞれ 100 ピクセルと 30 ピクセルです そして 上の所の 「 Constraints to margins 」を この場合は消して 下側にくっ付くようにするために 今度はこの下の方 下側にくっ付きますので ここにチェックを入れておきます ここまで設定できたら 一旦 制約をこれで3つ追加して 終了しておきます まだこれは横方向のサイズと 縦方向のサイズと 下の画面にくっ付くことは 設定できたのですが 丁度 画面の真ん中に来るのは セットできていない状態です 画面の真ん中に来るという制約は このピンのボタンではなくて その左側にある 「 Alignment 」と言うボタンを押して 設定します 「 Alignment 」というボタンを 一回押して 下の所に 「 Horizontal Center in Container 」 というのがありますので これを一回 押すことによって 画面の中央にくる部品の制約を 追加することができます それでは この「 Add 1 Constraint 」 「1つの制約を追加する」 というボタンを押して 制約の追加を完了させます これでこの制約が 丁度 青になって この「リセット」ボタンの 全てのレイアウトの条件が 整ったことが分かります レイアウトが整ったら 一度 実行して ちゃんとレイアウトできているかどうか 確認しておきましょう まず今 iPhone 5S が 選択されています この状態で実行します そうすると画面の下に 「リセット」ボタンが用意されて 押してもまだ何も起きませんけれど 押せるようになっているのが分かります 同じ様に 一旦 Xcode に戻ります 「実行停止」ボタンを押しながら Xcode に戻って 今度は iPhone 5S ではなくて iPhone 6 を選択してみます 同じ様に「実行」ボタンを押して どうなるか確認しておきます すると この「リセット」ボタンを 用意した画面の下に 貼り付け用に 用意したことによって しっかりと画面下に表示される 「リセット」ボタンが 用意できていることが分かります それでは これで いろんな場面に対応した 「リセット」ボタンが用意できましたので この「リセット」ボタンが押された時の 操作を次に書いていきましょう これまでスライダーが動かされた時の 作業を行ったのと同じように Assistant editor を使って作業していきます さっきはスライダーが動かされた時の colorChanged が追加されましたけれど 今度は「リセット」ボタンが押された時の 作業をこうやって この「リセット」ボタンを また 先ほどと同じ様に 右クリック あるいは コントロールキーを押しながら 左側に追加して 足を延ばして そして この「colorChanged 」の 下の所が良いと思います 「colorChanged 」の下の所に 「 resetColor 」と入力して 色のリセット(と言う意味)を こうやって書いておきます そして 「 Connect 」ボタンを押して 「 ViewContriller.m 」に戻って この実装作業を終わらせましょう Assistant editor は消しておきます リセットするところでは やることは決まっています 50% のグレーを作るということですから この「 UIColor *color 」の メソッドを使って 「 UIColor 」 50% のグレーを作るためには RGBの colorWithRed を使っても― 「 red, green, blue, alpha 」の このメソッドを使っても良いのですけど 「 colorWithWhite 」という メソッドを使って ここに 50% という意味の 0.5― aplha 不透明度が 1.0 の― 色を作ってくださいと 簡単にこれを書くだけで 50% のグレーが作れますので これをセットして 「 self.colorView 」に対して 背景色をセットする これだけでグレーの色がセットできます 一度 実行してみると― 分かるのですけれど 実行しますね この状態で何か色を作って リセットしますと 「リセット」ボタンを押しますと 背景色はこの様に変わるのですけど スライダーの位置が全く変わっていません スライダーはスライダーで 色をリセットした時に リセットを自分の手で かける必要がありますので Xcode の色を 背景色をセットした後は この「 redSlider 」に対しても 「 setValue 」というメソッドを使って 0.5 に戻してください と 同じ様に 「 greenSlider 」に対しても 「 setValue 」を使って 0.5 に戻してください と そして「 blueSlider 」に対しても 同じことを書いて 全て 0.5 の値に戻してやる と宣言した上で 「リセット」ボタンが ちゃんと機能するようになります 一度 実行して確認しておきましょう 赤のスライダーと緑のスライダーと 青のスライダーを動かして あとは「リセット」ボタンを押します そうすると この様に 真ん中にシュッと縮んで 50% のグレーに戻るようになりました このレッスンでは 「リセット」ボタンを用意して その「リセット」ボタンが押された時に 作成した色を一旦リセットし 全てのスライダーを真ん中の値に戻す というボタンの作り方を説明しました

はじめてのiOSアプリ開発

このコースではXcodeを使ったiOS用アプリの開発に必要な基礎知識を学びます。Xcodeの基本的な使い方から本格的なゲーム制作のためのSprite Kitを用いた制作方法まで、カウントダウンタイマーやスピード暗算ゲームなど3つの簡単なiOS用アプリを作りながら説明します。このコースを見れば、本当に必要なアプリ開発の知識を着実に身に付けられるでしょう!

5時間55分 (52 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2015年06月04日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。