效果图：
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;
网友评论