iOS开发UI篇—以微博界面为例使用纯代码自定义cell程序编码全过程（一）

iOS开发UI篇—以微博界面为例使用纯代码自定义cell程序编码全过程（一）

一、storyboard的处理

直接让控制器继承uitableview controller，然后在storyboard中把继承自uiviewcontroller的控制器干掉，重新拖一个tableview controller，和主控制器进行连线。
项目结构和plist文件



二、程序逻辑业务的处理
第一步，把配图和plist中拿到项目中，加载plist数据（非png的图片放到spooding files中）
第二步，字典转模型，完成plist中数据的加载。属性的注意点（number vip是bool类型，本质是整型的）kvc会智能的把nsnumber转换成bool型的。
第三步，懒加载。
第四步，有了数据之后直接实现数据源方法
（1）一共有几组（如果有一组的，那么可以不写，默认为一组）
（2）每组一共有多少行（数组有多少个元素，就有多少组）
（3）展示数据
1）到缓存中取cell
2）没有的话就创建
3）设置数据
4）返回cell
三、代码

视图部分

YYweiboCell.h文件

//
//  YYweiboCell.h
//  微博基本信息展示
//
//  Created by 孔医己 on 14-6-2.
//  Copyright (c) 2014年 itcast. All rights reserved.
//

#import <UIKit/UIKit.h>

@class YYweiboModel;
@interface YYweiboCell : UITableViewCell

@property(nonatomic,strong)YYweiboModel *weibo;
@end

YYweiboCell.m文件

//
//  YYweiboCell.m
//  微博基本信息展示
//
//  Created by 孔医己 on 14-6-2.
//  Copyright (c) 2014年 itcast. All rights reserved.
//

#import "YYweiboCell.h"
#import "YYweiboModel.h"

@interface YYweiboCell()
/**
*  头像
*/
@property(nonatomic,weak)UIImageView *iconView;
/**
*  vip图标
*/
@property(nonatomic,weak)UIImageView *vipView;
/**
*  微博昵称
*/
@property(nonatomic,weak)UILabel *nameLabel;
/**
*  配图
*/
@property(nonatomic,weak)UIImageView *pictureView;
/**
*  正文
*/
@property(nonatomic,weak)UILabel *textLab;

@end

@implementation YYweiboCell

//重写构造方法，让自定义的cell一创建出来就有五个子控件
- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
if (self) {
//1.添加头像
UIImageView *img=[[UIImageView alloc]init];
[self.contentView addSubview:img];
self.iconView=img;

//2.添加昵称
UILabel *namelab=[[UILabel alloc]init];
[self.contentView addSubview:namelab];
self.nameLabel=namelab;

//3.vip
UIImageView  *vipview=[[UIImageView alloc]init];
[self.contentView addSubview:vipview];
self.vipView=vipview;

//4.正文
UILabel *textlab=[[UILabel alloc]init];
[self.contentView addSubview:textlab];
self.textLab=textlab;

//5.图片
UIImageView *picture=[[UIImageView alloc]init];
[self.contentView addSubview:picture];
self.pictureView=picture;
}
return self;
}

/**
*  重写set方法
*
*  @param weibo 微博
*/
-(void)setWeibo:(YYweiboModel *)weibo
{
//不要忘了，记录传递进来的模型
_weibo=weibo;
//给子控件赋值数据
[self settingData];
//设置子控件的frame
[self settingFrame];
}

/**
*  对子控件的数据进行设置
*/
-(void)settingData
{
//1.设置头像的数据
self.iconView.image=[UIImage imageNamed:_weibo.icon];

//2.设置vip图标的数据
self.vipView.image=[UIImage imageNamed:@"vip"];

//3.设置正文内容的数据
self.textLab.text=_weibo.text;

//4.设置配图的数据
self.pictureView.image=[UIImage imageNamed:_weibo.picture];

//5.设置微博昵称数据
self.nameLabel.text=_weibo.name;
}

/**
*  设置子控件的Frame
*/
-(void)settingFrame
{
//1.设置头像的frame
CGFloat padding=10;
CGFloat iconViewX=padding;
CGFloat iconViewY=padding;
CGFloat iconViewW=30;
CGFloat iconViewH=30;

self.iconView.frame=CGRectMake(iconViewX, iconViewY, iconViewW, iconViewH);

#warning 未完成
}
@end

数据模型部分

YYweiboModel.h文件

//
//  YYweiboModel.h
//  微博基本信息展示
//
//  Created by 孔医己 on 14-6-2.
//  Copyright (c) 2014年 itcast. All rights reserved.
//

#import <Foundation/Foundation.h>

@interface YYweiboModel : NSObject
/**
*  昵称
*/
@property(nonatomic,copy)NSString *name;
/**
*  正文
*/
@property(nonatomic,copy)NSString *text;
/**
*  头像
*/
@property(nonatomic,copy)NSString *icon;
/**
*  配图
*/
@property(nonatomic,copy)NSString *picture;
/**
*  是否是vip
*/
@property(nonatomic,assign)BOOL vip;

//接口
-(instancetype)initWithDict:(NSDictionary *)dict;
+(instancetype)weiboModelWithDict:(NSDictionary *)dict;
@end

YYweiboModel.m文件

//
//  YYweiboModel.m
//  微博基本信息展示
//
//  Created by 孔医己 on 14-6-2.
//  Copyright (c) 2014年 itcast. All rights reserved.
//

#import "YYweiboModel.h"

@implementation YYweiboModel

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

/**
*  工厂方法
*
*  @param dict 字典
*
*  @return 模型
*/
+(instancetype)weiboModelWithDict:(NSDictionary *)dict
{
return [[self alloc]initWithDict:dict];
}
@end

主控制器部分

YYViewController.h文件

#import <UIKit/UIKit.h>

@interface YYViewController : UITableViewController

@end

YYViewController.m文件

//
//  YYViewController.m
//  微博基本信息展示
//
//  Created by 孔医己 on 14-6-2.
//  Copyright (c) 2014年 itcast. All rights reserved.
//

#import "YYViewController.h"
#import "YYweiboModel.h"
#import "YYweiboCell.h"

@interface YYViewController ()
@property(nonatomic,strong)NSArray *weibos;

@end

@implementation YYViewController

- (void)viewDidLoad
{
[super viewDidLoad];
}

#pragma mark -懒加载
-(NSArray *)weibos
{
if (_weibos==Nil) {
NSString *fullpath=[[NSBundle mainBundle]pathForResource:@"statuses.plist" ofType:nil];
NSArray *arrayM=[NSArray arrayWithContentsOfFile:fullpath];

NSMutableArray *models=[NSMutableArray arrayWithCapacity:arrayM.count];
for (NSDictionary *dict in arrayM) {
YYweiboModel *weibomodel=[YYweiboModel weiboModelWithDict:dict];
[models addObject:weibomodel];
}
_weibos=[models copy];
}
return _weibos;
}

#pragma mark- 数据源方法
//返回多少组
//这里可以不写，默认返回一组
-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
return 1;
}
//每组多少行
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return self.weibos.count;
}
//每组每行的数据-设置cell
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
//1.到缓存中去取cell
static NSString *ID=@"ID";
//2.没有则创建cell
YYweiboCell *cell=[tableView dequeueReusableCellWithIdentifier:ID];
if (cell==nil) {
cell=[[YYweiboCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:ID];
}

//3.设置cell的数据
cell.weibo=self.weibos[indexPath.row];
//4.返回cell
return cell;

}

#pragma mark- 隐藏状态栏
-(BOOL)prefersStatusBarHidden
{
return YES;
}
@end

阶段性展示：



四、补充说明

1对于展示数据部分的补充说明：

　　设置数据的时候遇到新的问题：uitableviewcell默认只有一个imageview，一个tabletext和一个详细三个子控件可以用，但是这个微博至少有四个。系统提供的cell不能满足需求，那么我们就在系统提供的cell的基础上为它增加一些功能，新建一个类，自定义cell，让它继承自uitableviewcell。
　　不用系统的，用自己定义的cell,把自定义的cell头文件导入，还是先去缓存中找，如果找不到就创建一个自定义的cell。创建玩自定义cell后，就应该给cell设置数据，按照封装的思想，设置数据的时候，你把数据给我，我自己爱怎么设置就怎么设置。所以把当前的模型取出来，传递给我cell中得一个属性，我自己重写set方法完成赋值。在cell里面应该增加一个属性，用于接收传入的模型。
　　此时，应该赋值数据，并对系统原有的封装和操作进行分析。在以前创建的系统的cell一创建的时候默认就有三个子控件提供给我们使用。自定义的cell按照实际的需求（需要创建5个子控件），我们也应该以创建出一个cell来就能够提供五个子控件供我们使用。
　　在哪个地方可以以创建出来就拥有某些东西呢？当然是在initwith初始化方法中完成（构造方法让我们的对象一创建出来就拥有某些东西），为了让我自定义的cell一创建出来就有三个imageview两个label，应该重写构造。系统自动填好（你很有可能会用到）。在构造方法中，让自定义的cell和系统的cell一样，以创建出来就拥有一些子控件提供给我们使用。

2在自定义cell部分的说明：
A.创建控件，添加并赋值给属性。
1.创建头像
2.创建昵称
3.创建vip
4创建正文
5.创建配图

注意点：uiimageview iconview名称不能写成是imageview(他的父类叫imageview，那么不能在子类中定义一个imageview,不然到时候它怎么知道是要调用哪个？不能和系统自带的重名)。
创建好之后，添加到contentview中。可以进入到头文件中查看注释：如果你自定义一个cell，如果要添加view的时候，建议添加到contentview中。

当在外部创建一个cell的时候，调用他的初始化构造方法，首先就来到构造方法中，添加5个控件到cell中。为什么不设置数据（系统的也没有设置数据）添加数据，将来设置模型的时候再添加。

B.如何设置数据？
在传递模型给他的时候，重写它的set方法，拿到外界传递进来的数据，给它设置数据就完了。
重写set方法:在set方法中，应该做两件事情。
（1）设置子控件的数据
（2）设置子控件的frame，因为如果不设置frame的话，子控件根本显示不出来。（不能在init方法中设置控件的frame）
逻辑：因为子控件的frame高度等是依赖于数据的，需要根据数据来确定，所以只能在拿到数据的时候才能设置子控件的frame,在下面的set方法中要拿到上面添加的控件，怎么拿？是否应该把上面的子控件通过属性保存一下。控件一般用weak,但是用strong也可以。通过属性保存之后，下面才能进行赋值。

提示：设置数据和设置frame是两个功能，应该把他们封装到两个方法中去。
【self settingDate】 vip的图片是不用变的
【self settingFrame】