Help us understand the problem. What is going on with this article?

[Swift]グラデーションのUI

More than 3 years have passed since last update.

グラデーションのUIを作るときの簡単な流れをメモ程度に。
CAGradientLayerを使います。

こういうUIを作るとき
スクリーンショット 2015-11-19 15.06.21.png

グラデーション

(特に色調・明暗など)段階的変化。階調。

・実装コード

        let gradient = CAGradientLayer()
        gradient.frame = self.bounds
        gradient.cornerRadius = self.layer.cornerRadius

        let leftColor = UIColor(hex: "6B2133", alpha: 0.3).CGColor
        let centerColor = UIColor(hex: "EF4F78", alpha: 0.5).CGColor
        let rightColor = UIColor(hex: "FE3A3A", alpha: 1).CGColor
        gradient.colors = [leftColor, centerColor, rightColor]

// 3分割
        let leftPosition = NSNumber(float: 0.0)
        let centerPosition = NSNumber(float: 0.5)
        let rightPosition = NSNumber(float: 1.0)

// startPointとendPointを指定しないと上から下に向かってのレイヤーになる
        gradient.startPoint = CGPointMake(0.0, 0.5)
        gradient.endPoint = CGPointMake(1.0, 0.5)
        gradient.locations = [leftPosition, centerPosition, rightPosition]

        self.layer.insertSublayer(gradient, atIndex: 0)

今回の流れ
1.カスタムのUIViewを作ってサブレイヤーにCAGradientLayerを追加する
2.UISliderのminとmaxの画像を空にする

        self.setMinimumTrackImage(UIImage(), forState: .Normal)
        self.setMaximumTrackImage(UIImage(), forState: .Normal)

nilをいれるとデフォルトの薄い線が入ってしまうので空画像で

3.1で作ったviewはバックグラウンドとして使用する

終わり

kyam_
iOS Engineer Swift / Objective-C / go / PHP
gamewith
GameWithは、ゲームをプレイされる皆様がより深くゲームを楽しんで頂ける環境を提供するべく設立されました。あなたがゲームをする時のお供になる。これが私達の目標です。
https://gamewith.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away