Subclass UICollectionViewFlowLayout,自定义流布局

需求:为实现第一行显示一个,第二行以后显示两个

方案1:用系统自带的流布局,实现的效果是,若第二行只有一个,则系统默认会居中显示,不是左对齐(如下图),不符合项目要求。

方案2:自定义系统的UICollectionViewFLowLayout,主要代码如下, 只要设置了cell的LayoutAttribute之后,supplementaryView的,用super的

subclass of UICollectionViewFlowLayout

- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds

{

return YES;

}

- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect

{

//    NSLog(@"_________InRect________");

NSArray* original = [super layoutAttributesForElementsInRect:rect];

NSArray<UICollectionViewLayoutAttributes*>* attributesToReturn = [[NSArray alloc]initWithArray:original copyItems:YES];

for (int i=attributesToReturn.count-1; i>=0; i--) {

if (nil == attributesToReturn[i].representedElementKind) {

NSIndexPath* indexPath = attributesToReturn[i].indexPath;

attributesToReturn[i].frame = [self layoutAttributesForItemAtIndexPath:indexPath].frame;

}

else if([attributesToReturn[i].representedElementKind isEqual:UICollectionElementKindSectionHeader]){

//            attributesToReturn[i].frame = [self layoutAttributesForSupplementaryViewOfKind:@"HeaderViewOfCollection" atIndexPath:attributesToReturn[i].indexPath].frame;

}

}

return attributesToReturn;

}

- (nullable UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath{

UICollectionViewLayoutAttributes *currentItemAttributes = [[super layoutAttributesForItemAtIndexPath:indexPath] copy];

CGFloat WIDTH = FirstItemWidth;

CGFloat hight = FirstItemHeight;

NSInteger count = 0;

for (NSInteger i=0; i<=indexPath.section; i++) {

for (NSInteger j =0; j<=indexPath.row; j++) {

if (i==0 && j==0) {

WIDTH = FirstItemWidth;

hight = FirstItemHeight;

}

else{

WIDTH = CommonItemWidth;

hight = CommonItemHeight;

}

CGFloat xPos = 0;

CGFloat yPos = 0;

//Calculate x

if ( (j%2==1 && i>0) || (i==0 && (j-1)%2==1) ) {

xPos = CommonItemWidth+ self.minimumInteritemSpacing;

}

//Calculate y

for (int k=0; k<i; k++) {

if (k==0) {

yPos = FirstItemHeight;

yPos += (int)(list.SectionArray[k].cellArray.count/2) * CommonItemHeight +(list.SectionArray[k].cellArray.count/2)*self.minimumLineSpacing;

}

else{

yPos += (int)((list.SectionArray[k].cellArray.count+1)/2) * CommonItemHeight + ((list.SectionArray[k].cellArray.count-1)/2)*self.minimumLineSpacing;

}

}

if (i==0) {

if (j>0) {

yPos = FirstItemHeight + (j-1)/2*CommonItemHeight + (j+1)/2*self.minimumLineSpacing;

}

}

else {

yPos += j/2*CommonItemHeight + j/2*self.minimumLineSpacing;

}

//设置item的位置

currentItemAttributes.frame = CGRectMake(self.sectionInset.left+xPos, (i+1)*SectionHeaderHeight +yPos,WIDTH, hight);

count++;

}

}

return  currentItemAttributes;

}

//数组的相关设置在这个方法中

//布局前的准备会调用这个方法

-(void)prepareLayout{

self.dataModel = [DataModel getSharedInstance];

[super prepareLayout];

if (self.type ==0) {

list = self.wifiConnected ? self.dataModel.JC_List : self.dataModel.JC_ListLocal;

}

else{

list = self.wifiConnected ? self.dataModel.JJ_List : self.dataModel.JJ_ListLocal;

}

self.minimumInteritemSpacing = 10;

self.minimumLineSpacing = 10;

}

UICollectionViewController

-(UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath {

HeaderViewOfCollection *headerView = nil;

if ([kind isEqual:UICollectionElementKindSectionHeader]) {

  // configure headerView

  return headerView;

  }

  return headerView;

}

-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section {

return CGSizeMake(320, 38);

}

-(CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section {

return 10; //5

}

-(CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section {

return 10; //8

}

时间: 2024-11-05 22:58:37

Subclass UICollectionViewFlowLayout,自定义流布局的相关文章

自定义流布局

一.自定义布局[相册] 需求: 1.横向滚动 2.照片离中心点越近图片越大,即图片的放大和缩小 3.滚动停止时候总有一张照片居中显示 1.自定义布局 - 继承自UICollectionViewFlowLayout 重写prepareLayout方法 作用:在这个方法中做一些初始化的操作 注意:一定要调用[super prepareLayout]方法 2.重写layoutAttributesForElementsInRect:方法 作用 : 这个方法的返回值是个数组 这个数组中存放着的都是UICo

自定义流布局(UICollectionViewFlowLayout的基本使用)

最终显示的效果图 思路: 1.UICollection的基本设置,并且创建一个继承自UICollectionViewFlowLayout的类.(不能是UICollectionViewLayout,否则全部都需要自定义) 2.在UICollectionViewFlowLayout类中完成四步 - 1)调用prepareLayout方法进行基本的布局(cell在最左面的时候是在正中间),不能在init中布局,因为设置collectionView尺寸是在viewDidLoad中,而 init在它之前调

UICollectionViewFlowLayout自定义

写一个我们自己的类继承UICollectionViewFlowLayout.然后需要实现四个方法 -(CGSize)collectionViewContentSize { CGFloat height=  ceil([[self collectionView]  numberOfItemsInSection:0]/5)*SCREEN_WIDTH/2; return  CGSizeMake(SCREEN_WIDTH, height); }//返回contentsize的总大小 //自定义布局必须Y

android 自定义流布局。实现热门标签。开源库SimpleFlowLayout

前言 实际项目中需要实现一个 热门搜索 的栏目,类似下图: 由于 子项(子view) 中的文字是可变的,一行能显示的 子项 的个数也无法确定.需要支持自动换行和计算位置. 开源类库 我自己写了个 自定义view ,继承自viewGroup, 来实现它,托管到github开源平台. 名称:SimpleFlowLayout 地址:https://github.com/vir56k/SimpleFlowLayout 特点:可以不断添加多个子view,计算位置,自动换行. 类似html中的div标签 适

UIKit

一.UIKit.framework目录    1.    IOS目录      $1   /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS6.1.sdk/System/Library/Frameworks/UIKit.framework    $2   /Applications/Xcode.app/Contents/Developer/Platforms/

Objective-c——UI基础开发第十二天(相册展示)

一.知识点 模仿新特性 UICollectionViewFlowLayout自定义布局 相册 瀑布流(淘宝购物之类的 二.复习 a.UICollectionView 和 tableview共享一套API 不同: 1.实例化collectionView必须传入一个非空的layout布局对象 layout:主要针对 cell的各个属性操控(UICollectionViewLayout 啥都没有只是定义了必须实现的方法/UICollectionViewFlowLayout 是上面的子类) 2.必须要注

UICollectionView集合视图的概念

如何创建UICollectionView 集合视图的布局UICollectionViewFlowLayout 自定义cell 布局协议UICollectionViewDelegateFlowLayout UICollectionView与UITableView的实现类似,都需要设置delegate和dataSource 在collectionView中,cell的布局比tableView要复杂,需要使用一个类来描述集合视图的布局---UICollectionViewLayout->UIColle

UICollectionView 简单使用

显示数据列表 大家通常使用的是UITableView 不用说TableView 是大家的首选.在iOS6之前这也是必选.但是伴随着APP的成长一起都在变化目前更多的呈现一种块状的显示效果.之前的行式显示效果大家都已见的太多了.接下来大家和我一起来看看另外的一种控件 - UICollectionView 1.实例化2.自动布局3.横向4.纵向5.协议6.Cell 一.实例化   UICollectionView 的实例化和其它控件存在一个不同的地方.   init   initWithFrame:

Swift - 使用CollectionView实现图片Gallery画廊效果(左右滑动浏览图片)

1,效果图 (1)图片从左至右横向排列(只有一行),通过手指拖动可以前后浏览图片. (2)视图滚动时,每张图片根据其与屏幕中心距离的不同,显示尺寸也会相应地变化.越靠近屏幕中心尺寸就越大,远离屏幕中心的就逐渐变小. (3)滑动结束后,会有位置自动修正的功能.即将当前最靠近屏幕中点的图片移动到正中央. (4)点击图片则将该图片删除,点击空白处会在最开始的位置插入一张图片.不管新增还是删除都有动画效果. (5)点击导航栏上的"切换"按钮,可以在普通的流式布局和我们自定义的画廊布局间相互切换