iOS开发UI篇—UITableview控件基本使用
一、一个简单的英雄展示程序
NJHero.h文件代码（字典转模型）
#import <Foundation/Foundation.h> @interface NJHero : NSObject /** * 头像 */ @property (nonatomic, copy) NSString *icon; /** * 名称 */ @property (nonatomic, copy) NSString *name; /** * 描述 */ @property (nonatomic, copy) NSString *intro; - (instancetype)initWithDict:(NSDictionary *)dict; + (instancetype)heroWithDict:(NSDictionary *)dict; @end
NJViewController.m文件代码
#import "NJViewController.h" #import "NJHero.h" @interface NJViewController ()<UITableViewDataSource, UITableViewDelegate> /** * 保存所有的英雄数据 */ @property (nonatomic, strong) NSArray *heros; @property (weak, nonatomic) IBOutlet UITableView *tableView; @end @implementation NJViewController #pragma mark - 懒加载 - (NSArray *)heros { if (_heros == nil) { // 1.获得全路径 NSString *fullPath = [[NSBundle mainBundle] pathForResource:@"heros" ofType:@"plist"]; // 2.更具全路径加载数据 NSArray *dictArray = [NSArray arrayWithContentsOfFile:fullPath]; // 3.字典转模型 NSMutableArray *models = [NSMutableArray arrayWithCapacity:dictArray.count]; for (NSDictionary *dict in dictArray) { NJHero *hero = [NJHero heroWithDict:dict]; [models addObject:hero]; } // 4.赋值数据 _heros = [models copy]; } // 4.返回数据 return _heros; } - (void)viewDidLoad { [super viewDidLoad]; // 设置Cell的高度 // 当每一行的cell高度一致的时候使用属性设置cell的高度 self.tableView.rowHeight = 60; self.tableView.delegate = self; } #pragma mark - UITableViewDataSource // 返回多少组 - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView { return 1; } // 返回每一组有多少行 - (NSInteger) tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { return self.heros.count; } // 返回哪一组的哪一行显示什么内容 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { // 1.创建CELL UITableViewCell *cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:nil]; // 2.设置数据 // 2.1取出对应行的模型 NJHero *hero = self.heros[indexPath.row]; // 2.2赋值对应的数据 cell.textLabel.text = hero.name; cell.detailTextLabel.text = hero.intro; cell.imageView.image = [UIImage imageNamed:hero.icon]; // 3.返回cell return cell; } #pragma mark - UITableViewDelegate /* // 当每一行的cell的高度不一致的时候就使用代理方法设置cell的高度 - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath { if (1 == indexPath.row) { return 180; } return 44; } */ #pragma mark - 控制状态栏是否显示 /** * 返回YES代表隐藏状态栏, NO相反 */ - (BOOL)prefersStatusBarHidden { return YES; } @end
实现效果：
代码注意点：
（1）在字典转模型的代码处用下面的代码，为可变数组分配dictArray.count个存储空间，可以提高程序的性能
NSMutableArray *models = [NSMutableArrayarrayWithCapacity:dictArray.count];
（2）设置cell的高度
有三种办法可以设置cell的高度
1） 可以在初始加载方法中设置，self.tableView.rowHeight = 60;这适用于当每一行的cell高度一致的时候，使用属性设置cell的高度。
2）在storyboard中设置，适用于高度一致
3）当每一行的cell的高度不一致的时候就使用代理方法设置cell的高度
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
if (1 == indexPath.row) {
return 180;
}
return 44;
}
二、cell的一些属性
代码示例：
#import "NJViewController.h" #import "NJHero.h" @interface NJViewController ()<UITableViewDataSource, UITableViewDelegate> /** * 保存所有的英雄数据 */ @property (nonatomic, strong) NSArray *heros; @property (weak, nonatomic) IBOutlet UITableView *tableView; @end @implementation NJViewController #pragma mark - 懒加载 - (NSArray *)heros { if (_heros == nil) { // 1.获得全路径 NSString *fullPath = [[NSBundle mainBundle] pathForResource:@"heros" ofType:@"plist"]; // 2.更具全路径加载数据 NSArray *dictArray = [NSArray arrayWithContentsOfFile:fullPath]; // 3.字典转模型 NSMutableArray *models = [NSMutableArray arrayWithCapacity:dictArray.count]; for (NSDictionary *dict in dictArray) { NJHero *hero = [NJHero heroWithDict:dict]; [models addObject:hero]; } // 4.赋值数据 _heros = [models copy]; } // 4.返回数据 return _heros; } - (void)viewDidLoad { [super viewDidLoad]; // 设置Cell的高度 // 当每一行的cell高度一致的时候使用属性设置cell的高度 self.tableView.rowHeight = 60; self.tableView.delegate = self; } #pragma mark - UITableViewDataSource // 返回多少组 - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView { return 1; } // 返回每一组有多少行 - (NSInteger) tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { return self.heros.count; } // 返回哪一组的哪一行显示什么内容 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { // 1.创建CELL UITableViewCell *cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:nil]; // 2.设置数据 // 2.1取出对应行的模型 NJHero *hero = self.heros[indexPath.row]; // 2.2赋值对应的数据 cell.textLabel.text = hero.name; cell.detailTextLabel.text = hero.intro; cell.imageView.image = [UIImage imageNamed:hero.icon]; // 2.3设置cell的辅助视图 // cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator; if (0 == indexPath.row) { cell.accessoryView = [UIButton buttonWithType:UIButtonTypeContactAdd]; }else { cell.accessoryView = [[UISwitch alloc] init]; } // UIButton *btn = [[UIButton alloc] init]; // btn.backgroundColor = [UIColor redColor]; // cell.accessoryView = btn; // 2.4设置cell的背景颜色 cell.backgroundColor = [UIColor blueColor]; // 设置默认状态的背景 // UIView *view = [[UIView alloc] init]; // view.backgroundColor = [UIColor blueColor]; // cell.backgroundView = view; UIImageView *iv = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"buttondelete"]]; cell.backgroundView = iv; // 设置选中状态的背景 UIView *view2 = [[UIView alloc] init]; view2.backgroundColor = [UIColor purpleColor]; cell.selectedBackgroundView = view2; // 3.返回cell return cell; } #pragma mark - 控制状态栏是否显示 /** * 返回YES代表隐藏状态栏, NO相反 */ - (BOOL)prefersStatusBarHidden { return YES; } @end
实现效果：
cell的一些属性：
（1）设置cell的辅助视图，设置cell.accessoryView（系统提供了枚举型，也可以自定义@父类指针指向子类对象）；
（2）设置cell的背景颜色，有两种方式可以设置cell的背景颜色：
通过backgroundColor 和 backgroundView都可以设置cell的背景。但是backgroundView 的优先级比 backgroundColor的高，所以如果同时设置了backgroundColor和backgroundView, 那么backgroundView会盖住backgroundColor
示例：cell.backgroundColor = [UIColorblueColor];
（3）设置cell默认状态的背景
示例1：
UIView *view = [[UIView alloc] init];
view.backgroundColor = [UIColor blueColor];
cell.backgroundView = view;
示例2：
UIImageView *iv = [[UIImageViewalloc] initWithImage:[UIImageimageNamed:@"buttondelete"]];
cell.backgroundView = iv;（父类指针指向子类对象，可以使用图片用简单的操作设置绚丽的效果）
（4）设置cell选中状态的背景
示例：
UIView *view2 = [[UIView alloc] init];
view2.backgroundColor = [UIColorpurpleColor];
cell.selectedBackgroundView = view2;
三、tableview的一些属性
代码示例：
#import "NJViewController.h" @interface NJViewController ()<UITableViewDataSource> @end @implementation NJViewController - (void)viewDidLoad { [super viewDidLoad]; // 1.创建tableview UITableView *tableview = [[UITableView alloc] init]; tableview.frame = self.view.bounds; // 2.设置数据源 tableview.dataSource =self; // 3.添加tableview到view [self.view addSubview:tableview]; // 4.设置分割线样式 // tableview.separatorStyle = UITableViewCellSeparatorStyleNone; // 5.设置分割线颜色 接收的参数是颜色的比例值 tableview.separatorColor = [UIColor colorWithRed:0/255.0 green:255/255.0 blue:0/255.0 alpha:255/255.0]; // 设置tableview的头部视图 tableview.tableHeaderView = [UIButton buttonWithType:UIButtonTypeContactAdd]; tableview.tableFooterView = [[UISwitch alloc] init]; } - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView { return 1; } - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { return 10; } - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { // 1.创建cell UITableViewCell *cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:nil]; // 2.设置cell的数据 cell.textLabel.text = [NSString stringWithFormat:@"%d", indexPath.row ]; // 3.返回cell return cell; } - (BOOL)prefersStatusBarHidden { return YES; } @end
实现效果：
tableview的一些属性：
（1）设置分割样式（tableview.separatorStyle），这是个枚举类型
（2）设置分割线的颜色，可以直接使用系统给出的颜色，如果系统给定的颜色不能满足需求时，也可以自定义。
补充：颜色分为24位和32位的，如下
24bit颜色
R 8bit 0 ~ 255
G 8bit 0 ~ 255
B 8bit 0 ~ 255
32bit颜色
A 8bit 0 ~ 255（tou）
R 8bit
G 8bit
B 8bit
#ff ff ff 白色
#00 00 00 黑色
#ff 00 00 红色
#255 00 00
设置为自定义颜色的实例:tableview.separatorColor = [UIColorcolorWithRed:0/255.0green:255/255.0blue:0/255.0alpha:255/255.0];
//接收的参数是颜色的比例值
(3)设置顶部和底部视图
tableview.tableHeaderView //顶部
tableview.tableFooterView //底部