UI基礎--UITableView實現仿微博頁面

需求:相似於微博內容頁面的展現,內容包括有頭像、呢稱、會員標誌、微博內容、微博圖片(可有可沒有)。具體效果圖：

分析：

一、看界面，明顯可使用UITableView來實現顯示微博數據；

二、可是，UITableView系統自定的cell沒法知足須要，由於內容包括有頭像、呢稱、會員標誌、微博內容、微博圖片等等，因此這時就須要考慮自定義cell了；

三、在自定義cell時，能夠考慮把各控件的frame抽出來封裝成一個類，計算frame以及行高；

實例的文件結構：

實現的具體步驟：

1、自定義數據模型類，並測試數據是否能正常加載；

2、設置storyBoard，把UIViewController改成UITableViewController,，並更改controller文件爲繼承自UITableViewController的自定義文件，設置關聯;

3、自定義cell，因爲每行數據的高度都是不規則的，因此考慮先自定義好frame再來寫自定義cell。屬性包括frame模型以及生成可重用cell的方法，要注意的是須要重寫initWithStytle方法，寫給cell各子控件賦值以及生成frame的方法;

4、自定義frame，屬性包括模型數據和行高以及cell中各個子控件的frame;

五、在控制器中寫UITableView的 數據顯示的方法;

具體的代碼：

Category:

 1 //
 2 //  NSString+Ext.m
 3 //  12-24-MicroBlog
 4 //
 5 //  Created by xiaomoge on 14/12/24.
 6 //  Copyright (c) 2014年 xiaomoge. All rights reserved.
 7 //
 8 
 9 #import "NSString+Ext.h"
10 
11 @implementation NSString (Ext)
12 //取得字體的大小
13 - (CGSize)setTextSize:(CGSize)maxSize andFontSize:(CGFloat)fontSize {
14     return [self boundingRectWithSize:maxSize options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName:[UIFont systemFontOfSize:fontSize]} context:nil].size;
15 }
16 @end

 

Model:

 1 //
 2 //  JWMicroBlog.h
 3 //  12-24-MicroBlog
 4 //
 5 //  Created by xiaomoge on 14/12/24.
 6 //  Copyright (c) 2014年 xiaomoge. All rights reserved.
 7 //
 8 
 9 #import <Foundation/Foundation.h>
10 
11 @interface JWMicroBlog : NSObject
12 @property (nonatomic,copy) NSString *text;
13 @property (nonatomic,copy) NSString *icon;
14 @property (nonatomic,copy) NSString *name;
15 @property (nonatomic,copy) NSString *picture;
16 @property (nonatomic,assign,getter=isVip) BOOL vip;
17 - (instancetype)initWithDic:(NSDictionary *)dic;
18 + (instancetype)microBlogWithDic:(NSDictionary *)dic;
19 + (NSArray *)microBlogList;
20 @end

 

 1 //
 2 //  JWMicroBlog.m
 3 //  12-24-MicroBlog
 4 //
 5 //  Created by xiaomoge on 14/12/24.
 6 //  Copyright (c) 2014年 xiaomoge. All rights reserved.
 7 //
 8 
 9 #import "JWMicroBlog.h"
10 
11 @implementation JWMicroBlog
12 - (instancetype)initWithDic:(NSDictionary *)dic {
13     if (self = [super init]) {
14         [self setValuesForKeysWithDictionary:dic];
15     }
16     return self;
17 }
18 + (instancetype)microBlogWithDic:(NSDictionary *)dic {
19     return [[self alloc] initWithDic:dic];
20 }
21 + (NSArray *)microBlogList {
22     NSArray *datas = [NSArray arrayWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"microblog" ofType:@"plist"]];
23     NSMutableArray *temp = [NSMutableArray array];
24     
25     for (NSDictionary *dic in datas) {
26         JWMicroBlog *blog = [JWMicroBlog microBlogWithDic:dic];
27         [temp addObject:blog];
28     }
29     return temp;
30 }
31 @end

 

 1 //
 2 //  JWMicroBlogFrame.h
 3 //  12-24-MicroBlog
 4 //
 5 //  Created by xiaomoge on 14/12/24.
 6 //  Copyright (c) 2014年 xiaomoge. All rights reserved.
 7 //
 8 #define NAMEFONT 13
 9 #define TEXTFONT 14
10 #import <UIKit/UIKit.h>
11 #import "JWMicroBlog.h"
12 @interface JWMicroBlogFrame : NSObject
13 /*
14  數據模型
15  */
16 @property (nonatomic,strong) JWMicroBlog *microBlog;
17 /*
18  頭像frame
19  */
20 @property (nonatomic,assign,readonly) CGRect iconFrame;
21 /*
22  暱稱frame
23  */
24 @property (nonatomic,assign,readonly) CGRect nameFrame;
25 /*
26  vipframe
27  */
28 @property (nonatomic,assign,readonly) CGRect vipFrame;
29 /*
30  內容frame
31  */
32 @property (nonatomic,assign,readonly) CGRect textFrame;
33 /*
34  圖片frame
35  */
36 @property (nonatomic,assign,readonly) CGRect pictureFrame;
37 /*
38  行高
39  */
40 @property (nonatomic,assign,readonly) CGFloat rowHeight;
41 /*
42 獲取數據的方法
43 */
44 + (NSArray *)microBlogFrameList;
45 @end

 

 1 //
 2 //  JWMicroBlogFrame.m
 3 //  12-24-MicroBlog
 4 //
 5 //  Created by xiaomoge on 14/12/24.
 6 //  Copyright (c) 2014年 xiaomoge. All rights reserved.
 7 //
 8 
 9 #import "JWMicroBlogFrame.h"
10 #import "NSString+Ext.h"
11 @implementation JWMicroBlogFrame
12 /*
13  重寫set方法
14  */
15 - (void)setMicroBlog:(JWMicroBlog *)microBlog {
16     
17     _microBlog = microBlog;
18     //間距
19     CGFloat margin = 10;
20     //頭像
21     CGFloat iconW = 40;
22     CGFloat iconH = 40;
23     CGFloat iconX = margin;
24     CGFloat iconY = margin;
25     _iconFrame = CGRectMake(iconX, iconY, iconW, iconH);
26     
27     //暱稱
28     CGSize nameSize = [microBlog.name setTextSize:CGSizeMake(MAXFLOAT, MAXFLOAT) andFontSize:NAMEFONT];//取得暱稱文字的大小,調用了分類的一個方法
29     CGFloat nameX = CGRectGetMaxX(_iconFrame) + margin;//X值是頭像的最大X值加上間距
30     CGFloat nameY = (iconH + margin) * 0.5;//Y值是頭像的高度加上間距的一半，這裏用 * 比用 / 好，速度更快
31     _nameFrame = CGRectMake(nameX, nameY, nameSize.width, nameSize.height);
32     
33     //vip
34     CGFloat vipW = 14;
35     CGFloat vipH = 14;
36     CGFloat vipX = CGRectGetMaxX(_nameFrame);//X值是暱稱的最大X值
37     CGFloat vipY = nameY;
38     if (microBlog.isVip) {//若是模型數據中有vip的數據，才須要定義vip圖片的frame
39         _vipFrame = CGRectMake(vipX, vipY, vipW, vipH);
40     }
41     
42     //內容
43     CGSize textSize = [microBlog.text setTextSize:CGSizeMake(355, MAXFLOAT) andFontSize:TEXTFONT];
44     CGFloat textX = margin;
45     CGFloat textY = CGRectGetMaxY(_iconFrame) + margin;//Y值是頭像的最大Y值加上間距
46     _textFrame = CGRectMake(textX, textY, textSize.width, textSize.height);
47     
48     //圖片
49     CGFloat pictureW = 100;
50     CGFloat pictureH = 100;
51     CGFloat pictureX = margin;
52     CGFloat pictureY = CGRectGetMaxY(_textFrame) + margin;//Y值是內容的最大Y值加上間距
53     if (microBlog.picture) {//若是模型數據中有微博圖片的數據，才須要定義frame
54         _pictureFrame = CGRectMake(pictureX, pictureY, pictureW, pictureH);
55     }
56     
57     //行高
58     CGFloat textMax = CGRectGetMaxY(_textFrame);//定義一個內容的最大Y值
59     CGFloat pictureMax = CGRectGetMaxY(_pictureFrame);//定義一個微博圖片的最大Y值
60     _rowHeight = MAX(textMax, pictureMax) + margin;//行高是根據是否有微博圖片來決定的。這裏的MAX函數其實就是返回一個最大值
61 }
62 + (NSArray *)microBlogFrameList {
63     NSArray *microBlog = [JWMicroBlog microBlogList];
64     
65     NSMutableArray *tem = [NSMutableArray array];
66     
67     for (JWMicroBlog *blog in microBlog) {
68         JWMicroBlogFrame *frame = [[JWMicroBlogFrame alloc] init];
69         frame.microBlog = blog;
70         [tem addObject:frame];
71     }
72     return tem;
73 }
74 @end

 

View:

 1 //
 2 //  JWMicroBlogCell.h
 3 //  12-24-MicroBlog
 4 //
 5 //  Created by xiaomoge on 14/12/24.
 6 //  Copyright (c) 2014年 xiaomoge. All rights reserved.
 7 //
 8 
 9 #import <UIKit/UIKit.h>
10 @class JWMicroBlogFrame;
11 @interface JWMicroBlogCell : UITableViewCell
12 @property (nonatomic,strong) JWMicroBlogFrame *microBlogFrame;
13 + (JWMicroBlogCell *)cellWithTableView:(UITableView *)tableView;
14 @end

 

 1 //
 2 //  JWMicroBlogCell.m
 3 //  12-24-MicroBlog
 4 //
 5 //  Created by xiaomoge on 14/12/24.
 6 //  Copyright (c) 2014年 xiaomoge. All rights reserved.
 7 //
 8 
 9 #import "JWMicroBlogCell.h"
10 #import "JWMicroBlogFrame.h"
11 @interface JWMicroBlogCell ()
12 @property (nonatomic,weak) UIImageView *iconView;//頭像view
13 @property (nonatomic,weak) UILabel *nameLabel;//暱稱view
14 @property (nonatomic,weak) UIImageView *vipView;//vip圖片view
15 @property (nonatomic,weak) UILabel *textView;//內容view
16 @property (nonatomic,weak) UIImageView *pictureView;//微博圖片view
17 @end
18 @implementation JWMicroBlogCell
19 /*
20  快速構造一個可重用的cell
21  */
22 + (JWMicroBlogCell *)cellWithTableView:(UITableView *)tableView {
23     static NSString *resue = @"bolg";//緩存池標識
24     JWMicroBlogCell *cell = [tableView dequeueReusableCellWithIdentifier:resue];
25     if (!cell) {
26         cell = [[self alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:resue];
27     }
28     return cell;
29 }
30 /*
31  重寫init方法,添加各控件
32  */
33 - (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
34     if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]) {
35         //頭像子控件
36         UIImageView *icon = [[UIImageView alloc] init];
37         [self.contentView addSubview:icon];
38         self.iconView = icon;
39         
40         //暱稱子控件
41         UILabel *name = [[UILabel alloc] init];
42         [self.contentView addSubview:name];
43         self.nameLabel = name;
44         name.font = [UIFont systemFontOfSize:NAMEFONT];
45         
46         //vip子控件
47         UIImageView *vip = [[UIImageView alloc] init];
48         [self.contentView addSubview:vip];
49         self.vipView = vip;
50         
51         //內容子控件
52         UILabel *text = [[UILabel alloc] init];
53         [self.contentView addSubview:text];
54         self.textView = text;
55         text.numberOfLines = 0;
56         text.font = [UIFont systemFontOfSize:TEXTFONT];
57         
58         //圖片子控件
59         UIImageView *picture = [[UIImageView alloc] init];
60         [self.contentView addSubview:picture];
61         self.pictureView = picture;
62     }
63     return self;
64 }
65 /*
66  重寫set方法，設置cell中各控件的內容和frame
67  */
68 - (void)setMicroBlogFrame:(JWMicroBlogFrame *)microBlogFrame {
69     _microBlogFrame = microBlogFrame;
70     [self setSubviewsContent];//設置cell中各控件顯示的內容
71     [self setSubviewsFrame];//設置cell中各控件的frame
72 }
73 /*
74  設置cell中各控件顯示的內容
75 */
76 - (void)setSubviewsContent {
77     JWMicroBlog *msg = self.microBlogFrame.microBlog;
78     self.iconView.image = [UIImage imageNamed:msg.icon];
79     self.nameLabel.text = msg.name;
80     if (msg.isVip) {//若是是vip，則暱稱顏色設置爲紅色，不然爲黑色
81         self.vipView.image = [UIImage imageNamed:@"vip"];
82         self.nameLabel.textColor = [UIColor redColor];
83     }else {
84         self.nameLabel.textColor = [UIColor blackColor];
85     }
86     self.textView.text = msg.text;
87     self.pictureView.image = [UIImage imageNamed:msg.picture];
88 }
89 /*
90  設置cell中各控件的frame
91  */
92 - (void)setSubviewsFrame {
93     self.iconView.frame = self.microBlogFrame.iconFrame;
94     self.nameLabel.frame = self.microBlogFrame.nameFrame;
95     self.vipView.frame = self.microBlogFrame.vipFrame;
96     self.textView.frame = self.microBlogFrame.textFrame;
97     self.pictureView.frame = self.microBlogFrame.pictureFrame;
98 }
99 @end

 

Controller:

 1 //
 2 //  JWController.m
 3 //  12-24-MicroBlog
 4 //
 5 //  Created by xiaomoge on 14/12/24.
 6 //  Copyright (c) 2014年 xiaomoge. All rights reserved.
 7 //
 8 
 9 #import "JWController.h"
10 #import "JWMicroBlog.h"
11 #import "JWMicroBlogCell.h"
12 #import "JWMicroBlogFrame.h"
13 @interface JWController ()<UITableViewDataSource>
14 //frame模型數組
15 @property (nonatomic,strong) NSArray *microBlogFrame;
16 @end
17 @implementation JWController
18 #pragma mark - 懶加載
19 - (NSArray *)microBlogFrame {
20     if (!_microBlogFrame) {//若是爲空
21         _microBlogFrame = [JWMicroBlogFrame microBlogFrameList];
22     }
23     return _microBlogFrame;
24 }
25 #pragma mark - 隱藏狀態欄
26 - (BOOL)prefersStatusBarHidden {
27     return YES;
28 }
29 - (void)viewDidLoad {
30     [super viewDidLoad];
31 }
32 #pragma mark - UITableViewDataSource方法
33 - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
34     return self.microBlogFrame.count;//返回每組行的多少
35 }
36 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
37     JWMicroBlogCell *cell = [JWMicroBlogCell cellWithTableView:tableView];
38     cell.microBlogFrame = self.microBlogFrame[indexPath.row];//取得對應行的數據
39     return cell;
40 }
41 - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
42     return [self.microBlogFrame[indexPath.row] rowHeight];//返回每行數據的行高
43 }
44 @end