SwiftによるiOSアプリ開発基本講座

画像と画像ビューを使う

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
iPhoneアプリの上で自分の画像を表示する方法を説明します。さまざまな大きさのiPhoneデバイスに対応するために、3種類の大きさの画像を用意する必要があります。
講師:
06:53

字幕

このレッスンでは、画像を扱うアプリケーションの作り方を説明します。まず新しいアプリケーションのためのプロジェクトを作成しましょう。Create a new Xcodeproject ここの部分か、ファイルメニューからNew Project と選択して、新しいプロジェクトの元となるテンプレートを選択します。ここでは iOSApplication の中から、Single View Application を選択しましょう。Next ボタンを押して、Product Name の所にImageShow と入力します。Organization Name には自分の名前、OrganizationIdentifier にはmytest と入力してください。そして Language にはSwift を選択しておきます。Devices にもiPhone を選択しておきましょう。Use Core Data のチェックは要りません。Next ボタンを押して完了します。プロジェクトをデスクトップの上に作成します。それではまずこのプロジェクトに、今から使用する画像を追加しておきたいと思います。iPhone のアプリケーションを作るときに画像を使いたい時には、このように 3 種類の画像が必要なことに注意してください。 これは iPhone のデバイスごとに表示可能なピクセル数が異なるためです。最も小さいサイズの iPhone では横方向のサイズが320 ピクセルになりますが、最も大きいサイズのiPhone6 plus になるとこちらの公式ページの仕様にあるようになんと 1920×1080 ピクセルという大きさを持っていますから、横方向でも 1080 ピクセルは用意しなければ画像が綺麗に表示されないということになります。ですのでここでは横方向が 360、そしてその 2 倍の 720、そして 360 の 3 倍の 1080 の3 つのサイズの画像を用意しました。それでは次にこの画像をプロジェクトに追加します。画像をプロジェクトに追加するときは、Images.xcassetsというこのファイルを使います。このファイルの中には、アプリケーションで使用する全ての画像を管理できるようになっています。新しい画像を追加するときには、この左下にあるAdd a group orimage setという + ボタンを押します。そして New Image Setというのを選択してください。そしてイメージに名前を付けます。今回はトマトのイメージを用意しましたので、Tomato と入力しておきましょう。 そして先ほど用意した画像を使って、この tomato_360.jpg、この一番小さいものを1x の所にドラッグ&ドロップし、2 倍のものを 2x の所に、3 倍のものを 3x の所にドラッグ&ドロップします。なお画像の名前は例えばこのように、_ でピクセル数を入力するのではなくtomato.jpg、そして 2 倍のものをtomato@2x.jpg、3 倍のものをtomato@3x.jpg とこのような名前にしておくことによって、例えば 一度この画像は全部削除してみますが、このように名前を付けることによって、これをまとめてドラッグ&ドロップしてこの Tomato の所にImage Set の所に追加することでも、一気に画像を追加することができます。このようにして画像を管理することによって、デバイスの種類に応じて適切な大きさの画像が使われるようになります。それでは次にこの画像を表示するための画像ビューを追加しましょう。Main.storyboard に移ります。そしてこの storyboard の所に、オブジェクトライブラリからimage と入力して 検索してImage View を追加します。 はい、Image View はこのように画面全体に広がろうとしますので、画面全体にしっかりとドラッグ&ドロップで貼り付けてやります。ちょっと今下の所が今見えてないですね。これで画面全体を覆いつくすImage View が追加できました。ではここでこの Image View に画像を追加したいと思います。画像を追加する方法はいくつかあります。このインスペクタの所でアトリビュートインスペクタの所を選択しまして、右から 3 つめのタブですね。Image View の所にImage というこういう選択項目がありますので、ここでこの Tomato というのを選択することもできますし、また ライブラリの所でここの Media libraryというのがライブラリの一番右側にありますので、ここを選択してここにあるこのTomato というのをこの Image View の上にドラッグ&ドロップすることでも、このように Image View に画像を選択することが出来ます。こうして選択した画像は、ここの View の Mode の所でScale To Fill などのどのようにしてそれを表示するかというのが選択できるようになっていますので、ここで Center に合わせて画像を表示するというようにすると、画像が変に伸ばしたり縮めたりして表示することなくそのままの大きさで表示することができます。 ではこの Image View に制約を追加しましょう。この Pin のボタンから制約を、左と右、そして上と下に追加して、はいこれでアプリケーションを実行してみます。すると iPhone6 の上ではこのように、画像が真ん中の所に表示されるようになりました。Preview でも確認しておきましょう。アシスタントエディタを使います。アシスタントエディタのPreview を選択して、現在ここに選択されているのはiPhone の 4 インチですね。余白の所をダブルクリックすることで、こうやってサイズを切り替えることができます。iPhone の 4 インチ、そして iPhone の 4.7 インチ。これが iPhone6 です。先程のシミュレーター上での実行と全く同じ結果になっています。そして iPhone 5.5 インチ、これが 6 plus ですが6 plus では少し余白が付く形で制約が考慮されますので、このように左端と右端がちょっと余白が入った状態になっていますけども、しっかりとそれぞれのデバイスの特性に合わせた画像の表示の仕方になっていることが分かります。このレッスンでは、 画像とそれを表示するための画像ビューの使い方を説明しました。

SwiftによるiOSアプリ開発基本講座

このコースではiPhoneやiPadのアプリを作ってみたい方に向けて、簡単なiOSアプリを作りながらSwiftを使ったXcodeでの開発手順をひとつずつ丁寧に解説していきます。各レッスンではiOSのフレームワークの機能を確認しながら、アウトレットやアクション、MVCモデルやDelegateといったアプリ開発に必要な知識を説明します。

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

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

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

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