iOS開發UI篇—UITableview控件基本使用
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 //底部
iOS開發UI篇—UITableview控件基本使用