iOS开发UI篇—UITableview控件基本使用

一、一个简单的英雄展示程序

NJHero.h文件代码（字典转模型）

 1 #import <Foundation/Foundation.h>
 2  3 @interface NJHero : NSObject
 4 /**
 5  * 头像
 6 */  7 @property (nonatomic, copy) NSString *icon;
 8 /**
 9  * 名称
10 */ 11 @property (nonatomic, copy) NSString *name;
12 /**
13  * 描述
14 */ 15 @property (nonatomic, copy) NSString *intro;
16 17 - (instancetype)initWithDict:(NSDictionary *)dict;
18 + (instancetype)heroWithDict:(NSDictionary *)dict;
19 @end

NJViewController.m文件代码

 1 #import "NJViewController.h"  2 #import "NJHero.h"  3  4 @interface NJViewController ()<UITableViewDataSource, UITableViewDelegate>
 5 /**
 6  * 保存所有的英雄数据
 7 */  8 @property (nonatomic, strong) NSArray *heros;
 9 @property (weak, nonatomic) IBOutlet UITableView *tableView;
10 11 @end 12 13 @implementation NJViewController
14 15 #pragma mark - 懒加载
16 - (NSArray *)heros
17 {
18 if (_heros == nil) {
19 // 1.获得全路径 20 NSString *fullPath = [[NSBundle mainBundle] pathForResource:@"heros" ofType:@"plist"];
21 // 2.更具全路径加载数据 22 NSArray *dictArray = [NSArray arrayWithContentsOfFile:fullPath];
23 // 3.字典转模型 24 NSMutableArray *models = [NSMutableArray arrayWithCapacity:dictArray.count];
25 for (NSDictionary *dict in dictArray) {
26 NJHero *hero = [NJHero heroWithDict:dict];
27  [models addObject:hero];
28  }
29 // 4.赋值数据 30 _heros = [models copy];
31  }
32 // 4.返回数据 33 return _heros;
34 }
35 36 - (void)viewDidLoad
37 {
38  [super viewDidLoad];
39 // 设置Cell的高度
40 // 当每一行的cell高度一致的时候使用属性设置cell的高度 41 self.tableView.rowHeight = 60;
42 self.tableView.delegate = self;
43 }
44 45 #pragma mark - UITableViewDataSource
46 // 返回多少组 47 - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
48 {
49 return 1;
50 }
51 // 返回每一组有多少行 52 - (NSInteger) tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
53 {
54 return self.heros.count;
55 }
56 // 返回哪一组的哪一行显示什么内容 57 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
58 {
59 // 1.创建CELL 60 UITableViewCell *cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:nil];
61 // 2.设置数据
62 // 2.1取出对应行的模型 63 NJHero *hero = self.heros[indexPath.row];
64 // 2.2赋值对应的数据 65 cell.textLabel.text = hero.name;
66 cell.detailTextLabel.text = hero.intro;
67 cell.imageView.image = [UIImage imageNamed:hero.icon];
68 // 3.返回cell 69 return cell;
70 }
71 #pragma mark - UITableViewDelegate
72 /* 73 // 当每一行的cell的高度不一致的时候就使用代理方法设置cell的高度
74 - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
75 {
76  if (1 == indexPath.row) {
77  return 180;
78  }
79  return 44;
80 }
81 */ 82 83 #pragma mark - 控制状态栏是否显示
84 /**
85  * 返回YES代表隐藏状态栏, NO相反
86 */ 87 - (BOOL)prefersStatusBarHidden
88 {
89 return YES;
90 }
91 @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的一些属性

代码示例：

 1 #import "NJViewController.h"  2 #import "NJHero.h"  3  4 @interface NJViewController ()<UITableViewDataSource, UITableViewDelegate>
 5 /**
 6  * 保存所有的英雄数据
 7 */  8 @property (nonatomic, strong) NSArray *heros;
 9 @property (weak, nonatomic) IBOutlet UITableView *tableView;
 10  11 @end  12  13 @implementation NJViewController
 14  15 #pragma mark - 懒加载
 16 - (NSArray *)heros
 17 {
 18 if (_heros == nil) {
 19 // 1.获得全路径  20 NSString *fullPath = [[NSBundle mainBundle] pathForResource:@"heros" ofType:@"plist"];
 21 // 2.更具全路径加载数据  22 NSArray *dictArray = [NSArray arrayWithContentsOfFile:fullPath];
 23 // 3.字典转模型  24 NSMutableArray *models = [NSMutableArray arrayWithCapacity:dictArray.count];
 25 for (NSDictionary *dict in dictArray) {
 26 NJHero *hero = [NJHero heroWithDict:dict];
 27  [models addObject:hero];
 28  }
 29 // 4.赋值数据  30 _heros = [models copy];
 31  }
 32 // 4.返回数据  33 return _heros;
 34 }
 35  36 - (void)viewDidLoad
 37 {
 38  [super viewDidLoad];
 39 // 设置Cell的高度
 40 // 当每一行的cell高度一致的时候使用属性设置cell的高度  41 self.tableView.rowHeight = 60;
 42 self.tableView.delegate = self;
 43  44 }
 45  46 #pragma mark - UITableViewDataSource
 47 // 返回多少组  48 - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
 49 {
 50 return 1;
 51 }
 52 // 返回每一组有多少行  53 - (NSInteger) tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
 54 {
 55 return self.heros.count;
 56 }
 57 // 返回哪一组的哪一行显示什么内容  58 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
 59 {
 60 // 1.创建CELL  61 UITableViewCell *cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:nil];
 62 // 2.设置数据
 63 // 2.1取出对应行的模型  64 NJHero *hero = self.heros[indexPath.row];
 65 // 2.2赋值对应的数据  66 cell.textLabel.text = hero.name;
 67 cell.detailTextLabel.text = hero.intro;
 68 cell.imageView.image = [UIImage imageNamed:hero.icon];
 69  70 // 2.3设置cell的辅助视图
 71 // cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;  72 if (0 == indexPath.row) {
 73 cell.accessoryView = [UIButton buttonWithType:UIButtonTypeContactAdd];
 74 }else  75  {
 76 cell.accessoryView = [[UISwitch alloc] init];
 77  }
 78 // UIButton *btn = [[UIButton alloc] init];
 79 // btn.backgroundColor = [UIColor redColor];
 80 // cell.accessoryView = btn;
 81  82  83 // 2.4设置cell的背景颜色  84 cell.backgroundColor = [UIColor blueColor];
 85  86 // 设置默认状态的背景
 87 // UIView *view = [[UIView alloc] init];
 88 // view.backgroundColor = [UIColor blueColor];
 89 // cell.backgroundView = view;  90  91 UIImageView *iv = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"buttondelete"]];
 92 cell.backgroundView = iv;
 93  94 // 设置选中状态的背景  95 UIView *view2 = [[UIView alloc] init];
 96 view2.backgroundColor = [UIColor purpleColor];
 97 cell.selectedBackgroundView = view2;
 98 // 3.返回cell  99 return cell;
100 }
101 102 103 #pragma mark - 控制状态栏是否显示
104 /**
105  * 返回YES代表隐藏状态栏, NO相反
106 */ 107 - (BOOL)prefersStatusBarHidden
108 {
109 return YES;
110 }
111 @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的一些属性

代码示例：

 1 #import "NJViewController.h"  2  3 @interface NJViewController ()<UITableViewDataSource>
 4  5 @end  6  7 @implementation NJViewController
 8  9 - (void)viewDidLoad
10 {
11  [super viewDidLoad];
12 13 // 1.创建tableview 14 UITableView *tableview = [[UITableView alloc] init];
15 tableview.frame = self.view.bounds;
16 17 // 2.设置数据源 18 tableview.dataSource =self;
19 20 // 3.添加tableview到view 21  [self.view addSubview:tableview];
22 23 // 4.设置分割线样式
24 // tableview.separatorStyle = UITableViewCellSeparatorStyleNone;
25 26 // 5.设置分割线颜色 27  接收的参数是颜色的比例值
28 tableview.separatorColor = [UIColor colorWithRed:0/255.0 green:255/255.0 blue:0/255.0 alpha:255/255.0];
29 30 // 设置tableview的头部视图 31 tableview.tableHeaderView = [UIButton buttonWithType:UIButtonTypeContactAdd];
32 tableview.tableFooterView = [[UISwitch alloc] init];
33 }
34 35 - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
36 {
37 return 1;
38 }
39 - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
40 {
41 return 10;
42 }
43 44 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
45 {
46 // 1.创建cell 47 UITableViewCell *cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:nil];
48 49 // 2.设置cell的数据 50 cell.textLabel.text = [NSString stringWithFormat:@"%d", indexPath.row ];
51 52 // 3.返回cell 53 return cell;
54 }
55 56 - (BOOL)prefersStatusBarHidden
57 {
58 return YES;
59 }
60 @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 //底部

时间： 2025-01-02 12:36:37

iOS开发UI篇—UITableview控件基本使用的相关文章

iOS开发UI篇—UITableview控件简单介绍

一.基本介绍在众多移动应⽤用中,能看到各式各样的表格数据 . 在iOS中,要实现表格数据展示,最常用的做法就是使用UITableView,UITableView继承自UIScrollView,因此支持垂直滚动,⽽且性能极佳 . UITableview有分组和不分组两种样式,可以在storyboard或者是用代码设置. 二.数据展示 UITableView需要⼀一个数据源(dataSource)来显示数据 UITableView会向数据源查询一共有多少行数据以及每⼀行显示什么数据等没有设置数据

iOS开发UI篇—UIScrollView控件实现图片轮播

一.实现效果实现图片的自动轮播二.实现代码 storyboard中布局代码: 1 #import "YYViewController.h" 2 3 @interface YYViewController () <UIScrollViewDelegate> 4 @property (weak, nonatomic) IBOutlet UIScrollView *scrollview; 5 /** 6 * 页码 7 */ 8 @property (weak, nonato

iOS开发UI篇—UIScrollView控件实现图片缩放功能

一.缩放 1.简单说明: 有些时候,我们可能要对某些内容进行手势缩放,如下图所示 UIScrollView不仅能滚动显示大量内容,还能对其内容进行缩放处理.也就是说,要完成缩放功能的话,只需要将需要缩放的内容添加到UIScrollView中 2.缩放原理当用户在UIScrollView身上使用捏合手势时,UIScrollView会给代理发送一条消息,询问代理究竟要缩放自己内部的哪一个子控件(哪一块内容) 当用户在UIScrollView身上使用捏合手势时,UIScrollView会调用代理的v

iOS开发UI篇—UIScrollView控件介绍

一.知识点简单介绍 1.UIScrollView控件是什么? (1)移动设备的屏幕⼤大⼩小是极其有限的,因此直接展⽰示在⽤用户眼前的内容也相当有限 (2)当展⽰示的内容较多,超出⼀一个屏幕时,⽤用户可通过滚动⼿手势来查看屏幕以外的内容 (3)普通的UIView不具备滚动功能,不能显⽰示过多的内容 (4)UIScrollView是一个能够滚动的视图控件,可以⽤用来展⽰示⼤大量的内容,并且可以通过滚动查看所有的内容 (5) 举例:手机上的"设置".其他⽰示例程序 2.UIScrollVi

iOS开发UI之日期控件的使用（UIDatePicker）

iOS日期控件UIDatePicker用法总结 @property (nonatomic) UIDatePickerMode datePickerMode; 设置控件模式,枚举如下: ? 1 2 3 4 5 6 typedef NS_ENUM(NSInteger, UIDatePickerMode) { UIDatePickerModeTime, //时间模式,显示时分和上下午 UIDatePickerModeDate, //日期模式显示

iOS开发UI篇—popoverController使用注意

iOS开发UI篇-popoverController使用注意 iOS开发UI篇-popoverController使用注意一.设置尺寸提示:不建议,像下面这样吧popover的宽度和高度写死. 1 //1.新建一个内容控制器 2 YYMenuViewController *menuVc=[[YYMenuViewController alloc]init]; 3 4 //2.新建一个popoverController,并设置其内容控制器 5 self.popover=[[UIPopoverCo

iOS开发UI篇—UITableviewcell的性能优化和缓存机制

iOS开发UI篇-UITableviewcell的性能问题一.UITableviewcell的一些介绍 UITableView的每一行都是一个UITableViewCell,通过dataSource的 tableView:cellForRowAtIndexPath:方法来初始化每⼀行 UITableViewCell内部有个默认的子视图:contentView,contentView是UITableViewCell所显示内容的父视图,可显示一些辅助指示视图辅助指示视图的作⽤是显示一个表示动作的

iOS开发UI篇：APP主流UI框架结构

一.简单示例说明:使用APP主流UI框架结构完成简单的界面搭建搭建页面效果: 开发UI篇:APP主流UI框架结构-"> 查看本栏目更多精彩内容:http://www.bianceng.cnhttp://www.bianceng.cn/OS/extra/

iOS开发UI篇—Quartz2D(自定义UIImageView控件)

一.实现思路 Quartz2D最大的用途在于自定义View(自定义UI控件),当系统的View不能满足我们使用需求的时候,自定义View. 使用Quartz2D自定义View,可以从模仿系统的ImageView的使用开始. 需求驱动开发:模仿系统的imageview的使用过程 1.创建 2.设置图片 3.设置frame 4.把创建的自定义的view添加到界面上(在自定义的View中,需要一个image属性接收image图片参数->5). 5.添加一个image属性(接下来,拿到image之后,应