kobasaです(´ω｀*)
ツールバーが検索では手詰まり気味になったので、
Kindleでダウンロードした教材にそれっぽいのがないか探していました。
するとツールバー使ってそうなアプリ制作の記事があったので、
それに沿ってアプリを作ってみることにしました。
ツールバーの部分だけ抜き出すとややこしくなりそうなので一から作成します。
オリアプちょっと休憩( ˘ω˘ )
グラデーションを使用する
色の指定方法
グラデーションに使用する色を構造体に設定していました。
構造体ってこういう使い方するんですね。
importFoundation
importUIKit
struct Colors {
let bluePurple= UIColor(red: 87/255, green: 99/255, blue: 175/255, alpha: 1)
let blue= UIColor(red: 92/255, green: 137/255, blue: 200/255, alpha: 1)
let white = UIColor.systemGray6
let black= UIColor(red: 0, green: 0, blue: 0, alpha: 0.9)
}カラーコードでRGBカラー(値/255)を指定して色を作成します。
alphaは透明度を表し、1から0に向かって透明になっていきます。
またMacBookに搭載されている「Digital Color Meter」を使用すると
カーソルを合わせた部分のカラーコードを取得できます。配色サイトと合わせて重宝しそう。
グラデーションの設定方法
func setUpGradation() {
let gradientLayer = CAGradientLayer()
gradientLayer.frame= CGRect(x: 0, y: 0, width: view.frame.size.width, height: view.frame.size.height)
gradientLayer.colors= [colors.bluePurple.cgColor, colors.blue.cgColor]
gradientLayer.startPoint= CGPoint.init(x: 0, y: 0)
gradientLayer.endPoint= CGPoint.init(x: 1, y: 1)
view.layer.insertSublayer(gradientLayer, at: 0)
}グラデーションは配列内に色を複数設定することで設定できます。
レイヤーの色指定にはcgColorを使用するのでUIColorから変換しています。
グラデーションをかける方向をstartPointとendPointで指定します。
開始地点から終了地点までを結んだ矢印の方向にグラデーションがかかります。
(今回の指定では右下方向にかかる)
レイヤーを載せる場合はinsertSublayer(子, at: 階層)を使用します。
親に子で指定したレイヤーを重ね、atの値が大きい方が前面に表示されます。
オリアプの問題はまだ解決していませんが、詰まって全然手が動かないより、
手を動かしてコードを記述している方が気が晴れるますね(´ω｀*)
コメント