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

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

2024-07-06 10:20:30   230人阅读

UITableView中除了利用系统的UItableViewCell不能完成需求进行布局时，还可以进行自定义布局；

自定义布局分为两类：（1）利用代码进行创建

（2）利用xib进行实现；

下面对利用代码进行创建分析：

应用场景：像微博，等列表数据展示（由于微博的每个单元格的数据大小不一致，所以得计算每个单元格的大小）
    分析：前提是获取列表数据，然后建立每个单元格的模型（建立单元格模型应继承UITableViewCell）复写
        - (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
        此方法即可，在此方法中添加单元格所需要的各个视图控件， 然后根据微博对象模型，确定每个控件的位置，并进行数据
        的填充，
        主要在此方法中几个重要的方法：（特别是方法的执行顺序）
        1.-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
        2.-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath

下面以一个例子进行说明：

由于本案例整个界面就是单独的一个UITableView，故而主控制器设置成UITableViewController；这样可以减少很多连线问题，

因为UITableViewController里面已进行关联，且内部也开放出来了tableview；可以直接使用

（1）下面是一个SLViewController.m文件

  1 #import "SLViewController.h"
  2 
  3 #import "SLWeiBo.h"
  4 #import "SLWeiBoCell.h"
  5 #import "SLWeiBoFrame.h"
  6 
  7 @interface SLViewController ()
  8 
  9 //定义数组，保存模型数据
 10 @property (nonatomic,strong)NSArray *statusFrames;
 11 
 12 @end
 13 
 14 @implementation SLViewController
 15 
 16 - (void)viewDidLoad
 17 {
 18     [super viewDidLoad];
 19     self.tableView ;
 20 }
 21 
 22 #pragma mark -懒加载
 23 -(NSArray *)statusFrames
 24 {
 25     if (_statusFrames==nil) {
 26         //加载plist数据文件
 27         NSString *fullpath=[[NSBundle mainBundle] pathForResource:@"statuses" ofType:@"plist"];
 28         NSArray *arr=[NSArray arrayWithContentsOfFile:fullpath];
 29         NSMutableArray *mutearr=[NSMutableArray arrayWithCapacity:arr.count];
 30         for (NSDictionary *dict in arr) {
 31             //字典转模型，传进去一个字典，返回一个微博模型
 32             SLWeiBo *weibo=[SLWeiBo weiBoWithDict:dict];
 33             //计算每一个表格的高度并保存
 34             SLWeiBoFrame *weiboframe=[[SLWeiBoFrame alloc] init];
 35             weiboframe.weibo=weibo;
 36             //把Frame模型保存到数组中
 37             [mutearr addObject:weiboframe];
 38         }
 39         
 40         self.statusFrames=[mutearr mutableCopy];
 41     }
 42     return _statusFrames;
 43 }
 44 
 45 #pragma mark -实现数据源方法
 46 /**
 47  *  tableview中返回一共有多少组，有一组的话，可以省略不写
 48  *
 49  *  @param tableView
 50  *
 51  *  @return 返回有多少组
 52  */
 53 -(NSInteger) numberOfSectionsInTableView:(UITableView *)tableView
 54 {
 55     return 1;
 56 }
 57 /**
 58  *  tableview返回一共有多少个单元格
 59  *
 60  *  @param tableView
 61  *  @param section   第几组
 62  *
 63  *  @return 某组有多少单元格
 64  */
 65 -(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
 66 {
 67     return self.statusFrames.count;
 68 }
 69 
 70 /**
 71  *  tableView返回每个单元格的对象
 72  *
 73  *  @param tableView
 74  *  @param indexPath 保存有该对象是第几组，第几个单元格
 75  *
 76  *  @return 返回每个单元格对象
 77  */
 78 -(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
 79 {
 80     //1.从缓存中取数据
 81     static NSString *identifier=@"status";
 82     SLWeiBoCell *cell=[tableView dequeueReusableCellWithIdentifier:identifier];
 83     //2创建表格
 84     if (cell==nil) {
 85         cell=[[SLWeiBoCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:identifier];
 86     }
 87     //3设置数据
 88     SLWeiBoFrame *frame=self.statusFrames[indexPath.row];
 89     cell.itemframe=frame;
 90     return cell;
 91 }
 92 #pragma mark -实现高度的代理方法
 93 /**
 94  *  计算每个单元格的高度
 95  *
 96  *  @param tableView
 97  *  @param indexPath 该单元格是某组某行的单元格
 98  *
 99  *  @return 返回该单元格的高度
100  */
101 -(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
102 {
103     SLWeiBoFrame *frame=self.statusFrames[indexPath.row];
104         return frame.cellHeight;
105 }
106 /**
107  *  设置是否显示状态栏
108  *
109  *  @return 返回YES，不显示，返回NO，显示
110  */
111 -(BOOL)prefersStatusBarHidden
112 {
113     return NO;
114 }
115 @end

（2）这个SLWeiBo.H与SLWeiBo.m Global.h文件

第一个文件是定义一些基本属性，用来进行字典转换模型；并定义了两个方法，一个是类方法，一个实例方法，在第二个文件中进行实现

第三个文件是对第一个和第二个文件的定义方法进行的抽取，方便重用，第三个文件利用定义宏进行代码抽取，

 1 #import "Global.h"
 2 /**
 3  *  创建一个微博对象，保存模型数据
 4  */
 5 @interface SLWeiBo : NSObject
 6 
 7 @property (nonatomic,copy) NSString *text;//内容
 8 @property (nonatomic,copy) NSString *icon;//头像
 9 @property (nonatomic,copy) NSString *name;//昵称
10 @property (nonatomic,copy) NSString *picture;//配图
11 //是否是vip
12 @property (nonatomic,assign) BOOL vip;
13 
14 initWeiBo(weiBo)
15 ////进行转换的实例方法
16 //-(instancetype)initWithWeiBo:(NSDictionary *)dict;
17 //// 进行转换的类方法
18 //+(instancetype)weiBoWithDict:(NSDictionary *)dict;
19 
20 @end
 1 #import "SLWeiBo.h"
 2 
 3 @implementation SLWeiBo
 4 
 5 //分别对类方法和实例方法进行实现
 6 weiBoInitDict(weiBo);
 7 //-(instancetype)initWithWeiBo:(NSDictionary *)dict;
 8 //{
 9 //    if (self=[super init]) {
10 //        [self setValuesForKeysWithDictionary:dict];
11 //    }
12 //    return self;
13 //}
14 //
15 //+(instancetype)weiBoWithDict:(NSDictionary *)dict
16 //{
17 //    return [[self alloc] initWithWeiBo:dict];
18 //}
19 
20 @end
 1 #ifndef ___Global_h
 2 #define ___Global_h
 3   
 4 #define initWeiBo(name) 5 -(instancetype) initWithWeiBo:(NSDictionary *)dict; 6 +(instancetype) name##WithDict:(NSDictionary *)dict;
 7 
 8 #define weiBoInitDict(name) 9 -(instancetype) initWithWeiBo:(NSDictionary *)dict;10 {11     if (self=[super init]) {12         [self setValuesForKeysWithDictionary:dict];13     }14     return self;15 }16 +(instancetype) name##WithDict:(NSDictionary *)dict17 {18     return [[self alloc] initWithWeiBo:dict];19 }
20 #endif

 

（3）SLWeiBoCell.h和SLWeiBoCell.m文件是继承自UITableViewCell的，是对UITableViewCell进行的重写，已到达所需要的要求界面，

　　并设置数据，与设置位置。

1 #import <UIKit/UIKit.h>
2 @class SLWeiBoFrame;
3 
4 @interface SLWeiBoCell : UITableViewCell
5 //导入SLweiboFrame对象，保存着一个单元格里面每个控件的位置，及weibo对象
6 @property (nonatomic,strong) SLWeiBoFrame *itemframe;
7 
8 @end
  1 #import "SLWeiBoCell.h"
  2 
  3 #import "SLWeiBoFrame.h"
  4 
  5 #define SLFontNiCheng [UIFont systemFontOfSize:15]
  6 #define SLFontZhengWen [UIFont systemFontOfSize:16]
  7 @interface SLWeiBoCell()
  8 //头部头像
  9 @property (nonatomic,weak) UIImageView *iconheader;
 10 //昵称
 11 @property (nonatomic,weak) UILabel *nicheng;
 12 //是否是vip
 13 @property (nonatomic,weak) UIImageView *vip;
 14 //正文显示
 15 @property (nonatomic,weak) UILabel *zhengwen;
 16 //配图显示
 17 @property (nonatomic,weak) UIImageView *peitu;
 18 
 19 @end
 20 
 21 @implementation SLWeiBoCell
 22 
 23 //复写此方法，以达到重写UITableViewCell的目的
 24 - (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
 25 {
 26     self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
 27     if (self) {
 28         // 让自定义cell和系统的cell一样，创建出来就拥有一些子控件提供给我们使用
 29         //1.创建头像
 30         UIImageView *iconheader=[[UIImageView alloc] init];
 31         [self.contentView addSubview:iconheader];
 32         self.iconheader=iconheader;
 33         //2.创建昵称
 34         UILabel *nicheng=[[UILabel alloc] init];
 35         nicheng.font=SLFontNiCheng;
 36         [self.contentView addSubview:nicheng];
 37         self.nicheng=nicheng;
 38         //3.创建vip
 39         UIImageView *vip=[[UIImageView alloc] init];
 40         vip.image=[UIImage imageNamed:@"vip"];
 41         [self.contentView addSubview:vip];
 42         self.vip=vip;
 43         //4创建正文
 44         UILabel *zhengwen=[[UILabel alloc] init];
 45         //让正文进行多行显示
 46         zhengwen.numberOfLines=0;
 47         //设置正文的字体，此时的字体应该在和计算该正文的字体长宽所用字体一致，
 48         zhengwen.font=SLFontZhengWen;
 49         [self.contentView addSubview:zhengwen];
 50         
 51         self.zhengwen=zhengwen;
 52         //5创建配图
 53         UIImageView *peitu=[[UIImageView alloc] init];
 54         [self.contentView addSubview:peitu];
 55         self.peitu=peitu;
 56     }
 57     return self;
 58 }
 59 -(void)setItemframe:(SLWeiBoFrame *)itemframe
 60 {
 61     _itemframe=itemframe;
 62     //设置数据
 63     [self settingData];
 64     //设置frame
 65     [self settingFrame];
 66 }
 67 
 68 -(void)settingData
 69 {
 70     //设置头像
 71     SLWeiBo *weibof=self.itemframe.weibo;
 72     self.iconheader.image=[UIImage imageNamed:weibof.icon];
 73     //设置昵称
 74     self.nicheng.text=weibof.name;
 75     //设置vip
 76     if (weibof.vip) {
 77         self.nicheng.textColor=[UIColor redColor];
 78         self.vip.hidden=NO;
 79     }else{
 80         self.nicheng.textColor=[UIColor blackColor];
 81         self.vip.hidden=YES;
 82     }
 83     //设置内容
 84     self.zhengwen.text=weibof.text;
 85     //设置配图
 86     if (weibof.picture) {
 87         self.peitu.image=[UIImage imageNamed:weibof.picture];
 88         self.peitu.hidden=NO;
 89     }else{
 90         self.peitu.hidden=YES;
 91     }
 92 }
 93 
 94 -(void)settingFrame
 95 {
 96     //1设置头像的frame
 97     self.iconheader.frame=self.itemframe.iconF;
 98     //2设置昵称的frame
 99     self.nicheng.frame=self.itemframe.nichengF;
100     //3设置vip的frame
101     self.vip.frame=self.itemframe.vipF;
102     //4设置正文的frame
103     self.zhengwen.frame=self.itemframe.zhengwenF;
104     //5设置配图的frame
105     if (self.itemframe.weibo.picture) {
106         self.peitu.frame=self.itemframe.peituF;
107     }
108 }
109 @end

 

（4）SLWeiBoFrame.h和SLWeiBoFrame.m 文件是为了求行高而进行的数据抽取，即先计算出行的高，并且保存每行中控件的位置；

方便传给cell进行利用；

 1 #import "SLWeiBo.h"
 2 @interface SLWeiBoFrame : NSObject
 3 
 4 /**
 5  头像的frame
 6  */
 7 @property (nonatomic,assign) CGRect iconF;
 8 /**
 9 昵称的frame
10  */
11 @property (nonatomic,assign) CGRect nichengF;
12 /**
13 vip的frame
14  */
15 @property (nonatomic,assign) CGRect vipF;
16 /**
17  正文的frame
18  */
19 @property (nonatomic,assign) CGRect zhengwenF;
20 /**
21 配图的frame
22  */
23 @property (nonatomic,assign) CGRect peituF;
24 /**
25  行高
26  */
27 @property (nonatomic,assign) CGFloat cellHeight;
28 @property (nonatomic,strong) SLWeiBo *weibo;
29 
30 @end
 1 #import "SLWeiBoFrame.h"
 2 #import "SLWeiBo.h"
 3 #define SLFontNiCheng [UIFont systemFontOfSize:15]
 4 #define SLFontZhengWen [UIFont systemFontOfSize:16]
 5 @implementation SLWeiBoFrame
 6 
 7 
 8 -(void)setWeibo:(SLWeiBo *)weibo
 9 {
10 
11     _weibo=weibo;
12     //间隙
13     CGFloat padding=10;
14     //1设置头像的frame
15     CGFloat iconViewX=padding;
16     CGFloat iconViewY=padding;
17     CGFloat iconViewW=30;
18     CGFloat iconViewH=30;
19     self.iconF=CGRectMake(iconViewX, iconViewY, iconViewW, iconViewH);
20     
21     //2设置昵称的frame
22     CGFloat nichengX=CGRectGetMaxX(self.iconF)+padding;
23     /**
24      * attributes 告诉系统文字的大小
25      */
26     // NSDictionary *dict=@{NSFontAttributeName:[UIFont systemFontOfSize:15]};
27     
28     // 如果将来计算的文字的范围超出了指定的范围，就返回的就是指定的范围
29     //如果将来的文字范围小于指定的范围，就返回实际的范围
30     CGSize maxsize=CGSizeMake(MAXFLOAT, MAXFLOAT);
31     CGSize namesize=[self  sizeWithString:_weibo.name font:SLFontNiCheng maxSize:maxsize];
32     //    CGRect namesize= [_weibo.name boundingRectWithSize:maxsize options:NSStringDrawingUsesLineFragmentOrigin attributes:dict context:nil];
33     
34     CGFloat nichengH=namesize.height;
35     CGFloat nichengW=namesize.width;
36     
37     CGFloat nichengY=(self.iconF.size.height-nichengH)*0.5+iconViewY;
38     self.nichengF=CGRectMake(nichengX , nichengY, nichengW,nichengH);
39     
40     
41     //3设置vip的frame
42     CGFloat vipViewX=CGRectGetMaxX(self.nichengF)+padding;
43     CGFloat vipViewY=nichengY;
44     CGFloat vipViewW=14;
45     CGFloat vipViewH=14;
46     self.vipF=CGRectMake(vipViewX, vipViewY, vipViewW, vipViewH);
47     
48     
49     //4设置正文的frame
50     
51     CGFloat zhengwenX=iconViewX;
52     CGFloat zhengwenY=CGRectGetMaxY(self.iconF)+padding;
53     
54     CGSize maxsize1=CGSizeMake(300, MAXFLOAT);
55     CGSize zhengwensize=[self sizeWithString:_weibo.text font:SLFontZhengWen maxSize:maxsize1];
56     CGFloat zhengwenW=zhengwensize.width;
57     CGFloat zhengwenH=zhengwensize.height;
58     
59     self.zhengwenF=CGRectMake(zhengwenX, zhengwenY, zhengwenW, zhengwenH);
60     //5设置配图的frame
61     //   CGFloat cellHeight=0;
62     if (_weibo.picture) {
63         CGFloat peituX=iconViewX;
64         CGFloat peituY=CGRectGetMaxY(self.zhengwenF)+padding;
65         CGFloat peituW=100;
66         CGFloat peituH=100;
67         self.peituF=CGRectMake(peituX, peituY, peituW, peituH);
68         self.cellHeight=CGRectGetMaxY(self.peituF)+padding;
69     }else
70     {
71         //无配图的情况下的行高
72         self.cellHeight=CGRectGetMaxY(self.zhengwenF)+padding;
73     }
74 }
75 
76 /**
77  *  计算文本的宽高
78  *
79  *  @param str     文本显示
80  *  @param font    文本显示的字体
81  *  @param maxSize 文本显示的此存
82  *
83  *  @return
84  */
85 -(CGSize)sizeWithString:(NSString *)str font:(UIFont *)font maxSize:(CGSize)maxSize
86 {
87     NSDictionary *dict=@{NSFontAttributeName: font};
88     CGSize  nasize=[str boundingRectWithSize:maxSize options:NSStringDrawingUsesLineFragmentOrigin attributes:dict context:nil].size;
89     return nasize;
90 }
91 
92 @end

最终实现效果图如下：

以上方法，即是利用代码进行对UITableViewCell进行的重写，下一讲讲解关于

利用xib创建重用的单元格对象。


联系
我们