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

To be or not to be, that’s a question.

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

界面演示示例
该试图分为三块

1. 上面的轮播图
2. 中间的圆按钮
3. 下面的放按钮
   具体思路是整个都是一个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!~