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

画像ビューの上に部品を配置する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
画像ビューの上に部品を配置しようとすると、画像の内容に負けてしまって部品が見にくくなることがあります。Visual Effect Viewという特殊なビューを使うことで、画像の一部にぼかしをかけて部品を見やすくする方法を解説します。
講師:
07:22

字幕

このレッスンでは、画像ビューの上に部品を配置する方法を説明します。現在こちらのアプリでは、トマトの画像を表示する画像ビューが画面全体に配置されています。今回はさらに画像を大きく表示するために、こちらの画像をもう少し大きく表示するようにしておきましょう。制約条件を少し変更しておきたいと思います。まず制約条件を、まず画像ビューを選択しまして、こちらの ResolveAuto Layout IssuesのこのボタンからClear Constraintsとして、全ての制約を一旦取り除いておきます。そしてこの画像ビューに対して、新しい制約を追加しましょう。今度はこのConstraints に対して、Constrain to marginsというこのチェックボックスを外しておきたいと思います。そして画面の全体に対して、特に iPhone6 plus ではちょっと余白が出てしまいますので、余白がないように0 0 0 0 の状態で余白なしにこの画像ビューを配置したいと思います。ではこの 4 つの制約を追加しましょう。そしてインスペクタからこの画像が、Center に表示するだけではなくてAspect Fill として、全ての画面全体の領域を埋め尽くすように伸縮するというモードにしておきます。 Aspect Fill でなくScale To Fill にすると、このように横方向に伸びた状態になってしまったりしますので、アスペクト比はそのままで画面全体を埋め尽くすというようにしたいと思います。そしてこの上に今回はラベルを一つ表示してみましょう。Tomato と表示するラベルをですね配置してみたいと思います。オブジェクトライブラリに移りまして、Label をこの上に配置します。これ大きくしないと配置できないんですね。大きくした状態でラベルを配置します。こうやってちょうど真ん中に来るように配置して、でこのサイズをちょっと変更してですね、ラベルが真ん中に来るように真ん中寄せの Allignmentに変更しましょう。このアトリビュートインスペクタでLabel の設定が Alignment、中央寄せにするか、左寄せにするか、右寄せにするかということを選択できますから、ここで中央寄せにしておきます。そして色をちょっと変更してこの色を白にしておきましょう。白を選択して、そしてこのSystem Bold というのを選択して、もう少し全体的に大きなサイズでこのフォントが表示されるようにしたいと思います。 300、行き過ぎですね。100 ぐらい。そしてもう少しラベルを広げておきます。そしてこのラベルに Tomato と入力したいと思います。で、ちょっと今見て頂いて分かるんですが、この Tomato と入力してもですね後ろのこのトマトの絵がなかなかにうるさいので、ラベルのこの Tomato という文字がいまいちよく見えないと思います。プレビューの所で確認してもですね、これを iPhone の4 インチ、4.7 インチ、5.5 インチ、ちょっと今制約がないので制約を付けておきますねTomato のこの Width とHeight はそのままにして、そして中央に表示されるようにしておきたいと思います。それから上の辺にくっつけておきましょう。Add 1 Constraint。そうするとこのように全ての iPhone で綺麗に表示されるようになっているんですが、どうしてもこちらシミュレータの上で実際に実行して少し大きめの画面で確認すると、この Tomato が後ろのこのトマトのですね、画面の煩雑さに負けてしまって綺麗に表示されていません。そこで今回ご紹介したいのは、Visual Effect View というちょっと特別なビューを使うという方法です。 オブジェクトライブラリを表示しまして、ここに effect と入力します。そうすると この Visual EffectView というのが選択できるんですが、Visual Effect Viewwith Blur というのと、Visual Effect Viewwith Blur andVibrancyというのがあります。でちょっとここにですね、このある中で Blur というのを使ってみたいと思います。で この Tomato の上からで構いませんので、この View を上にこうやってひょいっとこう乗っけてで、これを少し View のサイズをこうやって覆いつくすように変更します。で、この状態で この Viewの制約を追加します。上につくようにというのとHeight を守って、それから左側と右側にくっつくようにしたいと思います。これちょっとサイズが今おかしくなっていますね。少し変更して左側にTomato の上に来る様にして調整して、ではこれを このConstrain to marginsというのを一度オフにしまして、で、左側と右側 そして上にくっついてそして高さはこのままという形で制約を追加します。 で、この View に関しては実際にシミュレーターで実行してみるまではこのように灰色になっているんですが、シミュレーターの上で実行してみると、このように下にあるものがぼけて表示されるようになることが分かります。この Visual Effect Viewというのを使うことで、後ろの方のですねちょっと煩雑なものをすっとこう綺麗にぼかしてくれる、そういう機能を追加することができます。今トマトがこの View の後ろに来てしまっていますので表示されていないんですが、ちょっとこちらのですねドキュメントアウトラインこれを表示しまして、この Visual Effect ViewというのをTomato の下に持ってきます。これで画像があって、画像を表示する View ですね。画像ビューがあって、Visual Effect View があって、そして Tomato のラベルが来るとこのようになりましたので、この状態でもう一度このアプリケーションを実行してみます。するとこのように画像の一部にぼかしがかかり、さらにその上にテキストラベルが表示されるようになりましたので、非常に綺麗にラベルの文字が読めるようになったことが分かります。 画像ビューの上に部品を配置したいという時には、このように Visual Effect View を使うことを考えてみてください。このレッスンでは、画像ビューの上に部品を配置する方法を説明しました。

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

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

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

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

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

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