14-九宫格--collectionView

2017-05-08 本文已影响194人小胖子2号

效果图：

1.png

分析：2种思路

第一种思路：将九宫格也看成一组cell，即这个tableview拥有3组cell

第二种思路：将九宫格看成一个footerview，即即这个tableview拥有2组cell

** 问题：自定义cell相关设置**

2.png

图片设置完高度会拉伸，想要图片不变形，就要改变其constentMode
如果是正方形，就设置宽高相等就行。
如果不是正方形，就等比例拉伸。
self.imageView.contentMode = UIViewContentModeScaleAspectFit;
cell的右边箭头：2种方法
第一种是系统自带的缺点：不能改变箭头位置与大小
self.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
第二种是自定义的（美工提供图片）
self.accessoryType = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"xxxxx"]];
问题：cell边缘有虚影
原因：背景图片被拉伸了
解决：拉伸中间部分

3.png
第一行上面的行距较大---35，希望第一行行距和其它行一样，都是10。
self.tableView.contentInset = UIEdgeInsetsMake(-25, 0, 0, 0);

九宫格

collectionView使用的注意点：
（1）初始化要设置流水布局
（2）UICollectionViewCell必须要注册（小格子）
（3）UICollectionViewCell必须要自定义（小格子）

思路：

初始化要设置流水布局

重要代码讲解：

 /**
    * Frame : 可以搞个假的frame（宽度不用管，只要设置个假的高度就好，其它为0,后面高度还会重新计算的）
    * collectionViewLayout : 创建流水布局，通过[[UICollectionViewFlowLayout alloc] init]创建，默认是黑色
    */
 UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 0, 0, 300) collectionViewLayout:layout];

完整代码

#pragma mark ---- footerView
/**
 * collectionView的使用注意
 * 1.初始化要设置流水布局
 * 2.cell必须要注册
 * 3.cell必须要自定义
 */
- (void)setupFooterView
{
    /**
     *  创建collectionView
     *  frame:只需要设置高度,并且高度是假的,其余不管,)
     *  collectionViewLayout:创建流水布局,默认是黑色的
     */
    UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
    // 设置cell的尺寸(行距,列距)
    layout.minimumLineSpacing = margin;
    layout.minimumInteritemSpacing = margin;
    // 设置cell的宽度
    layout.itemSize = CGSizeMake(cellWH, cellWH);

    UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 0, 0, 300) collectionViewLayout:layout];
    
    collectionView.backgroundColor = self.tableView.backgroundColor;
    self.tableView.tableFooterView = collectionView;
    collectionView.scrollEnabled = NO;
    // 2. 创建小格格(数据源码)
    collectionView.dataSource = self;
    collectionView.delegate = self;
    // 3. 注册cell
    [collectionView registerNib:[UINib nibWithNibName:@"BSSquareCollectionViewCell" bundle:nil] forCellWithReuseIdentifier:ID];
    _collectionview = collectionView;
 }

2 . 布局完成后，要创建小格子，自定义UICollectionViewCell

继承 UICollectionViewCell，同时创建xib

1.png
代码如下：

#import <UIKit/UIKit.h>
@class BSSquareModel;
@interface BSSquareCollectionViewCell : UICollectionViewCell
@property (nonatomic ,strong) BSSquareModel *square;
@end

#import "BSSquareCollectionViewCell.h"
#import "UIImageView+WebCache.h"
#import "BSSquareModel.h"
@interface BSSquareCollectionViewCell()

@property (weak, nonatomic) IBOutlet UIImageView *iconImageView;
@property (weak, nonatomic) IBOutlet UILabel *nameLabel;

@end

@implementation BSSquareCollectionViewCell
- (void)awakeFromNib {
    [super awakeFromNib];
    
    self.backgroundColor = [UIColor whiteColor];
}

-(void)setSquare:(BSSquareModel *)square
{
    _square = square;

    NSURL *url = [NSURL URLWithString:square.icon];
    [_iconImageView sd_setImageWithURL:url];
    self.nameLabel.text = square.name;
}

@end

3 . Controller中设置小格子的数量与显示

设置数据源
遵循协议 ---<UICollectionViewDataSource>
实现代理方法
- numberOfItemsInSection : 有多少小格子
- cellForItemAtIndexPath : 小格子样子

    // 2. 创建小格格(数据源码)
   collectionView.dataSource = self;

#pragma mark ----UICollectionViewDataSource(小格子源码)
// 有多少小格子
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return self.squareArray.count ;
}
// 小格子的样子
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    // 从缓存池取
    BSSquareCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:ID forIndexPath:indexPath];
    cell.square = self.squareArray[indexPath.row];

    return cell;
}

4 . 显示完小格子后，重新计算collectionView的高度（高度需要根据内容去计算，即获得数据后计算）

计算行数的万能公式 (count : 小方格总数 cols ：总列数)
rows = （count - 1）/ cols + 1

#pragma mark ---- 小方格的网络请求
- (void)loadDate
{
    AFHTTPSessionManager *manager = [AFHTTPSessionManager manager];
    NSMutableDictionary *parameters = [NSMutableDictionary dictionary];
    parameters[@"a"] = @"square";
    parameters[@"c"] = @"topic";
    [manager GET:@"http://api.budejie.com/api/api_open.php" parameters:parameters progress:nil success:^(NSURLSessionDataTask * _Nonnull task, id  _Nullable responseObject) {
        [responseObject writeToFile:@"/Users/guanzhangpeng/Desktop/111.plist" atomically:YES];
        // 字典数组(小方格)
        NSArray *dicArray = responseObject[@"square_list"];
        _squareArray = [BSSquareModel mj_objectArrayWithKeyValuesArray:dicArray];
        
        // 有数据了,才能重新计算一下高度
        [self setupCollectionViewHeight];
        
        // 刷新数据
        [self.collectionview reloadData];
    } failure:^(NSURLSessionDataTask * _Nullable task, NSError * _Nonnull error) {
        BSLog(@"%@",error);
    }];
}

- (void)setupCollectionViewHeight
{
    // 当行里有空白时占位图填充一下 1.判断缺几个
    // 3 % 4 = 3 cols - 3 = 1
    // 5 % 4 = 1 cols - 1 = 3
    NSInteger exter = (self.squareArray.count) % cols;
    if (exter) {
        exter = cols - exter;
        for (int i = 0; i < exter; i ++) {
            
            BSSquareModel *model = [[BSSquareModel alloc] init];
            
            [self.squareArray addObject:model];
        }
    }
    NSUInteger rows = (self.squareArray.count - 1)/cols +1 ;
    _collectionview.xmg_height = rows * cellWH;
    // tableview的滚动范围自己计算
    self.tableView.tableFooterView = self.collectionview;
}

5 .创建完小格子，监听小格子的点击，当点击小格子时要跳转到响应页面

如何监听collectionView的点击？

设置代理,遵循代理协议
代理方法：didSelectItemAtIndexPath:---监听小方格的点击

collectionView.delegate = self;

#pragma mark -----UICollectionViewDelegate(小格子代理)
-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
    BSSquareModel *cell = self.squareArray[indexPath.row];
    // 调转界面,展示网页(先判断跳转的是网页还是其他)
    if (![cell.url containsString:@"http"]) return;
    BSWebViewController *web = [[BSWebViewController alloc] init];
    web.url = [NSURL URLWithString:cell.url];    
    web.hidesBottomBarWhenPushed = YES;
    [self.navigationController pushViewController:web animated:YES];  
}

问题1：当滑动时，CollectionView和tableView都会滚动，希望只有tableView滚动

collectionView.scrollEnabled = NO;
tableView的滚动是系统自己管理的
self.tableView.contentSize = CGSizeMake(0, CollectionView.y的最大值)故：
// tableview的滚动范围自己计算 self.tableView.tableFooterView = self.collectionview;

14-九宫格--collectionView

分析：2种思路

九宫格

问题1：当滑动时，CollectionView和tableView都会滚动，希望只有tableView滚动

猜你喜欢

热点阅读