iOS開發 --UITableviewCell的自訂與計算frame

標籤：

一、UITableViewCell簡介

UITableView上的每一行的內容都是UITableViewCell來顯示的，通過 UITableViewDataSource的協議方法：tableView:cellForRowAtIndexPath:來初始化要顯示的內容。而 UITableViewCell則是通過它內建的contentView來顯示，每個Cell都預設有個子視圖contentView，所以每個cell 上顯示的內容都是加在這個視圖上。

系統的UITableViewCell有四種類型   

　 UITableViewCellStyleDefault,  
    UITableViewCellStyleValue1,     
    UITableViewCellStyleValue2,       
    UITableViewCellStyleSubtitle  

這四種類型自己嘗試一下看看有什麼不同，開發一般很少會用的到，因為系統的滿足不了我們的需求，所以我們經常會自訂UITableViewCell

UITableView的一些屬於：

有時候我們會發現很多UITableViewCell右側可以顯示不同的表徵圖，在iOS中稱之為訪問器，點擊可以觸發不同的事件，例如iPhone系統的設定

要設定這些表徵圖只需要設定UITableViewCell的accesoryType屬性，accesoryType是一個枚舉類型，有以下幾種類型：

typedef NS_ENUM(NSInteger, UITableViewCellAccessoryType) {    UITableViewCellAccessoryNone,                   // 不顯示任何表徵圖    UITableViewCellAccessoryDisclosureIndicator,    // 跳轉指示表徵圖    UITableViewCellAccessoryDetailDisclosureButton, // 內容詳情表徵圖和跳轉指示表徵圖    UITableViewCellAccessoryCheckmark,              // 勾選表徵圖    UITableViewCellAccessoryDetailButton NS_ENUM_AVAILABLE_IOS(7_0) // 內容詳情表徵圖};

但是，你會發現沒有第一個cell的accesoryType沒有這種類型，其實只要設定UITableViewCell的accessoryView就可以讓你的cell顯示你想要的控制項，只要是一個UIView都能支援

二、如何自訂UITableViewCell

1.首先要知道你想要顯示怎麼樣的cell

2.將你需要顯示的控制項都定義成屬性

3.因為開發的時候給cell賦值時一般都是有對應的model，所以最好寫一個方法專門給cell賦值

4.因為我們自訂cell的時候可能會有很多控制項，可以寫一個類來計算這些控制項的frame，然後寫一個方法來給這些控制項設定frame，最後可以在調用給cell賦值方法的時候一起調用這個方法

 

這裡我簡單的模仿一下QQ社交動向更新的frame的計算

#import <Foundation/Foundation.h>@interface MZQQModel : NSObject@property (nonatomic,copy) NSString *text;@property (nonatomic,copy) NSString *icon;@property (nonatomic,copy) NSString *name;@property (nonatomic,copy) NSString *picture;@property (nonatomic,copy) NSString *time;@property (nonatomic,copy) NSString *expert;@end#import <UIKit/UIKit.h>@class MZQQModel;@interface MZQQFrame : NSObject@property (nonatomic, strong) MZQQModel *qqModel;@property (nonatomic, assign, readonly) CGRect iconFrame; // 頭像的frame@property (nonatomic, assign, readonly) CGRect nameFrame; // 暱稱的frame@property (nonatomic, assign, readonly) CGRect timeFrame; // 時間的frame@property (nonatomic, assign, readonly) CGRect expertFrame; // QQ達人的Frame@property (nonatomic, assign, readonly) CGRect textFrame; // 本文的Frame@property (nonatomic, assign, readonly) CGRect pictureFrame; // 圖片的Frame@property (nonatomic, assign, readonly) CGFloat rowHeight; // 總得高度@end#import "MZQQFrame.h"#import "MZQQModel.h"#define MZNameFont 15 // 暱稱字型的大小#define MZTextFont 14 // 內容字型的大小#define kScreenWidth [UIScreen mainScreen].bounds.size.width@implementation MZQQFrame//計算文字的大小- (CGSize)sizeWithText:(NSString *)text maxSize:(CGSize)maxSize fontSize:(CGFloat)fontSize{    //計算文本的大小    CGSize nameSize = [text boundingRectWithSize:maxSize options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName:[UIFont systemFontOfSize:fontSize]} context:nil].size;    return nameSize;}- (void)setQqModel:(MZQQModel *)qqModel{        _qqModel = qqModel;        CGFloat margin = 10;    //頭像    CGFloat iconW = 40;    CGFloat iconH = 40;    CGFloat iconX = margin;    CGFloat iconY = margin;    _iconFrame = CGRectMake(iconX, iconY, iconW, iconH);    //暱稱    CGSize nameSize = [self sizeWithText:self.qqModel.name maxSize:CGSizeMake(MAXFLOAT, MAXFLOAT) fontSize:MZNameFont];    CGFloat nameX = CGRectGetMaxX(_iconFrame) + margin;    CGFloat nameY = iconY;    _nameFrame = CGRectMake(nameX, nameY, nameSize.width, nameSize.height);    //時間    CGSize timeSize = [self sizeWithText:self.qqModel.time maxSize:CGSizeMake(kScreenWidth - CGRectGetMidX(_pictureFrame), MAXFLOAT) fontSize:12];    CGFloat timeX = nameX;    CGFloat timeY = CGRectGetMaxY(_nameFrame) + margin;    _timeFrame = CGRectMake(timeX, timeY, timeSize.width, timeSize.height);    //達人    CGFloat expertW = 14;    CGFloat expertH = 14;    CGFloat expertY = nameY;    CGFloat expertX = CGRectGetMaxX(_nameFrame) + margin;    _expertFrame = CGRectMake(expertX, expertY, expertW, expertH);    //QQ內容    CGSize textSize = [self sizeWithText:self.qqModel.text maxSize:CGSizeMake(kScreenWidth - 2 * margin, MAXFLOAT) fontSize:MZTextFont];    CGFloat textX = iconX;    CGFloat textY = CGRectGetMaxY(_iconFrame) + margin;    _textFrame = CGRectMake(textX, textY, textSize.width, textSize.height);        //QQ圖片 （這裡的圖片大小給定了100，實際根據自己需求調整）    if (self.qqModel.picture) {        CGFloat pictureW = 100;        CGFloat pictureH = 100;        CGFloat pictureX = iconX;        CGFloat pictureY = CGRectGetMaxY(_textFrame) + margin;        _pictureFrame = (CGRect){{pictureX,pictureY},{pictureW,pictureH}};                _rowHeight = CGRectGetMaxY(_pictureFrame) + margin;    }else{        _rowHeight = CGRectGetMaxY(_textFrame) + margin;    }    }@end#import <UIKit/UIKit.h>@class MZQQFrame;@interface MZQQCell : UITableViewCell@property (nonatomic, strong) MZQQFrame *qqFrame;@end#import "MZQQCell.h"#import "MZQQFrame.h"#import "MZQQModel.h"@interface MZQQCell ()@property (nonatomic, strong) UIImageView *iconView; // 頭像@property (nonatomic, strong) UILabel *nameView; // 暱稱@property (nonatomic, strong) UILabel *timeView; // 時間@property (nonatomic, strong) UIImageView *expertView; // 達人@property (nonatomic, strong) UILabel *textView; // 本文@property (nonatomic, strong) UIImageView *pictureView; // 圖片@end@implementation MZQQCell- (UIImageView *)iconView{    if (!_iconView) {        _iconView = [[UIImageView alloc] init];    }    return _iconView;}- (UILabel *)nameView{    if (!_nameView) {        _nameView = [[UILabel alloc] init];    }    return _nameView;}- (UILabel *)timeView{    if (!_timeView) {        _timeView = [[UILabel alloc] init];    }    return _timeView;}- (UIImageView *)expertView{    if (!_expertView) {        _expertView = [[UIImageView alloc] init];    }    return _expertView;}- (UILabel *)textView{    if (!_textView) {        _textView = [[UILabel alloc] init];    }    return _textView;}- (UIImageView *)pictureView{    if (!_pictureView) {        _pictureView = [[UIImageView alloc] init];    }    return _pictureView;}- (void)setQqFrame:(MZQQFrame *)qqFrame{        _qqFrame = qqFrame;    //設定子控制項顯示的內容    [self setSubViewsContent];    //設定子控制項的frame    [self setSubViewsFrame];    }- (void)setSubViewsContent{        MZQQModel *qqModel = self.qqFrame.qqModel;    self.iconView.image = [UIImage imageNamed:qqModel.icon];    self.nameView.text = qqModel.name;    self.timeView.text = qqModel.time;        // 如果qqModel.expert有值給圖片    if (qqModel.expert) {        self.expertView.hidden = NO;        self.expertView.image = [UIImage imageNamed:qqModel.expert];    }else{        self.expertView.hidden = YES;    }    if (_pictureView) {        self.pictureView.image = [UIImage imageNamed:qqModel.picture];    }}- (void)setSubViewsFrame{        self.iconView.frame = self.qqFrame.iconFrame;    self.nameView.frame = self.qqFrame.nameFrame;    self.timeView.frame = self.qqFrame.timeFrame;    self.expertView.frame = self.qqFrame.expertFrame;    self.textView.frame = self.qqFrame.textFrame;    self.pictureView.frame = self.qqFrame.pictureFrame;    }

上面都是一些計算frame的方法

 

其實計算frame並不是很難，只要你確定第一個控制項的位置，你就可以根據第一個控制項將其它控制項的frame一一計算出來

 

當然，cell還有很多屬性和方法，有興趣的可以自己去研究研究

 

iOS開發 --UITableviewCell的自訂與計算frame