文档章节

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

hejunbinlan
 hejunbinlan
发布于 2015/06/24 11:05
字数 2369
阅读 409
收藏 0
点赞 0
评论 0

一、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 : UITableViewCell13 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  *  设置子控件的Frame110  */111 -(void)settingFrame112 {113     //1.设置头像的frame114     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 : NSObject12 /**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  *  是否是vip30  */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 YYweiboModel12 13 -(instancetype)initWithDict:(NSDictionary *)dict14 {15     if (self = [super init]) {16         //使用KVC17         [self setValuesForKeysWithDictionary:dict];18     }19     return self;20 }21 22 /**23  *  工厂方法24  *25  *  @param dict 字典26  *27  *  @return 模型28  */29 +(instancetype)weiboModelWithDict:(NSDictionary *)dict30 {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 @end17 18 @implementation YYViewController19 20 - (void)viewDidLoad21 {22     [super viewDidLoad];23 }24 25 #pragma mark -懒加载26 -(NSArray *)weibos27 {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 *)tableView46 {47     return 1;48 }49 //每组多少行50 -(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section51 {52     return self.weibos.count;53 }54 //每组每行的数据-设置cell55 -(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath56 {57     //1.到缓存中去取cell58     static NSString *ID=@"ID";59      //2.没有则创建cell60     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.返回cell68     return cell;69     70 }71 72 #pragma mark- 隐藏状态栏73 -(BOOL)prefersStatusBarHidden74 {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】


本文转载自:http://www.tuicool.com/articles/ueQrQfm

共有 人打赏支持
hejunbinlan
粉丝 40
博文 534
码字总数 21018
作品 0
浦东
高级程序员
一套代码iOS、Android两端运行,Google Flutter意味着什么?

作者 | 屠敏 一套代码可支持 Android 和 iOS 双端运行,你 Get 了吗? 它就是 Flutter。其目标是为了解决移动中的两个重要问题:一是实现原生应用的性能和与平台的集成,二是提供一个多平台,...

终端研发部 ⋅ 前天 ⋅ 0

转:一套代码iOS、Android两端运行,Google Flutter意味着什么?

原文:https://www.toutiao.com/a6569388465538990600/?ttfrom=weixin&utmcampaign=clientshare×tamp=1529580533&app=newsarticle&utmsource=weixin&iid=35476649324&utmmedium=toutiao......

鸿蒙无上至尊 ⋅ 前天 ⋅ 0

RN与原生交互(一)——基本页面跳转

React Native(以下简称RN)开发app过程中大部分都可以在JS端完成,但是也有一些功能是需要原生端来完成的。这时RN与原生端就不可避免的需要进行交互,比如页面跳转和数据传递。本篇文章主要以...

不變旋律 ⋅ 06/13 ⋅ 0

iOS三维菜单、调试工具、封装通讯录、网络框架、多种控件和动画等源码

iOS精选源码 一个调用系统通讯录和获取通讯录所有联系人的封装(http://www.code4app.com/thread-29726-1-1.html) ios scrollview嵌套tableview同向滑动(初级、进阶), 支持OC / Swift(http...

sunnyaigd ⋅ 05/15 ⋅ 0

小程序iOS客户端框架——控件事件逻辑框架与控件原生化

小程序自发布以来,为开发者和用户提供了一种轻量级的App。作为一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。小程序也体现了“用...

codeGoogle ⋅ 04/24 ⋅ 0

小程序iOS客户端框架—控件事件逻辑框架与控件原生化

小程序自发布以来,为开发者和用户提供了一种轻量级的App。作为一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。小程序也体现了“用...

codeGoogle ⋅ 04/26 ⋅ 0

面试官自述:面向高级开发人员的iOS面试问题

当您准备进行技术性iOS面试时,了解您可能会询问哪些主题以及经验丰富的iOS开发人员期望什么是非常重要的。 这是许多硅谷公司用来衡量iOS候选人资历水平的一系列问题。 这些问题涉及iOS开发的...

菇哒微课 ⋅ 04/26 ⋅ 0

iOS渐变字体、动态条纹、获取特定位置cell、笔记App、购物车界面等源码

iOS精选源码 RAC实现添加购物车(http://www.code4app.com/thread-29956-1-1.html) 一个基于Photos.framework的图片多选,持续功能的更新中(http://www.code4app.com/thread-29959-1-1.html)...

sunnyaigd ⋅ 05/29 ⋅ 0

iOS高仿QQ侧滑控件、下载框架、动画效果、扫一扫、颜色变化、K线图等源码

iOS精选源码 仿京东"加入购物车"转场动画(http://www.code4app.com/thread-28162-1-1.html) ColorTool(颜色转换)(http://www.code4app.com/thread-29256-1-1.html) Swift 专业版K线(http://w......

sunnyaigd ⋅ 04/17 ⋅ 0

你见过最目瞪狗呆的bug是什么?

你见过最目瞪狗呆的bug是什么? 2018-05-28 14:01编辑: garace分类:程序人生来源:代码湾 bug网上注册刘伟楠 招聘信息: C++工程师 Cocos2d-x游戏客户端开发 iOS开发工程师 京东招聘iOS开发...

garace ⋅ 05/28 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

zblog2.3版本的asp系统是否可以超越卢松松博客的流量[图]

最近访问zblog官网,发现zlbog-asp2.3版本已经进入测试阶段了,虽然正式版还没有发布,想必也不久了。那么作为aps纵横江湖十多年的今天,blog2.2版本应该已经成熟了,为什么还要发布这个2.3...

原创小博客 ⋅ 40分钟前 ⋅ 0

聊聊spring cloud的HystrixCircuitBreakerConfiguration

序 本文主要研究一下spring cloud的HystrixCircuitBreakerConfiguration HystrixCircuitBreakerConfiguration spring-cloud-netflix-core-2.0.0.RELEASE-sources.jar!/org/springframework/......

go4it ⋅ 今天 ⋅ 0

二分查找

二分查找,也称折半查找、二分搜索,是一种在有序数组中查找某一特定元素的搜索算法。搜素过程从数组的中间元素开始,如果中间元素正好是要查找的元素,则搜素过程结束;如果某一特定元素大于...

人觉非常君 ⋅ 今天 ⋅ 0

VS中使用X64汇编

需要注意的是,在X86项目中,可以使用__asm{}来嵌入汇编代码,但是在X64项目中,再也不能使用__asm{}来编写嵌入式汇编程序了,必须使用专门的.asm汇编文件来编写相应的汇编代码,然后在其它地...

simpower ⋅ 今天 ⋅ 0

ThreadPoolExecutor

ThreadPoolExecutor public ThreadPoolExecutor(int corePoolSize, int maximumPoolSize, long keepAliveTime, ......

4rnold ⋅ 昨天 ⋅ 0

Java正无穷大、负无穷大以及NaN

问题来源:用Java代码写了一个计算公式,包含除法和对数和取反,在页面上出现了-infinity,不知道这是什么问题,网上找答案才明白意思是负的无穷大。 思考:为什么会出现这种情况呢?这是哪里...

young_chen ⋅ 昨天 ⋅ 0

前台对中文编码,后台解码

前台:encodeURI(sbzt) 后台:String param = URLDecoder.decode(sbzt,"UTF-8");

west_coast ⋅ 昨天 ⋅ 0

实验楼—MySQL基础课程-挑战3实验报告

按照文档要求创建数据库 sudo sercice mysql startwget http://labfile.oss.aliyuncs.com/courses/9/createdb2.sqlvim /home/shiyanlou/createdb2.sql#查看下数据库代码 代码创建了grade......

zhangjin7 ⋅ 昨天 ⋅ 0

一起读书《深入浅出nodejs》-node模块机制

node 模块机制 前言 说到node,就不免得提到JavaScript。JavaScript自诞生以来,经历了工具类库、组件库、前端框架、前端应用的变迁。通过无数开发人员的努力,JavaScript不断被类聚和抽象,...

小草先森 ⋅ 昨天 ⋅ 0

Java桌球小游戏

其实算不上一个游戏,就是两张图片,不停的重画,改变ball图片的位置。一个左右直线碰撞的,一个有角度碰撞的。 左右直线碰撞 package com.bjsxt.test;import javax.swing.*;import j...

森林之下 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部