美文网首页iOS Developer
基础 (十六) : 等高cell

基础 (十六) : 等高cell

作者: JonesCxy | 来源:发表于2016-08-18 09:46 被阅读74次

等高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

    等高Cell-frame: 等高Cell-frame 知识回顾 拖入plist文件以及图片 1.(tableVie...

  • 等高Cell

    一、自定义Cell1、等高cell 代码 很古老的方法： 利用autoLayout xib加载xib要通过手动加载...

  • 不等高cell自定义的思路精髓

    ## 精华界面不等高cell的搭建 1 . 精华界面搭建，tableview展示数据； 不等高cell（复杂界面）...

  • 自定义不等高cell

    自定义不等高cell 自定义不等高cell（纯代码） 给模型增加frame数据 所有子控件的frame cell...

  • 巧用AutoLayout自动计算cell高度

    cell的高度 cell的高度可以简单分为等高和不等高两大类。等高的情况不用多说，直接设置表视图的cellHeig...

  • cell的等高与不等高

    自定义等高的cell 等高的cell 所有cell的高度是一样的 纯代码创建 frame 1,新建一个继承自UIT...

  • 自定义等高的cell

    自定义等高的cell 等高的cell 所有cell的高度是一样的 纯代码创建 frame 1,新建一个继承自UIT...

  • day10-UITableView-自定不等高的cell-sto

    自定不等高的cell-storyboard版 01-无配图自定不等高的cell-storyboard版 02-有配...

  • 不等高Cell

    计算字符串一行的高度 计算字符串多行的高度

  • 不等高cell

    纯代码创建 frame 一.给模型增加frame数据 所有子控件的frame cell的高度 二.重写模型cell...

网友评论

    本文标题：基础 (十六) : 等高cell

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

    延伸阅读

    深度阅读

    • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

    栏目导航

    热点阅读

    iOS Developer

    关于我们|服务条款|联系我们|基础 (十六) : 等高cell|投稿指南|网站地图|RSS订阅|排版工具|手机版

    提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

    Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

    备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

    本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

    所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！