UI基础之UITableView案例微博----自定义cell利用代码

第一步：创建微博模型，完成字典转模型

#import <Foundation/Foundation.h>
//#import <UIKit/UIKit.h>
/**
 *  第一步：创建微博模型，完成字典转模型
 */
@interface LLWeiBo : NSObject

/**
 *  icon
 */
@property (nonatomic, copy) NSString *icon;

/**
 *  name
 */
@property (nonatomic, copy) NSString *name;

/**
 *  vip
 */
@property (nonatomic, assign, getter=isVip) BOOL vip;

/**
 *  text
 */
@property (nonatomic, copy) NSString *text;

/**
 *  picture
 */
@property (nonatomic, copy) NSString *picture;

- (instancetype)initWithDic:(NSDictionary *)dic;
+ (instancetype)weiBoWithDic:(NSDictionary *)dic;

@end
#import "LLWeiBo.h"

@implementation LLWeiBo

- (instancetype)initWithDic:(NSDictionary *)dic
{
    if (self = [super init]) {

        [self setValuesForKeysWithDictionary:dic];
    }
    return self;
}

+ (instancetype)weiBoWithDic:(NSDictionary *)dic
{
    return [[self alloc] initWithDic:dic];
}

@end

第二步：确定cell的高度

#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>
#define NAMEFONT [UIFont systemFontOfSize:14]
#define TEXTFONT [UIFont systemFontOfSize:15]
@class LLWeiBo;
@interface LLWeiBoFrame : NSObject

@property (nonatomic, strong) LLWeiBo *weiBo;

@property (nonatomic, assign, readonly) CGRect iconF;

@property (nonatomic, assign, readonly) CGRect nameF;

@property (nonatomic, assign, readonly) CGRect vipF;

@property (nonatomic, assign, readonly) CGRect textF;

@property (nonatomic, assign, readonly) CGRect picF;

@property (nonatomic, assign, readonly) CGFloat cellHeight;

@end
#import "LLWeiBoFrame.h"
#import "LLWeiBo.h"
@implementation LLWeiBoFrame

- (void)setWeiBo:(LLWeiBo *)weiBo
{
    _weiBo = weiBo;
    CGFloat margin = 10.0;

    // 头像
    CGFloat iconX = margin;
    CGFloat iconY = margin;
    CGFloat iconHW = 30;
    _iconF = CGRectMake(iconX, iconY, iconHW, iconHW);

    /**
     *  设置到计算文字的size 与三个变量有关1，文字，2，字体，3，文字要显示最大size的限制
     */
    // 名称
    CGFloat nameX = CGRectGetMaxX(_iconF) + margin;
    CGSize nameSize = [self sizeOfText:self.weiBo.name Font:NAMEFONT MaxSize:CGSizeMake(MAXFLOAT, MAXFLOAT)];
    CGFloat nameY = (iconHW - nameSize.height) * 0.5 + iconY;
    _nameF = CGRectMake(nameX, nameY, nameSize.width, nameSize.height);

    // 会员
    CGFloat vipX = CGRectGetMaxX(_nameF) + margin;
    CGFloat vipY = nameY;
    CGFloat vipWH = 15;
    _vipF = CGRectMake(vipX, vipY, vipWH, vipWH);

    // 正文
    CGFloat textX = margin;
    CGFloat textY = CGRectGetMaxY(_iconF) + margin;
    CGSize  textSize = [self sizeOfText:self.weiBo.text Font:TEXTFONT MaxSize:CGSizeMake(300, MAXFLOAT)];
    _textF = CGRectMake(textX, textY, textSize.width, textSize.height);

    // 图片
    CGFloat picX = margin;
    CGFloat picY = CGRectGetMaxY(_textF) + margin;
    CGFloat picWH = 100;
    _picF = CGRectMake(picX, picY, picWH, picWH);

    if (self.weiBo.picture) {

        _cellHeight = CGRectGetMaxY(_picF) + margin;
    } else {
        _cellHeight = CGRectGetMaxY(_textF) + margin;
    }
}

#pragma mark - 计算文字size
- (CGSize)sizeOfText:(NSString *)text Font:(UIFont *)font MaxSize:(CGSize)maxSize
{
    NSDictionary *attrs = @{NSFontAttributeName : font };
    return [text boundingRectWithSize:maxSize options:NSStringDrawingUsesLineFragmentOrigin attributes:attrs context:nil].size;
}

@end

第3步：创建cell展示数据

#import <UIKit/UIKit.h>
@class LLWeiBoFrame;

@interface LLWeiBoCell : UITableViewCell

@property (nonatomic, strong) LLWeiBoFrame *weiBoFrame;

+ (instancetype)weiBoCell:(UITableView *)tableView;

@end
#import "LLWeiBoCell.h"
#import "LLWeiBoFrame.h"
#import "LLWeiBo.h"
@interface LLWeiBoCell ()

@property (nonatomic, weak) UIImageView *iconView;
@property (nonatomic, weak) UILabel *nameView;
@property (nonatomic, weak) UIImageView *vipView;
@property (nonatomic, weak) UILabel *textView;
@property (nonatomic, weak) UIImageView *picView;

@end

@implementation LLWeiBoCell

+ (instancetype)weiBoCell:(UITableView *)tableView
{
    static NSString *ID = @"weiBoCell";
    LLWeiBoCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];
    if (!cell) {

        /**
         cell如果不存在，我们自定义创建cell，或者通过storyboard创建，或者加载xib，这个我们自定义创建cell
         */
        cell = [[LLWeiBoCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:ID];
    }
    return cell;
}

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

        /**
         *  初始化cell创建cell的子控件
         */

        // 头像
        UIImageView *iconView = [[UIImageView alloc] init];
        [self.contentView addSubview:iconView];
        self.iconView = iconView;

        // 名称
        UILabel *nameView = [[UILabel alloc] init];
        [self.contentView addSubview:nameView];
        nameView.textColor = [UIColor blackColor];
        nameView.font = NAMEFONT;
        self.nameView = nameView;

        // 会员
        UIImageView *vipView = [[UIImageView alloc] init];
        [self.contentView addSubview:vipView];
        vipView.image = [UIImage imageNamed:@"vip"];
        self.vipView = vipView;

        // 正文
        UILabel *textView = [[UILabel alloc] init];
        [self.contentView addSubview:textView];
        textView.numberOfLines = 0;
        textView.font = TEXTFONT;
        self.textView = textView;

        // 图片
        UIImageView *picView = [[UIImageView alloc] init];
        [self.contentView addSubview:picView];
        self.picView = picView;

    }
    return self;
}

- (void)setWeiBoFrame:(LLWeiBoFrame *)weiBoFrame
{
    _weiBoFrame = weiBoFrame;
    // 1,设置cell子控件数据
    [self setSubviewsDate];
    // 2,设置cell子控件的frame
    [self setSubviewFrame];

}

- (void)setSubviewsDate
{
    LLWeiBo *weiBo = self.weiBoFrame.weiBo;
    self.iconView.image = [UIImage imageNamed:weiBo.icon];
    self.nameView.text = weiBo.name;

    /**
     *  因为cell的重用问题，这里赋值数据要全部重新赋值，否则容易出错
     */
    if (weiBo.isVip) {
        self.vipView.hidden = NO;
        self.nameView.textColor = [UIColor redColor];
    } else {
        self.vipView.hidden = YES;
        self.nameView.textColor = [UIColor blackColor];
    }

    self.textView.text = weiBo.text;

    if (weiBo.picture) {

        self.picView.image = [UIImage imageNamed:weiBo.picture];
        self.picView.hidden = NO;
    } else{

        self.picView.hidden = YES;
    }
}

- (void)setSubviewFrame
{

    self.iconView.frame = self.weiBoFrame.iconF;
    self.nameView.frame = self.weiBoFrame.nameF;
    self.vipView.frame = self.weiBoFrame.vipF;
    self.textView.frame = self.weiBoFrame.textF;
    self.picView.frame = self.weiBoFrame.picF;
}

@end

第4步展示cell

#import "LLViewController.h"
#import "LLWeiBo.h"
#import "LLWeiBoCell.h"
#import "LLWeiBoFrame.h"
@interface LLViewController ()

@property (nonatomic, strong) NSArray *weiBoFrames;

@end

@implementation LLViewController

- (void)viewDidLoad {

    [super viewDidLoad];
    self.tableView.rowHeight = 200;
}

#pragma mark - 懒加载数据模型
- (NSArray *)weiBoFrames
{
    if (!_weiBoFrames) {

        NSString *path = [[NSBundle mainBundle] pathForResource:@"statuses.plist" ofType:nil];
        NSArray *dicArray = [NSArray arrayWithContentsOfFile:path];
        NSMutableArray *tmpArray = [[NSMutableArray alloc] initWithCapacity:dicArray.count];

        for (NSDictionary *dic in dicArray) {
            LLWeiBoFrame *weiBoFrame = [[LLWeiBoFrame alloc] init];
            LLWeiBo *weibo = [LLWeiBo weiBoWithDic:dic];
            weiBoFrame.weiBo = weibo;
            [tmpArray addObject:weiBoFrame];
        }
        _weiBoFrames = tmpArray;

    }
    return _weiBoFrames;
}

#pragma mark - tableView的数据源方法
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {

    return self.weiBoFrames.count;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{

    // 1,创建cell
    LLWeiBoCell *cell = [LLWeiBoCell weiBoCell:tableView];

    // 2,给cell设置数据
    cell.weiBoFrame = self.weiBoFrames[indexPath.row];

    return cell;

}

#pragma mark - 代理的方法
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    return [self.weiBoFrames[indexPath.row] cellHeight];
}

@end

补充：

使用纯代码自定义一个tableview的步骤

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

2.重写initWithStyle:reuseIdentifier:方法

添加所有需要显示的子控件(不需要设置子控件的数据和frame,  子控件要添加到contentView中)

进行子控件一次性的属性设置(有些属性只需要设置一次, 比如字体\固定的图片)

3.提供2个模型

数据模型: 存放文字数据\图片数据

frame模型: 存放数据模型\所有子控件的frame\cell的高度

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

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

6.frame模型数据的初始化已经采取懒加载的方式(每一个cell对应的frame模型数据只加载一次)

代码：

/**
* 计算文本的宽高
*
* @param str 需要计算的文本
* @param font 文本显示的字体
* @param maxSize 文本显示的范围
*
* @return 文本占用的真实宽高
*/
- (CGSize)sizeWithString:(NSString *)str font:(UIFont *)font maxSize:(CGSize)maxSize
{
NSDictionary *dict = @{NSFontAttributeName : font};
// 如果将来计算的文字的范围超出了指定的范围,返回的就是指定的范围
// 如果将来计算的文字的范围小于指定的范围, 返回的就是真实的范围
CGSize size = [str boundingRectWithSize:maxSize options:NSStringDrawingUsesLineFragmentOrigin attributes:dict context:nil].size;
return size;
}

时间： 2024-10-17 21:27:56

UI基础之UITableView案例微博----自定义cell利用代码的相关文章

UI基础之UITableView案例团购----自定义cell利用xib

一:模型数据: #import <Foundation/Foundation.h> @interface LLGroup : NSObject /** * icon */ @property (nonatomic, copy) NSString *icon; /** * title */ @property (nonatomic, copy) NSString *title; /** * buyCount */ @property (nonatomic, copy) NSString *buy

UI基础之UITableView案例QQ聊天界面

数据模型: #import <Foundation/Foundation.h> typedef enum{ LLMessageTypeMe, LLMessageTypeOther }LLMessageType; @interface LLMessage : NSObject /** * time */ @property (nonatomic, copy) NSString *time; /** * text */ @property (nonatomic, copy) NSString *t

UI基础之UITableView案例QQ好友列表

一:模型数据 LLFriend #import <Foundation/Foundation.h> @interface LLFriend : NSObject /** * icon */ @property (nonatomic, copy) NSString *icon; /** * intro */ @property (nonatomic, copy) NSString *intro; /** * name */ @property (nonatomic, copy) NSString

UI基础之UITableView总结

一:性能问题 cell的工作:在程序执行的时候,能看到多少条,它就创建多少条数据,如果视图滚动那么再创建新显示的内容.(系统自动调用).即当一个cell出现在视野范围内的时候,就会调用创建一个cell.这样的逻辑看上去没有什么问题,但是真的没有任何问题吗? 当创建调用的时候,我们使用nslog打印消息,并打印创建的cell的地址.我们发现如果数据量非常大,用户在短时间内来回滚动的话,那么会创建大量的cell,一直开辟空间,且如果是往回滚,通过打印地址,我们会发现它并没有重用之前已经创建的cell

【iOS开发-65】QQ聊天界面案例：自定义cell、图片拉伸处理、NSNotification通知、键盘与视图移动以及输入框左边缩进处理

(1)案例 (2)源代码于素材下载 http://pan.baidu.com/s/1bnpiBCz (3)总结 --还是代码封装.控制器.视图.模型分别独立.里面还有很多代码可以独立出来整一个类. --如果某一个值只有特定的几个数字,那么可以用枚举来定义,注意命名规范 typedef enum{ WPMessageTypeMe=0, WPMessageTypeOther=1 }WPMessageType; --依然是计算一段文字所占据的宽和高 CGSize textMaxSize=CGSizeM

UI基础之UITableView的基本使用

UITableView控件 1,基本使用(required) UITableView有两种样式:grouped/plain 组/单行 UITableView需要?一个数据源(dataSource)来显示数据UITableView会向数据源查询一共有多少行数据以及每?行显示什么数据等 没有设置数据源的UITableView只是个空壳 凡是遵守UITableViewDataSource协议的OC对象,都可以是UITableView的数据源 展示数据的过程: (1)调用数据源的下面?法得知?一共有多少

UI基础：UITableView表视图

表视图 UITableView,iOS中最重要的视图,随处可见. 表视图通常用来管理一组具有相同数据结构的数据. UITableView继承于UIScrollView,所以可以滚动 表视图的每条数据都是显示在UITableViewCell对象中 表视图可以分区显示数据,每个分区称为一个section,每一行称为 row,编号都是从0开始 表视图的创建 DataSource数据源 我们需要给tableView指定一个数据源,它负责给tableView提供数据. 需要实现协议中两个必须实现的方法.

IOS开发——UI进阶篇（二）自定义cell

一.纯代码自定义等高cell 1.创建子控件 2.布局子控件 1.普通 2.Autolayout 3.设置子控件数据 二.字典转模型优化(MJExtension) 三.xib自定义等高cell 四.storyboard自定义等高cell 五.不同类型的cell共存 六.分割线 七.自定义不等高的sell 1. 2. 3. 4.

猫猫学IOS（十七）UI之纯代码自定义Cell实现新浪微博UI

猫猫分享,必须精品 素材代码地址:http://blog.csdn.net/u013357243/article/details/44976175 原文地址:http://blog.csdn.net/u013357243?viewmode=contents 先看效果图 编程思路 代码创建Cell的步骤 1> 创建自定义Cell,继承自UITableViewCell 2> 根据需求,确定控件,并定义属性 3> 用getter方法完成控件的实例化,只创建并添加到contentView,不处理