模様っぽいものを描画したかった、
開発環境
> xcodebuild -version
Xcode 12.3
Build version 12C33
やること
- UIView (UICollectionView) を回転して別の UIView に埋め込む
つくったもの
竹感を出したかった。満足。
コード
2つの UIViewController を作成した。
- UICollectionView を埋め込む先の UIView を持つ UIViewController
- UICollectionView を生成する UIViewController
処理としては、UIView に UIViewController を埋め込んだあとに UIView を回転させている。
UICollectionView を埋め込む先の UIView を持つ UIViewController
import UIKit
final class RotatingCollectionViewViewController: ComponentBaseViewController {
@IBOutlet weak var foundationView: UIView! {
didSet {
// 円
foundationView.layer.cornerRadius = foundationView.bounds.width / 2
// タップ不可
foundationView.isUserInteractionEnabled = false
}
}
override func viewDidLoad() {
super.viewDidLoad()
configureNavigationItem(navigationTitle: "012 RotatingCollectionView",
blogURL: nil,
githubPRURL: nil)
setupCollectionViewViewController()
}
private func setupCollectionViewViewController() {
let vc = R.storyboard.rotatingCollectionViewComponent.rotatingCollectionViewComponent()!
// foundationView の中身の View を foundationView 内に収まるように描画させる
foundationView.clipsToBounds = true
foundationView.addSubview(vc.view)
foundationView.transform = CGAffineTransform(rotationAngle: CGFloat(Double.pi/1.5))
}
}
UICollectionView を生成する UIViewController
import UIKit
// swiftlint:disable type_name
final class RotatingCollectionViewComponentViewController: UIViewController {
@IBOutlet weak var collectionView: UICollectionView! {
didSet {
collectionView.dataSource = self
collectionView.register(R.nib.rotatingCollectionViewCell)
}
}
override func viewDidLoad() {
setupCollectionView()
}
}
extension RotatingCollectionViewComponentViewController {
private func setupCollectionView() {
let sideMargin: CGFloat = 30
let cellCountsPerRow: CGFloat = 5
let cellLineSpacing: CGFloat = 2
let cellWidth: CGFloat = (view.bounds.width - (sideMargin * 2 + (cellCountsPerRow - 1) * cellLineSpacing)) / cellCountsPerRow
let cellHeight: CGFloat = cellWidth * 86 / 59
let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
layout.minimumLineSpacing = cellLineSpacing
layout.minimumInteritemSpacing = cellLineSpacing
layout.itemSize = CGSize(width: cellWidth, height: cellHeight)
collectionView.collectionViewLayout = layout
}
}
extension RotatingCollectionViewComponentViewController: UICollectionViewDataSource {
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 100
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: R.reuseIdentifier.rotatingCollectionViewCell,
for: indexPath)!
cell.backgroundColor = (indexPath.row % 2 == 0 ? R.color.bamboo_dark() : R.color.bamboo_light())
return cell
}
}