[iOS][Objective-C]：collectionVie

2016-10-13  本文已影响0人  DerrickQin
这是一个demo：左右滑动与上部分类标签栏的联动效果，同时可以点击将分类标签栏打开明细进行选择。

效果：


collectionView联动.gif

首先在底层创建一个大的collectionView，嵌套于一个tabBar和navigationBar中。
然后创建对应的cell作为整个页面的容器。
<pre><code>DQCollectionViewController
DQCollectionViewCell</code></pre>
对应该collectionView的数据源方法，我们这边就先设置8个页面。也就是对应上方分类栏有8个标签。
DQCollectionViewController的设置：
<pre>

上部联动的分类的CollectionView和对应的cell设置
<pre>
//
// CategroyBaseView.m
// CategroyCollectionView
//
// Created by admin on 16/8/29.
// Copyright © 2016年 Derrick_Qin. All rights reserved.
//

import "CategroyBaseView.h"

import "CategroyCell.h"

//下标高度

define kIndicatorH 3

//选项cell宽度

define kItemSizeW 55

@interface CategroyBaseView () <UICollectionViewDataSource,
UICollectionViewDelegate>

@property(nonatomic, assign) BOOL btnIsClicked;
@property(nonatomic, weak) UIView *indictorView;
@property(nonatomic, weak) UICollectionView *cateView;
@property(nonatomic, strong) NSIndexPath *selectedIndexPath;

@end

static NSString *cateCellReuseId = @"cateCell";

@implementation CategroyBaseView

/**

/**

/**

@end
</pre>
<pre>
//
// CategroyCell.m
// CategroyCollectionView
//
// Created by admin on 16/8/29.
// Copyright © 2016年 Derrick_Qin. All rights reserved.
//

import "CategroyCell.h"

@interface CategroyCell ()
@property(nonatomic, weak) UILabel *textLabel;
@end

@implementation CategroyCell

@end
</pre>
实现上下联动的关键点：

  1. 上方分类栏点击，下方跟随滑动
    在collectionViewdidSelectItemAtIndexPath中实现点击方法：
    通过indexpath获取cell，底下红色条做动画，做block回调，然后使用scrollToItemAtIndexPath:atScrollPosition: 方法做分类栏的滑动跳转
    <pre>

在DQCollectionViewController中添加block回调的实现，同样是scrollView的滑动方法：
<pre>
cateView.indexChange = ^(NSInteger itemIndex) {

NSIndexPath *indexPath =
    [NSIndexPath indexPathForItem:itemIndex inSection:0];

//记得动画效果去掉
[self.collectionView
    scrollToItemAtIndexPath:indexPath
           atScrollPosition:UICollectionViewScrollPositionLeft
                   animated:NO];

};
</pre>

  1. 下方collectionView滑动同时联动上方的分类栏联动:
    这个相对比较简单，正向调用。重点是collectionView中的

<pre>

</pre>

调用selectAtIndex:，该方法调用didSelectItemAtIndexPath:方法进行实现
<pre>

添加一个detailView：
<pre>

//
// DetailCategroyBaseView.m
// CategroyCollectionView
//
// Created by admin on 16/8/29.
// Copyright © 2016年 Derrick_Qin. All rights reserved.
//

import "CategroyCell.h"

import "DetailCategroyBaseView.h"

import "DetailCell.h"

@interface DetailCategroyBaseView () <UICollectionViewDelegate,
UICollectionViewDataSource>
@property(nonatomic, weak) UICollectionView *detailCateView;
@property(nonatomic, strong) NSIndexPath *selectedIndexPath;
@end

static NSString *detailCateCellReuseId = @"detailCateCell";

@implementation DetailCategroyBaseView

pragma mark--数据源方法

@end

</pre>

点击下拉按钮实现展现/隐藏明细分类栏：
弹出明细分类栏的时候需要给北京设置一个蒙板
<pre>

cateView.changeBtnClick = ^(UIButton *changeBtn, BOOL btnIsSelected,
NSIndexPath *indexPath) {

if (btnIsSelected) {

  UIButton *coverView = [[UIButton alloc]
      initWithFrame:CGRectMake(
                        0, 40, [UIScreen mainScreen].bounds.size.width,
                        [UIScreen mainScreen].bounds.size.height - 40)];

  [coverView setBackgroundColor:[UIColor blackColor]];
  coverView.alpha = 0.45;
  [coverView addTarget:self
                action:@selector(cancelDetailView)
      forControlEvents:UIControlEventTouchUpInside];
  _coverView = coverView;
  [self.view addSubview:coverView];

  DetailCategroyBaseView *detailView = [[DetailCategroyBaseView alloc]
      initWithFrame:CGRectMake(
                        0, 0, [UIScreen mainScreen].bounds.size.width, 80)];

  detailView.categroyArray = self.categroyArray;
  detailView.delegate = self;

  [self.view addSubview:detailView];

  _detailView = detailView;

  [detailView selectAtIndex:indexPath];

  [self.view bringSubviewToFront:_cateView];

  [UIView
      animateWithDuration:0.2
               animations:^{
                 _detailView.frame = CGRectMake(
                     0, 40, [UIScreen mainScreen].bounds.size.width, 80);
               }];
} else {

  [_coverView removeFromSuperview];

  _coverView = nil;

  [self.view bringSubviewToFront:_cateView];

  [UIView animateWithDuration:0.2
      animations:^{
        _detailView.frame =
            CGRectMake(0, -40, [UIScreen mainScreen].bounds.size.width, 80);

      }
      completion:^(BOOL finished) {

        [_detailView removeFromSuperview];

        _detailView = nil;

      }];
}

};

[self.view addSubview:cateView];
}
</pre>

点击明细分类栏的cell触发事件：
这边不适用block回调，使用代理的方式做到回传

<pre>

代理的协议方法的实现:
<pre>

</pre>

具体的一些细节可以参考代码：
https://github.com/DerrickQin2853/CategoryCollectionViewDemo

感谢阅读

上一篇 下一篇

猜你喜欢

热点阅读