zoukankan      html  css  js  c++  java

  • IOS开发之表视图(UITableView)

    IOS开发之表视图(UITableView)的基本介绍(一)

    (一):UITableView的基本概念

        1.在IOS开发中,表视图的应用十分广泛和普及。因此掌握表视图的用法显得非常重要。一般情况下对于数据的展示

    我们都会选择表视图，比如通讯录和一些数据列表。

        2.我们可以选择创建表视图也可以创建表视图控制器。

    (二)UITableView基本样式如下(1:UITableViewStylePlain(普通表视图)，2:UITableViewStyleGroup(分组表视图)):

    （三）UITableView表视图的结构:首先我们来看一张设计图:

         

     根据上面的图，下面我们来分析一下表视图的结构：

    1:表头视图(table header view).表视图最上边的视图，用于展示表视图的信息，例如上面下拉刷新信息。

    2:表脚视图(table footer view).表视图最下边的视图，用于展示表视图的部分信息，例如上图加载更多信息。

    3:单元格(cell)。它是组成表视图每一行的单位视图,上图一行一行的单元图

    4:节(selection)。它是多个单元格在组成，并且有节头和节脚，正如上图蓝色框框的(Group Start)节头,(Group End)节尾

    5:节头。节的头部，描述节的信息，例如上图 Group Start.

    6:节脚.节的尾部，描述节的信息或者一些声明信息。例如上图 Group End.

    (四)UITableView表视图的分类

         IOS中表视图主要分为两大类(普通表视图与分组表视图)，下面来稍微了解一下这两类表视图

         1:普通表视图:主要用于一般表，最常见的是，我们不知道有多少数据需要进行显示.

         2:分组表视图:主要用于都一些数据进行布局分成不同的组进行显示。见下面的图，左边为普通表视图，右边为分组表视图；

             

       除此之外，看上面左边的图是带上索引列的(efghijk...),同样还可以加上选择列和搜索栏。

       3:下图，给用户提供一个选择的列表，这样使用选择表视图可以代替复选框控件。

        

         下面带了搜索栏如:这样可以在我单元格很多的情况之下，去借助搜索栏进行过滤搜索。搜索栏一般都会放在表头。

    需要我们把UITableView上滑倒最顶端才能看到搜索栏。

         

    以上就是先介绍一下表视图(UITableView)包括表视图的基本概念，基本样式，结构以及表视图的分类，下一篇就开始实现表视图并进行深入理解。

    IOS开发之表视图(UITableView)的相关类,属性与表视图实现学习(二)

     (一)UITableView的相关类解析:

         首先我们来看张类的结构图:

        

       1:表视图(UITableView)是继承自UIScrollView,这样就可以使得我们的表视图可以实现上下的滚动。

       2:同时表视图(UITableView)，还有两个委托①:UITableViewDelegate委托协议，一般我们用来处理表视图的基本样式（例如:单元格的高度等）还有去捕捉选中单元格的事件。②:UITableViewDataSource委托协议，必要要去实现该协议的数据源方法，来完成表视图的数据配置。

       3:UITableViewController：是表视图(UITableView)的控制器类。

       4:UItableViewCell:是单元格类.

    (二):数据源协议和委托源协议介绍：

         1:UITableViewDataSource协议：我们去实现其中的方法，来完成我们的表视图的数据配置，从而来显示表视图。其中我们必须要去实现的两个方法如下:

    [objc] view plaincopy在CODE上查看代码片派生到我的代码片
     
    1. <span style="font-size:18px;">//进行返回每个section(节)中单元格的数量  
    2. - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section;  
    3.   
    4. // Row display. Implementers should *always* try to reuse cells by setting each cell's reuseIdentifier and querying for available reusable cells with dequeueReusableCellWithIdentifier:  
    5. // Cell gets various attributes set automatically based on table (separators) and data source (accessory views, editing controls)  
    6. // 为表视图中的单元格创建数据  
    7. - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath;</span>  

      除了以上的两个必须实现的方法，还有一些以下的可选实现方法：

    [objc] view plaincopy在CODE上查看代码片派生到我的代码片
     
    1. <span style="font-size:18px;">// 返回section(节)的个数  
    2. - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView;              // Default is 1 if not implemented  
    3. //返回section(节)头的标题  
    4. - (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section;    // fixed font style. use custom view (UILabel) if you want something different  
    5. // 返回section(节)尾的标题  
    6. - (NSString *)tableView:(UITableView *)tableView titleForFooterInSection:(NSInteger)section;  
    7. - (BOOL)tableView:(UITableView *)tableView canEditRowAtIndexPath:(NSIndexPath *)indexPath;  
    8. - (BOOL)tableView:(UITableView *)tableView canMoveRowAtIndexPath:(NSIndexPath *)indexPath;  
    9. - (NSArray *)sectionIndexTitlesForTableView:(UITableView *)tableView;                                                    // return list of section titles to display in section index view (e.g. "ABCD...Z#")  
    10. - (NSInteger)tableView:(UITableView *)tableView sectionForSectionIndexTitle:(NSString *)title atIndex:(NSInteger)index;    
    11. - (void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath;  
    12. - (void)tableView:(UITableView *)tableView moveRowAtIndexPath:(NSIndexPath *)sourceIndexPath toIndexPath:(NSIndexPath *)destinationIndexPath;  
    13. </span>  

         2:UITableViewDelegate：协议可以用来设定表视图中的节头与节尾 同时还可以去响应一些点击事件，主要的一些方法如下:

    [objc] view plaincopy在CODE上查看代码片派生到我的代码片
     
    1. <span style="font-size:18px;">- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section;   // custom view for header. will be adjusted to default or specified header height  
    2. - (UIView *)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section;   // custom view for footer. will be adjusted to default or specified footer height  
    3. - (NSIndexPath *)tableView:(UITableView *)tableView willSelectRowAtIndexPath:(NSIndexPath *)indexPath;  
    4. - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath;</span>  

      更多方法可以去官网UITableView进行查询。

     (三) 表视图(UITableView)的一些常用方法和属性：

          1:常用属性：

              ①:@property(nonatomic) UITableViewCellSeparatorStyle separatorStyle;     默认为UITableViewCellSeparatorStyleSingleLine

              ②:@property(nonatomic,retain) UIColor               *separatorColor;    默认为:the standard separator gray

              ③:@property(nonatomic,retain) UIView *tableHeaderView;            头部视图

              ④:@property(nonatomic,retain) UIView *tableFooterView;      尾部视图

              ⑤:@property(nonatomic)          CGFloat                    rowHeight;            // 单元格高度

              ⑥:@property(nonatomic)          CGFloat                    sectionHeaderHeight;  // 头部行高

              ⑦:@property(nonatomic)          CGFloat                    sectionFooterHeight;    //尾部行高

              ⑧:@property(nonatomic,readwrite,retain) UIView *backgroundViewNS_AVAILABLE_IOS(3_2); 

              ⑨:@property(nonatomic,readonly) UITableViewStyle           style;

          2:常用方法:

              ①：- (void)reloadData;                // reloads everything from scratch. redisplays visible rows. because we only keep info about visible rows, this is cheap. will adjust offset if table shrinks  刷新单元格的数据

             ②:- (void)reloadSectionIndexTitlesNS_AVAILABLE_IOS(3_0);  // reloads the index bar. 

             ③:- (NSInteger)numberOfSections;   //返回节的数量

             ④:- (NSInteger)numberOfRowsInSection:(NSInteger)section;//返回每个节的单元格的数量

             ⑤:- (CGRect)rectForSection:(NSInteger)section;                                   // includes header, footer and all rows

             ⑥:- (CGRect)rectForHeaderInSection:(NSInteger)section;

             ⑦:- (CGRect)rectForFooterInSection:(NSInteger)section;

             ⑧:- (CGRect)rectForRowAtIndexPath:(NSIndexPath *)indexPath;

             ⑨:- (NSIndexPath *)indexPathForRowAtPoint:(CGPoint)point;                        // returns nil if point is outside table

             ⑩:- (NSIndexPath *)indexPathForCell:(UITableViewCell *)cell;        //返回指定单元格的NSIndexPath实例

            十一:- (NSArray *)indexPathsForRowsInRect:(CGRect)rect;            //返回指定范围的NSIndexPath实例数组

            十二:- (UITableViewCell *)cellForRowAtIndexPath:(NSIndexPath *)indexPath;           // returns nil if cell is not visible or index path is out of range     //返回指定NSIndexPath实例的单元格实例

            十三:- (NSArray *)visibleCells;  //返回可见的单元格的数组

            十四- (NSArray *)indexPathsForVisibleRows;  //返回可见单元格的NSIndexPath实例数组

            十五:- (UITableViewHeaderFooterView *)headerViewForSection:(NSInteger)sectionNS_AVAILABLE_IOS(6_0);

            十六:- (UITableViewHeaderFooterView *)footerViewForSection:(NSInteger)sectionNS_AVAILABLE_IOS(6_0);

            十七:- (void)scrollToRowAtIndexPath:(NSIndexPath *)indexPath atScrollPosition:(UITableViewScrollPosition)scrollPosition animated:(BOOL)animated;     //滑动到指定的位置，并且可以加上动画效果

            十八:- (void)scrollToNearestSelectedRowAtScrollPosition:(UITableViewScrollPosition)scrollPosition animated:(BOOL)animated;

    (四)例子实现表格布局

          简单的来说：是以下几个步骤:1.配置数据源，2.实现数据源方法，3.设置代理方法。下面来看实例

          

    [objc] view plaincopy在CODE上查看代码片派生到我的代码片
     
    1. <span style="font-size:18px;">//  
    2. //  ZTTRootViewController.m  
    3. //  UITableViewDemo1  
    4. //  
    5. //  Created by 江清清 on 14-3-19.  
    6. //  Copyright (c) 2014年 江清清<<a>http://www.0513.it/</a>中天科技软件技术股份有限公司>. All rights reserved.  
    7. //  
    8.   
    9. #import "ZTTRootViewController.h"  
    10. #import "ZTTDetailsViewController.h"  
    11. #define  kDeviceHeight   [UIScreen mainScreen].bounds.size.height  
    12.   
    13. @interface ZTTRootViewController ()  
    14.   
    15. @end  
    16.   
    17. @implementation ZTTRootViewController  
    18.   
    19. - (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil  
    20. {  
    21.     self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];  
    22.     if (self) {  
    23.         self.title=@"UITableView Style";  
    24.     }  
    25.     return self;  
    26. }  
    27. -(void)loadView{  
    28.     UIView *view=[[UIView alloc]initWithFrame:[UIScreen mainScreen].applicationFrame];  
    29.     //[view setBackgroundColor:[UIColor redColor]];  
    30.     self.view=view;  
    31.     [view release];  
    32.       
    33.     //开始进行配置数据源  
    34.     self.listArray=@[@"UITableViewStylePlain",@"UITableViewStyleGrouped"];  
    35.     _tableView=[[UITableView alloc]initWithFrame:CGRectMake(0, 0, 320,kDeviceHeight-20-44) style:UITableViewStylePlain];  
    36.     //实现数据源方法  
    37.     [_tableView setDataSource:self];  
    38.     //设置点击事件 代理方法  
    39.     [_tableView setDelegate:self];  
    40.     [self.view addSubview:_tableView];  
    41.       
    42. }  
    43. - (void)viewDidLoad  
    44. {  
    45.     [super viewDidLoad];  
    46.     // Do any additional setup after loading the view.  
    47. }  
    48.   
    49. - (void)didReceiveMemoryWarning  
    50. {  
    51.     [super didReceiveMemoryWarning];  
    52.     // Dispose of any resources that can be recreated.  
    53. }  
    54. #pragma mark- tableview date source  
    55. /* 
    56.  * 一个selection中又多少个单元格 
    57.  */  
    58. - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section  
    59. {  
    60.     return  [_listArray count];  
    61. }  
    62.   
    63. // indexPath  
    64. //创建单元格  
    65. - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{  
    66.     static NSString *cellInditifier=nil;  
    67.     // 创建单元格对象  
    68.     UITableViewCell *cell=[tableView dequeueReusableCellWithIdentifier:cellInditifier];  
    69.     if(cell ==nil){  
    70.         cell=[[[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellInditifier]autorelease];  
    71.     }  
    72.     NSString *text=[self.listArray objectAtIndex:indexPath.row];  
    73.     cell.textLabel.text=text;  
    74.     return  cell;  
    75. }  
    76.   
    77.   
    78.   
    79. // 表视图中有几个selection  
    80. - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{  
    81.     return  1;  
    82. }  
    83.   
    84.   
    85. // 选中单元格的方法  
    86. - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{  
    87.     NSLog(@"didSelect");  
    88.     //进行跳转到相应的页面  
    89.     ZTTDetailsViewController *detailsVC=[[ZTTDetailsViewController alloc]init];  
    90.     detailsVC.isPlain=indexPath.row==0?YES:NO;  
    91.     [self.navigationController pushViewController:detailsVC animated:YES];  
    92.     [detailsVC release];  
    93. }  
    94. -(void)dealloc{  
    95.     [_tableView release];  
    96.     _tableView=nil;  
    97.     [super dealloc];  
    98. }  
    99. @end  
    100. </span>  

    运行截图如下:

       3：上面的代码例子是一般的表格，如果我们要表格中加入表头(header)和表尾(footer)话，我们需要实现以下两个数据源方法：     

    [objc] view plaincopy在CODE上查看代码片派生到我的代码片
     
    1. <span style="font-size:18px;">- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section;    // fixed font style. use custom view (UILabel) if you want something different  
    2. - (NSString *)tableView:(UITableView *)tableView titleForFooterInSection:(NSInteger)section;</span>  

         运行截图如下:

      
  • 相关阅读:
    hph 缓存机制
    递归调用 和 迭代
    多维数组排序
    php curl操作
    JavaScript基本数据类型
    JavaScript基础
    CSS基础布局
    CSS基础样式
    CSS选择器
    CSS3基础
  • 原文地址：https://www.cnblogs.com/kenshinobiy/p/4738705.html
Copyright © 2011-2022 走看看