博客> 电商物品展示列表视图和网状视图切换
电商物品展示列表视图和网状视图切换
2018-08-17 16:24 评论:1 阅读:878 Zhang_Jack
ios collectionView

最近闲来没事,参考部分商城demo顺便写了一下视图切换的思路,望各位看官多多采纳。

先放一下效果图:  Enter your image description here:  Enter your image description here: 暂时没找到录制动态图的软件,请见谅哈!!!

下面正式开始讲解思路: 1、首先创建一个切换按钮顺便定义一个变量BOOL用于判断切换显示类型。 2、创建两个不同类型的cell,采用xib或者纯代码都可以。 3、在加载collectionView的时候同时注册两个类型的cell。 4、在cellForItemAtIndexPath 协议方法里面通过判断先前定义的BOOL值来加载不同类型的cell。 5、点击切换按钮改变BOOL值刷新collectionView。 6、OK,效果实现了。

接下来附上代码以供参考

注册collectionView

  • (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. UICollectionViewFlowLayout * flowLayout = [[UICollectionViewFlowLayout alloc]init]; [flowLayout setScrollDirection:UICollectionViewScrollDirectionVertical]; [self.collectionView setCollectionViewLayout:flowLayout]; self.collectionView.delegate = self; self.collectionView.dataSource = self; [self.collectionView registerNib:[UINib nibWithNibName:@"cells" bundle:nil] forCellWithReuseIdentifier:@"cells1"]; [self.collectionView registerNib:[UINib nibWithNibName:@"cell2" bundle:nil] forCellWithReuseIdentifier:@"cell2"]; }

//视图加载

  • (UICollectionViewCell )collectionView:(UICollectionView )collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {

    if (self.isChange) { static NSString cellindex = @"cells1"; cells cell = [collectionView dequeueReusableCellWithReuseIdentifier:cellindex forIndexPath:indexPath];

    return cell;

    }else{ static NSString cellindex = @"cell2"; cell2 cell = [collectionView dequeueReusableCellWithReuseIdentifier:cellindex forIndexPath:indexPath];

    return cell;

    } }

根据BOOL值加载不同大小的cell

  • (CGSize)collectionView:(UICollectionView )collectionView layout:(UICollectionViewLayout )collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath { if (self.isChange) { return CGSizeMake(self.view.bounds.size.width, 100); }else{ return CGSizeMake(100, 100); } }

切换按钮点击事件

  • (IBAction)changeBtn:(id)sender { self.isChange = !self.isChange; [self.collectionView reloadData]; }

当然啦新手写collectionView注定会遇到各种奇葩问题,接下来顺道附上部分使用中的常见错误以供大家学习。

1.reason:'the cell returned from -collectionView:cellForItemAtIndexPath: does not have a reuseIdentifier。 cells must be retrieved by calling-dequeueReusableCellWithReuseIdentifier:forIndexPath:'说明cell必须使用dequeueReusableCellWithReuseIdentifier:forIndexPath这个方法进行创建,也就意味着我们必须设置cell的重用标识

  1. reason:'invalid nib registered for identifier (***) - nib must contain exactly one top level object which must be a UICollectionReusableView instance':在xib文件中只能定义一个TOP视图,简单说就是只能定义一个cell.如果定义了多个就会报这个错误。

3.reason: 'could not dequeue a view of kind: UICollectionElementKindCell withidentifier *** - must register a nib or a class for the identifier or connect a prototype cell in a storyboard'--没注册cell,也就意味着系统不知道按那种方式来进行cell的创建。我们可以使用xib注册和class注册。

  1. reason:'UICollectionView must be initialized with a non-nil layout parameter':必须指定'UICollectionView的布局对象,如果没有,则不能使用其进行布局.那么就意味着我们必须传入一个布局对象,也就意味着只能通过[[UICollectionView alloc] initWithFrame:<#(CGRect)#> collectionViewLayout:<#(nonnull UICollectionViewLayout *)#>];来创建UICollectionView控件

OK,接下来就看各位看官们的想法了,当然啦,如果各位看官们有更好的思路请不吝赐教!!!!

收藏
1
sina weixin mail 回到顶部