等高Cell-frame:
等高Cell-frame
知識(shí)回顧
拖入plist文件以及圖片
1.(tableView展示數(shù)據(jù))
UITableViewController用法
設(shè)置ViewController繼承自UITableViewController
刪除storyboard中原有的控制器
拖進(jìn)新控制器
設(shè)置新控制器class:ViewController
設(shè)置新控制器is initial
實(shí)現(xiàn)2個(gè)數(shù)據(jù)源方法
- plist數(shù)據(jù)->模型數(shù)組
根據(jù)plist中數(shù)據(jù)的樣式判斷轉(zhuǎn)成JSON的樣式
根據(jù)dict的keys創(chuàng)建模型XMGTg
解析plist文件(自定義代碼塊)
dict-Model(宏)
2.自定義view(cell)
- 創(chuàng)建一個(gè)繼承UITableViewCell的類:例如EdTgCell
- 寫好封裝cell的代碼(傳統(tǒng)寫法)
- 為cell增添模型屬性tg,并且重寫set方法,先給系統(tǒng)自帶的賦值
- 重寫initWithFrame方法添加子控件
- 重寫layoutSubviews方法布局
- 注意先調(diào)用super方法
3.完善數(shù)據(jù)源方法展示數(shù)據(jù)
新知識(shí)
- 添加子控件
自定義cell的時(shí)候,子控件應(yīng)該添加在initWithStyle方法中
子控件應(yīng)該添加在contentView上
自定義cell的時(shí)候,子控件應(yīng)該添加在initWithStyle方法中, 子控件應(yīng)該添加在contentView上
- (instancetype)initWithStyle:(UITableViewCellStyle)style
reuseIdentifier:(NSString *)reuseIdentifier
{
if (self = [super initWithStyle:style
reuseIdentifier:reuseIdentifier]) {
FunLog
1.圖片
UIImageView *icon_Ima = [[UIImageView alloc] init];
[self.contentView
addSubview:icon_Ima];
self.icon_Ima = icon_Ima;
2.名稱
UILabel *title_Lab = [[UILabel alloc] init];
[self.contentView
addSubview:title_Lab];
self.title_Lab = title_Lab;
3.價(jià)格
...
4.購買人數(shù)
...
}
return
self;
}
- 布局子控件:犧牲代碼量保證可讀性
布局:注意要先調(diào)用[super
layoutSubviews],然后再設(shè)置子控件的frame;
- (void)layoutSubviews
{
[super layoutSubviews];
CGFloat
margin = 10;
1.布局圖片:上,左,上下間距相同,寬度80
CGFloat
iconX = margin;
CGFloat
iconY = margin;
CGFloat
iconW = 80;
CGFloat
iconH = self.bounds.size.height - 2 * iconY;
self.icon_Ima.frame = CGRectMake(iconX, iconY,
iconW, iconH);
2.布局title:頂部對(duì)齊icon,左邊距離圖片10,右邊距離10,高度20
CGFloat
titleX = ;
CGFloat
titleY = ;
CGFloat
titleW = ;
CGFloat
titleH = ;
self.title_Lab.frame = CGRectMake(titleX, titleY,
titleW, titleH);
3.價(jià)格: 底部和icon對(duì)齊,左邊和title對(duì)齊,寬100,高15
CGFloat
priceX = ;
CGFloat
priceW = ;
CGFloat
priceH = ;
CGFloat
priceY = ;
self.price_Lab.frame = CGRectMake(priceX, priceY,
priceW, priceH);
4.購買人數(shù): 底部和價(jià)格對(duì)齊,左邊距離價(jià)格10,右邊10,高13,
CGFloat
buyCountX = ;
CGFloat
buyCountW = ;
CGFloat
buyCountH = ;
CGFloat
buyCountY = ;
self.buyCount_Lab.frame = CGRectMake(buyCountX,
buyCountY, buyCountW, buyCountH);
}
basic框架搭建:
basic框架搭建
拖入plist文件以及圖片
1.(tableView展示數(shù)據(jù))
UITableViewController用法
- 設(shè)置ViewController繼承自UITableViewController
warning 別把父類改成了UITableViewController??
@interface XMGTgController : UITableViewController
刪除storyboard中原有的控制器
拖進(jìn)新控制器
設(shè)置新控制器class:ViewController
設(shè)置新控制器is initial
實(shí)現(xiàn)2個(gè)數(shù)據(jù)源方法
(NSInteger)tableView:(UITableView *)tableView
numberOfRowsInSection:(NSInteger)section
- (UITableViewCell
*)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath
*)indexPath
{
1.獲取cell
XMGTgCell *cell = [XMGTgCell cellWithTableView:tableView];
2.覆蓋數(shù)據(jù)
cell.tg
= self.tgs[indexPath.row];
3.返回cell
return cell;
}
- plist數(shù)據(jù)->模型數(shù)組
根據(jù)plist中數(shù)據(jù)的樣式判斷轉(zhuǎn)成JSON的樣式
根據(jù)dict的keys創(chuàng)建模型XMGTg
解析plist文件(自定義代碼塊)
dict-Model(宏)
懶加載
- (NSArray *)tgs
{
if (!_tgs) {
NSString *filePath = [[NSBundle mainBundle] pathForResource:@"tgs.plist" ofType:nil];
NSArray *dicts = [NSArray arrayWithContentsOfFile:filePath];
NSMutableArray *arrayM = [NSMutableArray arrayWithCapacity:dicts.count];
for (NSDictionary *dictin dicts) {
XMGTg *obj = [XMGTg tgWithDict:dict];
[arrayM addObject:obj];
}
_tgs = [arrayM copy];
}
return _tgs;
}
自定義view(cell)
2.自定義view(cell)
- 創(chuàng)建一個(gè)繼承UITableViewCell的類:XMGTgCell
- 寫好封裝cell的代碼(傳統(tǒng)寫法)
- (instancetype)cellWithTableView:(UITableView
*)tableView
{
static NSString *identifier =@"TgCellID";
XMGTgCell *cell = [tableView dequeueReusableCellWithIdentifier:identifier];
if (!cell) {
cell = [[self alloc]
initWithStyle:UITableViewCellStyleDefault reuseIdentifier:identifier];
}
return cell;
}
- 為cell增添模型屬性tg,并且重寫set方法,先給系統(tǒng)自帶的賦值
@class XMGTg;
@interface XMGTgCell : UITableViewCell
@property (nonatomic, strong) XMGTg tg; /< tg模型/
- (instancetype)cellWithTableView:(UITableView
*)tableView;
@end
此處給子控件賦值
- (void)setTg:(XMGTg *)tg
{
_tg =
tg;
warning
noCode
}
- 重寫initWithFrame方法添加子控件
傳統(tǒng)通過代碼自定義子控件,要將添加子控件的代碼寫在這個(gè)方法中
- (instancetype)initWithFrame:(CGRect)frame
- 重寫layoutSubviews方法布局
- 注意先調(diào)用super方法
布局:注意要先調(diào)用[super layoutSubviews];
- (void)layoutSubviews
{
[super layoutSubviews];
}
subViews添加子控件:
subViews添加子控件
- 參考storyboard/xib拖線,先寫好weak屬性
在這里模擬拖線,創(chuàng)建weak類型的子控件,并且在initWithStyle方法中創(chuàng)建添加到cell上
@property (nonatomic, weak) UIImageView icon_Ima; /*< 圖片 */
@property (nonatomic, weak) UILabel title_Lab; /*< 名稱 */
@property (nonatomic, weak) UILabel price_Lab; /*< 價(jià)格 */
@property (nonatomic, weak) UILabel buyCount_Lab; /*< 購買人數(shù) */
- 添加子控件
自定義cell的時(shí)候,子控件應(yīng)該添加在
initWithStyle方法中子控件應(yīng)該添加在
contentView上
自定義cell的時(shí)候,子控件應(yīng)該添加在initWithStyle方法中, 子控件應(yīng)該添加在contentView上
- (instancetype)initWithStyle:(UITableViewCellStyle)style
reuseIdentifier:(NSString *)reuseIdentifier
{
if (self = [super initWithStyle:style
reuseIdentifier:reuseIdentifier]) {
FunLog
1.圖片
UIImageView *icon_Ima = [[UIImageView alloc] init];
[self.contentView
addSubview:icon_Ima];
self.icon_Ima = icon_Ima;
2.名稱
UILabel *title_Lab = [[UILabel alloc] init];
[self.contentView
addSubview:title_Lab];
self.title_Lab = title_Lab;
3.價(jià)格
...
4.購買人數(shù)
...
}
return
self;
}
layoutSubViews布局子控件
- 布局子控件:犧牲代碼量保證可讀性
布局:注意要先調(diào)用[super layoutSubviews];
- (void)layoutSubviews
{
[super layoutSubviews];
CGFloat
margin = 10;
1.布局圖片:上,左,上下間距相同,寬度80
CGFloat
iconX = margin;
CGFloat
iconY = margin;
CGFloat
iconW = 80;
CGFloat
iconH = self.bounds.size.height - 2 * iconY;
self.icon_Ima.frame = CGRectMake(iconX, iconY,
iconW, iconH);
2.布局title:頂部對(duì)齊icon,左邊距離圖片10,右邊距離10,高度20
CGFloat
titleX = iconX + iconW + margin;
CGFloat
titleY = iconY;
CGFloat titleW = self.bounds.size.width - titleX - margin; // cell寬度 - 右邊距離- title左邊距離titleX;
CGFloat
titleH = 20;
self.title_Lab.frame = CGRectMake(titleX, titleY,
titleW, titleH);
3.價(jià)格: 底部和icon對(duì)齊,左邊和title對(duì)齊,寬100,高15
CGFloat
priceX = titleX;
CGFloat
priceW = 100;
CGFloat
priceH = 15;
CGFloat priceY = iconY + iconH - priceH; // 底部對(duì)齊相當(dāng)于
priceY + priceH = iconY + iconH;
self.price_Lab.frame = CGRectMake(priceX, priceY,
priceW, priceH);
4.購買人數(shù): 底部和價(jià)格對(duì)齊,左邊距離價(jià)格10,右邊10,高13,
CGFloat
buyCountX = priceX + priceW + margin; // priceX +
priceW +
CGFloat
buyCountW = self.bounds.size.width - 10 -
buyCountX; // buyCountX + buyCountW = cellW - 10;
CGFloat
buyCountH = 13;
CGFloat buyCountY = priceY + priceH - buyCountH; // 底部對(duì)齊相當(dāng)于 priceY + priceH = buyCountY + buyCountH;
self.buyCount_Lab.frame = CGRectMake(buyCountX,
buyCountY, buyCountW, buyCountH);
}
frameFun補(bǔ)充
在調(diào)用完layoutSubview,約束才會(huì)布局
當(dāng)強(qiáng)制布局后,子控件的約束就變成frame了
NSLog(@"cellH = %.f", CGRectGetHeight(self.bounds));
NSLog(@"maxXoficon = %.f", CGRectGetMaxY(self.icon_Ima.frame));
等高cell--Mansonry
等高Cell-Mansonry框架
- 引入Mansonry
define
this constant if you want to use Masonry without the 'mas_' prefix
define
MAS_SHORTHAND
define
this constant if you want to enable auto-boxing for default syntax
define
MAS_SHORTHAND_GLOBALS
import "Masonry.h"
- 刪除layoutSubViews代碼
- 在init方法中寫mansonry代碼添加約束
等高cell-xib
復(fù)制等高cell-mansonry
刪掉初始化方法
創(chuàng)建xib文件:文件名是XMGTgCell
- 拖入tableViewCell視圖,并添加子視圖和約束
- 修改類名
- 確定重用標(biāo)識(shí)
為4個(gè)屬性添加IBOutlet
不分屏,點(diǎn)擊cell直接拖線
- 修改cell為空時(shí)候的創(chuàng)建方式
等高cell:
等高cell-storyboard
步驟與xib基本相同
不必用代碼拿cell
- (UITableViewCell
*)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath
*)indexPath
{
if (indexPath.row != 0) {
1.獲取cell
XMGTgCell *cell = [XMGTgCell cellWithTableView:tableView];
2.覆蓋數(shù)據(jù)
cell.tg = self.tgs[indexPath.row];
3.返回cell
return cell;
}else
{
可以通過第0行的特殊cell來滿足/ 代替 表頭視圖
return [tableView
dequeueReusableCellWithIdentifier:@"testID"];
}
}
靜態(tài)單元格
staticCells靜態(tài)單元格
一般的死數(shù)據(jù)界面都可以用靜態(tài)cell
例如:微信的發(fā)現(xiàn) / 我兩個(gè)界面,iPhone的 設(shè)置界面
樣式都是group樣式
調(diào)整組間距的方法有兩種:
1.設(shè)置組頭/尾 為@" "這種空字符串
2.添加沒有cell的section
- 自定義靜態(tài)cell需要注意:
拖線需要先寫代碼,在通過代碼拖
也可以通過tag獲取子控件操作
[self viewWithTag:22];
customSeparator自定義分割線
系統(tǒng)自帶的分割線不能滿足產(chǎn)品需求
設(shè)置cell不同的背景色
自定義分割線
刪除原有的分割線
1.設(shè)置tableView.separatorStyle為none
2.設(shè)置分割線顏色為clearColor(不建議cell中不要使用clearColor)
添加一個(gè)view,高度為1,背景色設(shè)置成分割線顏色,貼底
設(shè)置分割線顏色為透明色
warning 在cell中,盡量不要使用透明色
self.tableView.separatorColor = [UIColor
clearColor];
設(shè)置分割線樣式為None
self.tableView.separatorStyle =
UITableViewCellSeparatorStyleNone;
另一種自定義分割線的方法
設(shè)置好子控件以后會(huì)自動(dòng)調(diào)用這個(gè)方法
- (void)awakeFromNib
{
另一種快速設(shè)置cell分割線的土方法
self.layer.borderColor = [UIColor colorWithRed:0.5
green:0.5 blue:0.5 alpha:0.3].CGColor;
self.layer.borderWidth = 0.5;
}
通過代碼自定義分割線與添加子控件一樣
在initWithStyle方法中添加
在layoutSubView是方法中布局
