类似淘宝、美团外卖等app首页 Demo分析 tableView

近期开发过程中遇见了类似淘宝美团等app的首页制作，一开始思太明确，后来经过一番曲折后，终于相通了，现在把思路如下展示
界面演示示例

界面演示示例

该试图分为三块

• 上面的轮播图
• 中间的圆按钮
• 下面的放按钮
  具体思路是整个都是一个UITableView,轮播图是UITableview的头视图,中间和下面是tableview的Cell,cell里面装的都是UICollcetionview. 如此一来思路就明朗了,好了,废话不多说直接上Demo

创建一个UITableView

tableview = [[UITableView alloc]initWithFrame:CGRectMake(0, 0, kScreenWidth, kScreenHeight-64) style:UITableViewStylePlain]; 
//注册一个cell
 [tableview registerClass:[UITableViewCell class] forCellReuseIdentifier:HomeCellID]; 
tableview.delegate = self; tableview.dataSource = self; 
tableview.backgroundColor = [UIColor colorWithWhite:0.973 alpha:1.000];
 //垂直和水平方向的线条隐藏 tableview.showsHorizontalScrollIndicator = NO; 
tableview.showsVerticalScrollIndicator = NO; 
tableview.rowHeight = UIFontWeightHeavy;
 //设置tableview的头视图 
tableview.tableHeaderView =tabeViewHeadView; [self.view addSubview:tableview];

给头视图的具体创建如下

//这个就是一个普通的view 
tabeViewHeadView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, kScreenWidth, kScreenHeight/3-0.074*kScreenHeight)]; 
//这个是封装好的一个轮播图 
reuseLoopView = [[ReuseLoopView alloc] initWithFrame:CGRectMake(0, 0, kScreenWidth, kScreenHeight/3-0.074*kScreenHeight)]; 
//这是轮播图上面的文字
 Headlabel = [[UILabel alloc]initWithFrame:CGRectMake(0, kScreenHeight/3-0.074*kScreenHeight - 20, kScreenWidth, 20)];
 Headlabel.backgroundColor = [UIColor colorWithWhite:0.000 alpha:0.500]; 
Headlabel.textColor = [UIColor whiteColor]; 
[tabeViewHeadView addSubview:reuseLoopView]; 
[tabeViewHeadView addSubview:Headlabel];

轮播图是我自己进行封装的,可支持循环播放,支持缩放,支持自动切换,有兴趣的同学可以在我后续的博客中看到封装的Demo
然后就是给Tableview赋值了

tabview的数据源方法

-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
 return 2;
}
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{ 
return 1;
}

tabview单元格的具体方法,创建两个collectionview并初始化一些参数

-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{ 
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:HomeCellID forIndexPath:indexPath]; 
//如果等于0则显示12个功能模块
 if (indexPath.section == 0) {
 //定义collectionView的布局对象
 UICollectionViewFlowLayout *layout=[[UICollectionViewFlowLayout alloc]init]; 
layout.minimumLineSpacing = kCellSpace;
 layout.minimumInteritemSpacing = kCellSpace; 
//这里的kCellSpace kCellSize 都是宏定义,自己随意给定值就好 layout.itemSize = CGSizeMake(kCellSize, kCellSize); 
layout.sectionInset = UIEdgeInsetsMake(kCellSpace, kCellSpace, kCellSpace, kCellSpace);
 //定义collectionview的信息 
UICollectionView *collectionView=[[UICollectionView alloc]initWithFrame:CGRectMake(0, 0, kScreenWidth, 0.5*kScreenHeight) collectionViewLayout:layout]; 
//加上tag之,为了更好的实现collcetionview的代理方法 collectionView.tag = 899; 
collectionView.bounces = NO; 
collectionView.backgroundColor=[UIColor whiteColor]; 
collectionView.delegate=self; collectionView.dataSource=self; 
//注册单元格
 [collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:HomeCollectionView1CellID]; [cell addSubview:collectionView]; } 
if (indexPath.section == 1) {
 //定义collectionView的布局对象 
UICollectionViewFlowLayout *layout=[[UICollectionViewFlowLayout alloc]init];
 layout.minimumLineSpacing = kCellSpace; 
layout.minimumInteritemSpacing = kCellSpace; layout.itemSize = CGSizeMake(kCell2Width, kCell2Height); 
layout.sectionInset = UIEdgeInsetsMake(2, 0, 2, 0); 
//定义collectionview的信息 
UICollectionView *collectionView=[[UICollectionView alloc]initWithFrame:CGRectMake(0, 0, kScreenWidth, 0.3396*kScreenHeight) collectionViewLayout:layout]; 
collectionView.tag = 900;
collectionView.bounces = NO; 
collectionView.scrollEnabled = NO; 
collectionView.backgroundColor=[UIColor whiteColor]; 
collectionView.delegate=self; 
collectionView.dataSource=self; 
//注册单元格 
[collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:HomeCollectionView2CellID]; 
[cell addSubview:collectionView];
 } 
cell.selectionStyle = UITableViewCellSelectionStyleNone; return cell;
}

最后就是实现tableview和collectionview的代理方法了 怎么样,小伙伴们都学会了没有,原来布局什么的一切so easy!~