基礎(chǔ) (十六) : 等高cell

等高Cell-frame:

等高Cell-frame

知識回顧

拖入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ù)

新知識

  • 添加子控件

  • 自定義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:頂部對齊icon,左邊距離圖片10,右邊距離10,高度20

CGFloat

titleX = ;

CGFloat

titleY = ;

CGFloat

titleW = ;

CGFloat

titleH = ;

self.title_Lab.frame = CGRectMake(titleX, titleY,
titleW, titleH);

 3.價(jià)格: 底部和icon對齊,左邊和title對齊,寬100,高15

CGFloat

priceX = ;

CGFloat

priceW = ;

CGFloat

priceH = ;

CGFloat

priceY = ;

self.price_Lab.frame = CGRectMake(priceX, priceY,
priceW, priceH);

 4.購買人數(shù): 底部和價(jià)格對齊,左邊距離價(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:頂部對齊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對齊,左邊和title對齊,寬100,高15

CGFloat

priceX = titleX;

CGFloat

priceW = 100;

CGFloat

priceH = 15;

CGFloat priceY = iconY + iconH - priceH; // 底部對齊相當(dāng)于
priceY + priceH = iconY + iconH;

self.price_Lab.frame = CGRectMake(priceX, priceY,
priceW, priceH);

 4.購買人數(shù): 底部和價(jià)格對齊,左邊距離價(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; // 底部對齊相當(dāng)于 priceY + priceH = buyCountY + buyCountH;

self.buyCount_Lab.frame = CGRectMake(buyCountX,
buyCountY, buyCountW, buyCountH);

}

frameFun補(bǔ)充

在調(diào)用完layoutSubview,約束才會布局

當(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)識

  • 為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è)置好子控件以后會自動(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是方法中布局

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容