首页 > 代码库 > UI基础--UITableView实现仿微博页面
UI基础--UITableView实现仿微博页面
需求:类似于微博内容页面的展示,内容包括有头像、呢称、会员标志、微博内容、微博图片(可有可没有)。具体效果图:
实例的文件结构:
实现的具体步骤:
1、自定义数据模型类,并测试数据是否能正常加载;
2、设置storyBoard,把UIViewController改为UITableViewController,,并更改controller文件为继承自UITableViewController的自定义文件,设置关联;
3、自定义cell,由于每行数据的高度都是不规则的,所以考虑先自定义好frame再来写自定义cell。属性包括frame模型以及生成可重用cell的方法,要注意的是需要重写initWithStytle方法,写给cell各子控件赋值以及生成frame的方法;
4、自定义frame,属性包括模型数据和行高以及cell中各个子控件的frame;
5、在控制器中写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 : NSObject12 @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 JWMicroBlog12 - (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 1410 #import <UIKit/UIKit.h>11 #import "JWMicroBlog.h"12 @interface JWMicroBlogFrame : NSObject13 /*14 数据模型15 */16 @property (nonatomic,strong) JWMicroBlog *microBlog;17 /*18 头像frame19 */20 @property (nonatomic,assign,readonly) CGRect iconFrame;21 /*22 昵称frame23 */24 @property (nonatomic,assign,readonly) CGRect nameFrame;25 /*26 vipframe27 */28 @property (nonatomic,assign,readonly) CGRect vipFrame;29 /*30 内容frame31 */32 @property (nonatomic,assign,readonly) CGRect textFrame;33 /*34 图片frame35 */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 JWMicroBlogFrame12 /*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 //vip34 CGFloat vipW = 14;35 CGFloat vipH = 14;36 CGFloat vipX = CGRectGetMaxX(_nameFrame);//X值是昵称的最大X值37 CGFloat vipY = nameY;38 if (microBlog.isVip) {//如果模型数据中有vip的数据,才需要定义vip图片的frame39 _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) {//如果模型数据中有微博图片的数据,才需要定义frame54 _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 : UITableViewCell12 @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;//头像view13 @property (nonatomic,weak) UILabel *nameLabel;//昵称view14 @property (nonatomic,weak) UIImageView *vipView;//vip图片view15 @property (nonatomic,weak) UILabel *textView;//内容view16 @property (nonatomic,weak) UIImageView *pictureView;//微博图片view17 @end18 @implementation JWMicroBlogCell19 /*20 快速构造一个可重用的cell21 */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中各控件的内容和frame67 */68 - (void)setMicroBlogFrame:(JWMicroBlogFrame *)microBlogFrame {69 _microBlogFrame = microBlogFrame;70 [self setSubviewsContent];//设置cell中各控件显示的内容71 [self setSubviewsFrame];//设置cell中各控件的frame72 }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中各控件的frame91 */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 @end17 @implementation JWController18 #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
UI基础--UITableView实现仿微博页面
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。