美文网首页
新的一种界面布局

新的一种界面布局

作者: hzy1314 | 来源:发表于2017-08-02 10:24 被阅读20次

    1.众所周知,移动端的开发界面的布局是一种很基本很基础的技能,有没有一种良好的布局习惯决定了你业务实现的方便与开发周期的缩短;我也是来到新的工作环境中开始学会了一种新的界面布局方式。

    2.新的界面布局详解:

    (1).首先,定义一个UICollectionViewController的基类,在基类的.h文件中,向外公开一个表数据的数组data,并提供相关注册cell、header、footer、刷新、清除的接口。在.m中实现collectionview的代理方法,return data.count、return data[section].row;以下着重介绍下cellforitem的代理方法;

    (2).获取对应section的model,获取对应的cell,实现协议方法,代码如图:


    ZLCellInfoModel *cellModel = _cellData[indexPath.section];    UICollectionViewCell*cell =

    [collectionView dequeueReusableCellWithReuseIdentifier:cellModel.cellName

    forIndexPath:indexPath];

    [cell updateCellWithModel:cellModel.cellData[indexPath.row]

    indexPath:indexPath];

    if ([cell respondsToSelector:@selector(setCellDelegate:)]) {

    [cell setCellDelegate:self];

    }


    3.以下我会以一个控制器的创建为例具体解释下新的界面布局

    (1)假设控制器的界面上有一个滚动的banner图,有一个活动小框,有一个列表,有一个collectionview的视图,下面该如何布局呢

    (2)创建对应几个视图的model。如例中,创建4个model,每一个model中在创建的时候,将对应的cellname,cellsize,headername,headersize等一系列属性添加进去,然后创建几个对应网络层的任务,进行每一个cell的数据加载

    (3).在数据的加载中,用到了gcd中的dispatch_group-async,其目的在于使用dispatch_group_notify的属性,可以将提交到dispatch_queue_t 中的任务执行完毕后统一在notify中执行,一行代码解决所有冲突与烦恼,所以将数据的加载放在group中,使用dispatch_group_create()创建group,可以大大提高访问速度。

    (4).对应的加载任务访问成功后,会将对应的model加入到控制器的arraydata中,将访问到的数据加入到model的对外数据接口中,然后刷新控制器的collectionview如下面代码:


    dispatch_group_enter(group);

    WEAKSELF

    self.getADListTask =

    [ZLHomeRequestManager getADListWithType:2 completedBlock:^(NSMutableArray *dataArray, NSError *error) {

    //先清除之前的数据

    [weakSelf clearCellData:weakSelf.adCellModel];

    if ([dataArray count]) {

    NSMutableArray *imageArray = [NSMutableArray array];

    for (ZLADInfo *adInfo in dataArray) {

    [imageArray addObject:adInfo.imgurl];

    }

    weakSelf.adList = dataArray;

    [weakSelf.adCellModel.cellData addObject:imageArray];

    [weakSelf.cellData insertObject:weakSelf.adCellModel atIndex:0];

    }

    [weakSelf reloadCollectionView];

    dispatch_group_leave(group);

    }];


    (5)在对应的cell中,更新cell的布局。

    相关文章

      网友评论

          本文标题: 新的一种界面布局

          本文链接:https://www.haomeiwen.com/subject/lbjflxtx.html