【swift3】ボタンに透明のフィルターぽいものをつける

  • 1
    いいね
  • 0
    コメント

環境:swift3のはず

どう表現していいのか難しいけど、例えば下の画面で背景がbuttonになってて背景画像が変えれるとかそういう感じの機能について。背景にimageviewがあって上にbuttonを重ねるとかのイメージ。
スクリーンショット 2017-08-13 1.43.32.png
http://kappdesign.blog.fc2.com/blog-entry-11.html

経緯

画像にグレーの透過を加えたかったので、グラデーションでいけないかと試したが諦めた。
最終的にはbuttonにbuttonを重ねた。重ねることによって困ったことが起きたのでそれについてもメモしとく。

グラデーションについて

画像にフィルターがかかったぽくしたかったが、グラデーションってグラデーションぽくなっちゃう。ってそらそうかw
やりたかったのはこれではなかった。
http://tanihiro.hatenablog.com/entry/2016/05/25/201726

let startColor = UIColor(white: 0, 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)

スクリーンショット 2017-08-13 1.25.11.png

だけどカッコいいUIを作るのに使えそうな気がしたので一旦メモだけしとく。

//https://stackoverflow.com/questions/37849359/swift-adding-gradient-layer-to-button-layer-length-error
let loginButton = UIButton(frame: CGRect(x: 10, y: 50, width: 300, height: 30))
self.view.addSubview(loginButton)

let gradient:CAGradientLayer = CAGradientLayer()
let colorTop = UIColor(red: 112.0/255.0, green: 219.0/255.0, blue: 155.0/255.0, alpha: 1.0).CGColor
let colorBottom = UIColor(red: 86.0/255.0, green: 197.0/255.0, blue: 238.0/255.0, alpha: 1.0).CGColor

gradient.colors = [colorTop, colorBottom]
gradient.startPoint = CGPoint(x: 0.0, y: 0.5)
gradient.endPoint = CGPoint(x: 1.0, y: 0.5)
gradient.frame = loginButton.bounds
gradient.cornerRadius = 5

loginButton.layer.addSublayer(gradient)

スクリーンショット 2017-08-13 1.27.43.png

別の書き方

import UIKit

public class GradientButton: UIButton {

    override public func layoutSubviews() {
        super.layoutSubviews()
        layoutGradientButtonLayer()
    }

    // MARK: Private
    private func layoutGradientButtonLayer() {
        let gradientLayer = CAGradientLayer()
        let color1 = UIColor(red:0.05, green:0.29, blue:0.49, alpha: 1.0).cgColor as CGColor
        let color2 = UIColor(red:0.08, green:0.23, blue:0.39, alpha: 1.0).cgColor as CGColor
        gradientLayer.colors = [color1, color2]
        gradientLayer.locations = [0.0, 1.0]
        self.layer.addSublayer(gradientLayer)
    }
}

で自分の場合はbuttonにaddsubviewで透化したbuttonを乗せたんだけどイベントが効かなくなった。

色一覧 UIColor

http://www.codingexplorer.com/create-uicolor-swift/

UIColorデフォで持ってるカラーの一覧参考までに。

スクリーンショット 2017-08-13 1.47.59.png

userInteractionEnabledを変更する。

view1.userInteractionEnabled = YES;
に設定すれば動いた。

この辺も参考に。
http://qiita.com/ika_tarou/items/e411c37b064fdd514afb
http://kappdesign.blog.fc2.com/blog-entry-11.html