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


    原文  http://www.cnblogs.com/wendingding/p/3765031.html

    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】

  • 相关阅读:
    前端知识之BOM和DOM
    jQuery基础
    前端知识之JavaScript知识
    前端知识之css样式
    前端知识之html基础
    pymsql模块
    数据库、表、表内容增删改查
    数据库
    python正则表达式
    python列表生成式
  • 原文地址:https://www.cnblogs.com/iosblogx/p/4474157.html
Copyright © 2020-2023  润新知