読者です 読者をやめる 読者になる 読者になる

Swift,Objective-Cプログラミング ~ iOS ~

Objective-C,Swift,Apple Watchなどのプログラミング

【iOS Swift入門 #291】グラデーションしているViewをつくる

Swift Swift3.0 iOS 入門 プログラミング

この記事読んでわかること

  • グラデーションしているViewをつくる

やり方

CAGradientLayerを使う。

このCAGradientLayerで下記の内容を設定してグラデーションを作る。 - グラデーションの方向 - 色を切り替える地点 - 切り替える色

グラデーションの方向

startPointプロパティとendPointプロパティを使う。 startPointからendPointに向かってグラデーションされる。

水平方向にグラデーション

startPointをx=0.0 y=0.0
endPointをx=1.0 y=0.0 にする。

f:id:fjswkun:20161123125302p:plain

垂直方向にグラデーション

startPointをx=0.0 y=0.0
endPointをx=0.0 y=1.0 にする。

f:id:fjswkun:20161123125343p:plain

右下方向にグラデーション

startPointをx=0.0 y=0.0
endPointをx=1.0 y=1.0 にする。

f:id:fjswkun:20161123125430p:plain

色を切り替える地点

グラデーションする方向に向かって、どの地点で色を切り替えるかを指定する。
色を変える地点を0.0から1.0で指定する。
配列で指定する。

切り替える色

色を切り替える地点でどの色に切り替えるかを指定する。
配列で指定する。

垂直方向にグラデーションをさせる。

f:id:fjswkun:20161123125343p:plain

import UIKit

class ViewController: UIViewController {
    var gradationLayer:CALayer = {
        let gradientLayer = CAGradientLayer()
        // グラデーションの方向
        gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.0)
        gradientLayer.endPoint = CGPoint(x: 0.0, y: 1.0)
        
        // 色が切り替わる地点
        let locations:[NSNumber] = [
            0.125, 0.250, 0.375, 0.500, 0.625, 0.750, 0.875
        ]
        gradientLayer.locations = locations
        
        // 切り替わる色
        let colors = [
            UIColor.red.cgColor, UIColor.blue.cgColor, UIColor.black.cgColor,
            UIColor.white.cgColor, UIColor.yellow.cgColor, UIColor.orange.cgColor, UIColor.cyan.cgColor
        ]
        gradientLayer.colors = colors
        return gradientLayer
    }()

    override func viewDidLoad() {
        super.viewDidLoad()

        // グラデーションの大きさ、位置の設定
        gradationLayer.frame = view.bounds
        
        // グラデーションをViewに追加
        view.layer.addSublayer(gradationLayer)
    }
}

ダウンロード

こちらからダウンロード。
SampleGradationView.zip - Google ドライブ

参考情報

Swift

iOSアプリ開発未経験の人向け
・Swift初心者の人に評判が良いようですね


・わかりやすくていい、と聞いた本
立ち読みした感じだと【アプリ作成未経験の人向け】

絶対に挫折しない iPhoneアプリ開発「超」入門【Swift & iOS8.1以降 完全対応】

絶対に挫折しない iPhoneアプリ開発「超」入門【Swift & iOS8.1以降 完全対応】


②を終えたくらいの知識の方向け
・アプリ開発独学中に2冊めに購入した書籍
プログラミング知識はなくても、若干理解するのに時間がかかる程度で、
読み進められるわかりやすさがある。

iPhoneアプリ開発塾

iPhoneアプリ開発塾


③中級者、上級者向け

詳解 Swift

詳解 Swift

詳解 Swift 改訂版

詳解 Swift 改訂版