码迷,mamicode.com
首页 > 其他好文 > 详细

UITableView(微博界面的简单搭建)

时间:2016-05-22 00:32:06      阅读:219      评论:0      收藏:0      [点我收藏+]

标签:

通过MVC的设计模式,设计微博界面

1.M--Model 

1)数据Model

1>声明

#import <Foundation/Foundation.h>

 

@interface CZStatus : NSObject

// 用户头像

@property (nonatomic, copy) NSString *icon;

// 用户名

@property (nonatomic, copy) NSString *name;

// 会员

@property (nonatomic, assign) BOOL isVip;

// 微博内容

@property (nonatomic, copy) NSString *text;

// 配图

@property (nonatomic, copy) NSString *picture;

 

+ (instancetype)statusWithDict:(NSDictionary *)dict;

- (instancetype)initWithDict:(NSDictionary *)dict;

 

@end

 2>实现

#import "CZStatus.h"

 

@implementation CZStatus

+ (instancetype)statusWithDict:(NSDictionary *)dict {

    return [[self alloc] initWithDict:dict];

}

 

- (instancetype)initWithDict:(NSDictionary *)dict

{

    self = [super init];

    if (self) {

        [self setValuesForKeysWithDictionary:dict];

    }

    return self;

}

 

@end

2)每一行cell的frame的model

1>声明

#import <UIKit/UIKit.h>

@class CZStatus;

/// 用户名字体大小

#define nameLabelFont  [UIFont systemFontOfSize:14.0]

/// 微博文字字体大小

#define textLabelFont  [UIFont systemFontOfSize:15.0]

 

@interface CZStatusFrame : NSObject

// 数据模型

@property (nonatomic, strong) CZStatus *status;

/**

 *  头像frame

 */

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

/**

 *  昵称frame

 */

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

/**

 *  vip图标frame

 */

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

/**

 *  正文frame

 */

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

/**

 *  配图的frame

 */

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

/**

 *  cell的行高

 */

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

 

 

@end

2>实现

#import "CZStatusFrame.h"

#import "CZStatus.h"

 

#define Spacing 8

 

@implementation CZStatusFrame

 

// 重写数据模型的set方法,在此方法计算子控件的frame和行高

- (void)setStatus:(CZStatus *)status {

#warning mark - 重写set方法一定不要忘了给下线线的成员变量赋值

    _status = status;

    

    // 头像

    CGFloat iconX = Spacing;

    CGFloat iconY = Spacing;

    CGFloat iconW = 35;

    CGFloat iconH = iconW;

    _iconF = CGRectMake(iconX, iconY, iconW, iconH);

    

    // 昵称

    CGFloat nameLX = CGRectGetMaxX(_iconF) + Spacing;

    CGFloat nameLY = iconY + Spacing;

    CGSize nameSize = [self sizeWithText:_status.name font:nameLabelFont maxSize: CGSizeMake(MAXFLOAT, MAXFLOAT)];

    _nameF = (CGRect){{nameLX, nameLY}, nameSize};

 

    // vip图标

    if (_status.isVip) {

        CGFloat vipX = CGRectGetMaxX(_nameF) + Spacing;

        CGFloat vipY = nameLY + Spacing * 0.3;

        CGFloat vipW = 15;

        CGFloat vipH = 15;

        _vipF = CGRectMake(vipX, vipY, vipW, vipH);

    }

    

    // 正文

    CGFloat textX = iconX;

    CGFloat textY = CGRectGetMaxY(_iconF) + Spacing;

    CGFloat textMaxWidth = [UIScreen mainScreen].bounds.size.width - 2 *Spacing;

    CGSize textSize = [self sizeWithText:_status.text font:textLabelFont maxSize:CGSizeMake(textMaxWidth, MAXFLOAT)];

    

    _textF = (CGRect){{textX, textY}, textSize};

    

    

    // 配图

    if (_status.picture) {

        CGFloat picX = iconX;

        CGFloat picY = CGRectGetMaxY(_textF) + Spacing;

        CGFloat picW = 100;

        CGFloat picH = picW;

        _picF = CGRectMake(picX, picY, picW, picH);

    }

    

    _cellHeight = MAX(CGRectGetMaxY(_picF), CGRectGetMaxY(_textF)) + Spacing;

}

 

/**

 *  计算文字尺寸

 *

 *  @param text    需要计算的文字

 *  @param font    文字字体

 *  @param maxSize 文字矩形最大尺寸

 */

- (CGSize)sizeWithText:(NSString *)text font:(UIFont *)font maxSize:(CGSize)maxSize {

 

    NSDictionary *attributes = @{NSFontAttributeName : font};

    

    return [text boundingRectWithSize:maxSize options:NSStringDrawingUsesLineFragmentOrigin attributes:attributes context:nil].size;

 

}

 

@end

 2.V--View  即视图

cell视图

1)声明

#import <UIKit/UIKit.h>

@class CZStatusFrame;

@interface CZStatusCell : UITableViewCell

// frame模型

@property (nonatomic, strong) CZStatusFrame *statusFrame;

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

@end

2)实现

#import "CZStatusCell.h"

#import "CZStatus.h"

#import "CZStatusFrame.h"

 

#define Margins 8

 

@interface CZStatusCell ()

@property (nonatomic, strong) CZStatus *status;

@property (nonatomic, weak) UIImageView *iconView;

@property (nonatomic, weak) UILabel *nameView;

@property (nonatomic, weak) UIImageView *vipView;

@property (nonatomic, weak) UILabel *textView;

@property (nonatomic, weak) UIImageView *pictureView;

 

 

@end

@implementation CZStatusCell

 

/// 快速创建cell

+ (instancetype)cellWithTableView:(UITableView *)tableView {

    static NSString *ID = @"cell";

    CZStatusCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];

    if (cell == nil) {

        cell = [[CZStatusCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:ID];

    }

    return cell;

}

 

// 重写initWithStyle:方法,让cell一创建出来就已经有多有子控件

- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier

{

    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];

    if (self) {

        // 添加cell的内部子控件

        [self addStatusCellWithSubview];

    }

    return self;

}

 

// 添加cell的内部子控件

- (void)addStatusCellWithSubview {

    // 头像

    self.iconView = [self createImageView];

    // 昵称

    self.nameView = [self createLabelWithFont:nameLabelFont];

    // vip图标

    self.vipView = [self createImageView];

    self.vipView.image = [UIImage imageNamed:@"vip"];

    // 正文

    self.textView = [self createLabelWithFont:textLabelFont];

    // 配图

    self.pictureView = [self createImageView];

 

 

}

 

/// 快速创建并添加label

- (UILabel *)createLabelWithFont:(UIFont *)font {

    UILabel *label = [[UILabel alloc] init];

    label.numberOfLines = 0;

    label.font = font;

    [self.contentView addSubview:label];

    return label;

}

 

/// 快速创建并添中imageView

- (UIImageView *)createImageView {

    UIImageView *imageView = [[UIImageView alloc] init];

    [self.contentView addSubview:imageView];

    return imageView;

}

 

/// 重写frame模型的set方法,在此方法设置cell子控件的数据和frame

- (void)setStatusFrame:(CZStatusFrame *)statusFrame {

 

    _statusFrame = statusFrame;

    _status = statusFrame.status;

    // 1.设置数据

    [self settingData];

    

    // 2.计算frame

    [self settingFrame];

}

 

// 设置控件数据

- (void)settingData {

    // 设置用户头像

    self.iconView.image = [UIImage imageNamed:_status.icon];

    

    // 设置用户名

    self.nameView.text = _status.name;

    // 设置用户名颜色,会员是红色,普通用户是黑色

    self.nameView.textColor =  _status.isVip ? [UIColor redColor] : [UIColor blackColor];

    

    // 是否显示会员

    self.vipView.hidden = _status.isVip ? NO : YES;

    

    // 设置微博内容

    self.textView.text = _status.text;

    

    // 是否显示配图

    self.pictureView.hidden = _status.picture ? NO : YES;

    // 设置配图

    self.pictureView.image = _status.picture ? [UIImage imageNamed:_status.picture] : nil;

    

}

 

/// 设置控件frame

- (void)settingFrame {

    // 设置用户头像frame

    self.iconView.frame = self.statusFrame.iconF;

    // 设置用户名frame

    self.nameView.frame = self.statusFrame.nameF;

    // 设置vip的frame

    self.vipView.frame = _status.isVip ? self.statusFrame.vipF : CGRectZero;

    // 设置微博内容的frame

    self.textView.frame = self.statusFrame.textF;

    // 设置配图的frame

    self.pictureView.frame = _status.picture ? self.statusFrame.picF : CGRectZero;

    

}

@end

3.C--Controller 即控制层

1)声明

#import <UIKit/UIKit.h>

 

@interface CZViewController : UITableViewController  // 此处继承自UITableViewController

 

 

@end

2)实现

#import "CZViewController.h"

#import "CZStatus.h"

#import "CZStatusCell.h"

#import "CZStatusFrame.h"

 

@interface CZViewController ()

@property (nonatomic, strong) NSArray *statusFrame;

 

@end

 

@implementation CZViewController

 

- (void)viewDidLoad {

    [super viewDidLoad];

    // 预估行高

    self.tableView.estimatedRowHeight = 300;

}

// 隐藏状态栏

- (BOOL)prefersStatusBarHidden {

    return YES;

}

 

 

#pragma mark - tableView的数据源方法

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {

    return self.statusFrame.count;

}

 

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

    

    // 创建cell

    CZStatusCell *cell = [CZStatusCell cellWithTableView:tableView];

    // 拿到每行对应的frame模型

    CZStatusFrame *statusFrame = self.statusFrame[indexPath.row];

    // 给cell的frame模型赋值

    cell.statusFrame = statusFrame;

    

    return cell;

}

 

#pragma mark - 代理方法用来返回行高

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {

    // 返回cell的高度

    return [self.statusFrame[indexPath.row] cellHeight];

}

 

 

// 懒加载字典转模型

- (NSArray *)statusFrame {

    if (_statusFrame == nil) {

        NSArray *dictArr = [NSArray arrayWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"statuses.plist" ofType:nil]];

        NSMutableArray *arrM = [NSMutableArray array];

        [dictArr enumerateObjectsUsingBlock:^(id obj, NSUInteger idx, BOOL *stop) {

            CZStatusFrame *statusFrame = [[CZStatusFrame alloc] init];

            CZStatus *status = [CZStatus statusWithDict:obj];

            statusFrame.status = status;

            [arrM addObject:statusFrame];

        }];

        _statusFrame = arrM;

    }

    return _statusFrame;

}

 

@end

UITableView(微博界面的简单搭建)

标签:

原文地址:http://www.cnblogs.com/wangdjblogs/p/5515856.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!