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)

用户喜欢...

使用Xilinx系统生成器实现简单的DDS

在本文中,我们将讨论使用Xilinx System Generator实现简单的直接数字频率合成器(DDS)。 System Generator是一个功能强大的工具,它将Xilinx FPGA设计过程与MATLAB的Simulink集成,后者使用高级描述轻松实...


可实现更佳充电灵活性的谐振式无线充电解决方案

可实现更佳充电灵活性的谐振式无线充电解决方案 谐振式无线充电技术利用磁共振在松散耦合的线圈之间传输功率,工作频率为 6.78 MHz。 对于要求充电时发射器与接收器线圈无需精准对准的应...


快速实现精度达 10 厘米的实时定位系统

无线电定位系统已成为几乎所有类型的移动设备和相关应用的标配功能。在众多无线电定位方法中,基于超宽带 (UWB) 射频通信的实时定位系统 (RTLS) 扮演了中枢角色,确保在 GPS 等更为人熟悉的...


制造商和工程师:了解您的仪表放大器以实现准确的物联网数据采集

感知是物联网(IoT)和智能家居开始的地方,也是DIY爱好者,制造者甚至专业设计师遇到他们的第一个问题的地方。许多便宜的传感器,如加速计,力传感器,应变计和压力传感器都是围绕电...


使用RS-485和电流回路接口实现可靠的工业连接

尽管蓝牙,以太网和其他连接选项广泛普及并支持高数据速率,但工业应用设计人员仍然需要确保以最低的成本获得最可靠的连接。他们还必须在安装的连接选项基础范围内工作。 由于这些原...


在实现5G方面发挥重要作用的顶级驱动因素

一位勇敢的灵魂承认真正了解5G是什么......而且有相当数量的与会者已经预示着6G! 使用5G来改善人类的生存 然而,我们选择定义5G,会议提醒我有许多不同的驱动因素在实现5G方面发挥作用。其...



将电动汽车引入智能电网以实现稳定性和安全性

插电式混合动力汽车和电池电动汽车(PHEV,BEV)的健康市场可以在不牺牲个人交通提供的自由的情况下,显着减少尾气排放的环境负担。欧盟立法者是改变清洁车辆的最积极的倡导者之一,一...


Wi-Fi /蓝牙组合可实现多个车载设备的同时流式传输

赛普拉斯半导体宣布推出组合解决方案,该解决方案可为车辆提供2x2 MIMO 802.11ac Wi-Fi和蓝牙连接,使多个用户能够同时连接不同内容并将其传输至其设备。 新的赛普拉斯CYW89359组合解决方案据说...


在恶劣的环境中实现复杂的传感和控制系统

在许多工业应用中,感知,记录和交流关于环境条件的数据是至关重要的。许多工业过程涉及高温,高压,振动和腐蚀性气体或液体,但是传感对于控制和监测这些过程是非常重要的,通常在非...