こんちは。渡部です。
現在社内アプリを(勝手に)作っています。
が、徐々にモチベーションが下がってきたので
気分が乗るようにデザイナーに画面作ってくれ!と依頼しました。
そして上がってきた画面がこれ
あらオシャレ。
女性のデザイナーなのですがブッチャーあたりを入れてくるのはさすがです。
きっとみんな知りません。
そんな方はこちら(閲覧注意)。
イマドキっぽいデザインで良いのですが、
機能が少々追加されてますね。。。
それにデザイナーはみんな忙しそうです。
あと7画面、複数サイズ、素材の切り出しとか依頼したら
ヒールホールドで足を破壊されそうです。
仕方ない、自分でやるか。と思いSketchを立ち上げましたが
普通にやっても面白くありません。というかSketchが使いこなせません。
そうだ!京都に行こうコーディングしよう!
だって一応コーダーですし。おすし。
ということでこんな感じでやりました。
(前置き長ぇ)
白黒でグラデーションを書いてみる
適当にプロジェクトを用意してviewDidLoad内にこんな感じでコードを書きます。
override func viewDidLoad() { super.viewDidLoad() // 白黒半々になる let startColor = UIColor(white: 1, alpha: 0).cgColor let endColor = UIColor(white: 0, alpha: 1).cgColor let layer = CAGradientLayer() layer.colors = [startColor, endColor] layer.frame = view.bounds view.layer.addSublayer(layer) }
実行するとこんな感じです。
シンプルですね。
それっぽい色でやってみる
次にもらったデザインの色でやってみます。
同じく以下のようにコードを書きます。
override func viewDidLoad() { super.viewDidLoad() // もらったデザインの色を指定 // 02ADB0 ~ 00CDAC let gradientLayer:CAGradientLayer = CAGradientLayer() let startColor = UIColor(red: 2/255.0, green: 173/255.0, blue: 176/255.0, alpha: 1.0).cgColor let endColor = UIColor(red: 0/255.0, green: 205/255.0, blue: 172/255.0, alpha: 1.0).cgColor // viewの左上から右下へ gradientLayer.colors = [startColor, endColor] gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.0) gradientLayer.endPoint = CGPoint(x: 1.0, y: 1.0) gradientLayer.frame = view.bounds view.layer.addSublayer(gradientLayer) }
実行すると・・・
それっぽくなりました。
値の調整をすれば良い感じになりそうです。
昔のインスタのログイン画面も
こんな感じでやると
override func viewDidLoad() { super.viewDidLoad() // 昔のインスタ風 //97347F ~ 873BA0 let gradientLayer:CAGradientLayer = CAGradientLayer() let startColor = UIColor(red: 151/255.0, green: 52/255.0, blue: 127/255.0, alpha: 1.0).cgColor let endColor = UIColor(red: 135/255.0, green: 59/255.0, blue: 160/255.0, alpha: 1.0).cgColor // viewの左から右へ gradientLayer.colors = [startColor, endColor] gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.0) gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.0) gradientLayer.frame = view.bounds view.layer.addSublayer(gradientLayer) }
こう!
うぇい!
まとめ
コーダーは全部コードでやりたいですよね。
Storyboardができる以前のInterfaceBuilderは使い物になりませんでした使いこなせませんでした。
なのでボタンから何から全部コードで書いたのも懐かしいです。
今回はソースを見てもらえばわかる通り、
CAGradientLayerを使えば一発でグラデーションが描画できます、という記事です。
この書き方は単色のグラデーションなら可能ですが
複数色の場合は諦めて画像作ってもらいましょう!