サブタイトル付きなので、シリーズ的にやっていきたいと思っています。
CardのUIは以前作りたいなと思ったのですが、調べてもなかなか見つからなく、調べることに時間を割いてしまった思い出があるので、ブログに書くことにしました。
作るもの
最近のフロントエンドのライブラリなんかには、標準のコンポーネントとして提供されています。
ということで、こんな感じのものをswiftで実装していきたいと思います。
環境
Xcode 10.1
Swift 4.2
主な構成
- UIViewController
- UICollectionView
- UICollectionViewCell
後述しますが、UIViewControllerは今回はxibで作りました。 理由としては、個人的な感想ベースですが、
- 個人的に使い回ししやすい
- インスタンス生成が楽
- カスタムのイニシャライザを定義することができる
ということ感じで、storyboardより使いやすいと感じているため、最近よくxibでViewControllerを作っています。
Cardを作成する上で今回は、UICollectionView, UICollectionViewCellを使いました。 試していないですが、同じ機構であるUITableView, UITableViewCellでも作れると思います。
つくっていく
xibでViewControllerを作る
UICollectionViewを貼り付けるだけです。
レイアウトは、
top, leading, trailing, bottom 全てsafeareaに合わせています。
cellの作成
今回は、画像を表示させるだけのcardをつくっています
UIImageViewを貼り付けるだけです。
レイアウトは、
top, leading, trailingを大元のviewに合わせて、アスペクト比を4:3にしています。
cellの設定をする
cardっぽい立体的な見た目にしていきます。
masktoboundsとshdowOffset, shadowRadius, shadowOpacityを使うことで立体的で浮いているような見た目になります。
class CollectionViewCell: UICollectionViewCell { @IBOutlet weak var imageView: UIImageView! override func awakeFromNib() { super.awakeFromNib() } func setUp(str: String) { imageView.image = UIImage(named: str) // UICollectionViewのcontentViewプロパティには罫線と角丸に関する設定を行う self.contentView.layer.masksToBounds = true self.contentView.layer.cornerRadius = 10.0 // UICollectionViewのおおもとの部分にはドロップシャドウに関する設定を行う self.layer.masksToBounds = false self.layer.shadowOffset = CGSize(width: 2, height: 4) self.layer.shadowRadius = 10.0 self.layer.shadowOpacity = 0.5 } }
以上。
ソースはgithubにあげてあります。
