ios tableview

In this tutorial we’re going to discuss and implement the TableView UI element in our iOS application.

在本教程中，我们将在iOS应用程序中讨论和实现TableView UI元素。

iOS TableView概述 (iOS TableView Overview)

A TableView is used to display a list of data in our application. It’s used for displaying a vertically scrollable view which consists of a number of cells that are reusable. Headers, footers, rows and sections can be included in such a UI element. Let’s jump onto the implementation of the TableView, from where we’ll give more insight to it’s working, usages and customisations. Create a new project first, following the same steps as shown in the previous tutorial.

TableView用于在我们的应用程序中显示数据列表。 它用于显示垂直滚动视图，该视图由许多可重复使用的单元格组成。 页眉，页脚，行和节可以包含在此类UI元素中。 让我们跳到TableView的实现，从那里我们将对它的工作，用法和自定义有更多的了解。 首先，按照与上一教程相同的步骤创建一个新项目。

实作 (Implementation)

We’ll use an NSMutableArray to hold the data that’ll be displayed in our TableView. Our ViewController would adopt the UITableViewDataSource and UITableViewDelegate as the protocols. Protocols are analogous to Interfaces. Basically, in order to display data in TableView, we have to conform to the requirements defined in the protocols and implement all the mandatory methods.

我们将使用NSMutableArray来保存将在TableView中显示的数据。 我们的ViewController将采用UITableViewDataSource和UITableViewDelegate作为协议。 协议类似于接口。 基本上，为了在TableView中显示数据，我们必须符合协议中定义的要求并实现所有强制性方法。

The ViewController.h header file is defined below.

ViewController.h头文件在下面定义。

ViewController.h

ViewController.h

#import <UIKit/UIKit.h>@interface ViewController : UIViewController<UITableViewDataSource,
UITableViewDelegate>
{IBOutlet UITableView *myTable;NSMutableArray *myArray;
}@end

UITableViewDelegate和UITableViewDataSource (UITableViewDelegate and UITableViewDataSource)

UITableView is the base class that’s used to implement a TableView.

UITableView是用于实现TableView的基类。

UITableViewDataSource protocol acts as a link between the data and the table view. This protocol consists of the following two methods that need to be implemented.

UITableViewDataSource协议充当数据和表视图之间的链接。 该协议包含以下两种需要实现的方法。

1. (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:

2. (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:

The implementation of the above two methods deals with specifying the number of rows and type of data in each row.

以上两种方法的实现涉及指定行数和每行中的数据类型。

UITableViewDelegate protocol deals with the appearance of the TableView such as height of TableRow configure section headings and footers, re-order table cells etc.

UITableViewDelegate协议处理TableView的外观，例如TableRow的高度，配置节的标题和页脚，对表单元格进行重新排序等。

Few methods of this protocol include:

该协议的几种方法包括：

1. (NSString *)tableView:(UITableView *)tableView titleForFooterInSection:

2. (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:

3. (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView

Now we need to implement the data source and delegate methods in the ViewController.m file.
We’ll initialise the NSMutableArray in the viewDidLoad method.

现在，我们需要在ViewController.m文件中实现数据源和委托方法。
我们将在viewDidLoad方法中初始化NSMutableArray。

Before we do that let’s design the view in our StoryBoard.xib file.

在此之前，让我们在StoryBoard.xib文件中设计视图。

Search for TableView in the object attributes and drag and drop it over the view. Resize it to cover the screen leaving the space out for the status bar. Your screen should look similar to the one given below.

在对象属性中搜索TableView并将其拖放到视图上。 调整它的大小以覆盖屏幕，在状态栏上留出空间。 您的屏幕看起来应该类似于下面的屏幕。

Note: Adding the IBOutlet for the TableView in the ViewController.h file can be done in another way from the storyboard itself. Press option+command+Enter on the keyboard to open the assistant editor. Press control and drag the tableview to the editor as shown below and release it. Enter the variable name and choose the Storage type as strong.

注意：可以通过情节提要板本身的另一种方式在ViewController.h文件中为TableView添加IBOutlet。 按键盘上的Option + Command + Enter打开助手编辑器。 按下Control键并将表格视图拖动到编辑器，如下所示，然后将其释放。 输入变量名称，然后选择存储类型为“强”。

We need to set the delegate and datasource for the tableview onto the file owner icon at the top of the dock. Press control and drag the tableview to it. Release the click and chose datasource to make a connection. Do the same for the delegate.

我们需要将tableview的委托和数据源设置到停靠区顶部的文件所有者图标上。 按下Control键并将表格视图拖动到它。 释放单击并选择数据源以建立连接。 对代表执行相同的操作。

To ensure that the connections are properly made look into the connections inspector tab in the right pane.

为确保正确建立连接，请查看右窗格中的“连接检查器”选项卡。

The ViewController.m file contains the implementation part of the protocol methods that we had defined earlier. It’s given below
ViewController.m

ViewController.m文件包含我们先前定义的协议方法的实现部分。 在下面给出
ViewController.m

#import "ViewController.h"@interface ViewController ()@end@implementation ViewController- (void)viewDidLoad {[super viewDidLoad];// Do any additional setup after loading the view, typically from a nib.myArray = [[NSMutableArray alloc]initWithObjects:@"New Delhi",@"Mumbai",@"Hyderabad",@"Bangalore",@"Sydney",@"Melbourne",@"Brisbane",@"Perth",@"New York",@"Los Angeles",@"Chicago",@"Boston", nil];}- (void)didReceiveMemoryWarning {[super didReceiveMemoryWarning];// Dispose of any resources that can be recreated.
}#pragma mark - Table View Data source
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:
(NSInteger)section{return [myArray count]/3;
}- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:
(NSIndexPath *)indexPath{static NSString *cellId = @"SimpleTableId";UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellId];if (cell == nil) {cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellId];}NSString *stringForCell;if (indexPath.section == 0) {stringForCell= [myArray objectAtIndex:indexPath.row];}else if (indexPath.section == 1){stringForCell= [myArray objectAtIndex:indexPath.row+ [myArray count]/3];}else if (indexPath.section == 2){stringForCell= [myArray objectAtIndex:indexPath.row+ 2*[myArray count]/3];}[cell.textLabel setText:stringForCell];return cell;
}// Default is 1 if not implemented
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{return 3;
}- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:
(NSInteger)section{NSString *headerTitle;if (section==0) {headerTitle = @"India";}else if(section==1){headerTitle = @"Australia";}else{headerTitle = @"United States of America";}return headerTitle;
}
- (NSString *)tableView:(UITableView *)tableView titleForFooterInSection:
(NSInteger)section{NSString *footerTitle;if (section==0) {footerTitle = @"End of prominent cities of India";}else if (section==1){footerTitle = @"End of prominent cities of Australia";}else if (section==2){footerTitle = @"End of prominent cities of USA";}return footerTitle;
}#pragma mark - TableView delegate-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:
(NSIndexPath *)indexPath{[tableView deselectRowAtIndexPath:indexPath animated:YES];UITableViewCell *cell = [tableView cellForRowAtIndexPath:indexPath];NSLog(@"Section:%d Row:%d selected and its data is %@",indexPath.section,indexPath.row,cell.textLabel.text);
}@end

1. The NSMutableArray is populated in the viewDidLoad methodNSMutableArray填充在viewDidLoad方法中
2. Two sections with there separate headers and footers are defined定义了两个具有单独的页眉和页脚的部分
3. The NSMutableArray data elements are divided into the two sections equally. The first half of the array goes into the first section and the other half into the second sectionNSMutableArray数据元素被均分为两部分。 数组的前半部分进入第一部分，另一半进入第二部分
4. NSLog is used to print the selected row index and its dataNSLog用于打印选定的行索引及其数据

The output of the application in action is given below.

实际应用程序的输出如下。

Note: As you can see we have grouped each section. This can be done from the attributes inspector pane by choosing the style as grouped.

注意：如您所见，我们将每个部分分组。 可以从属性检查器窗格中选择样式进行分组。

Clicking a row prints a log in the XCode console as shown below.

单击一行将在XCode控制台中打印日志，如下所示。

This brings an end to this tutorial. We’ve developed a simple table view iOS Application with two sections in which the data is loaded from an array. This tutorial was aimed at getting familiar with the table view and implementing it’s methods. In general data is not always loaded from a array. It’s loading in other ways like from a file. We’ll discuss and implement them in later tutorials. You can download the iOS SimpleTable Project from the link given below.

本教程到此结束。 我们已经开发了一个简单的表视图iOS应用程序，该应用程序有两个部分，其中的数据是从数组中加载的。 本教程旨在熟悉表视图并实现其方法。 通常，并非总是从数组加载数据。 它以其他方式加载，例如从文件加载。 我们将在以后的教程中讨论和实现它们。 您可以从下面给出的链接下载iOS SimpleTable Project 。

翻译自: https://www.journaldev.com/10515/ios-simple-tableview-example-tutorial

ios tableview