【Swift】PickerViewで選択した色を、ImageViewに表示してみよう

こちらの記事を参考に書きました。

iOS Tutorials: Show colors with PickerView | DaddyCoding
With this tutorials, the users will have the capability of choosing the color that they want scrolling through PickerView and the image will change its color. O...

 

まず、Xcodeを開いて、”Create a new Xcode project”から新たしいプロジェクトを作ります。

SingleViewAppを選択してください。

Product Nameにはこの機能にふさわしい名前をつけてあげましょう。今回は、”ColorSelector”という名前にしました。

LanguageはSwiftを選択、Include Unit TestとInclude UI Testにチェックを入れている状態からのスタートです。

 

まず、Main.storyboardをクリックして、必要なパーツをViewControllerに揃えるところから始めます。今回必要になるパーツは

・UIPickerView (色を選択するためのパーツ)

・UIImageView (色を表示するためのパーツ)

の二つです。右上にある

この丸の中に四角があるボタンをクリックすると、検索バーが出てきますので、UIPickerViewとUIImageViewを検索してください。出てきたら、検索結果をiPhone画面の表示されている場所にドラッグアンドドロップしてください。

無事にこのような状態になったら、次はViewController.swiftというファイルをクリックしてください。ちょうど先ほどクリックしていただいたMain.storyboardのファイルの上にあると思われます。

初期の状態は以下のような状態だと思います。

ここにプログラムを書いていきます。

まず、先ほど設置したUIPickerViewとUIImageViewに名前をつけてあげましょう。名前の付け方ですが、

class ViewController: UIViewController と override func viewDidLoad()の間にこの二行を足してあげてください。

@IBOutlet weak var imageView: UIImageView! というのは、UIImageViewにimageViewという名前をつけますよ、という意味です。同様に、@IBOutlet weak var pickerView: UIPickerView! というのは、UIPickerViewにpickerViewという名前をつけますよ、という意味になります。

なぜ名前をつける必要があるか、と言うと、プログラムを書いているときに、どの部分の話をしているのか、コンピューターに伝えるためです。

次に、もう一度Main.storyboardに戻り、今度はimageViewという名前と、pickerViewという名前が、どのパーツを指すのかを指定します。

まず、①のところの黄色い丸のアイコンをクリックします。次に②のところにある丸に矢印が入ったアイコンをクリックします。すると、先ほど書いた名前(imageViewとpickerView)が、Outletsの欄に表示されているのが分かります。そこで、imageViewの右端に出ている丸をドラッグし、UIImageViewにドロップしてあげてください(③)。これで、imageViewという名前は、このUIImageViewを指すのだという意味になります。同様に、pickerViewの右端に出ている丸をドラッグして、UIPickerViewにドロップしてあげてください。

これらの作業を「紐付け」と言います。紐付けは重要です。紐付けがないと、仮にUIPickerViewが二つあったとき、UIPickerViewに対して二つ名前が存在することになり、どちらがどちらを指すのか分からなくなってしまうからです。

それができたら、ViewController.swiftに戻ってプログラミングを続けます。

まず、class ViewControllerのところに、以下のように書き足してあげてください。

このUIPickerViewDelegateとUIPickerViewDataSourceというのは、UIPickerViewを使う上でのお約束のようなもので、必ず書き足さないといけないものです。「プロトコル」と呼ばれています。

次に、ホイールの情報部分を書き足します。

ここでいう16行目と17行目が書き足された部分です。

次に、少し下にスクロールして、override func viewDidLoad()の中に22行目、23行目の内容を書き足します。

これらのコードは書き足したプロトコルとセットで使うもので、pickerViewを使える状態にするために重要です。

 

次に、これらのコードを下に書き足します。

UIViewDataSourceのプロトコルがうまく動くためには、pickerの行とコンポーネントの数のデータが必要、という決まりがあります。27行目がコンポーネントの数、31行目からが行数になっていて、return colors.countというコードで”赤”, “黄色”, “青”, “緑”というcolorsの中に入ったデータを数え、その結果である4を行の数として返しています。

そして、その次にこのコードが下にきます。

まず35~37行目で、colorsの中にある”赤”, “黄色”, “青”, “緑”というデータを、pickerViewの中に格納するコードを書きました。

39行目からはif文を使って、0行目(“赤”)が選ばれたら、赤色をimageViewのbackgroundColorに指定する。1行目(“黄色”)が選ばれたら、黄色をimageViewのbackgroundColorに指定する。というようにして、緑まで対応しています。

これで完成です。これまで書いてきたコード全体を見ると、このような感じになります。

プログラミングに慣れていない人にありがちなのが、カッコの数が合わないことです。カッコは、どこからどこまでが纏まったコードなのか、ということをコンピューターに伝えてくれりものなので、数が合わなかったり位置がおかしかったりすると、コンピューターがコードの纏まりを理解できずに、バグとなってしまいます。うまくいかないときは、このサンプルコードの全体像と、書いたコードを比較してみてください。

左上の再生ボタンを押すとシュミレーターが立ち上がり、動作確認をすることができます。以下のような感じで動きます。

 

 

コメント