【動作環境】
Swift2.2 Xcode7.3
【対象レベル】
超初心者
【学習内容】
iPhoneのカメラロールから画像を読み込み、読み込んだ画像にセピアなどの効果を編集するアプリの
開発方法をかんたんに解説しています。
動画の音声の書き起こし
はい、それでは前回の続きを行っていきます。
今回は画面下部に配置した6つのフィルターのボタンをスクロール可能にしていきたいと思います。
Scroll Viewという機能を使いまして、これらの6つのボタンを横一列に繋げて、スクロールできるようにしていきます。
それでは、前回までに設定したAuto Layoutの機能ですが、いったん解除します。
ここのViewControllerのアイコンをクリックした上で、ここですね、ClearConstraintsを選択しましょう。
全ての制約が解除されます。
まだここに一部制約が残っていますので、このView直下の制約も消してしまいましょう。
で、画面下部の6つのこのボタンですが、一番左上のだけ残してそれ以外は消してしまいましょう。
これで消えました。
そして、画面下部にScroll Viewを追加していきましょう。
このようになりますね。追加しました。
制約を追加していきます。
左右と、下ですね、で、高さを指定します。
そしてここにScroll Viewを追加していきます。このようになりますね。
Scroll Viewと同じ高さにしていきましょう。そして、上下左右全ての制約を0にしていきます。
4つの制約を追加することになりますね。そして、このViewとこのScroll Viewを同じ高さにしていきます。
コントロールを押しながら、スクロールとScroll Viewの間を引っ張って行って
青い棒が出ますので離してやるとこのEqual Height というのが出ますので、これを選択します。
そして、さらにこのViewに関してですけど、制約をもう一つ追加します。
Widthを選択しまして、1000にしましょう。横に長くスクロールできるようにします。
ちょっとMiss Placementがありますね。修正していきたいと思います。
Expceted1000なのに、実際は320しかない。でもこれはスクロールできるので良いはずですね。
Viewの制約をちょっと見ていきたいと思います。
トレーディングとレ―ディング、ButtomとTop、Widthが1000で高さがEqual Heightになっていますね。
はい、それでは、ボタンの方をこのViewに追加していきます。
このように追加をします。高さを調整します。このようになりましたね。このボタンにも制約を追加していきます。
下と左に追加して、Aspect比を一定にします。4つの制約を追加しました。
ここで確認出来ます。このように問題なく制約を追加することができました。
では、動作をチェックしてみましょう。シミュレーターの方で動作を確認していきます。
はい、このようにスクロールできることがわかりますね。
それでは、このカメラのボタンと上のImageViewに関しての制約の設定をしていきましょう。
まず画面上部のImageViewに関してですね。このように3つの制約を追加します。
このチェックを外しまして、全て0に置いていきます。そして、このカメラに関しては、ピンを設定します。
WidthとHeightを固定にして、上と下のViewの距離を一定にします。
4つの制約を追加して、さらに水平方向に中央に置くようにします。
これで、エラーは消えましたね。ではこのボタンを追加していきたいと思います。
コピー&ペーストして横に並べます。そして、制約を1つだけにして、ピンの方を設定していきます。
上下距離は0で、左との距離は5にしましょう。3つの制約を追加しました。
では、このボタンですけど、コピー&ペーストしてここに追加します。
Aspect比を1つ削って、上と左と下を設定します。
3つの制約を追加しました。
ここに4つ目ですね。ボタンを追加しました。制約を加えていきます。
上と下と左ですね。ここに設定します。では次に4つの目のボタンをコピペします。
このボタンを画面から見えない位置に置きますので、制約のみで調整していきたいと思います。
まず、上下の距離ですね、これを0に設定します。
2つの制約を加えて、これは削除しまして、ボトムとトップ、で左のViewとの距離は、ここのドキュメントアウトラインを見ながらやりましょう。
コントロールを押しながら引っ張っていって、左隣のボタンとHorizontal Spaceを設定します。これを、5に設定しますね。
そして、アップデートフレームにしますと、このように正しい位置におくことができます。
そして、1.2.3.4.5、あと1つですね、このボタンをコピーしまして、同様に上と下の制約を追加します。
そしてコントロール押しながら引っ張って行って左隣のボタンとの水平方向のスペースを設定します、5に設定しますね。
そして制約を更新します。あ、更新しなくても正しい位置にあるようですね。
それでは、各ボタンのタグを振りなおしていきます。1番左側のボタンは1ですね。2番目はタグを2にします。
3番目は、3番にします。4番目は4番にします。5番目は5にします。6番目は6にしますね。
それでは、実行してみて動作を確認してみましょう。
アプリが起動しましたね。写真を選択しまして、エラーがおきましたね。
6番のタグがついているところがちょっとおかしいとでています。ちょっとチェックします。
タグが6番、5番、4番、3番2番、1番。ちゃんとついてますね。
タグが6番、5番、4番、3番2番、1番。ちゃんとついてますね。
では、このフェードフィルターに変な値が入ってないかチェックしていきましょう。
この時点でエラーが起きましたね。ViewWithTag6番の所でおかしなことが起きてる可能性が高いです、
この考えられる可能性としては、他のViewに6番のタグがついちゃっていることが考えられます。
問題無いですね。とりあえず、ここの行だけコメントアウトして動作をチェックしてみましょう。
今動作に少々時間がかかりましたけど、写真の方が無事選択されましたね。
このように、画面下部をスクロールすることができます。
なお、今回コアイメージを使いましたけど、コアイメージはシミュレータでは動作するのに少々時間がかかります。
下部のフィルターを選択すると同様に少々時間がかかりますがフィルター効果をこれまで通りかけることが可能です。
なお、シミュレータの方では、絵が変換されるまで画面の方がフリーズしてしまいますが、
実機の方では、実機のiPhoneのほうでは問題無く動作します。
このようにフィルターをかけることができましたね。
今回は、Scroll Viewの機能を使って、画面下部にスクロール可能なフィルターボタンを配置しました。
このような機能を使うことでより画面の写真を表示する領域を広くとることが出来ますので、
よりユーザーにとって使い勝手の良いアプリを作ることができます。
今回は以上になります。
Tekuruプログラミングスクールでは、
動画だけでは伝わりきらない、アプリ開発の楽しさや、
気軽に質問できる雰囲気で、プログラミングを学ぶことができます。
もっと深く、プログラミングを理解したい方は、ぜひ無料体験にお越しください。
どこよりも楽しく学べるアプリ開発スクールを運営しています。
フォローしてしてくれると、とてもうれしいです☆
https://www.facebook.com/techool
https://twitter.com/TekuruSchool
YouTubeチャンネル
https://www.youtube.com/channel/UCpQfWE0TpewbXYnGyxxBkow
毎週土曜日の夜に動画のアップロードをしています。
よければ、チャンネル登録お願いします！
ソースコードや、操作の仕方、などなど、
なんでも気軽にコメントください。
コメントをお書きください