LoginSignup
30
30

More than 5 years have passed since last update.

UICollectionViewFlowLayoutの拡張

Last updated at Posted at 2015-03-18

UICollectionViewFlowLayoutを使っていると、微妙に不満がたまってきます。

  • Sticky Header/Footerができない
  • Itemを真ん中寄せにできない
  • Item領域の背景色を変更できない

ちょっと時間がとれたので、この辺の不満を解消したBTKCollectionViewFlowLayoutを作成しました。
BTKCollectionViewFlowLayout on GitHub

下記のキャプチャを見れば、何ができるか大体わかると思います。
また、キャプチャをとったテスト用UI自体も一緒にコミットしているので、興味がある人はビルドして実行してみてください。

Supplemental Viewの追加

UICollectionViewFlowLayoutは標準でHeader(青)と、Footer(黄)をサポートしています。
これらに、アイテム領域の背景となるBody(緑)と、Header/Body/Footer全体の後ろに配置されるBackground(白)を追加してました。アイテム部分だけ背景色を変えたい等のデザイン上の要望に簡単に対応できます。
iOS Simulator Screen Shot 2015.03.18 14.40.29.png

Item表示位置の変更

横(Left) + 縦(Center)

iOS Simulator Screen Shot 2015.03.18 14.40.31.png

横(Center) + 縦(Center)

iOS Simulator Screen Shot 2015.03.18 14.40.32.png

横(Right) + 縦(Center)

iOS Simulator Screen Shot 2015.03.18 14.40.33.png

横(Right) + 縦(Top)

iOS Simulator Screen Shot 2015.03.18 14.40.38.png

横(Right) + 縦(Bottom)

iOS Simulator Screen Shot 2015.03.18 14.40.39.png

スティッキーヘッダ

注:挙動を見やすくするために、UICollectionViewにcontentInsetを設定しています。
iOS Simulator Screen Shot 2015.03.18 15.05.42.png

スティッキーフッタ

注:挙動を見やすくするために、UICollectionViewにcontentInsetを設定しています。
iOS Simulator Screen Shot 2015.03.18 15.05.50.png

インストール方法

Podsに登録済みなので、さくさくインストールできるはずです。

pod 'BTKCollectionViewFlowLayout'
30
30
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
30
30