明けましておめでとうございます。
iOSエンジニアの渡部です。
2017年も継続してブログを書いていきます。
最近K-1やRIZINなどで格闘技がまた表に出て来た感がありますが
渡部はムエタイ派です。肘が好き。
前々回、プロトタイプの記事を書きましたが Xcodeで作る場合に
デフォルトのUIKitだと見た目が結構しょぼくなってしまいます。
かといって、デザイナーに頼むのもコーディングするのも面倒です。
そんな時はやっぱりStoryboardを活用します。
Xib時代は使えなかったのですぐに消してましたが、Storyboardは優秀です。
そこで今回はStoryboardの渡部がよく使う小技Tipsを紹介したいと思います。
前回のMAP記事同様、すぐにできます。
サンプルとしてログイン画面を作ります。
手順
1.必要なオブジェクトを配置
2.各オブジェクトの設定をする
3.配色を決める
4.オブジェクトを角丸にする
5.UITextFieldのプレースホルダーの色を変える
6.UIButtonをリンクのような下線をつける
1.必要なオブジェクトを配置
今回はログイン画面ということでこのようにオブジェクトを配置します。
UITextField → ID、パスワードの入力
UIButton → ログインボタン
UIButton → 利用規約等のリンクボタン
デフォルトだとこんな感じ。
ダサいですね。
お客さんには見せられません。
2.各オブジェクトの設定をする
今回はUITextFieldのみ。
ID入力はreturnキーをNextに変更。
ログインIDにはメールアドレスがよく使われるので、今回はキーボードタイプを「E-mail Address」に設定します。
パスワード入力は入力文字を隠したいので、「Secure Text Entry」にチェックを入れます。
ここにチェックを入れるだけで勝手に入力文字を隠してくれます。
また、「Secure Text Entry」にすると勝手に英数字のみのキーボードにしてくれます。
returnキーをDoneに変更します。
3.配色を決める
配色が結構大事です。
迷ったらパクればいいのです。プロトタイプなんだし。
学ぶとは真似るから来た言葉とどこかの本で読みました。学びましょう！
今回はFacebookっぽく作ってます。
文字は全て白色です。
ボタンは背景白に文字色は青っぽい色を使います。
ここで一つ追加します。
Visual Effect View with Blur → UITextFieldの背景に設置し、すりガラスっぽい見た目を作る
これでUITextFieldの背景ができるのでUITextFieldの枠を設定で消します。
プレースホルダーも「ログインID」「パスワード」を追加します。
そうするとこんな感じ。
少しそれっぽくなってきました。
4.オブジェクトを角丸にする
これも結構大事です。
色々なアプリを見てもらうとわかりますが、
オブジェクトを角丸にすることによってかなりイメージが変わります。
最近違う意味で話題になったMERYでもやってた気がします。
角丸ってコーディングするの結構面倒ですが、
Storyboardなら30秒でできます(コピぺで)！
まず、Visual Effect View with Blurから。
このプラスボタンで二つkey pathを用意して、画像の通りに入力。
これで終了です。
ちなみに「layer.cornerRadius」の値を変えれば角丸の丸具合を調整できます。
Storyboard上では変化なしですが実行するとわかります。
これを他のオブジェクトにも同様に設定します。
この方法はUIViewを継承したクラスなら全てに使えます。多分。
5.プレースホルダーの色を変える
ちょっとしたTipsですが結構便利。
UITextFieldってテキストカラーはすぐ変更できるけどプレースホルダーには設定項目がありません。
プレースホルダーの色を変更するにはこの設定を追加します。角丸と同様です。
するとこんな感じに。
6.リンクのような下線をつける
これはよく使われてますね。
UIButtonのテキストを編集します。
角丸等と少しやり方が違います。
まず、Titleを「Attributed」にし、入力テキストを全選択します。
選択したテキストの上で右クリックし、「Font」「Underline」を選択します。
すると下線が入ってリンクっぽくなります。
あとは適当に画像やアプリ名などを入れれば完成です。
まとめ
角丸、下線、プレースホルダーの設定変更などを紹介しました。
プロトタイプは早ければ早いだけ良いので、こういったTipsは結構役立ちます。
次回は画面の構成やレイヤーの確認方法などを書きます！
