###⬅️: Lesson 3
概要: 今回はUILabel、UIImageViewの使い方についてのレッスンだ。使い方だけ勉強するのは面白くないので、UILabel、UIImageViewを使って、Apple MusicのUIを作ろう。
最後の成果物は以下の図ように:
Step 1. まず、このプロジェクトをダウンロードしてください。
Step 2. Photoshopでピンクから、紫、水色までのグラデーションイメージを作る。Apple MusicのUIと全く同じする必要がない、適当でいい。サイズは320 * 568、iPhone5/5sの画面サイズ。Step 1でダウンロードしたフォルダー中の画像を使ってもいい。(今回練習便利のために、iPhone5/5sつまり4-inchのデバイスを対象となる)
Step 3. グラデーションイメージをAssets.xcassetsにドラッグした後、 Main.storyboardを選択し、UIViewControllerのサイズを4-inchに設定しよう。
Step 4. UIImageViewの使い方はすごく簡単だ。
👇🏻以下のように、UIImageViewのサイズとプロパテを設定しよう。
Step 5. UILabelの使い方も難しくない。
👇🏻以下のように、UILabelのサイズとプロパテを設定しよう。
Tips: Lesson 3で勉強したfont size大きくなって、UIButtonの枠は変になった時の対応覚えているか？ 実はUILabelも同じ対応だ。
Hint: ⌘=
Step 6. 👇🏻以下のように、もう一つのUILabelのサイズとプロパテを設定しよう。
注意点: 実はUILabelデフォルト表示できるのは一行だけので、複数行表示する時、プロパティ調整 - Linesのところで、1から0に変更する必要がある。
Step 7. Step 6とほとんど同じだ。
👇🏻以下のように、三つ目のUILabelのサイズとプロパテを設定しよう。
Step 8. Lesson 3で勉強した角丸のボタンの作り方覚えているか？毎回画像を作って、スライスするのは面倒なので、もしPhotoshopように、自由にボタンの色と角丸の半径を設定できたらいいなぁと思うでしょう。
お任せください。便利な方法を考えた。💡
まず、👇🏻以下のように、ボタンを配置しよう。
Step 9. 以下の図に示したところで、RoundedCornerButtonを入力する
Step 10. では、Photoshopような自由さを体験しよう。
👇🏻以下のように、ボタンの色と角丸の半径など調整しよう。
Step 11. ボタンタップした後の色を調整したい場合。
👇🏻以下のように、Highlighted bgのとこでで調整する。
Step 12. 最後のステップだ、もう一つのボタンを入れよう。
最後:
このレッスン最後出来上がったプロジェクトはここにある。
###➡️: Lesson 5