基于 UICollectionViewFlowLayout 的居左居右居中布局

[复制链接]
来自: coder-zjq 分类: iOS精品源码 上传时间: 2019-12-25 17:31:37
Tag:

项目介绍:

Version
License
Platform

介绍

基于 UICollectionViewFlowLayout 的对齐布局,使用简单,支持以下功能:

  • 不同 section 水平方向 items 对齐方式的设置;

  • 不同 section 竖直方向 items 对齐方式的设置;

  • 不同 section items 排布顺序的设置。

因为是继承自 UICollectionViewFlowLayout 所以使用方法跟 UICollectionViewFlowLayout 一致,只需设置对应的属性或者实现对应协议方法即可,且支持 UICollectionViewFlowLayout 所有特性,如设置 header、footer、section inset 等。

示例

水平Demo
流式
(JQCollectionViewItemsHorizontalAlignmentFlow)
居左
(JQCollectionViewItemsHorizontalAlignmentLeft)
居中
(JQCollectionViewItemsHorizontalAlignmentCenter)
居右
(JQCollectionViewItemsHorizontalAlignmentRight)
竖直Demo
居中
(JQCollectionViewItemsVerticalAlignmentCenter)
顶部对齐
(JQCollectionViewItemsVerticalAlignmentTop)
底部对齐
(JQCollectionViewItemsVerticalAlignmentBottom)
顺序Demo
从左到右
(JQCollectionViewItemsDirectionLTR)
从右到左
(JQCollectionViewItemsDirectionRTL)

要求

iOS 6.0+

安装

JQCollectionViewAlignLayout 可以通过 CocoaPods 安装,只需在你的 Podfile 加上下面这行:

pod 'JQCollectionViewAlignLayout'

使用

使用 JQCollectionViewAlignLayout 初始化 UICollectionView:

  • 通过代码:

JQCollectionViewAlignLayout *layout = [[JQCollectionViewAlignLayout alloc] init];
UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:layout];
  • 或者通过 Interface Builder:

设置对齐方式及排列顺序:

  • 通过设置 Property:

layout.itemsHorizontalAlignment = JQCollectionViewItemsHorizontalAlignmentLeft;
layout.itemsVerticalAlignment = JQCollectionViewItemsVerticalAlignmentCenter;
layout.itemsDirection = JQCollectionViewItemsDirectionLTR;
  • 或者通过遵循 JQCollectionViewAlignLayoutDelegate 协议并实现对应协议方法:

// (if you want set different alignment and direction each section, you can do like this.)
// 1. conforms to protocol JQCollectionViewAlignLayoutDelegate
@interface JQViewController () < UICollectionViewDataSource, JQCollectionViewAlignLayoutDelegate>

@end

@implementation JQViewController
// 2. implement the protocol method
- (JQCollectionViewItemsHorizontalAlignment)collectionView:(UICollectionView *)collectionView layout:(JQCollectionViewAlignLayout *)layout itemsHorizontalAlignmentInSection:(NSInteger)section {
  // return the JQCollectionViewItemsHorizontalAlignment in section.
}

- (JQCollectionViewItemsVerticalAlignment)collectionView:(UICollectionView *)collectionView layout:(JQCollectionViewAlignLayout *)layout itemsVerticalAlignmentInSection:(NSInteger)section {
  // return the JQCollectionViewItemsVerticalAlignment in section.
}

- (JQCollectionViewItemsDirection)collectionView:(UICollectionView *)collectionView layout:(JQCollectionViewAlignLayout *)layout itemsDirectionInSection:(NSInteger)section {
  // return the JQCollectionViewItemsDirection in section.
}

@end

剩下的使用及设置则跟 UICollectionViewFlowLayout 一样.

作者

coder-zjq, zjq_joker@163.com

最后

如果项目对您有所帮助,望您不吝于您的 star。
https://github.com/Coder-ZJQ/JQCollectionViewAlignLayout

相关源码推荐:

我来说两句
所有评论(0)
209 0 0
联系我们
首页/微信公众账号投稿

帖子代码编辑/版权问题

QQ:435399051,742864542

如何获得代码达人称号?

代码贡献英雄榜
用户名 下载数
通过邮件订阅最新 Code4App 信息
上一条 /4 下一条

广告投放| 广东互联网违法和不良信息举报中心|中国互联网举报中心|Github|申请友链|手机版|Code4App ( 粤ICP备15117877号-1 )