概述

我们要实现的效果:

这个界面布局也是UITableView实现的,其中的内容就是UITableViewCell,只是这个UITableViewCell是用户自定义实现的。虽然系统自带的UITableViewCell已经够强大了,但是这个界面布局并不能满足我们的需求。

在上面的cell布局里,我们可以知道,每个cell的高度都是不固定的。因此,我们通过代码来自定义cell.

代码自定义cell

步骤:

1.新建一个继承自UITableViewCell的类

2.重写initWithStyle:reuseIdentifier:方法

  • 添加所有需要显示的子控件(不需要设置子控件的数据和frame,  子控件要添加到contentView中)
  • 进行子控件一次性的属性设置(有些属性只需要设置一次, 比如字体\固定的图片)

3.提供2个模型

  • 数据模型: 存放文字数据\图片数据
  • frame模型: 存放数据模型\所有子控件的frame\cell的高度

4.重写frame模型里的数据模型的Setter方法:在这个方法中,设置子控制的frame和每个cell高度

5.cell拥有一个frame模型(不要直接拥有数据模型)

6.重写frame模型属性的setter方法: 在这个方法中设置子控件的显示数据和frame

7.frame模型数据的初始化已经采取懒加载的方式(每一个cell对应的frame模型数据只加载一次)

下面分步来写相应的代码

Cell视图设置

1.新建一个继承自UITableViewCell的类,重写initWithStyle:reuseIdentifier:方法

2.重写frame模型属性的setter方法: 在这个方法中设置子控件的显示数据和frame

StatusCell.h

#import <UIKit/UIKit.h>
@class StatusFrame; @interface StatusCell : UITableViewCell
@property (nonatomic, strong) StatusFrame *statusFrame; + (instancetype)cellWithTableView:(UITableView *)tableView;
@end

StatusCell.m

//
// StatusCell.m
// 9.2 - 简单微博
//
// Created by apple on 15/9/18.
// Copyright (c) 2015年 weconex. All rights reserved.
// // 昵称的字体
#define MJNameFont [UIFont systemFontOfSize:14]
// 正文的字体
#define MJTextFont [UIFont systemFontOfSize:15] #import "StatusCell.h"
#import "Status.h"
#import "StatusFrame.h" @interface StatusCell()
/**
* 头像
*/
@property (nonatomic, weak) UIImageView *iconView;
/**
* 昵称
*/
@property (nonatomic, weak) UILabel *nameView;
/**
* 会员图标
*/
@property (nonatomic, weak) UIImageView *vipView;
/**
* 正文
*/
@property (nonatomic, weak) UILabel *textView;
/**
* 配图
*/
@property (nonatomic, weak) UIImageView *pictureView;
@end @implementation StatusCell /**
* 重写initWithStyle:reuseIdentifier:方法
* 添加所有需要显示的子控件(不需要设置子控件的数据和frame,子控件要添加到contentView中)
* 进行子控件一次性的属性设置(有些属性只需要设置一次, 比如字体\固定的图片)
*/
-(instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
if (self==[super initWithStyle:style reuseIdentifier:reuseIdentifier]) {
// 1.头像
UIImageView *iconView = [[UIImageView alloc] init];
[self.contentView addSubview:iconView];
self.iconView = iconView;//相当于xib的拉线 // 2.昵称
UILabel *nameView = [[UILabel alloc] init];
nameView.font = MJNameFont;
[self.contentView addSubview:nameView];
self.nameView = nameView; // 3.会员图标
UIImageView *vipView = [[UIImageView alloc] init];
vipView.image = [UIImage imageNamed:@"vip"];
[self.contentView addSubview:vipView];
self.vipView = vipView; // 4.正文
UILabel *textView = [[UILabel alloc] init];
textView.numberOfLines = ;
textView.font = MJTextFont;
[self.contentView addSubview:textView];
self.textView = textView; // 5.配图
UIImageView *pictureView = [[UIImageView alloc] init];
[self.contentView addSubview:pictureView];
self.pictureView = pictureView;
}
return self;
} /**
* 在这个方法中设置子控件的frame和显示数据
*/
-(void)setStatusFrame:(StatusFrame *)statusFrame
{
_statusFrame = statusFrame; // 1.设置数据
[self settingData]; // 2.设置frame
[self settingFrame];
} /**
* 设置数据
*/
- (void)settingData
{
// 微博数据
Status *status = self.statusFrame.status; // 1.头像
self.iconView.image = [UIImage imageNamed:status.icon]; // 2.昵称
self.nameView.text = status.name; // 3.会员图标
if (status.vip) {
self.vipView.hidden = NO; self.nameView.textColor = [UIColor redColor];
} else {
self.vipView.hidden = YES; self.nameView.textColor = [UIColor blackColor];
} // 4.正文
self.textView.text = status.text; // 5.配图
if (status.picture) { // 有配图
self.pictureView.hidden = NO;
self.pictureView.image = [UIImage imageNamed:status.picture];
} else { // 没有配图
self.pictureView.hidden = YES;
}
} /**
* 设置frame
*/
- (void)settingFrame
{
// 1.头像
self.iconView.frame = self.statusFrame.iconF; // 2.昵称
self.nameView.frame = self.statusFrame.nameF; // 3.会员图标
self.vipView.frame = self.statusFrame.vipF; // 4.正文
self.textView.frame = self.statusFrame.textF; // 5.配图
if (self.statusFrame.status.picture) {// 有配图
self.pictureView.frame = self.statusFrame.pictureF;
}
} + (instancetype)cellWithTableView:(UITableView *)tableView
{
static NSString *ID = @"status";
StatusCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];
if (cell == nil) {
cell = [[StatusCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:ID];
}
return cell;
} @end

模型定义

提供2个模型

  • 数据模型(Status): 存放文字数据\图片数据
  • frame模型(StatusFrame): 存放数据模型\所有子控件的frame\cell的高度

重写frame模型里的数据模型(Status)的Setter方法:在这个方法中,设置子控制的frame和每个cell高度

Status.h

//
// Status.h
// 9.2 - 简单微博
//
// Created by apple on 15/9/18.
// Copyright (c) 2015年 weconex. All rights reserved.
// #import <UIKit/UIKit.h> @interface Status : UICollectionViewCell
@property (nonatomic, copy) NSString *text; // 内容
@property (nonatomic, copy) NSString *icon; // 头像
@property (nonatomic, copy) NSString *name; // 昵称
@property (nonatomic, copy) NSString *picture; // 配图
@property (nonatomic, assign) BOOL vip; - (instancetype)initWithDict:(NSDictionary *)dict;
+ (instancetype)statusWithDict:(NSDictionary *)dict;
@end

Status.m

//
// Status.m
// 9.2 - 简单微博
//
// Created by apple on 15/9/18.
// Copyright (c) 2015年 weconex. All rights reserved.
// #import "Status.h" @implementation Status - (instancetype)initWithDict:(NSDictionary *)dict
{
if (self = [super init]) {
[self setValuesForKeysWithDictionary:dict];
}
return self;
} + (instancetype)statusWithDict:(NSDictionary *)dict
{
return [[self alloc] initWithDict:dict];
}
@end

StatusFrame.h

//
// StatusFrame.h
// 9.2 - 简单微博
//
// Created by apple on 15/9/18.
// Copyright (c) 2015年 weconex. All rights reserved.
// frame模型: 存放数据模型\所有子控件的frame\cell的高度 #import <UIKit/UIKit.h>
@class Status; @interface StatusFrame : UITableViewCell /**
* 头像的frame
*/
@property (nonatomic, assign, readonly) CGRect iconF;
/**
* 昵称的frame
*/
@property (nonatomic, assign, readonly) CGRect nameF;
/**
* 会员图标的frame
*/
@property (nonatomic, assign, readonly) CGRect vipF;
/**
* 正文的frame
*/
@property (nonatomic, assign, readonly) CGRect textF;
/**
* 配图的frame
*/
@property (nonatomic, assign, readonly) CGRect pictureF; /**
* cell的高度
*/
@property (nonatomic, assign, readonly) CGFloat cellHeight; /**
* 存放数据模型
*/
@property (nonatomic, strong) Status *status; @end

StatusFrame.m

//
// StatusFrame.m
// 9.2 - 简单微博
//
// Created by apple on 15/9/18.
// Copyright (c) 2015年 weconex. All rights reserved.
//
// 昵称的字体
#define MJNameFont [UIFont systemFontOfSize:14]
// 正文的字体
#define MJTextFont [UIFont systemFontOfSize:15] #import "StatusFrame.h"
#import "Status.h" @implementation StatusFrame /**
* 计算文字尺寸
*
* @param text 需要计算尺寸的文字
* @param font 文字的字体
* @param maxSize 文字的最大尺寸
*/
- (CGSize)sizeWithText:(NSString *)text font:(UIFont *)font maxSize:(CGSize)maxSize
{
NSDictionary *attrs = @{NSFontAttributeName : font};
return [text boundingRectWithSize:maxSize options:NSStringDrawingUsesLineFragmentOrigin attributes:attrs context:nil].size;
} /**
* 设置每一条微博的Frame 及cell的高度
*
* @param status 微博模型
*/
-(void)setStatus:(Status *)status
{
_status = status; // 子控件之间的间距
CGFloat padding = ; // 1.头像
CGFloat iconX = padding;
CGFloat iconY = padding;
CGFloat iconW = ;
CGFloat iconH = ;
_iconF = CGRectMake(iconX, iconY, iconW, iconH); // 2.昵称
// 文字的字体
CGSize nameSize = [self sizeWithText:self.status.name font:MJNameFont maxSize:CGSizeMake(MAXFLOAT, MAXFLOAT)];
CGFloat nameX = CGRectGetMaxX(_iconF) + padding;
CGFloat nameY = iconY + (iconH - nameSize.height) * 0.5;
_nameF = CGRectMake(nameX, nameY, nameSize.width, nameSize.height); // 3.会员图标
CGFloat vipX = CGRectGetMaxX(_nameF) + padding;
CGFloat vipY = nameY;
CGFloat vipW = ;
CGFloat vipH = ;
_vipF = CGRectMake(vipX, vipY, vipW, vipH); // 4.正文
CGFloat textX = iconX;
CGFloat textY = CGRectGetMaxY(_iconF) + padding;
CGSize textSize = [self sizeWithText:self.status.text font:MJTextFont maxSize:CGSizeMake(, MAXFLOAT)];
_textF = CGRectMake(textX, textY, textSize.width, textSize.height); // 5.配图
if (self.status.picture) {// 有配图
CGFloat pictureX = textX;
CGFloat pictureY = CGRectGetMaxY(_textF) + padding;
CGFloat pictureW = ;
CGFloat pictureH = ;
_pictureF = CGRectMake(pictureX, pictureY, pictureW, pictureH); _cellHeight = CGRectGetMaxY(_pictureF) + padding;
} else {
_cellHeight = CGRectGetMaxY(_textF) + padding;
}
}
@end

控制器使用Cell

cell拥有一个frame模型(不要直接拥有数据模型)

frame模型数据的初始化已经采取懒加载的方式(每一个cell对应的frame模型数据只加载一次)

ViewController.m

//
// ViewController.m
// 9.2 - 简单微博
//
// Created by apple on 15/9/18.
// Copyright (c) 2015年 weconex. All rights reserved.
// #import "ViewController.h"
#import "StatusFrame.h"
#import "Status.h"
#import "StatusCell.h" @interface ViewController ()
/**
* 存放所有cell的frame模型数据
*/
@property (nonatomic, strong) NSArray *statusFrames;
@end @implementation ViewController -(NSArray *)statusFrames
{
if (_statusFrames==nil) {
// 初始化
// 1.获得plist的全路径
NSString *path = [[NSBundle mainBundle] pathForResource:@"statuses.plist" ofType:nil]; // 2.加载数组
NSArray *dictArray = [NSArray arrayWithContentsOfFile:path]; // 3.将dictArray里面的所有字典转成模型对象,放到新的数组中
NSMutableArray *statusFrameArray = [NSMutableArray array];
for (NSDictionary *dict in dictArray) {
// 3.1.创建Status模型对象
Status *status = [Status statusWithDict:dict]; // 3.2.创建StatusFrame模型对象
StatusFrame *statusFrame = [[StatusFrame alloc] init];
statusFrame.status = status; // 3.2.添加模型对象到数组中
[statusFrameArray addObject:statusFrame];
} // 4.赋值
_statusFrames = statusFrameArray;
} return _statusFrames;
} - (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
} // 隐藏导航栏
- (BOOL)prefersStatusBarHidden
{
return YES;
} -(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return self.statusFrames.count;
} -(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
// 1.创建cell
StatusCell *cell = [StatusCell cellWithTableView:tableView]; // 2.在这个方法算好了cell的高度
cell.statusFrame = self.statusFrames[indexPath.row]; // 3.返回cell
return cell;
} /**
* 返回每个单元格的高度
*/
-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
StatusFrame *statusFrame=self.statusFrames[indexPath.row];
return statusFrame.cellHeight;
} @end

请按照步骤来,当然,上面的代码有一些步骤是混合在一起了。

源码下载:点击下载

iOS UI基础-9.2 UITableView 简单微博列表的更多相关文章

  1. iOS UI基础-9.0 UITableView基础

    在iOS中,要实现表格数据展示,最常用的做法就是使用UITableView.UITableView继承自UIScrollView,因此支持垂直滚动,而且性能极佳. UITableView有两种样式: ...

  2. iOS UI基础-9.1 UITableView 团购

    概述 接下来,我们要做的是团购界面的设计,最张要实现的效果图及项目结构图      团购数据的展示 思路: 系统自带的tableCell不能展示三个文本,不能满足条件,自定义tableCell 每一个 ...

  3. iOS开发——UI篇OC篇&UITableView简单封装

    UITableView简单封装 UITableView时iOS开发中使用最多也是最重的一个UI空间,其实在App Store里面的%80以上的应用都用到了这个控件,所以就给大家介绍一下,前面的文章中也 ...

  4. IOS SWIFT UITableView 实现简单微博列表

    // // Weibo.swift // UITableViewCellExample // // Created by XUYAN on 15/8/15. // Copyright (c) 2015 ...

  5. iOS开发基础-图片切换(3)之属性列表

    延续:iOS开发基础-图片切换(2),对(2)里面的代码用属性列表plist进行改善. 新建 Property List 命名为 Data 获得一个后缀为 .plist 的文件. 按如图修改刚创建的文 ...

  6. iOS UI基础-17.0 UILable之NSMutableAttributedString

    在iOS开发中,常常会有一段文字显示不同的颜色和字体,或者给某几个文字加删除线或下划线的需求.之前在网上找了一些资料,有的是重绘UILabel的textLayer,有的是用html5实现的,都比较麻烦 ...

  7. IOS UI 第十一篇: UITABLEVIEW

    DIY a tableviewcell :   - (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *) ...

  8. IOS UI 第十篇: UITABLEVIEW

    uitableView review yesterday’s knowledge :         folding group :   ------------------------------- ...

  9. iOS UI基础-19.0 UICollectionView

    直接上代码,说明请看注释吧 1.继承三个代理 UICollectionViewDataSource,UICollectionViewDelegate,UICollectionViewDelegateF ...

随机推荐

  1. 关于linux下安装并打开网易云音乐——v 1.0.0

    首先,在网易云音乐官网的下载页面下载linux版本网易云音乐安装包(.deb文件) 下载好之后,在下载文件夹中双击打开文件,等待安装完毕 安装完成之后,直接双击图标是打不开的 需要用管理员命令打开 c ...

  2. [No0000177]详解/etc/profile、/etc/bash.bahsrc、~/.profile、~/.bashrc的用途

    之前安装Linux的一些软件时,总要修改Linux的配置文件.当时也是一知半解.而且,网上有些安装教程,会说,修改配置文件后要重启Linux.但事实上是不需要重启的. Linux安装时可能要修改的配置 ...

  3. [No0000117]visual studio 调试WebForm 显示 HTTP Error 403.14 - Forbidden Web 服务器被配置为不列出此目录的内容。

    调试界面如下: 解决办法1:右键设置起始页. 影响文件: 解决方案2:Web.config中添加默认页面配置: <system.webServer> <defaultDocument ...

  4. SCSS快速入门

    SCSS快速入门 1. 使用变量sass引入了变量.通过变量名来引用它们,使用$符号来标识变量.且在CSS中并无他用,不会导致与现存或未来的css语法冲突. 1-1. 变量声明sass变量的声明和cs ...

  5. 网络层block,delegate之优劣分析

    正常情况下, block 缺点: 1.block很难追踪,难以维护 2.block会延长先关对象的生命周期 block会给内部所有的对象引用计数+1, 一方面会带来潜在的循环引用(retain cyc ...

  6. log4j.properties 日志文件的详细配置说明

    一.在一个web 项目中,使用tomcat 启动通常会在控制台输出出现一个警告信息: 通常为未添加 log4j.properties文件的原因. 二.下面以一个普通的maven项目为例说明一下 1. ...

  7. HDMI 接口及CEC信号

    HDMI 接口及CEC信号 2016年12月02日 14:16:38 King-Five 阅读数:16389 HDMI接口 HDMI(High Definition Multimedia Interf ...

  8. 写一个表达式检查所给的整数是否它第三个数字(从右向左)是7。示例:1732 -> true。

    在学习C#基础部分(课件来源:http://www.xuepub.com/52.html),遇到这么一个题目,前段时间面试遇到一个"车牌限行的问题",我就在想如何取末尾数值的问题. ...

  9. wpf(布局与Canvas )

    WPF的布局有控件都在System.Windows.Controls.Panel这个基类下面,常见的布局控件: . canvas: Canvas是最基本的面板,它不会自动调整内部元素的排列及大小,它仅 ...

  10. [daily][samba] smbclient使用

    用的也不是太明白,反正凑合用吧. 在用之前,只得到了两个信息,1:ip 192.168.30.9.    2:可以免密登录. 1.  用这个命令看一看,主要是找到这个目录:Anonymous ┬─[t ...