画面に画像を表示する。画面に画像を表示する。Viewについて説明する。View(以下、イメージビュー)とは、画面に画像を表示させるための入れ物で、アプリの画面に表示されている背景やイラストはイメージビューを使って表示されている。イメージビューに画像を設定するイメージビューを使う前に、画像をプロジェクトに追加しておく必要がある。その方法については前回記事で説明しているのでそちらを参照されたし。今回の説明では4つの画像ファイルを下図のフォルダ構成で準備し、プロジェクトに取り込む。下図はプロジェクトにファイルを追加したあとのXcodeの画面。references」で追加した。前回記事で説明したように、黄色いフォルダはグループ、青いフォルダはフォルダの参照を表している。それではイメージビューに画像を表示してみよう。デバイス画面にイメージビューを配置したあと、黄緑枠のアトリビュートインスペクタボタンを押して設定画面を開く。設定項目のimageを選択すると、先ほど追加した4個の画像ファイルが表示されるのでimage_blue.pngを選択する。すると、デバイス画面のイメージビューに画像が表示され、そのままシュミレータを起動しても画面に画像が表示される。このように、黄色いフォルダに入っている画像を選択する場合はフォルダの階層は気にせずにファイル名を指定するだけで良い。ナビゲーションエリアのグループはファイルを分別するために存在するだけで、フォルダ階層の概念が無いからである。青いフォルダに入っているファイル名を選択すると不思議なことが起きる。下図は、設定項目のimageに表示された4つの画像の中からimg_red.pngを選択したときの画面。ストーリーボード上には選択した画像が表示されているが、いざシュミレーターを起動してみると画像が表示されないのだ。標準出力には以下のようなエラーが表示される。画像が見つからないというエラーだ。references」でファイルを追加した場合は、ナビゲーションエリアにフォルダの参照が追加されるが、フォルダの中のファイルパスは管理されないからである。今回の例では、ナビゲーションエリアのimages2が実物のフォルダへのリンクファイルになっていて、フォルダ内のimg_red.pngへのパスは管理されていないということだ。青いフォルダのファイルを指定する場合は下図赤枠のようにナビゲーションエリアに格納されているフォルダ名を含めたファイルパスを指定しなければならない。今回の例では「image2/img_red.png」を入力してシュミレーターを起動すると画面に画像が表示される。今度はストーリーボードのイメージビューに画像が表示されなくなる。この仕様は以前のXcodeのバージョンからのようなのでXcodeの仕様と考えるしかなさそうだ。(検証したXcodeのバージョンは7.2.1)ソースコードからイメージビューに画像を設定するでは、ソースコードからイメージビューに画像を設定するとどうなるか実際にやってみよう。下図赤枠のアシスタントエディタボタンを押してViewController.swiftのソースコードを表示する。Ctrlキーを押しながらドラッグ&ドロップでイメージビューをソースコードに運んで吹き出しの設定画面を表示させる。Connectionに「Outlet」、Nameに「testImageView」を入力してConnectボタンを押す。これでソースコードからイメージビューを操作できるようになった。次にイメージビューに画像を設定するコードを追記する。UIImage(named:"img_blue.png")}}以下が実行結果。ファイル名のみで画像を表示できた。img_yellow.pngはさらに深い階層のフォルダ(sampleフォルダ)に入っているが、同じようにファイル名を指定するだけで良い。UIImage(named:"img_yellow.png")}}img_red.pngの場合は、以下のコードのようにimages2フォルダからのパスを指定する。UIImage(named:"images2/img_red.png")}}img_green.pngの場合は、以下のようにimages2フォルダからのファイルパスを指定する。UIImage(named:"images2/sample/img_green.png")}}Highlightedイメージビューの設定項目にHighlightedというものがある(下図赤枠)。これを使えば、イメージビューに画像をもう1枚設定しておける。Highlightedにチェックを入れると、Highlightedに指定した画像が最初に表示されるようになる。以下のコードは、イメージビューをタップする度に2つの画像が切り替わるコードの例。イメージビューは初期状態では画像のタップを検知できるようになっていないので、検知できるように変更している。//入力検知を有効にする。//タップされたときの呼び出すメソッドをイメージビューに登録する。//highlightedプロパティのtrue,falseを切り替える。{super.viewDidLoad()//入力検知を有効にする。true//タップされたときの呼び出すメソッドをイメージビューに登録する。{//highlightedプロパティのtrue,falseを切り替える。【Swift】画像をRetinaディスプレイに対応させる方法。...【Swift】プロジェクトにファイルを追加する方法。Controllerの使い方。Cellを使ってストーリーボードのみでテーブルを作る。...【Swift】Stepperの使い方。プラスとマイナスのボタンで値を増減させる。7.2)前回の記事に続いて、Swiftで使える部品の確認を行う。モーダル表示の重ね方や登場シーンを設定する。コメントをキャンセルメールアドレスが公開されることはありません。