zoukankan      html  css  js  c++  java
  • 自己定义UITableViewCell新浪微博

    自己定义UITableViewCell新浪微博

    自己定义UITableViewCell的步骤:

    1.新建一个继承自UITableViewCell的类

    2.重写initWithStyle:reuseIdentifier:方法
    加入全部须要显示的子控件(不须要设置子控件的数据和frame,  子控件要加入到contentView)
    进行子控件一次性的属性设置(有些属性仅仅须要设置一次比方字体固定的图片)

    3.提供2个模型
    数据模型存放文字数据图片数据
    frame
    模型存放数据模型全部子控件的framecell的高度

    4.cell拥有一个frame模型(不要直接拥有数据模型)

    5.重写frame模型属性的setter方法在这种方法中设置子控件的显示数据和frame

    6.frame模型数据的初始化已经採取懒载入的方式(每个cell相应的frame模型数据仅仅载入一次)

    步骤一:依据plist文件,创建Model层数据。

    @property (nonatomic,copyNSString *text;// 正文
    @property (nonatomic,copyNSString *icon;// 头像
    @property (nonatomic,copyNSString *picture;// 图片
    @property (nonatomic,copyNSString *name;// name
    @property (nonatomic,assignBOOL vip;// vip

    + (
    instancetype)weiboWithDict:(NSDictionary *)dict;
    - (
    instancetype)initWithDict:(NSDictionary *)dict;
    + (NSArray *)weibos;

    - (instancetype)initWithDict:(NSDictionary *)dict
    {
       
    if (self = [super init]) {
            [
    self setValuesForKeysWithDictionary:dict];
        }
       
    return self;
    }

    + (
    instancetype)weiboWithDict:(NSDictionary *)dict
    {
       
    return [[self alloc] initWithDict:dict];
    }

    + (NSArray *)weibos
    {
       
    NSArray *array = [NSArray arrayWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"statuses.plist" ofType:nil]];
       
       
    NSMutableArray *arrayM = [NSMutableArray array];
       
    for (NSDictionary *dict in array) {
            [arrayM
    addObject:[self statusWithDict:dict]];
        }
       
    return arrayM;
    }

    步骤二:实现数据源方法,查看数据能否显示出来。

    - (NSArray *)weibos
    {
       
    if (_weibos == nil) {
           
    _weibos = [SUNWeiboItem weibos];
        }
       
    return _weibos;
    }

    #pragma mark - 数据源方法
    - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
    {
       
    return self.statuses.count;
    }

    - (
    UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
    {
       
    static NSString *ID = @"cell";
       
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];
       
    if (cell == nil) {
            cell = [[
    UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:ID];
        }
       
    SUNWeiboItem *weiboItem = self.statuses[indexPath.row];
        cell.
    textLabel.text = weiboItem.name;
       
    return cell;
    }


    步骤三:创建自己定义SUNWeiboCell继承自UITableViewCell,依据需求。确定控件。并定义属性。

    @property (nonatomic, strong) UIImageView *iconView;
    @property (nonatomic, strong) UILabel *nameView;
    @property (nonatomic, strong) UIImageView *vipView;
    @property (nonatomic, strong) UILabel *textView;
    @property (nonatomic, strong) UIImageView *pictureView;

    步骤四、getter方法完毕控件的实例化,仅仅创建并加入到contentView。不处理位置。

    /** 姓名字体 */
    #define kNameFont   [UIFont systemFontOfSize:14]
    /** 正文字体 */
    #define kTextFont   [UIFont systemFontOfSize:16]
    - (UIImageView *)iconView
    {
       
    if (_iconView == nil) {
           
    _iconView = [[UIImageView alloc] init];
            [
    self.contentView addSubview:_iconView];
        }
       
    return _iconView;
    }

    - (
    UILabel *)nameView
    {
       
    if (_nameView == nil) {
           
    _nameView = [[UILabel alloc] init];
           
    // 默认字体是17
           
    _nameView.font = kNameFont;
            [
    self.contentView addSubview:_nameView];
        }
       
    return _nameView;
    }
    注意:
    UILabel中默认的字体是17号。

    - (
    UIImageView *)vipView
    {
       
    if (_vipView == nil) {
           
    _vipView = [[UIImageView alloc] init];
           
    _vipView.image = [UIImage imageNamed:@"vip"];
           
    _vipView.hidden = YES;
            [
    self.contentView addSubview:_vipView];
        }
       
    return _vipView;
    }

    - (
    UILabel *)textView
    {
       
    if (_textView == nil) {
           
    _textView = [[UILabel alloc] init];
           
    _textView.font = kTextFont;
           
    _textView.numberOfLines = 0;
            [
    self.contentView addSubview:_textView];
        }
       
    return _textView;
    }
    注意:
    numberOfLines属性是换行的意思。
    - (
    UIImageView *)pictureView
    {
       
    if (_pictureView == nil) {
           
    _pictureView = [[UIImageView alloc] init];
            [
    self.contentView addSubview:_pictureView];
        }
       
    return _pictureView;
    }

    步骤五:在自己定义cell里面。定义一个模型属性,通过setter方法,设置cell的显示。
    @property (nonatomic,strong) SUNWeiboItem *weiboItem;
    - (void)setWeiboItem:(SUNWeiboItem *)weiboItem
    {
       
    _weiboItem = weiboItem;
       
    // 1> 设置数据
        [
    self settingData];
       
       
    // 2> 设置位置
        [
    self settingFrame];
    }

    注意:
    在主方法中。代码不宜过长。
    /** 设置数据 */
    - (
    void)settingData
    {
       
    // 头像
       
    self.iconView.image = [UIImage imageNamed:self.weiboItem.icon];
       
    // 姓名
       
    self.nameView.text = self.weiboItem.name;
       
    // vip(可选的)
       
    if (self.weiboItem.vip) {
           
    self.vipView.hidden = NO;
           
    self.nameView.textColor = [UIColor redColor];
        }
    else {
           
    self.vipView.hidden = YES;
           
    self.nameView.textColor = [UIColor blackColor];
        }
       
       
    // 正文
       
    self.textView.text = self.weiboItem.text;
       
       
    // 配图(可选參数)
       
    if (self.weiboItem.picture.length > 0) {
           
    self.pictureView.hidden = NO;
           
    self.pictureView.image = [UIImage imageNamed:self.weiboItem.picture];
        }
    else {
           
    self.pictureView.hidden = YES;
        }
    }
    /** 设置位置 */
    - (
    void)settingFrame
    {
       
    // 0. 定义间距
       
    CGFloat padding = 10;
       
       
    // 1. 头像
       
    CGFloat iconX = padding;
       
    CGFloat iconY = padding;
       
    CGFloat iconW = 30;
       
    CGFloat iconH = 30;
       
    self.iconView.frame = CGRectMake(iconX, iconY, iconW, iconH);
       
       
    // 2. 姓名大小由文字的长度来决定
       
    NSDictionary *nameDict = @{NSFontAttributeName: kNameFont};
       
    CGRect nameFrame = [ weiboItem.name boundingRectWithSize:CGSizeMake(MAXFLOAT, MAXFLOAT) options:NSStringDrawingUsesLineFragmentOrigin attributes:nameDict context:nil];
        nameFrame.
    origin.x = CGRectGetMaxX(self.iconView.frame) + padding;
        nameFrame.
    origin.y = padding + (self.iconView.bounds.size.height - nameFrame.size.height) * 0.5;
       
    self.nameView.frame = nameFrame;
        注意:
        文字的大小。最好和vip图标的宽度一致,这样比較easy计算出vip的位置。
       
    // vip图标
       
    CGFloat vipX = CGRectGetMaxX(self.nameView.frame) + padding;
       
    CGFloat vipY = self.nameView.frame.origin.y;
       
    CGFloat vipW = 14;
       
    CGFloat vipH = 14;
       
    self.vipView.frame = CGRectMake(vipX, vipY, vipW, vipH);
       
       
    // 正文
       
    NSDictionary *textDict = @{NSFontAttributeName: kTextFont};
       
    CGRect textFrame = [ weiboItem.text boundingRectWithSize:CGSizeMake(300, MAXFLOAT) options:NSStringDrawingUsesLineFragmentOrigin attributes:textDict context:nil];
        textFrame.
    origin.x = padding;
        textFrame.
    origin.y = CGRectGetMaxY(self.iconView.frame) + padding;
       
    self.textView.frame = textFrame;
        注意:
        boundingRectWithSize属性,假设文字不换行的话。能够设置为CGSizeMake(MAXFLOATMAXFLOAT)。假设文字须要换行的话。须要指定宽度,即CGSizeMake(300MAXFLOAT)。


       
    CGFloat cellHeight;
       
       
    if ( weiboItem.picture.length > 0) {
           
    // 配图
           
    CGFloat pictureX = padding;
           
    CGFloat pictureY = CGRectGetMaxY(textFrame) + padding;
           
    CGFloat pictureW = 100;
           
    CGFloat pictureH = 100;
           
    self.pictureView.frame = CGRectMake(pictureX, pictureY, pictureW, pictureH);

            注意:
            一般在自己定义表格中的配图的宽度和高度是固定死的。这样easy计算配图的位置。        
            cellHeight = CGRectGetMaxY(self.pictureView.frame) + padding;
        }
    else {
            cellHeight =
    CGRectGetMaxY(self.textView.frame) + padding;
        }
    }

    注意:
    1.boundingRectWithSize计算给定文本字符串所占的区域返回值是一个x,y = 0CGRect,w,h是计算好的宽高。
    2.假设要计算多行的准确高度,须要传入NSStringDrawingUsesLineFragmentOrigin选项。
    3.attributes属性用于指定字体的相关属性的字典。UIKit框架中的第一个头文件。
    4.context: nil

    步骤六、在控制器实现UITableView的代理方法调整为
    #pragma mark - 数据源方法
    - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
    {
        
    return self.statuses.count;
    }
    - (
    UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
    {
        NSLog(@“222222222222222222");
        
    static NSString *ID = @"cell";
        
    SUNWeiboCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];
        
    if (cell == nil) {
            cell = [[
    SUNWeiboCell allocinitWithStyle:UITableViewCellStyleDefault reuseIdentifier:ID];
        }
        cell.
    weiboItem = self.statuses[indexPath.row];
        
    return cell;
    }

    /** 计算单元格行高 */
    - (
    CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
    {

       
    NSLog(@"111111111111111111111");
       
    return 200;
    }


    问题分析:
    1.在载入表格数据调用此方法前- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath,会首先调用- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath方法计算全部单元格的高度,而此时单元格尚未被实例化。
    2.因此获取每一行的高度,不能直接从cell对象中获取,由于那时候还没创建cell对象,因此我们须要另外创建一个模型。用来管理cell内部全部子控件的framecell的总高度。

    解决思路:既然"单元格的行高是通过模型的实际内容计算的。
    那么,在载入数据模型时,应该就能够准确地计算出每一行的准确行高了。

    解决的方法:创建
    SUNWeiboFrameItem 模型,专门处理行高的计算。

    步骤七、创建SUNWeiboFrameItem模型,专门处理行高的计算。

    /** 专门计算全部控件位置 */
    @interface SUNWeiboFrameItem : NSObject

    @property (nonatomic,assign) CGRect iconImageViewF;// 头像View
    @property (nonatomic,assign) CGRect titleLabelF;// nameView
    @property (nonatomic,assign) CGRect pictureImageF;// 图片View
    @property (nonatomic,assign) CGRect zwLabelF;// 正文Label
    @property (nonatomic,assign) CGRect vipImageViewF;// vip

    /** 行高 */
    @property (nonatomic, assign) CGFloat cellHeight;
    /** 全部控件的尺寸都能够通过Status来计算得出 */
    @property (nonatomic,strong) SUNWeiboItem *weiboItem;

    + (
    NSArray *)weiboFrames;
    @end
    注意:创建 SUNWeiboFrameItem模型,通setter方法计算行高。

    - (void)setWeiboItem:(SUNWeiboItem *)weiboItem
    {
       
    _weiboItem = weiboItem;
       
    // 0. 定义间距
       
    CGFloat padding = 10;
       
       
    // 1. 头像
       
    CGFloat iconX = padding;
       
    CGFloat iconY = padding;
       
    CGFloat iconW = 30;
       
    CGFloat iconH = 30;
       
    self.iconImageViewF = CGRectMake(iconX, iconY, iconW, iconH);
       
       
    // 2. 姓名大小由文字的长度来决定
       
    NSDictionary *nameDict = @{NSFontAttributeName: kNameFont};
       
    CGRect nameFrame = [self.weiboItem.name boundingRectWithSize:CGSizeMake(MAXFLOAT, MAXFLOAT) options:NSStringDrawingUsesLineFragmentOrigin attributes:nameDict context:nil];
        nameFrame.
    origin.x = CGRectGetMaxX(self.iconImageViewF) + padding;
        nameFrame.
    origin.y = padding + (self.iconImageViewF.size.height - nameFrame.size.height) * 0.5;
       
    self.titleLabelF = nameFrame;
       
       
    // vip图标
       
    CGFloat vipX = CGRectGetMaxX(self.titleLabelF) + padding;
       
    CGFloat vipY = self.titleLabelF.origin.y;
       
    CGFloat vipW = 14;
       
    CGFloat vipH = 14;
       
    self.vipImageViewF = CGRectMake(vipX, vipY, vipW, vipH);
       
       
    // 正文
       
    NSDictionary *textDict = @{NSFontAttributeName: kTextFont};
       
    CGRect textFrame = [self.weiboItem.text boundingRectWithSize:CGSizeMake(300, MAXFLOAT) options:NSStringDrawingUsesLineFragmentOrigin attributes:textDict context:nil];
        textFrame.
    origin.x = padding;
        textFrame.
    origin.y = CGRectGetMaxY(self.iconImageViewF) + padding;
       
    self.zwLabelF = textFrame;
       
       
    if (self.weiboItem.picture.length > 0) {
           
    // 配图
           
    CGFloat pictureX = padding;
           
    CGFloat pictureY = CGRectGetMaxY(textFrame) + padding;
           
    CGFloat pictureW = 100;
           
    CGFloat pictureH = 100;
           
    self.pictureImageF = CGRectMake(pictureX, pictureY, pictureW, pictureH);
           
           
    self.cellHeight = CGRectGetMaxY(self.pictureImageF) + padding;
        }
    else {
           
    self.cellHeight = CGRectGetMaxY(self.zwLabelF) + padding;
        }
    }

    + (NSArray *)weiboFrames
    {
       
    NSString *filePath = [[NSBundle mainBundle] pathForResource:@"statuses.plist" ofType:nil];
       
    NSArray *array = [NSArray arrayWithContentsOfFile:filePath];
       
       
    NSMutableArray *arrayM = [NSMutableArray array];
       
    for (NSDictionary *dict in array) {
           
    SUNWeiboFrameItem *weiboFrameItem = [[SUNWeiboFrameItem alloc] init];
            weiboFrameItem.
    weiboItem = [SUNWeiboItem weiboWithDict:dict];
            [arrayM
    addObject:weiboFrameItem];
        }
       
    return arrayM;
    }


    注意:
    全部的单元格控件的计算都是反复的,并且每次表格滚动,设置内容都会又一次计算。
    解决问题:
    SUNWeiboFrameItem模型中,已经包括了 weiboItem属性。
    眼下控制器中的数组保存的是 weiboItem模型,将 weiboItem模型替换为SUNWeiboFrameItem模型{weiboItem,全部控件的位置},相同具有weiboItem模型。

    步骤八、重构调整SUNWeiboItemSUNWeiboFrameItem
    SUNWeiboItem模型中删除weibos数组。

    SUNWeiboFrameItem加入weiboFrames数组。

    步骤九、重构控制器实现UITableView的代理方法调整为
    - (NSArray *)weiboFrames
    {
       
    if (_weiboFrames == nil) {
           
    _weiboFrames = [SUNWeiboFrameItem weiboFrames];
        }
       
    return _weiboFrames;
    }

    注意:
    weiboFrames数组要改变成SUNWeiboFrameItem的模型数据。
    #pragma mark - 数据源方法
    - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
    {
       
    return self.weiboFrames.count;
    }

    - (
    UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
    {
       
    static NSString *ID = @"cell";
       
    SUNWeiboCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];
       
    if (cell == nil) {
            cell = [[
    SUNWeiboCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:ID];
        }
       
    SUNWeiboFrameItem *weiboFrameItem = self.weiboFrames[indexPath.row];
        cell.
    weiboItem = weiboFrameItem.weiboItem;
       
    return cell;
    }

    /** 计算单元格行高 */
    - (
    CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
    {
       
    NSLog(@"111111111111111111111");
       
    SUNWeiboFrameItem *weiboFrameItem = self.weiboFrames[indexPath.row];
       
    return weiboFrameItem.cellHeight;
    }

    问题分析:
    cell中的控件的位置计算。依旧是自己计算的。
    解决的方法:将cell中的status替换为statusFrame就能够拿到控件位置。


    步骤十、重构自己定义SUNWeiboCell。将SUNWeiboItem模型数据替换为SUNWeiboFrameItem模型数据。
    @property (nonatomic,strong) SUNWeiboItem *weiboItem;

    - (void)setWeiboFrameItem:(SUNWeiboFrameItem *)weiboFrameItem
    {
       
    _weiboFrameItem = weiboFrameItem;
       
    // 1> 设置数据
        [
    self settingData];
       
       
    // 2> 设置位置
        [
    self settingFrame];
    }


    /** 设置数据 */
    - (
    void)settingData
    {
       
    SUNWeiboItem *weiboItem = self.weiboFrameItem.weiboItem;
       
    // 头像
       
    self.iconView.image = [UIImage imageNamed:weiboItem.icon];
       
    // 姓名
       
    self.nameView.text = weiboItem.name;
       
    // vip(可选的)
       
    if (weiboItem.vip) {
           
    self.vipView.hidden = NO;
           
    self.nameView.textColor = [UIColor redColor];
        }
    else {
           
    self.vipView.hidden = YES;
           
    self.nameView.textColor = [UIColor blackColor];
        }
       
       
    // 正文
       
    self.textView.text = weiboItem.text;
       
       
    // 配图(可选參数)
       
    // imageNamed:nil CUICatalog: Invalid asset name supplied: (null), or invalid scale factor: 2.000000
       
    if (weiboItem.picture.length > 0) {
           
    self.pictureView.hidden = NO;
           
    self.pictureView.image = [UIImage imageNamed:weiboItem.picture];
        }
    else {
           
    self.pictureView.hidden = YES;
        }
    }

    /** 设置位置 */
    - (
    void)settingFrame
    {
       
    self.iconView.frame = self.weiboFrameItem.iconImageViewF;
       
       
    // 2. 姓名大小由文字的长度来决定
       
    self.nameView.frame = self.weiboFrameItem.titleLabelF;
       
       
    // vip图标
       
    self.vipView.frame = self.weiboFrameItem.vipImageViewF;
       
       
    // 正文
       
    self.textView.frame = self.weiboFrameItem.zwLabelF;
       
       
    if (self.weiboFrameItem.weiboItem.picture.length > 0) {
           
    // 配图
           
    self.pictureView.frame = self.weiboFrameItem.pictureImageF;
        }
    }


    步骤十一、重构控制器实现UITableView的代理方法调整为
    - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
    {
       
    static NSString *ID = @"cell";
       
    SUNWeiboCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];
       
    if (cell == nil) {
            cell = [[
    SUNWeiboCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:ID];
        }
        cell.
    weiboFrameItem = self.weiboFrames[indexPath.row];
       
    return cell;
    }

  • 相关阅读:
    linux磁盘挂载
    3个方法解决百度网盘限速 (2018-07-20)
    mysql状态分析之show global status
    Cgroups子系统介绍
    Go语言 关键字:defer
    Go语言 map的实现
    Go语言 基本类型
    MySQL 监控指标
    sshpass的使用方法
    C++11 std::ref使用场景
  • 原文地址:https://www.cnblogs.com/wgwyanfs/p/6897251.html
Copyright © 2011-2022 走看看