自定義view和自定義cell

 

自定義視圖:系統標準UI以外, 組合造成出的新的視圖。 即建立一個類繼承於UIView 或者其餘的視圖,在自定義類中建立其視圖,這樣就會造成一個新的自定義視圖。佈局

自定義視圖的優勢: atom

iOS提供了不少UI組件,藉助它們咱們能夠實現不一樣的功能。儘管如此,實際開發中,咱們還需自定義視圖。積累本身的代碼庫,方便咱們的開發。 封裝的視圖,能像系統UI控件同樣, 於別的項目中,能下降開發成本,提升開發效率。 繼承

質量代碼的特色:可複製性 ,可移植,精煉等。( 內聚,低耦合) 內存

 

自定義視圖步驟開發

一、建立一個LUIView  it

@interface LTView : UIView內存管理

//自定義視圖第一步:明確該視圖內部有什麼控件,而且將全部控件聲明成屬性效率

@property (nonatomic, retain) UILabel *label;方法

@property (nonatomic, retain) UITextField *textField;im

 

//自定義初始化方法

- (instancetype)initWithFrame:(CGRect)frame text:(NSString *)text textColor:(UIColor *)textColor font:(UIFont *)font borderStyle:(UITextBorderStyle)borderStyle placeholder:(NSString *)placeholder secureTextEntry:(BOOL)secureTextEntry keyboardType:(UIKeyboardType)keyboardType;

 

 

此時的LTView就變成了一個具備labelTextField的視圖了。 

 

 //重寫LTView繼承自UIView的佈局方法,來建立子視圖,而且添加子視圖

- (instancetype)initWithFrame:(CGRect)frame {

    self = [super initWithFrame:frame];

    if (self) {

        //用參數中的frame(LTView視圖總體的frame)來表示內部控件的frame

        //LTView的寬和高

        CGFloat totalWidth = frame.size.width;

        CGFloat totalHeight = frame.size.height;

        

        //label的寬和高

        CGFloat labelWidth = (totalWidth - 15) / 3;

        CGFloat labelHeight = totalHeight - 4;

        

        //textField的寬和高

        CGFloat textFieldWidth = 2 * labelWidth;

        CGFloat textFieldHeight = labelHeight;

        

        _label = [[UILabel alloc] initWithFrame:CGRectMake(5, 2, labelWidth, labelHeight)];

//        _label.backgroundColor = [UIColor redColor];

        [self addSubview:_label];

        

        _textField = [[UITextField alloc] initWithFrame:CGRectMake(10 + labelWidth, 2, textFieldWidth, textFieldHeight)];

//        _textField.backgroundColor = [UIColor blueColor];

        [self addSubview:_textField];

    }

    return self;

}

 

//自定義初始化方法

- (instancetype)initWithFrame:(CGRect)frame text:(NSString *)text textColor:(UIColor *)textColor font:(UIFont *)font borderStyle:(UITextBorderStyle)borderStyle placeholder:(NSString *)placeholder secureTextEntry:(BOOL)secureTextEntry keyboardType:(UIKeyboardType)keyboardType {

    self = [self initWithFrame:frame];

    if (self) {

        self.label.text = text;

        self.label.textColor = textColor;

        self.label.font = font;

        self.textField.borderStyle = borderStyle;

        self.textField.placeholder = placeholder;

        self.textField.secureTextEntry = secureTextEntry;

        self.textField.keyboardType = keyboardType;

    }

    return self;

}

 

 

 

自定義cell

UITableView中系統的Cell共提供了四種默認樣式, 分別是: 

UITableViewCellStyleDefault

 UITableViewCellStyleValue1 

UITableViewCellStyleValue2 

UITableViewCellStyleSubtitle 

可是在實際使用過程當中,Cell樣式的佈局上千差萬別, 系統提供的cell滿 不了複雜的樣式,所以: 定義Cell 和 定義視圖 樣, 建立 種符合咱們需求的Cell而且使用這個Cell。 

自定義Cell步驟: 

建立一個類繼承於UITableViewCell。 實現UITableViewCell的初始化方法:
- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier 。 確保全部的你想添加的視圖都在自定義Cell的初始化方法中建立,因爲UITableView的重用機制, 這個Cell在第一次建立成功並用於下一次顯示的時候,不會再走初始化方法,這樣能夠避免視圖的重複建立。 在Cell視圖建立成功後,將視圖設置爲屬性,相似於 UITableViewCell所自帶的textLabel和detailTextLabel屬性。方便於在UITableView的協議中給自定義視圖賦值。 

 

1、將全部cell要顯示的子視圖控件聲明成屬性

2、重寫cell的初始化方法,frame給定爲0,將控件添加到cell上面進行顯示,必定要注意使用self.contentView添加

3、重寫layoutSubviews方法,給定內部控件的具體位置

4、導入模型,將模型與cell綁定,聲明模型屬性

5、重寫模型屬性的setter方法,內部使用模型爲內部控件賦值

6、內存管理

 

@property (nonatomic, retain) UIImageView *headerImageView;//頭像

@property (nonatomic, retain) UILabel *nameLabel;//姓名

@property (nonatomic, retain) UILabel *genderLabel;//性別

@property (nonatomic, retain) UILabel *ageLabel;//年齡

 

//在cell內部綁定一個模型屬性

@property (nonatomic, retain) Student *stu;

 

//重寫cell的初始化方法。

- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {

    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];

    if (self) {

        _headerImageView = [[UIImageView alloc] initWithFrame:CGRectZero];

        _headerImageView.backgroundColor = [UIColor redColor];

        //自定義cell內部添加子視圖 不能使用self,應該是使用self.contentView

        [self.contentView addSubview:_headerImageView];

        

        _nameLabel = [[UILabel alloc] initWithFrame:CGRectZero];

        _nameLabel.backgroundColor = [UIColor yellowColor];

        [self.contentView addSubview:_nameLabel];

        

        _genderLabel = [[UILabel alloc] initWithFrame:CGRectZero];

        _genderLabel.backgroundColor = [UIColor greenColor];

        [self.contentView addSubview:_genderLabel];

        

        _ageLabel = [[UILabel alloc] initWithFrame:CGRectZero];

        _ageLabel.backgroundColor = [UIColor blueColor];

        [self.contentView addSubview:_ageLabel];

    }

    return self;

}

 

//重寫模型的setter方法。完成賦值

- (void)setStu:(Student *)stu {

    if (_stu != stu) {

        [_stu release];

        _stu = [stu retain];

        

        //爲內部控件進行賦值

        _headerImageView.image = [UIImage imageNamed:_stu.picture];

        _nameLabel.text = _stu.name;

        _genderLabel.text = _stu.gender;

        _ageLabel.text = _stu.age;

    }

}

 

 

 

- (void)layoutSubviews {

    [super layoutSubviews];

    _headerImageView.frame = CGRectMake(5, 5, 50, 80);

    _nameLabel.frame = CGRectMake(65, 5, 100, 20);

    _genderLabel.frame = CGRectMake(65, 35, 100, 20);

    _ageLabel.frame = CGRectMake(65, 65, 100, 20);

}

 

@end

相關文章
相關標籤/搜索