iOS学习之Table View的简单使用

分手后的思念是犯贱 2022-08-07 05:54 228阅读 0赞

**Table View简单描述：**

在iPhone和其他iOS的很多程序中都会看到Table View的出现，除了一般的表格资料展示之外，设置的属性资料往往也用到Table View，Table View主要分为以下两种：

![1339066534_6184.png][]

*   Plain：这是普通的列表风格
 *   Grouped ：这是分块风格。

对于UITableView，我們有一些特殊的概念和术语，比如说我们成Table View的一行为Cell，而许多的Cell可以组成Section，每个Section上下又分別有Header和Footer，许多个的Section则组成了整个Table ，当然Table也有Header和Footer，下面看两种图就能明白这几个拗口名词了:

![1339066961_1065.png][]：

![1339067019_4802.png][]

现在理论知识了解的差不多了。今天先做一个Plain样式的例子，这样加强对Table view的熟练使用。

## 1、新建项目 ##

新建一个Single View Application,命名为TableViewDemo，开发环境是：Xcode 4.3,iPhone 5.1模拟器。

**2、Table View放上控件**

打开ViewController.xib文件，往ViewController.xib界面上拖拽一个Table View控件到现有的View上，

对齐。

![1339067788_3044.png][]

**3、连接新添加的TableView和ViewController。**

选中新添的TableView控件，打开连接检查器(Connection Inspector), 找到delegate和datasource并点中圆圈拉线连接到左边File's Owner图标上，为什么要把这两个连接File's Owner上呢？这是因为iOS使用的MVC设计模式，View和ViewController之间的对应关系，需要一个桥梁来进行连接的（即，对于一个视图，他如何知道自己的界面的操作应该由谁来响应），这个桥梁就是File's Owner。

![1339068343_3074.png][]

**4、打开ViewController.h,添加协议和Property (类似与java里的实现接口)**

**\[cpp\]** [view plain][] [copy][view plain]

1.  \#import <UIKit/UIKit.h>
2.  
3.  @interface ViewController : UIViewController<UITableViewDelegate, UITableViewDataSource> 
4.  @property (strong, nonatomic) NSArray \*list; 
5.  @end

**5、打开.m文件，添加：**

**\[cpp\]** [view plain][] [copy][view plain]

1.  @synthesize list = \_list;

![1339068863_2543.png][]  
这是发现有两个警告，提示未完成的实现，这提示的是UITableViewDelegate, UITableViewDataSource这个两个头文件里的协议的方法未实现。待会我们去实现它。

6、建立数据

**\[cpp\]** [view plain][] [copy][view plain]

1.  \- (**void**)viewDidLoad 
2.  \{ 
3.   \[super viewDidLoad\]; 
4.  // Do any additional setup after loading the view, typically from a nib.
5.   NSArray \*array = \[\[NSArray alloc\] initWithObjects:@"美国", @"菲律宾", 
6.   @"黄岩岛", @"中国", @"泰国", @"越南", @"老挝", 
7.   @"日本" , nil\]; 
8.   self.list = array; 
9.  \} 
10. 
11. \- (**void**)viewDidUnload 
12. \{ 
13.  \[super viewDidUnload\]; 
14. // Release any retained subviews of the main view.
15.  self.list = nil; 
16. 
17. \}

**7、生成row**

关键的步骤来了，实现tableview添加数据源，返回TableView的行数，返回各行cell实例。

**\[cpp\]** [view plain][] [copy][view plain]

1.  \- (UITableViewCell \*)tableView:(UITableView \*)tableView 
2.   cellForRowAtIndexPath:(NSIndexPath \*)indexPath \{ 
3.  
4.  **static** NSString \*TableSampleIdentifier = @"TableSampleIdentifier"; 
5.  
6.   UITableViewCell \*cell = \[tableView dequeueReusableCellWithIdentifier: 
7.   TableSampleIdentifier\]; 
8.  **if** (cell == nil) \{ 
9.   cell = \[\[UITableViewCell alloc\] 
10.  initWithStyle:UITableViewCellStyleDefault 
11.  reuseIdentifier:TableSampleIdentifier\]; 
12.  \} 
13. 
14.  NSUInteger row = \[indexPath row\]; 
15.  cell.textLabel.text = \[self.list objectAtIndex:row\]; 
16. **return** cell; 
17. \}

上面的第二个方法中，  
UITableViewCell \*cell = \[tableView dequeueReusableCellWithIdentifier: TableSampleIdentifier\];  
这个语句根据标识符TableSampleIdentifier寻找当前可以重用的UITableViewCell。当某行滑出当前可见区域后，我们重用它所对应的UITableViewCell对象，那么就可以节省内存和资源。

这里UITableViewCellStyleDefault是表示UITableViewCell风格的常数，除此之外，还有其他风格，后面将会用到。  
注意参数(NSIndexPath \*)indexPath，它将行号row和部分号section合并了，通过\[indexPath row\];获取行号。之后给cell设置其文本：  
cell.textLabel.text = \[self.list objectAtIndex: row\];

**8、现在一个简单的TableView就弄好看，运行下看效果**

![1339070662_7073.png][]、、

**9、添加图片。**

在项目上add files到项目，提交两张小图片，然后在cell返回之前添加如下代码

**\[cpp\]** [view plain][] [copy][view plain]

1.  NSUInteger row = \[indexPath row\]; 
2.   cell.textLabel.text = \[self.list objectAtIndex:row\]; 
3.   UIImage \*image = \[UIImage imageNamed:@"qq"\]; 
4.   cell.imageView.image = image; 
5.   UIImage \*highLighedImage = \[UIImage imageNamed:@"youdao"\]; 
6.   cell.imageView.highlightedImage = highLighedImage; 
7.  **return** cell;

效果如下：

![1339071228_4005.png][]

**10、设置行的风格**

表示UITableViewCell风格的常量有：  
  
UITableViewCellStyleDefault  
UITableViewCellStyleSubtle  
UITableViewCellStyleValue1  
UITableViewCellStyleValue2

可以自己修改看看效果。可以添加一个detail

cell.detailTextLabel.text =@"打打打打";

return cell;

![1339071659_5425.png][]

**11、选择table里的某一行**

在.m文件@end之前编写 -(void)table 这时会自动提示可以实现的方法，

![1339116634_3341.png][]

我们选择这个方法

\-(void)tableView:(UITableView \*)tableView didSelectRowAtIndexPath:(NSIndexPath \*)indexPath

选中是做个提示，提示选中了那个信息，代码实现如下：

**\[cpp\]** [view plain][] [copy][view plain]

1.  \-(**void**)tableView:(UITableView \*)tableView didSelectRowAtIndexPath:(NSIndexPath \*)indexPath\{ 
2.   NSString \*rowString = \[self.list objectAtIndex:\[indexPath row\]\]; 
3.   UIAlertView \* alter = \[\[UIAlertView alloc\] initWithTitle:@"选中的行信息" message:rowString delegate:self cancelButtonTitle:@"确定" otherButtonTitles:nil, nil\]; 
4.   \[alter show\]; 
5.  \}

效果：

![1339117085_3307.png][]

以上是Plain风格的TableView

[例子代码：http://download.csdn.net/detail/totogo2010/4361870][http_download.csdn.net_detail_totogo2010_4361870]

著作权声明：本文由[http://blog.csdn.net/totogo2010/][http_blog.csdn.net_totogo2010]原创，欢迎转载分享。请尊重作者劳动，转载时保留该声明和作者博客链接，谢谢 !

*  上一篇[图文解释XCode常用快捷键的使用][XCode]
 *  下一篇[iOS学习之分段Table View的使用(Grouped样式表格)][iOS_Table View_Grouped]

顶

[1339066534_6184.png]: https://img-my.csdn.net/uploads/201206/07/1339066534_6184.png
[1339066961_1065.png]: https://img-my.csdn.net/uploads/201206/07/1339066961_1065.png
[1339067019_4802.png]: https://img-my.csdn.net/uploads/201206/07/1339067019_4802.png
[1339067788_3044.png]: https://img-my.csdn.net/uploads/201206/07/1339067788_3044.png
[1339068343_3074.png]: https://img-my.csdn.net/uploads/201206/07/1339068343_3074.png
[view plain]: http://blog.csdn.net/totogo2010/article/details/7642908#
[1339068863_2543.png]: https://img-my.csdn.net/uploads/201206/07/1339068863_2543.png
[1339070662_7073.png]: https://img-my.csdn.net/uploads/201206/07/1339070662_7073.png
[1339071228_4005.png]: https://img-my.csdn.net/uploads/201206/07/1339071228_4005.png
[1339071659_5425.png]: https://img-my.csdn.net/uploads/201206/07/1339071659_5425.png
[1339116634_3341.png]: https://img-my.csdn.net/uploads/201206/08/1339116634_3341.png
[1339117085_3307.png]: https://img-my.csdn.net/uploads/201206/08/1339117085_3307.png
[http_download.csdn.net_detail_totogo2010_4361870]: http://download.csdn.net/detail/totogo2010/4361870
[http_blog.csdn.net_totogo2010]: http://blog.csdn.net/totogo2010/
[XCode]: http://blog.csdn.net/totogo2010/article/details/7640612
[iOS_Table View_Grouped]: http://blog.csdn.net/totogo2010/article/details/7645693