iOS中的UITableView自定义Cell（模仿新浪微博）

最新推荐文章于 2020-11-15 15:13:40 发布

weixin_34344403

最新推荐文章于 2020-11-15 15:13:40 发布

阅读量177

点赞数

原文链接：https://my.oschina.net/LBBB/blog/680044

版权

2019独角兽企业重金招聘Python工程师标准>>>

定义一个KCStatusTableViewCell实现UITableViewCell，一般实现自定义UITableViewCell需要分为两步：第一初始化控件；第二设置数据，重新设置控件frame。原因就是自定义Cell一般无法固定高度，很多时候高度需要随着内容改变。此外由于在单元格内部是无法控制单元格高度的，因此一般会定义一个高度属性用于在UITableView的代理事件中设置每个单元格高度。

首先看一下微博模型KCStatus,这个模型主要的方法就是根据plist字典内容生成微博对象:

KCStatus.h

#import <Foundation/Foundation.h>

//微博模型KCStatus,这个模型主要的方法就是根据plist字典内容生成微博对象:

@interface KCStatus : NSObject

#pragma mark - 属性
@property (nonatomic,assign) long long Id;//微博ID
@property (nonatomic,copy) NSString *profileImageUrl;//用户头像
@property (nonatomic,copy) NSString *userName;//用户名称
@property (nonatomic,copy) NSString *mbtype;//会员类型
@property (nonatomic,copy) NSString *createdAt;//创建时间
@property (nonatomic,copy) NSString *source;//设备来源
@property (nonatomic,copy) NSString *text;//微博内容

#pragma mark - 方法
#pragma mark 根据字典初始化微博对象
-(KCStatus *)initWithDictionary:(NSDictionary *)dic;

#pragma mark 初始化微博对象(静态方法)
+(KCStatus *)statusWithDictionary:(NSDictionary *)dic;

@end

KCStatus.m

#import "KCStatus.h"

@implementation KCStatus

#pragma mark 根据字典初始化微博对象
-(KCStatus *)initWithDictionary:(NSDictionary *)dic{
    
    if (self = [super init]) {
        
        self.Id = [dic[@"id"] longLongValue];
        self.profileImageUrl = dic[@"profileImageUrl"];
        self.userName = dic[@"userName"];
        self.mbtype = dic[@"mbtype"];
        self.createdAt = dic[@"createdAt"];
        self.source = dic[@"source"];
        self.text = dic[@"text"];
        
    }
    
    return self;

}


#pragma mark 初始化微博对象(静态方法)
+(KCStatus *)statusWithDictionary:(NSDictionary *)dic{
    
    KCStatus *status = [[KCStatus alloc]initWithDictionary:dic];
    
    return status;
}


//使用 stringWithFormat 拼接设备来源
-(NSString *)source{
    return [NSString stringWithFormat:@"来自 %@", _source];
}


@end

然后看一下自定义的Cell

KCStatusTableViewCell.h

#import <UIKit/UIKit.h>
//#import "KCStatus.h"

// import会包含这个类的所有信息，包括实体变量和方法，而@class只是告诉编译器，其后面声明的名称是类的名称，至于这些类是如何定义的，暂时不用考虑，后面会再告诉你。
@class KCStatus;


//自定义的cell
@interface KCStatusTableViewCell : UITableViewCell

#pragma mark 微博对象
@property (nonatomic, strong) KCStatus *status;

#pragma mark 单元格高度
@property (assign, nonatomic) CGFloat height;


@end

KCStatusTableViewCell.m

#import "KCStatusTableViewCell.h"
#import "KCStatus.h"

#define KCColor(r,g,b) [UIColor colorWithHue:r/255.0 saturation:g/255.0 brightness:b/255.0 alpha:1] //颜色宏定义
#define kStatusTableViewCellControlSpacing 10 //控件间距
#define kStatusTableViewCellBackgroundColor KCColor(251,251,251)
#define kStatusGrayColor KCColor(50,50,50)
#define kStatusLightGrayColor KCColor(120,120,120)

#define kStatusTableViewCellAvatarWidth 40 //头像宽度
#define kStatusTableViewCellAvatarHeight kStatusTableViewCellAvatarWidth
#define kStatusTableViewCellUserNameFontSize 14
#define kStatusTableViewCellMbTypeWidth 13 //会员图标宽度
#define kStatusTableViewCellMbTypeHeight kStatusTableViewCellMbTypeWidth
#define kStatusTableViewCellCreateAtFontSize 12
#define kStatusTableViewCellSourceFontSize 12
#define kStatusTableViewCellTextFontSize 14



@interface KCStatusTableViewCell(){
    
    UIImageView *cellAvatar;//用户头像
    UIImageView *cellMbType;//会员类型
    UILabel *cellUserName;//用户名称
    UILabel *cellCreateAt;//创建时间
    UILabel *cellSource;//设备来源
    UILabel *cellText;//微博内容

}

@end

@implementation KCStatusTableViewCell


-(instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier{
    
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    if (self) {
        [self initSubView];
    }
    
    return self;

}


#pragma mark 初始化视图
-(void)initSubView{
    
    
    //头像控件
    cellAvatar = [[UIImageView alloc]init];
    [self.contentView addSubview:cellAvatar];
    
    //用户名
    cellUserName = [[UILabel alloc]init];
    cellUserName.textColor = kStatusGrayColor;
    cellUserName.font = [UIFont systemFontOfSize:kStatusTableViewCellUserNameFontSize];
    [self.contentView addSubview:cellUserName];
    
    //会员类型
    cellMbType = [[UIImageView alloc]init];
    [self.contentView addSubview:cellMbType];
    
    //日期
    cellCreateAt = [[UILabel alloc]init];
    cellCreateAt.textColor = kStatusLightGrayColor;
    cellCreateAt.font = [UIFont systemFontOfSize:kStatusTableViewCellCreateAtFontSize];
    [self.contentView addSubview:cellCreateAt];
    
    //设备
    cellSource = [[UILabel alloc]init];
    cellSource.textColor = kStatusLightGrayColor;
    cellSource.font = [UIFont systemFontOfSize:kStatusTableViewCellSourceFontSize];
    [self.contentView addSubview:cellSource];
    
    //内容
    cellText = [[UILabel alloc]init];
    cellText.textColor = kStatusGrayColor;
    cellText.font = [UIFont systemFontOfSize:kStatusTableViewCellTextFontSize];
    cellText.numberOfLines=0;
    //    cellText.lineBreakMode=NSLineBreakByWordWrapping;
    [self.contentView addSubview:cellText];

}


#pragma mark 设置微博
-(void)setStatus:(KCStatus *)status{
    
    //设置头像大小和位置
    CGFloat avatarX=10,avatarY=10;
    CGRect avatarRect=CGRectMake(avatarX, avatarY, kStatusTableViewCellAvatarWidth, kStatusTableViewCellAvatarHeight);
    cellAvatar.image=[UIImage imageNamed:status.profileImageUrl];
    cellAvatar.frame=avatarRect;
    
    
    //设置会员图标大小和位置
    CGFloat userNameX= CGRectGetMaxX(cellAvatar.frame)+kStatusTableViewCellControlSpacing ;
    CGFloat userNameY=avatarY;
    //根据文本内容取得文本占用空间大小
    CGSize userNameSize=[status.userName sizeWithAttributes:@{NSFontAttributeName: [UIFont systemFontOfSize:kStatusTableViewCellUserNameFontSize]}];
    CGRect userNameRect=CGRectMake(userNameX, userNameY, userNameSize.width,userNameSize.height);
    cellUserName.text=status.userName;
    cellUserName.frame=userNameRect;
    
    
    //设置会员图标大小和位置
    CGFloat mbTypeX=CGRectGetMaxX(cellUserName.frame)+kStatusTableViewCellControlSpacing;
    CGFloat mbTypeY=avatarY;
    CGRect mbTypeRect=CGRectMake(mbTypeX, mbTypeY, kStatusTableViewCellMbTypeWidth, kStatusTableViewCellMbTypeHeight);
    cellMbType.image=[UIImage imageNamed:status.mbtype];
    cellMbType.frame=mbTypeRect;
    
    
    //设置发布日期大小和位置
    CGSize createAtSize=[status.createdAt sizeWithAttributes:@{NSFontAttributeName:[UIFont systemFontOfSize:kStatusTableViewCellCreateAtFontSize]}];
    CGFloat createAtX=userNameX;
    CGFloat createAtY=CGRectGetMaxY(cellAvatar.frame)-createAtSize.height;
    CGRect createAtRect=CGRectMake(createAtX, createAtY, createAtSize.width, createAtSize.height);
    cellCreateAt.text=status.createdAt;
    cellCreateAt.frame=createAtRect;
    
    
    //设置设备信息大小和位置
    CGSize sourceSize=[status.source sizeWithAttributes:@{NSFontAttributeName:[UIFont systemFontOfSize:kStatusTableViewCellSourceFontSize]}];
    CGFloat sourceX=CGRectGetMaxX(cellCreateAt.frame)+kStatusTableViewCellControlSpacing;
    CGFloat sourceY=createAtY;
    CGRect sourceRect=CGRectMake(sourceX, sourceY, sourceSize.width,sourceSize.height);
    cellSource.text=status.source;
    cellSource.frame=sourceRect;
    
    
    //设置微博内容大小和位置
    CGFloat textX=avatarX;
    CGFloat textY=CGRectGetMaxY(cellAvatar.frame)+kStatusTableViewCellControlSpacing;
    CGFloat textWidth=self.frame.size.width-kStatusTableViewCellControlSpacing*2;
    CGSize textSize=[status.text boundingRectWithSize:CGSizeMake(textWidth, MAXFLOAT) options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName: [UIFont systemFontOfSize:kStatusTableViewCellTextFontSize]} context:nil].size;
    CGRect textRect=CGRectMake(textX, textY, textSize.width, textSize.height);
    cellText.text=status.text;
    cellText.frame=textRect;
    
    _height=CGRectGetMaxY(cellText.frame)+kStatusTableViewCellControlSpacing;

    
}






- (void)awakeFromNib {
    // Initialization code
}



#pragma mark 重写选择事件，取消选中
- (void)setSelected:(BOOL)selected animated:(BOOL)animated {
    [super setSelected:selected animated:animated];

    // Configure the view for the selected state
}

@end

这是我们自定义Cell这个例子的核心，自定义Cell分为两个步骤：首先要进行各种控件的初始化工作，这个过程中只要将控件放到Cell的View中同时设置控件显示内容的格式（字体大小、颜色等）即可；然后在数据对象设置方法中进行各个控件的布局（大小、位置）。在代码中有几点需要重点提示大家：

对于单行文本数据的显示调用- (CGSize)sizeWithAttributes:(NSDictionary *)attrs;方法来得到文本宽度和高度。
对于多行文本数据的显示调用- (CGRect)boundingRectWithSize:(CGSize)size options:(NSStringDrawingOptions)options attributes:(NSDictionary *)attributes context:(NSStringDrawingContext *)context ;方法来得到文本宽度和高度；同时注意在此之前需要设置文本控件的numberOfLines属性为0。
通常我们会在自定义Cell中设置一个高度属性，用于外界方法调用，因为Cell内部设置Cell的高度是没有用的，UITableViewCell在初始化时会重新设置高度。

最后我们看一下自定义Cell的使用过程：

KCStatusViewController.h

#import <UIKit/UIKit.h>

@interface KCStatusViewController : UIViewController

@end

KCStatusViewController.m

#import "KCStatusViewController.h"
#import "KCStatus.h"
#import "KCStatusTableViewCell.h"



@interface KCStatusViewController ()<UITableViewDelegate,UITableViewDataSource,UIAlertViewDelegate>{
    
    UITableView *myTableView;
    NSMutableArray *statusArray;
    NSMutableArray *statusCellsArray;//存储cell，用于计算高度
 
}

@end

@implementation KCStatusViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    

    //初始化数据
    [self initData];
    
    //创建一个分组样式的UITableView
    myTableView = [[UITableView alloc]initWithFrame:self.view.bounds style:UITableViewStyleGrouped];
    
    //设置数据源，注意实现UITableViewDataSource协议
    myTableView.dataSource = self;
    //设置代理
    myTableView.delegate = self;

    [self.view addSubview:myTableView];
    
    
}


#pragma mark 加载数据
-(void)initData{
    
    NSString *path = [[NSBundle mainBundle] pathForResource:@"StatusInfo" ofType:@"plist"];
    NSArray *array = [NSArray arrayWithContentsOfFile:path];
    
    statusArray = [[NSMutableArray alloc]init];
    statusCellsArray = [[NSMutableArray alloc]init];
    
    [array enumerateObjectsUsingBlock:^(id  _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
        
        [statusArray addObject:[KCStatus statusWithDictionary:obj]];
        KCStatusTableViewCell *cell = [[KCStatusTableViewCell alloc]init];
        [statusCellsArray addObject:cell];
    
    }];
  
}


#pragma mark - 数据源方法

#pragma mark 返回分组数
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{
    
    return 1;
}


#pragma mark 返回每组行数
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    
    return statusArray.count;

}

#pragma mark 返回每行的单元格(cell上面展示的内容)
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    
    static NSString *cellIdentifier = @"UITableViewCellIdentifierKey1";
    KCStatusTableViewCell *cell;
    cell = [tableView dequeueReusableCellWithIdentifier:cellIdentifier];
    
    if (!cell) {
        
        cell = [[KCStatusTableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellIdentifier];

    }
    
    
    
    /**
     *  这个类中需要重点强调一下：Cell的高度需要重新设置（前面说过无论Cell内部设置多高都没有用，需要重新设置），这里采用的方法是首先创建对应的Cell，然后在- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath;方法中设置微博数据计算高度通知UITableView。
     */
    
    
    //在此设置微博，以便重新布局
    KCStatus *status = statusArray[indexPath.row];
    cell.status = status;
    return cell;
    
}


#pragma mark - 代理方法

#pragma mark 重新设置单元格高度
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
    
//    KCStatusTableViewCell *cell = [tableView cellForRowAtIndexPath:indexPath];
    KCStatusTableViewCell *cell = statusCellsArray[indexPath.row];
    cell.status = statusArray[indexPath.row];
    
    
    return cell.height;
  
}


#pragma mark 重写状态样式方法
-(UIStatusBarStyle)preferredStatusBarStyle{
    
    return UIStatusBarStyleLightContent;
    
}






- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

/*
#pragma mark - Navigation

// In a storyboard-based application, you will often want to do a little preparation before navigation
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
    // Get the new view controller using [segue destinationViewController].
    // Pass the selected object to the new view controller.
}
*/

@end

大神地址:http://www.cnblogs.com/kenshincui/

转载于:https://my.oschina.net/LBBB/blog/680044