您的位置:首页 > 产品设计 > UI/UE

iOS学习笔记-030.UITableView——自定义单元格UITableViewCell

2017-01-18 17:56 453 查看
UITableView自定义单元格UITableViewCell
一三种方式

二Storyboard
使用Storyboad创建界面时候要注意

代码
Bookm

BookCellm

ViewControllerm

图示

三XIB
创建

需要注意

代码

四代码方式创建
注意

ChatCellm

ViewControllerm

图示

UITableView——自定义单元格UITableViewCell

一、三种方式

1.xib

2.Storyboard

3.代码

注意:

通过XIB或者Storyboard自定义单元格时,需要指定单元格的可重用标示符
如果使用XIB方式,需要在viewDidload方法中,注册XIB文件
UINib *nib = [UINib nibWithNibName:@”bookCell" bundle:[NSBundle mainBundle]];
[self.tableView registerNib:nib forCellReuseIdentifier:@”cell"];


二、Storyboard

1.使用Storyboad创建界面时候要注意





2.代码

1.Book.m

//
//  Book.m
//  03_UIView22_UITableView7_storyboard
//
//  Created by 杞文明 on 16/1/6.
//  Copyright © 2016年 杞文明. All rights reserved.
//
#import "Book.h"
@implementation Book
-(id)initWithBookName:(NSString *)newBookName AndPrice:(CGFloat)newPrice{
if(self=[super init]){
[self setBookName:newBookName];
[self setPrice:newPrice];
}
return self;
}

@end


2.BookCell.m

//
//  BookCell.m
//  03_UIView22_UITableView7_storyboard
//
//  Created by 杞文明 on 16/1/6.
//  Copyright © 2016年 杞文明. All rights reserved.
//
#import "BookCell.h"
@implementation BookCell
- (IBAction)payFor:(id)sender {
NSLog(@"购买:《%@》",_bookNameLb.text);
}
- (IBAction)privaties:(id)sender {
NSLog(@"收藏:《%@》",_bookNameLb.text);
}
@end


3.ViewController.m

//
//  ViewController.m
//  03_UIView22_UITableView7_storyboard
//
//  Created by 杞文明 on 16/1/6.
//  Copyright © 2016年 杞文明. All rights reserved.
//
#import "ViewController.h"
#import "Book.h"
#import "BookCell.h"

@interface ViewController (){
NSMutableArray* _dataListM;
}

@end

@implementation ViewController

- (void)viewDidLoad {
[super viewDidLoad];
[self loadData];
[_tableView setDataSource:self];
[_tableView setDelegate:self];
}

#pragma mark - 加载数据
-(void)loadData{
_dataListM = [[NSMutableArray alloc]init];
for (NSInteger i=1; i<=20; i++) {
NSString * name = [NSString stringWithFormat:@"小明ios进阶(%ld)",i];
CGFloat price = 2.34 *i;
Book *book = [[Book alloc]initWithBookName:name AndPrice:price];
[_dataListM addObject:book];
}
}

#pragma mark 要加载的数据的行数
-(NSInteger)tableView:(nonnull UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
return _dataListM.count;
}

#pragma mark 每个单元格的设置
-(UITableViewCell*)tableView:(nonnull UITableView *)tableView cellForRowAtIndexPath:(nonnull NSIndexPath *)indexPath{
static NSString *identifier = @"bookCell";
BookCell* cell = [tableView dequeueReusableCellWithIdentifier:identifier];
if (cell==nil) {
cell = [[BookCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:identifier];
}
Book *book = _dataListM[indexPath.row];
[cell.bookNameLb setText:book.bookName];
[cell.priceLb setText:[NSString stringWithFormat:@"%.2f",book.price]];
return cell;
}
@end


3.图示



三、XIB

1.创建





2.需要注意

注意:需要注册XIB,一定要在viewDidLoad中

- (void)viewDidLoad {
[super viewDidLoad];
// 注意:以下几句注册XIB的代码,一定要在viewDidLoad中!
// 注册XIB文件 注意,参数中的nibName不能使用扩展名
UINib * nib = [UINib nibWithNibName:@"BookCell" bundle:[NSBundle mainBundle]];
[self.tableView registerNib:nib forCellReuseIdentifier:@"bookCell"];
}

#pragma mark 单元格的创建
-(UITableViewCell*)tableView:(nonnull UITableView *)tableView cellForRowAtIndexPath:(nonnull NSIndexPath *)indexPath{
NSString* identifier = @"bookCell";
//使用这个的时候,必须注册 xib
BookCell * cell = [tableView dequeueReusableCellWithIdentifier:identifier forIndexPath:indexPath];
Book * book = _dataListM[indexPath.row];
[cell.bookNameLb setText:book.bookName];
[cell.priceLb setText:[NSString stringWithFormat:@"%.2f",book.price]];
return cell;
}


3.代码

//
//  ViewController.m
//  03_UIView23_UITableView8_xib
//
//  Created by 杞文明 on 16/1/7.
//  Copyright © 2016年 杞文明. All rights reserved.
//

#import "ViewController.h"
#import "BookCell.h"
#import "Book.h"

@interface ViewController() {
NSMutableArray* _dataListM;
}@end

@implementation ViewController

- (void)viewDidLoad {
[super viewDidLoad];
[self loadData];

// 注意:以下几句注册XIB的代码,一定要在viewDidLoad中!
// 注册XIB文件 注意,参数中的nibName不能使用扩展名
UINib * nib = [UINib nibWithNibName:@"BookCell" bundle:[NSBundle mainBundle]];
[self.tableView registerNib:nib forCellReuseIdentifier:@"bookCell"];
}

#pragma mark - 加载数据
-(void)loadData{
_dataListM = [[NSMutableArray alloc]init];
for (NSInteger i=1; i<=20; i++) {
NSString * name = [NSString stringWithFormat:@"小明ios进阶(%d)",i];
CGFloat price = 2.34 *i;
Book *book = [[Book alloc]initWithBookName:name AndPrice:price];
[_dataListM addObject:book];
}
}

#pragma mark 要加载的数据的行数
-(NSInteger)tableView:(nonnull UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
return _dataListM.count;
}

#pragma mark 单元格的创建
-(UITableViewCell*)tableView:(nonnull UITableView *)tableView cellForRowAtIndexPath:(nonnull NSIndexPath *)indexPath{
NSString* identifier = @"bookCell";
//使用这个的时候,必须注册 xib
BookCell * cell = [tableView dequeueReusableCellWithIdentifier:identifier forIndexPath:indexPath];
Book * book = _dataListM[indexPath.row];
[cell.bookNameLb setText:book.bookName];
[cell.priceLb setText:[NSString stringWithFormat:@"%.2f",book.price]];
return cell;
}

@end


四、代码方式创建

1.注意

使用代码创建的时候,可以像平时一样创建 单元格,可以使用下面这种(推荐)

- (void)viewDidLoad {
[super viewDidLoad];
//代码注册
[_tableView registerClass:[ChatCell class] forCellReuseIdentifier:@"chatCell"];
}

#pragma mark 单元格
-(UITableViewCell*)tableView:(nonnull UITableView *)tableView cellForRowAtIndexPath:(nonnull NSIndexPath *)indexPath{
static NSString * identifier = @"chatCell";
ChatCell * cell = [tableView dequeueReusableCellWithIdentifier:identifier forIndexPath:indexPath];
[cell.chatIv setImage:[UIImage imageNamed:@"0.png"]];
[cell.msgBtn setTitle:@"明哥强爆了" forState:UIControlStateNormal];
return cell;
}


2.ChatCell.m

//
//  ChatCell.m
//  03_UIView24_UITableView9_代码
//
//  Created by 杞文明 on 16/1/7.
//  Copyright © 2016年 杞文明. All rights reserved.
//

#import "ChatCell.h"

@implementation ChatCell

-(id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(nullable NSString *)reuseIdentifier{
self = [super initWithStyle:style  reuseIdentifier:reuseIdentifier];
if (self) {
//1.创建头像
UIImageView * imageView= [[UIImageView alloc]init];
[imageView setFrame:CGRectMake(10, 10, 60, 60)];
//2.把头像添加到contentView中
[self.contentView addSubview:imageView];
_chatIv = imageView;

//3.创建消息
UIButton * button = [[UIButton alloc]init];
//3.1指定大小
[button setFrame:CGRectMake(90, 10, 260, 60)];
//3.2正常的图片
UIImage * normalImage = [UIImage imageNamed:@"chatfrom_bg_normal.png"];
//3.3图片被拉伸,我们需要设置 拉伸的点
CGFloat leftCap = normalImage.size.width / 2;
CGFloat topCap = normalImage.size.height / 2;
//3.4获取拉伸的图片
normalImage = [normalImage stretchableImageWithLeftCapWidth:leftCap topCapHeight:topCap];
[button setBackgroundImage:normalImage forState:UIControlStateNormal];

UIImage * highlightImage = [UIImage imageNamed:@"chatfrom_bg_focused.png"];
highlightImage = [highlightImage stretchableImageWithLeftCapWidth:leftCap topCapHeight:topCap];
[button setBackgroundImage:highlightImage forState:UIControlStateHighlighted];

//4.把头像添加到contentView中
[self.contentView addSubview:button];
_msgBtn = button;
}
return self;
}

@end


3.ViewController.m

//
//  ViewController.m
//  03_UIView24_UITableView9_代码
//
//  Created by 杞文明 on 16/1/7.
//  Copyright © 2016年 杞文明. All rights reserved.
//

#import "ViewController.h"
#import "ChatCell.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
[super viewDidLoad];
//代码注册
[_tableView registerClass:[ChatCell class] forCellReuseIdentifier:@"chatCell"];
}

#pragma mark 行数
-(NSInteger)tableView:(nonnull UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
return 20;
}

#pragma mark 单元格
-(UITableViewCell*)tableView:(nonnull UITableView *)tableView cellForRowAtIndexPath:(nonnull NSIndexPath *)indexPath{
static NSString * identifier = @"chatCell";
ChatCell * cell = [tableView dequeueReusableCellWithIdentifier:identifier forIndexPath:indexPath];
[cell.chatIv setImage:[UIImage imageNamed:@"0.png"]];
[cell.msgBtn setTitle:@"明哥强爆了" forState:UIControlStateNormal];
return cell;
}

#pragma mark 行高
-(CGFloat)tableView:(nonnull UITableView *)tableView heightForRowAtIndexPath:(nonnull NSIndexPath *)indexPath{
return 80.0;
}
@end


4.图示

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: