美文网首页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

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

        延伸阅读

        深度阅读

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

        栏目导航

        热点阅读

        iOS Developer

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

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

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

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

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

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