基础 (十六) : 等高cell

2016-08-18 本文已影响74人 JonesCxy

等高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是方法中布局

基础 (十六) : 等高cell

warning 别把父类改成了UITableViewController💣

warning

subViews添加子控件

等高Cell-Mansonry框架

define

define

等高cell-xib

猜你喜欢

热点阅读