はじめに
こんにちは
UICollectionViewCellが選択状態の時に使えるデザインを探していて、
画像を使わずにUIViewのdrawRect
を利用すると軽いという事で作ってみたものの、結局使わずに限定公開に埋まっていたので公開してみたいと思います。
柄を描画するアルゴリズムなどあまり知らず調べずに書いてしまったので、間違っていたらごめんなさい。
実装について
プロパティ | 説明 |
---|---|
panelScale | 並ぶタイルの個数 |
panelAColor | タイルの色A |
panelBColor | タイルの色B |
ソースコード
CheckPatternView.swift
import UIKit
@IBDesignable class CheckPatternView: UIView {
@IBInspectable var panelScale: CGFloat = 4
@IBInspectable var panelAColor: UIColor = UIColor.white
@IBInspectable var panelBColor: UIColor = UIColor.black
override init(frame: CGRect) {
super.init(frame: frame)
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
override func draw(_ rect: CGRect) {
if panelScale == 0 { return }
var alternatelyFlg = false
let panelWidth = frame.size.width / panelScale
let panelHeight = frame.size.height / panelScale
var x: CGFloat = 0
var y: CGFloat = 0
for _ in 0 ..< Int(panelScale) {
for _ in 0 ..< Int(panelScale) {
let path = UIBezierPath(rect: CGRect(x: x, y: y, width: panelWidth, height: panelHeight))
let color = alternatelyFlg ? panelAColor : panelBColor
color.setFill()
path.fill()
alternatelyFlg = !alternatelyFlg
x += panelWidth
}
x = 0
if Int(panelScale) % 2 == 0 {
alternatelyFlg = !alternatelyFlg
}
y += panelHeight
}
}
}
さいごに
今回は全く関係ないですが、数学を使った幾何学模様やなまこ壁のような複雑な柄をUIBezierPathなどを利用して描けたら面白いかもと思いましたが、その前に数学を勉強し直さなければいけない焦りを感じましたとさ
見て頂いてありがとうございます。