(1)ちょっと日が空いてしまいましたが、前回はアプリの顔、タイトル画面を作成しました。タップして次に来るのはトップ画面、メニューとかが並んでいる画面ですね。今回からそちらを作成していきます。以下は画面の完成イメージ図です。背景ちょっと保留な部分はありますが...何度も言いますがデザインの酷さには目を瞑ってくださいませ。自分自身が一番自覚しております←...さて。このトップ画面はタイトル画面に比べ情報量が少し多いですので、パーツごとに切り分けて作成していきます。このような感じでしょうか。今回作って行くのはこの1と2の部分です。STARTボタンの設定と配置ViewControllerに処理を書いてボタンを配置します。ここではイメージで作成したボタンの画像をそのままボタンとして機能させてみます。button}()まずUIButtonのプロパティ定義。ボタンに画像を設定するときはsetImage()メソッドを使用します。この時に気をつけておきたいのは画像のサイズ。今回のように画像いっぱいをボタンとしたいときは、ボタンサイズいっぱいに拡大縮小させる処理(*1の3行)を書いておくと確実です。ボタン押下時の処理}次に、ボタンをタップした際のアクションを設定する必要があります。これはviewDidLoad()メソッドに処理を書きます。addTarget()メソッドでactionに押下時の処理メソッド名、forにどのイベントで発火させるかを指定するだけです。うん、非常に簡単、分かりやすいですね。あとは前回同様、引き続きviewDidLoadメソッド内でaddSubview()、AutoLayoutを設定......なのですが、せっかくなので前回より簡単に書けるAutoLayoutの設定方法をしてみましょう。*4}iOS9以降で使用できるNSLayoutAnchorクラスを用いた方法です。AutoLayoutの制約NSLayoutConstraintを生成するという目的は同じですが、NSLayoutAnchorなら設定したいAnchorごとにconstraint設定でき、1行で有効化までできます。前回よりコードもかなり見やすくなりましたね!個人的にはこちらの方が分かりやすくて好きですね。これでSTARTボタンの配置は完了です。同じことを3回しても面白く無いので、アイコン部分のみを画像にして、他の要素はコードで設定してみましょう。...と言っても、ここで一番悩むのがこのボタンの形。完成イメージではボタンがベベルされた形になっています。UIButtonに枠線をつけても真四角にしかなりません。難しい形状を選ばなければよかっry←そんな時はこれ!!!UIBezierPath今回のように自由な線を作る場合には、UIBezierPathが便利です。簡単に言えば好きな座標に点を打っていくだけで線が描け、図形を作成できます。draw()メソッド内に書かなくては反映されないため、新しいクラスでメソッドをoverrideする必要があります。y座標にaddLine()していくのがメインです。BeveledButtonのコード全文はこちらさらに色やサイズを指定するとこんな感じで表示されます。ところで、フッターメニューのように、「複数の画面で同じ位置・同じ内容のパーツを配置する」ことはよくありますよね。そのような繰り返される要素は、呼び出し・メンテナンスのしやすさを考慮して、独立のクラスを作成して処理を書くのがオススメです!AngularのComponent概念と同じですね!というわけでFooterMenuViewというクラスを作成して、書き進めて行きましょう。先ほどのBeveledButtonを使ってフッターにボタンを配置しますが、イメージを見てみると、このボタンは画像とテキストを縦に並べて表示する必要がありますね。デフォルトでは横並びでボタンの中央に表示されてしまいますが、EdgeInsets、簡単にいうとマージンを画像やテキストに入れることで縦並びにもできます。基本としてはデフォルト状態の配置からポジションをずらしていくイメージです。画像にはimageEdgeInsets、テキストにはtitleEdgeInsetsでそれぞれポジションを設定します。0))ここで気をつけておきたいことが2点あります。1つ目はUIEdgeInsetsに使用するパラメータは定数定義しておかない方がいい、ということ。上のコードのように画像のマージンにはtitleLabelのboundsサイズを指定していますが、imageEdgeInsetsを設定する前にtitleEdgeInsetsを設定しているのでサイズが微妙にずれます。ずれたままの状態で設定するとレイアウトが崩れてしまいます。リアルタイムのサイズを設定するのが望ましいですね!2つ目は画像のサイズ。ボタンに使用するものより大きいあるいは小さい画像を使用する場合、ボタンサイズが変わるとそれに合わせて拡大縮小されることがあります。なると端末によって表示が違う、ということも。(なんとも厄介ですその場合は状況に応じて、冒頭でも使用したcontentModeやcontentVerticalAlignmentなどの設定が必要です。表示がおかしい、と感じたらそちらで確認してみてください!←確認忘れが多い人が言っていますあとはマージンを微調整すれば、イメージ通りの縦並びに表示ができます。EdgeInsetsの指定ありここまでもう少しでフッターメニューのパーツは完成!...ではあるのですが、この後の処理はじっくりご紹介したいので、次章へ続きます!ここまでの動きはこのような感じです↓おまけさきほどのここまでの動きを見て、ページ遷移時に黒い画面にローディングが表示されていたことにお気づきになった方はいますでしょうか?実はよくあるローディング画面を入れ込んでました。ローディング画面(LoaderView)で肝となるのがフェード。UIViewにあるanimate()メソッドで簡単に設定できます。Viewの透過alphaを0で設定しておき、ローディングが実行された時にalphaをゆっくりと1に変更させる。HTMLのCSSでもよく使う手法ですね。LoaderViewのコード全文はこちらかなり簡素なローディング画面にしてしまったので、デザインは時間があれば作り直そうかなと...ローディングの種類によっておそらく他にも色々と手法があると思いますので、ご参考までに!最後に今回はボタンづくしでしたので、色々な書き方をご紹介しましたが、レイアウトは端末によるズレなども気にしないといけないので、そこはなかなか難しいですね。これまで何度手詰まりしたことか...個人的にはUIBezierPathとanimate()でもっと複雑な処理を書いてみたいですね。Miyaji千葉にある夢の国を愛して止まない、元「魚のお姉さん」のエンジニア。TypeScriptメインで、暇さえあれば色々な言語を一かじり。Tech当サイトはFOXHOUND株式会社のメンバーによる技術記事投稿サイトです。HOUND株式会社は2011年に誕生したシステム開発会社です。「お客様を知る事・理解する事」を企業理念と掲げております。社員一人ひとりがプロフェッショナルの自覚を持ってお客様と未来を創って行く。最初はそれで始まり最後もそうである様に日々活動を続けております。私たちが良い開発者であり続けるために、お客様の協力が必要です。弊社に悩みや希望を共有して下さい。