基础 (十六) : 等高cell

等高Cell-frame:

等高Cell-frame

知识回顾

拖入plist文件以及图片

1.(tableView展示数据)

UITableViewController用法

  • 设置ViewController继承自UITableViewController

  • 删除storyboard中原有的控制器

  • 拖进新控制器

  • 设置新控制器class:ViewController

  • 设置新控制器is initial

  • 实现2个数据源方法

  • plist数据->模型数组

  • 根据plist中数据的样式判断转成JSON的样式

  • 根据dict的keys创建模型XMGTg

  • 解析plist文件(自定义代码块)

dict-Model(宏)

2.自定义view(cell)

  • 创建一个继承UITableViewCell的类:例如EdTgCell
  • 写好封装cell的代码(传统写法)
  • 为cell增添模型属性tg,并且重写set方法,先给系统自带的赋值
  • 重写initWithFrame方法添加子控件
  • 重写layoutSubviews方法布局
  • 注意先调用super方法

3.完善数据源方法展示数据

新知识

  • 添加子控件

  • 自定义cell的时候,子控件应该添加在initWithStyle方法中

  • 子控件应该添加在contentView上

自定义cell的时候,子控件应该添加在initWithStyle方法中, 子控件应该添加在contentView上

  • (instancetype)initWithStyle:(UITableViewCellStyle)style
    reuseIdentifier:(NSString *)reuseIdentifier

{

if (self = [super initWithStyle:style
reuseIdentifier:reuseIdentifier]) {

FunLog

   1.图片

UIImageView *icon_Ima = [[UIImageView alloc] init];

[self.contentView
addSubview:icon_Ima];

self.icon_Ima = icon_Ima;

   2.名称

UILabel *title_Lab = [[UILabel alloc] init];

[self.contentView
addSubview:title_Lab];

self.title_Lab = title_Lab;

   3.价格

...

     4.购买人数

...

}

return

self;

}

  • 布局子控件:牺牲代码量保证可读性

布局:注意要先调用[super
layoutSubviews],然后再设置子控件的frame;

  • (void)layoutSubviews

{

[super layoutSubviews];

CGFloat

margin = 10;

 1.布局图片:上,左,上下间距相同,宽度80

CGFloat

iconX = margin;

CGFloat

iconY = margin;

CGFloat

iconW = 80;

CGFloat

iconH = self.bounds.size.height - 2 * iconY;

self.icon_Ima.frame = CGRectMake(iconX, iconY,
iconW, iconH);

 2.布局title:顶部对齐icon,左边距离图片10,右边距离10,高度20

CGFloat

titleX = ;

CGFloat

titleY = ;

CGFloat

titleW = ;

CGFloat

titleH = ;

self.title_Lab.frame = CGRectMake(titleX, titleY,
titleW, titleH);

 3.价格: 底部和icon对齐,左边和title对齐,宽100,高15

CGFloat

priceX = ;

CGFloat

priceW = ;

CGFloat

priceH = ;

CGFloat

priceY = ;

self.price_Lab.frame = CGRectMake(priceX, priceY,
priceW, priceH);

 4.购买人数: 底部和价格对齐,左边距离价格10,右边10,高13,

CGFloat

buyCountX = ;

CGFloat

buyCountW = ;

CGFloat

buyCountH = ;

CGFloat

buyCountY = ;

self.buyCount_Lab.frame = CGRectMake(buyCountX,
buyCountY, buyCountW, buyCountH);

}

basic框架搭建:

basic框架搭建

拖入plist文件以及图片

1.(tableView展示数据)

UITableViewController用法

  • 设置ViewController继承自UITableViewController

warning 别把父类改成了UITableViewController💣

@interface XMGTgController : UITableViewController

  • 删除storyboard中原有的控制器

  • 拖进新控制器

  • 设置新控制器class:ViewController

  • 设置新控制器is initial

  • 实现2个数据源方法

(NSInteger)tableView:(UITableView *)tableView
numberOfRowsInSection:(NSInteger)section

  • (UITableViewCell
    *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath
    *)indexPath

{

 1.获取cell

XMGTgCell *cell = [XMGTgCell cellWithTableView:tableView];

 2.覆盖数据

cell.tg

= self.tgs[indexPath.row];

 3.返回cell

return cell;

}

  • plist数据->模型数组

  • 根据plist中数据的样式判断转成JSON的样式

  • 根据dict的keys创建模型XMGTg

  • 解析plist文件(自定义代码块)

dict-Model(宏)

懒加载

  • (NSArray *)tgs

{

if (!_tgs) {

NSString *filePath = [[NSBundle mainBundle] pathForResource:@"tgs.plist" ofType:nil];

NSArray *dicts = [NSArray arrayWithContentsOfFile:filePath];

NSMutableArray *arrayM = [NSMutableArray arrayWithCapacity:dicts.count];

for (NSDictionary *dictin dicts) {

  XMGTg *obj = [XMGTg tgWithDict:dict];

 
  [arrayM addObject:obj];

}

_tgs = [arrayM copy];

}

return _tgs;

}

自定义view(cell)

2.自定义view(cell)

  • 创建一个继承UITableViewCell的类:XMGTgCell
  • 写好封装cell的代码(传统写法)
  • (instancetype)cellWithTableView:(UITableView
    *)tableView

{

static NSString *identifier =@"TgCellID";

XMGTgCell *cell = [tableView dequeueReusableCellWithIdentifier:identifier];

if (!cell) {

cell = [[self alloc]
initWithStyle:UITableViewCellStyleDefault reuseIdentifier:identifier];

}

return cell;

}

  • 为cell增添模型属性tg,并且重写set方法,先给系统自带的赋值

@class XMGTg;

@interface XMGTgCell : UITableViewCell

@property (nonatomic, strong) XMGTg tg; /< tg模型/

  • (instancetype)cellWithTableView:(UITableView
    *)tableView;

@end

此处给子控件赋值

  • (void)setTg:(XMGTg *)tg

{

_tg =

tg;

warning

noCode

}

  • 重写initWithFrame方法添加子控件

传统通过代码自定义子控件,要将添加子控件的代码写在这个方法中

  • (instancetype)initWithFrame:(CGRect)frame
  • 重写layoutSubviews方法布局
  • 注意先调用super方法

布局:注意要先调用[super layoutSubviews];

  • (void)layoutSubviews

{

[super layoutSubviews];

}

subViews添加子控件:

subViews添加子控件

  • 参考storyboard/xib拖线,先写好weak属性

在这里模拟拖线,创建weak类型的子控件,并且在initWithStyle方法中创建添加到cell上

@property (nonatomic, weak) UIImageView icon_Ima; /*< 图片 */

@property (nonatomic, weak) UILabel title_Lab; /*< 名称 */

@property (nonatomic, weak) UILabel price_Lab; /*< 价格 */

@property (nonatomic, weak) UILabel buyCount_Lab; /*< 购买人数 */

  • 添加子控件

  • 自定义cell的时候,子控件应该添加在initWithStyle方法中

  • 子控件应该添加在contentView上

自定义cell的时候,子控件应该添加在initWithStyle方法中, 子控件应该添加在contentView上

  • (instancetype)initWithStyle:(UITableViewCellStyle)style
    reuseIdentifier:(NSString *)reuseIdentifier

{

if (self = [super initWithStyle:style
reuseIdentifier:reuseIdentifier]) {

FunLog

   1.图片

UIImageView *icon_Ima = [[UIImageView alloc] init];

[self.contentView
addSubview:icon_Ima];

self.icon_Ima = icon_Ima;

   2.名称

UILabel *title_Lab = [[UILabel alloc] init];

[self.contentView
addSubview:title_Lab];

self.title_Lab = title_Lab;

   3.价格

...

     4.购买人数

...

}

return

self;

}

layoutSubViews布局子控件

  • 布局子控件:牺牲代码量保证可读性

布局:注意要先调用[super layoutSubviews];

  • (void)layoutSubviews

{

[super layoutSubviews];

CGFloat

margin = 10;

 1.布局图片:上,左,上下间距相同,宽度80

CGFloat

iconX = margin;

CGFloat

iconY = margin;

CGFloat

iconW = 80;

CGFloat

iconH = self.bounds.size.height - 2 * iconY;

self.icon_Ima.frame = CGRectMake(iconX, iconY,
iconW, iconH);

 2.布局title:顶部对齐icon,左边距离图片10,右边距离10,高度20

CGFloat

titleX = iconX + iconW + margin;

CGFloat

titleY = iconY;

CGFloat titleW = self.bounds.size.width - titleX - margin; // cell宽度 - 右边距离- title左边距离titleX;

CGFloat

titleH = 20;

self.title_Lab.frame = CGRectMake(titleX, titleY,
titleW, titleH);

 3.价格: 底部和icon对齐,左边和title对齐,宽100,高15

CGFloat

priceX = titleX;

CGFloat

priceW = 100;

CGFloat

priceH = 15;

CGFloat priceY = iconY + iconH - priceH; // 底部对齐相当于
priceY + priceH = iconY + iconH;

self.price_Lab.frame = CGRectMake(priceX, priceY,
priceW, priceH);

 4.购买人数: 底部和价格对齐,左边距离价格10,右边10,高13,

CGFloat

buyCountX = priceX + priceW + margin; // priceX +
priceW +

CGFloat

buyCountW = self.bounds.size.width - 10 -
buyCountX; // buyCountX + buyCountW = cellW - 10;

CGFloat

buyCountH = 13;

CGFloat buyCountY = priceY + priceH - buyCountH; // 底部对齐相当于 priceY + priceH = buyCountY + buyCountH;

self.buyCount_Lab.frame = CGRectMake(buyCountX,
buyCountY, buyCountW, buyCountH);

}

frameFun补充

在调用完layoutSubview,约束才会布局

当强制布局后,子控件的约束就变成frame了

NSLog(@"cellH = %.f", CGRectGetHeight(self.bounds));

NSLog(@"maxXoficon = %.f", CGRectGetMaxY(self.icon_Ima.frame));

等高cell--Mansonry

等高Cell-Mansonry框架

  • 引入Mansonry

define
this constant if you want to use Masonry without the 'mas_' prefix

define

MAS_SHORTHAND

define
this constant if you want to enable auto-boxing for default syntax

define

MAS_SHORTHAND_GLOBALS

import "Masonry.h"

  • 删除layoutSubViews代码
  • 在init方法中写mansonry代码添加约束

等高cell-xib

  • 复制等高cell-mansonry

  • 删掉初始化方法

  • 创建xib文件:文件名是XMGTgCell

  • 拖入tableViewCell视图,并添加子视图和约束
  • 修改类名
  • 确定重用标识

  • 为4个属性添加IBOutlet

  • 不分屏,点击cell直接拖线

  • 修改cell为空时候的创建方式

等高cell:

等高cell-storyboard

  • 步骤与xib基本相同

  • 不必用代码拿cell

  • (UITableViewCell
    *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath
    *)indexPath

{

if (indexPath.row != 0) {

     1.获取cell

XMGTgCell *cell = [XMGTgCell cellWithTableView:tableView];

     2.覆盖数据

cell.tg = self.tgs[indexPath.row];

     3.返回cell

return cell;

}else

{

可以通过第0行的特殊cell来满足/ 代替 表头视图

return [tableView
dequeueReusableCellWithIdentifier:@"testID"];

}

}

静态单元格

staticCells静态单元格

一般的死数据界面都可以用静态cell

  • 例如:微信的发现 / 我两个界面,iPhone的 设置界面

  • 样式都是group样式

  • 调整组间距的方法有两种:

  • 1.设置组头/尾 为@" "这种空字符串

  • 2.添加没有cell的section

  • 自定义静态cell需要注意:

  • 拖线需要先写代码,在通过代码拖

  • 也可以通过tag获取子控件操作

[self viewWithTag:22];

customSeparator自定义分割线

系统自带的分割线不能满足产品需求

  • 设置cell不同的背景色

  • 自定义分割线

  • 删除原有的分割线

  • 1.设置tableView.separatorStyle为none

  • 2.设置分割线颜色为clearColor(不建议cell中不要使用clearColor)

  • 添加一个view,高度为1,背景色设置成分割线颜色,贴底

设置分割线颜色为透明色

warning 在cell中,尽量不要使用透明色

self.tableView.separatorColor = [UIColor
clearColor];

设置分割线样式为None

self.tableView.separatorStyle =
UITableViewCellSeparatorStyleNone;

另一种自定义分割线的方法

设置好子控件以后会自动调用这个方法

  • (void)awakeFromNib

{

 另一种快速设置cell分割线的土方法

self.layer.borderColor = [UIColor colorWithRed:0.5
green:0.5 blue:0.5 alpha:0.3].CGColor;

self.layer.borderWidth = 0.5;

}

通过代码自定义分割线与添加子控件一样

  • 在initWithStyle方法中添加

  • 在layoutSubView是方法中布局

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 218,036评论 6赞 506
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 93,046评论 3赞 395
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 164,411评论 0赞 354
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,622评论 1赞 293
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,661评论 6赞 392
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,521评论 1赞 304
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,288评论 3赞 418
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 39,200评论 0赞 276
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,644评论 1赞 314
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,837评论 3赞 336
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,953评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,673评论 5赞 346
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,281评论 3赞 329
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,889评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,011评论 1赞 269
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 48,119评论 3赞 370
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,901评论 2赞 355

推荐阅读更多精彩内容