close
当前位置: 物联网在线 > 技术文库 > ios >

iOS实现多个可变cell复杂界面的制作

在日常的开发中,有时会遇到内容块比较多,且又可变的界面:

iOS实现多个可变cell复杂界面的制作

这个界面中有些内容块是固定出现的,比如最上面的商品详情图片、商品名称、价格等。而有些内容块则是不一定出现的,比如促销(显然不是每个商品都有促销)、已选规格(有的商品没有规格)、店铺信息(有的商品属于自营,就没有店铺)等。还有些内容要根据情况进行变化,比如评论,这里最多列出4条评论,如果没有评论,则显示“暂无评论”且不显示“查看所有评论”按钮。

对于这样的界面,相信很多人第一感觉会用TableView来做,因为中间要列出评论内容,这个用TableView的cell来填充比较合适。但如何处理评论内容之外的其他内容呢?我之前的做法是,评论内容之上的用HeaderView做,下面的用FooterView做,虽然最终实现了功能,但做起来十分麻烦。布局我是用Auto Layout来做的,由于Auto Layout本身的特点,代码中就涉及很多判断处理。比如“已选规格”块,最开始的是有一个和“促销”内容块的顶部间距约束,但“促销”内容块不一定会有,就得根据情况,调整“已选规格”块本身的约束(例如让其顶部间距约束指向“价格”内容块)。同样,“促销”内容块本身也需要类似的处理,如果没有“促销”时,要隐藏自己,而隐藏自己最简单的办法,就是将自己的高度约束设置为0(因为它还有底部到“已选规格”的间距约束,不能随意将自身移除,否则“已选规格”相关的约束得再进行调整)。

此外,还有一个麻烦的问题。界面刚进来的时候,是需要请求网络数据,这时界面就要显示成一个初始状态,而显然初始状态有些内容块是不应该显示的,比如促销,只有完成了数据请求,才能知道是否有促销,有的话才显示促销内容;比如评论,初始时应该显示成“暂无评论”,数据请求完成后,才显示相应的内容。这样,我们需要处理初始进入和数据请求完成两种状态下各个内容块的显示,十分复杂繁琐。

总结来说,用TableView的 HeaderView + 评论内容cell + FooterView + Auto Layout 的方式会带来如下问题:

约束本身需要依赖其他View的,而所依赖的View又是可变的内容块,会导致约束需要繁琐的判断修改增删

需要处理初始进入和数据请求完成两种状态的界面展示,使代码更加复杂繁琐

需要额外计算相应内容的高度,以更新HeaderView、FooterView的高度

可见,这种方式并不是理想的解决方案。可能有人会说,那不要用Auto Layout,直接操作frame来布局就好,这样或许能减少一些麻烦,但总体上并没有减少复杂度。也有人说,直接用ScrollView来做,这样的话,所有的内容包括评论内容的cell,都得自己手动拼接,可以想象这种做法也是比较麻烦的。所以,我们得另辟蹊径,使用其他方法来达到目的。下面就为大家介绍一种比较简便的做法,这种做法也是一个前同事分享给我的,我就借花献佛,分享给大家。

我们还是用TableView来做这个界面,和之前不同的是,我们把每一个可变内容块做成一个独立的cell,cell的粒度可以自行控制,比如可以用一个cell囊括商品图片、标题、副标题、价格,也可以拆得更细,图片、标题、副标题、价格都各自对应一个cell。这里我们选择后者,因为图片内容块,我们需要按屏幕宽度等比例拉伸;标题、副标题的文字内容可能是一行,也可能是两行,高度可变,用单独的cell来控制会更简单明了。

下面先定义好各种类型的cell:

//基础cell,这里为了演示简便,定义这个cell,其他cell继承自这个cell    @interface MultipleVariantBasicTableViewCell : UITableViewCell    @property (nonatomic, weak) UILabel *titleTextLabel;    @end         //滚动图片    @interface CycleImagesTableViewCell : MultipleVariantBasicTableViewCell    @end         //正标题    @interface MainTitleTableViewCell : MultipleVariantBasicTableViewCell    @end         //副标题    @interface SubTitleTableViewCell : MultipleVariantBasicTableViewCell    @end         //价格    @interface PriceTableViewCell : MultipleVariantBasicTableViewCell    @end         // ...其他内容块的cell声明              // 各种内容块cell的实现,这里为了演示简便,cell中就只放了一个Label    @implementation MultipleVariantBasicTableViewCell         - (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {        self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];        if (self) {            UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 320, 44)];            label.numberOfLines = 0;            [self.contentView addSubview:label];            self.titleTextLabel = label;        }        return self;    }         @end         @implementation CycleImagesTableViewCell    @end         @implementation MainTitleTableViewCell    @end         // ...其他内容块的cell实现         // 评论内容cell使用Auto Layout,配合iOS 8 TableView的自动算高,实现内容自适应    @implementation CommentContentTableViewCell         - (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {        self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];        if (self) {            self.titleTextLabel.translatesAutoresizingMaskIntoConstraints = NO;            self.titleTextLabel.preferredMaxLayoutWidth = [UIScreen mainScreen].bounds.size.width - 8;            NSLayoutConstraint *leftConstraint = [NSLayoutConstraint constraintWithItem:self.titleTextLabel attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:self.contentView attribute:NSLayoutAttributeLeading multiplier:1.0f constant:4.0f];            NSLayoutConstraint *rightConstraint = [NSLayoutConstraint constraintWithItem:self.titleTextLabel attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:self.contentView attribute:NSLayoutAttributeTrailing multiplier:1.0f constant:-4.0f];            NSLayoutConstraint *topConstraint = [NSLayoutConstraint constraintWithItem:self.titleTextLabel attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.contentView attribute:NSLayoutAttributeTop multiplier:1.0f constant:4.0f];            NSLayoutConstraint *bottomConstraint = [NSLayoutConstraint constraintWithItem:self.titleTextLabel attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.contentView attribute:NSLayoutAttributeBottom multiplier:1.0f constant:-4.0f];            [self.contentView addConstraints:@[leftConstraint, rightConstraint, topConstraint, bottomConstraint]];        }        return self;    }         @end 
(责任编辑:ioter)

用户喜欢...

有意义的步骤让私有云实现更容易

有些人认为,私有云只是本地已经实施的虚拟化的一个扩展,但事实上却不只如此。私有云的实现可以帮助打破数据...


Vicor 高密度合封电源方案​助力人工智能处理器实现更高的性能

Vicor 公司(NASDAQ 股票交易代码:VICR)今日宣布推出适用于高性能、大电流 CPU/GPU/ASIC(“XPU”)处理器合封的模块化电流倍增器。Vicor 合封电源方案不仅可以减少 XPU 插座的引脚数,还可减少...


用于实现脉宽调制 (PWM) 控制的 Allegro MicroSystems A3916 全桥电机驱动器

Allegro MicroSystems的 A3916设计用于实现低电压步进电机和单、双直流电机的脉宽调制 (PWM) 控制。A3916 每通道输出电池可达 1 A,工作电压范围为 2.7 V 至 15 V。A3916 具有内部固定关断时间 PWM 定时器,...


超少量数据训练神经网络:IEEE论文提出径向变换实现图像增强

作者:李亚洲 近日,一篇题为《Training Neural Networks with Very Little Data-A Draft》IEEE 论文提出...


多通道GNSS数据采集平台的设计与实现

作者:赵玉东,秦红磊,张润萍,2017年电子技术应用第7期 摘 要: 随着GNSS系统的发展,多径效应逐渐成为影响定位精度和可靠性的重要因素之一。为了验证天线阵列方法对于多径效应的消除...


如何使创新的MCU实现高效节能电机控制?

电机对能耗的贡献率在美国接近50%,因此降低电机能耗能有效地提高能源利用率,而采用先进的微控制器(MCU)技术来实现电机控制是一种有效的方法。本文介绍了最新的电机控制MCU技术发展...


工业机器人实现柔性制造离不开哪些核心部件

机器人工具快换装置(Robotic Tool Changer)通过使机器人自动更换不同的末端执行器或外围设备,使机器人的应用更具柔...


实现智能工厂的五大集成解读

实现智能工厂,需要智能制造的四大元素(智能产品、人、物料、工厂)有效的组合,也需要把客户集成、智力集成...


袁帅:会展业实现产业大数据化的几条可能性产出猜想

作者:袁帅 摘要:我们正在从IT时代走入DT的世界,这不仅仅是技术的提升,同时也是思想观念的提升。二者的区别在...


IDC:实现企业数字化转型——数字时代敏捷IT的多云架构

2017年8月17日在新加坡文华东方酒店举行的2017年亚太地区企业云大会上,IDC 亚太区云服务项目研究副总监William Lee探讨...