火焰 是我最喜歡的玩具！
UITableVie 中系統(tǒng)的Cell共提供了四種默認(rèn)樣式, 分別是:
UITableVieCellStyleDefault
UITableVieCellStyleValue1
UITableVieCellStyleValue2
UITableVieCellStyleSubtitle
實際我們往往需要的是更為復(fù)雜或者專門效果展示所以需要按照要求去自己定義cell
自定義cell步驟
- 1.創(chuàng)建一個
繼承于UITableViewCell的類 - 2.實現(xiàn)UITableVieCell的
初始化方法:
- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]) {
_imageLabel = [[UIImageView alloc] initWithFrame:CGRectZero];
[self.contentView addSubview:_imageLabel];
_titleLabel = [[UILabel alloc] initWithFrame:CGRectZero];
_titleLabel.numberOfLines = 0;
[self.contentView addSubview:_titleLabel];
}
return self;
}
- 3.確保所有的你想添加的
子視圖都在自定義Cell的初始化方法中創(chuàng)建,由于UITableView 的重用機(jī)制, 一個Cell在第 一次創(chuàng)建成功并于下一 次顯示的時候,不會再去走初始化方法,這樣可以避免子視圖的重復(fù)創(chuàng)建。 - 4.在Cell的子視圖創(chuàng)建成功后,
將子視圖設(shè)置為屬性,類似于UITableViewCell所自帶的 text Label和detailTextLabel屬性。便于在UITableView 的協(xié)議中給自定義視圖賦值。
@interface SecondTableViewCell : UITableViewCell
@property (nonatomic, strong) UILabel *titleLabel;
@property (nonatomic, strong) UIImageView *imageLabel;
@property (nonatomic, strong) SecondModel *secondModel;
@end
多種cell可以混合使用
一個重用標(biāo)識符只能針對于一種Cell樣式,不同的Cell樣式需要基于不同的重用標(biāo)識符來進(jìn)行區(qū)分, 重用標(biāo)識符的區(qū)分需要根據(jù)不同的情況來劃分, 如:
- model屬性劃分(不同的數(shù)據(jù)內(nèi)容, 如 一個數(shù)據(jù)中有圖片類型有文字類型)
Model *model = [self.tableArray objectAtIndex:indexPath.row];
//根據(jù)model屬性劃分
if (model.type == 0) {
FirstTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:firstIdentify];
return cell;
}
if (model.type == 1) {
SecondTableViewCell *cell = [tableView
dequeueReusableCellWithIdentifier:secondIdentify]; return cell;
}
- 固定的行顯示的Cell類型不一樣
// 第?一?行顯?示第?一種Cell
if (indexPath.row == 0) {
FirstTableViewCell *cell = [tableViewdequeueReusableCellWithIdentifier:firstIdentify];
return cell;
}
// 第?二?行顯?示第?二種Cell
if (indexPath.row == 1) {
SecondTableViewCell *cell = [tableViewdequeueReusableCellWithIdentifier:secondIdentify];
return cell;
}
布控子視圖方法LayoutSubviews的調(diào)用場景
- 當(dāng)前視圖添加到父視圖的時候
- 當(dāng)前視圖的大小發(fā)變化的時候
- 切換橫豎屏
- ScrollView 滾動的時候
一般 ,Cell在創(chuàng)建的時候的fame 是(0,0,320,44), 我們給定的Cell的 度 般都會 于這個 。因此:在自定義Cell中創(chuàng)建的子視圖的frame為CGRectZero。在Cell添加到TableView上的時候才會給子視圖設(shè)置frame(即LayoutSubviews方法中),Cell 添加到TableView 的時候其大小已經(jīng)更改為TableView設(shè)定的大小 ,這樣就方便布局
- (void)layoutSubviews
{
//賦值
_imageLabel.image = [UIImage imageNamed:_secondModel.picUrl];
_titleLabel.text = _secondModel.title;
//取圖片和標(biāo)簽的高度
CGFloat labelH = [CalculateTool heightForLabel:_secondModel.title];
CGFloat imageH = [CalculateTool heightForImage:_secondModel.picUrl];
//設(shè)置frame
_imageLabel.frame = CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width*2/3, imageH);
_titleLabel.frame = CGRectMake(CGRectGetMaxX(_imageLabel.frame), 0, [UIScreen mainScreen].bounds.size.width/3, labelH);
}
Model的使用
- Model類主要是為了給我們提供數(shù)據(jù),簡單的說就是定義類且繼承于NSObject的稱之為Model。 繼承于UIView 的稱之為View 類。
- 現(xiàn)在我們的數(shù)據(jù)提供都是存放在數(shù)組和字典中,OC中的KVC就是幫助我們將字典轉(zhuǎn)換為Model類而存在的。
創(chuàng)建步驟:
1. 創(chuàng)建一個類并繼承于NSObject
2. 添加和字典中對應(yīng)的屬性 (根據(jù)數(shù)據(jù)處理)
3. 在視圖控制器中將字典通過KVC為Model賦值
4. 將Model對象添加到數(shù)組中并刷新TableView
#import <Foundation/Foundation.h>
@interface SecondModel : NSObject
@property (nonatomic, strong) NSString *title;
@property (nonatomic, strong) NSString *picUrl;
- (instancetype)initWithDic:(NSDictionary *)dic;
+ (instancetype)secondModelWithDic:(NSDictionary *)dic;
@end
#import "SecondModel.h"
@implementation SecondModel
- (instancetype)initWithDic:(NSDictionary *)dic
{
if (self = [super init]) {
[self setValuesForKeysWithDictionary:dic];
}
return self;
}
+ (instancetype)secondModelWithDic:(NSDictionary *)dic
{
return [[SecondModel alloc] initWithDic:dic];
}
- (void)setValue:(id)value forUndefinedKey:(NSString *)key
{
}
@end
封裝一個自適應(yīng)高度方法實現(xiàn)兩個功能
- 文本自適應(yīng)高度:根據(jù)文本的內(nèi)容設(shè)定Label的高度
- 圖片的高度適應(yīng):根據(jù)圖片的寬度進(jìn)行等比例縮放
建一個工具類GetHeightTool:繼承于NSObject
#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>
@interface CalculateTool : NSObject
+ (CGFloat)heightForLabel:(NSString *)text;
+ (CGFloat)heightForImage:(NSString *)imageName;
@end
#import "CalculateTool.h"
@implementation CalculateTool
+ (CGFloat)heightForLabel:(NSString *)text
{
//計算字符串所占的大小
CGRect rect = [text boundingRectWithSize:CGSizeMake([UIScreen mainScreen].bounds.size.width/3, 10000) options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName:[UIFont systemFontOfSize:17]} context:nil];
return rect.size.height;
}
+ (CGFloat)heightForImage:(NSString *)imageName
{
if (imageName) {
UIImage *image = [UIImage imageNamed:imageName];
CGFloat width = image.size.width;
CGFloat height = image.size.height;
return height / width * ([UIScreen mainScreen].bounds.size.width);
}
return 0;
}
@end
boundingRectWithSize的接口說明
- 傳入?yún)?shù)：
參數(shù)1: 你需要展示的文字
參數(shù)2: 你需要的字體類型一般就是給大小
參數(shù)3: 你定義的Label的寬也就是要在多寬的地方展示文字 - 返回值
返回值就是自適應(yīng)的高度
封裝接口說明
- 傳入?yún)?shù)
heightForLabel：label上字符串的名字（NSString類型）
heightForImage：ImageView上照片的名字（NSString類型）
使用場景
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
SecondModel *model = _dataArray[indexPath.row];
//文字高度
CGFloat labelH = [CalculateTool heightForLabel:model.title];
//圖片高度
CGFloat imageH = [CalculateTool heightForImage:model.picUrl];
CGFloat length = labelH + 20 +imageH;
return length;
}
