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文件


 1 //
2 // YYweiboCell.h
3 // 微博基本信息展示
4 //
5 // Created by 孔医己 on 14-6-2.
6 // Copyright (c) 2014年 itcast. All rights reserved.
7 //
8
9 #import <UIKit/UIKit.h>
10
11 @class YYweiboModel;
12 @interface YYweiboCell : UITableViewCell
13
14 @property(nonatomic,strong)YYweiboModel *weibo;
15 @end

YYweiboCell.m文件


  1 //
2 // YYweiboCell.m
3 // 微博基本信息展示
4 //
5 // Created by 孔医己 on 14-6-2.
6 // Copyright (c) 2014年 itcast. All rights reserved.
7 //
8
9 #import "YYweiboCell.h"
10 #import "YYweiboModel.h"
11
12 @interface YYweiboCell()
13 /**
14 * 头像
15 */
16 @property(nonatomic,weak)UIImageView *iconView;
17 /**
18 * vip图标
19 */
20 @property(nonatomic,weak)UIImageView *vipView;
21 /**
22 * 微博昵称
23 */
24 @property(nonatomic,weak)UILabel *nameLabel;
25 /**
26 * 配图
27 */
28 @property(nonatomic,weak)UIImageView *pictureView;
29 /**
30 * 正文
31 */
32 @property(nonatomic,weak)UILabel *textLab;
33
34 @end
35
36 @implementation YYweiboCell
37
38 //重写构造方法,让自定义的cell一创建出来就有五个子控件
39 - (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
40 {
41 self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
42 if (self) {
43 //1.添加头像
44 UIImageView *img=[[UIImageView alloc]init];
45 [self.contentView addSubview:img];
46 self.iconView=img;
47
48 //2.添加昵称
49 UILabel *namelab=[[UILabel alloc]init];
50 [self.contentView addSubview:namelab];
51 self.nameLabel=namelab;
52
53 //3.vip
54 UIImageView *vipview=[[UIImageView alloc]init];
55 [self.contentView addSubview:vipview];
56 self.vipView=vipview;
57
58 //4.正文
59 UILabel *textlab=[[UILabel alloc]init];
60 [self.contentView addSubview:textlab];
61 self.textLab=textlab;
62
63 //5.图片
64 UIImageView *picture=[[UIImageView alloc]init];
65 [self.contentView addSubview:picture];
66 self.pictureView=picture;
67 }
68 return self;
69 }
70
71 /**
72 * 重写set方法
73 *
74 * @param weibo 微博
75 */
76 -(void)setWeibo:(YYweiboModel *)weibo
77 {
78 //不要忘了,记录传递进来的模型
79 _weibo=weibo;
80 //给子控件赋值数据
81 [self settingData];
82 //设置子控件的frame
83 [self settingFrame];
84 }
85
86 /**
87 * 对子控件的数据进行设置
88 */
89 -(void)settingData
90 {
91 //1.设置头像的数据
92 self.iconView.image=[UIImage imageNamed:_weibo.icon];
93
94 //2.设置vip图标的数据
95 self.vipView.image=[UIImage imageNamed:@"vip"];
96
97 //3.设置正文内容的数据
98 self.textLab.text=_weibo.text;
99
100 //4.设置配图的数据
101 self.pictureView.image=[UIImage imageNamed:_weibo.picture];
102
103 //5.设置微博昵称数据
104 self.nameLabel.text=_weibo.name;
105 }
106
107
108 /**
109 * 设置子控件的Frame
110 */
111 -(void)settingFrame
112 {
113 //1.设置头像的frame
114 CGFloat padding=10;
115 CGFloat iconViewX=padding;
116 CGFloat iconViewY=padding;
117 CGFloat iconViewW=30;
118 CGFloat iconViewH=30;
119
120 self.iconView.frame=CGRectMake(iconViewX, iconViewY, iconViewW, iconViewH);
121
122
123 #warning 未完成
124 }
125 @end

数据模型部分

YYweiboModel.h文件


 1 //
2 // YYweiboModel.h
3 // 微博基本信息展示
4 //
5 // Created by 孔医己 on 14-6-2.
6 // Copyright (c) 2014年 itcast. All rights reserved.
7 //
8
9 #import <Foundation/Foundation.h>
10
11 @interface YYweiboModel : NSObject
12 /**
13 * 昵称
14 */
15 @property(nonatomic,copy)NSString *name;
16 /**
17 * 正文
18 */
19 @property(nonatomic,copy)NSString *text;
20 /**
21 * 头像
22 */
23 @property(nonatomic,copy)NSString *icon;
24 /**
25 * 配图
26 */
27 @property(nonatomic,copy)NSString *picture;
28 /**
29 * 是否是vip
30 */
31 @property(nonatomic,assign)BOOL vip;
32
33 //接口
34 -(instancetype)initWithDict:(NSDictionary *)dict;
35 +(instancetype)weiboModelWithDict:(NSDictionary *)dict;
36 @end

YYweiboModel.m文件


 1 //
2 // YYweiboModel.m
3 // 微博基本信息展示
4 //
5 // Created by 孔医己 on 14-6-2.
6 // Copyright (c) 2014年 itcast. All rights reserved.
7 //
8
9 #import "YYweiboModel.h"
10
11 @implementation YYweiboModel
12
13 -(instancetype)initWithDict:(NSDictionary *)dict
14 {
15 if (self = [super init]) {
16 //使用KVC
17 [self setValuesForKeysWithDictionary:dict];
18 }
19 return self;
20 }
21
22 /**
23 * 工厂方法
24 *
25 * @param dict 字典
26 *
27 * @return 模型
28 */
29 +(instancetype)weiboModelWithDict:(NSDictionary *)dict
30 {
31 return [[self alloc]initWithDict:dict];
32 }
33 @end

主控制器部分

YYViewController.h文件

#import <UIKit/UIKit.h>

@interface YYViewController : UITableViewController

@end

YYViewController.m文件


 1 //
2 // YYViewController.m
3 // 微博基本信息展示
4 //
5 // Created by 孔医己 on 14-6-2.
6 // Copyright (c) 2014年 itcast. All rights reserved.
7 //
8
9 #import "YYViewController.h"
10 #import "YYweiboModel.h"
11 #import "YYweiboCell.h"
12
13 @interface YYViewController ()
14 @property(nonatomic,strong)NSArray *weibos;
15
16 @end
17
18 @implementation YYViewController
19
20 - (void)viewDidLoad
21 {
22 [super viewDidLoad];
23 }
24
25 #pragma mark -懒加载
26 -(NSArray *)weibos
27 {
28 if (_weibos==Nil) {
29 NSString *fullpath=[[NSBundle mainBundle]pathForResource:@"statuses.plist" ofType:nil];
30 NSArray *arrayM=[NSArray arrayWithContentsOfFile:fullpath];
31
32 NSMutableArray *models=[NSMutableArray arrayWithCapacity:arrayM.count];
33 for (NSDictionary *dict in arrayM) {
34 YYweiboModel *weibomodel=[YYweiboModel weiboModelWithDict:dict];
35 [models addObject:weibomodel];
36 }
37 _weibos=[models copy];
38 }
39 return _weibos;

40 }
41
42 #pragma mark- 数据源方法
43 //返回多少组
44 //这里可以不写,默认返回一组
45 -(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
46 {
47 return 1;
48 }
49 //每组多少行
50 -(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
51 {
52 return self.weibos.count;
53 }
54 //每组每行的数据-设置cell
55 -(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
56 {
57 //1.到缓存中去取cell
58 static NSString *ID=@"ID";
59 //2.没有则创建cell
60 YYweiboCell *cell=[tableView dequeueReusableCellWithIdentifier:ID];
61 if (cell==nil) {
62 cell=[[YYweiboCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:ID];
63 }
64
65 //3.设置cell的数据
66 cell.weibo=self.weibos[indexPath.row];
67 //4.返回cell
68 return cell;
69
70 }
71
72 #pragma mark- 隐藏状态栏
73 -(BOOL)prefersStatusBarHidden
74 {
75 return YES;
76 }
77 @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】

iOS开发UI篇—以微博界面为例使用纯代码自定义cell程序编码全过程(一),布布扣,bubuko.com

时间: 2024-10-11 18:22:02

iOS开发UI篇—以微博界面为例使用纯代码自定义cell程序编码全过程(一)的相关文章

iOS开发UI篇—使用嵌套模型完成的一个简单汽车图标展示程序

iOS开发UI篇—使用嵌套模型完成的一个简单汽车图标展示程序 一.plist文件和项目结构图 说明:这是一个嵌套模型的示例 二.代码示例: YYcarsgroup.h文件代码: // // YYcarsgroup.h // 07-汽车展示(高级) // // Created by apple on 14-5-28. // Copyright (c) 2014年 itcase. All rights reserved. // #import <Foundation/Foundation.h> @

学习IOS开发UI篇--MVC设计界面及数据的模型转换

1.字典转模型 ======================================== 1.1字典转模型的好处: 1> 降低代码的耦合度 2> 所有字典转模型部分的代码统一集中在一处处理,降低代码出错的几率 3> 在程序中直接使用模型的属性操作,提高编码效率 模型应该提供一个可以传入字典参数的构造方法 - (instancetype)initWithDict:(NSDictionary *)dict; + (instancetype)xxxWithDict:(NSDiction

iOS开发UI篇—Quartz2D简单使用

iOS开发UI篇-Quartz2D简单使用 一.画直线 代码: 1 // 2 // YYlineview.m 3 // 03-画直线 4 // 5 // Created by apple on 14-6-9. 6 // Copyright (c) 2014年 itcase. All rights reserved. 7 // 8 9 #import "YYlineview.h" 10 11 @implementation YYlineview 12 13 14 // 当自定义view第

ios开发UI篇—使用纯代码自定义UItableviewcell实现一个简单的微博界面布局

本文转自 :http://www.cnblogs.com/wendingding/p/3761730.html ios开发UI篇—使用纯代码自定义UItableviewcell实现一个简单的微博界面布局 一.实现效果 二.使用纯代码自定义一个tableview的步骤 1.新建一个继承自UITableViewCell的类 2.重写initWithStyle:reuseIdentifier:方法 添加所有需要显示的子控件(不需要设置子控件的数据和frame,  子控件要添加到contentView中

iOS开发UI篇—使用xib自定义UItableviewcell实现一个简单的团购应用界面布局

iOS开发UI篇—使用xib自定义UItableviewcell实现一个简单的团购应用界面布局 一.项目文件结构和plist文件 二.实现效果 三.代码示例 1.没有使用配套的类,而是直接使用xib文件控件tag值操作 数据模型部分: YYtg.h文件 // // YYtg.h // 01-团购数据显示(没有配套的类) // // Created by apple on 14-5-29. // Copyright (c) 2014年 itcase. All rights reserved. //

iOS开发UI篇—UITableview控件使用小结

iOS开发UI篇—UITableview控件使用小结 一.UITableview的使用步骤 UITableview的使用就只有简单的三个步骤: 1.告诉一共有多少组数据 方法:- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView; 2.告诉每组一共有多少行 方法:- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSIntege

IOS开发UI篇--UITableView的自定义布局==纯代码布局

UITableView中除了利用系统的UItableViewCell不能完成需求进行布局时,还可以进行自定义布局: 自定义布局分为两类:(1)利用代码进行创建 (2)利用xib进行实现: 下面对利用代码进行创建分析: 应用场景:像微博,等列表数据展示(由于微博的每个单元格的数据大小不一致,所以得计算每个单元格的大小) 分析:前提是获取列表数据,然后建立每个单元格的模型(建立单元格模型应继承UITableViewCell)复写 - (id)initWithStyle:(UITableViewCel

iOS开发UI篇—实现UItableview控件数据刷新

iOS开发UI篇—实现UItableview控件数据刷新 一.项目文件结构和plist文件 二.实现效果 1.说明:这是一个英雄展示界面,点击选中行,可以修改改行英雄的名称(完成数据刷新的操作). 运行界面: 点击选中行: 修改数据后自动刷新: 三.代码示例 数据模型部分: YYheros.h文件 // // YYheros.h // 10-英雄展示(数据刷新) // // Created by apple on 14-5-29. // Copyright (c) 2014年 itcase. A

iOS开发UI篇—xib的简单使用

iOS开发UI篇—xib的简单使用 一.简单介绍 xib和storyboard的比较,一个轻量级一个重量级. 共同点: 都用来描述软件界面 都用Interface Builder工具来编辑 不同点: Xib是轻量级的,用来描述局部的UI界面 Storyboard是重量级的,用来描述整个软件的多个界面,并且能展示多个界面之间的跳转关系 二.xib的简单使用 1.建立xib文件 建立的xib文件命名为appxib.xib 2.对xib进行设置 根据程序的需要,这里把view调整为自由布局 建立vie