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>  

         运行截图如下:

      
  • 相关阅读:
    对MVC模型的自悟，详尽解释，为了更多非计算机人员可以理解
    openSUSE leap 42.3 实现有线 无线同时用
    Fedora27 源配置
    Ubuntu16.04添加HP Laserjet Pro M128fn打印机和驱动
    openSUSE leap 42.3 添加HP Laserjet Pro M128fn打印机和驱动
    OpenSUSE Leap 42.3下通过Firefox Opera Chromium浏览器直接执行java应用程序（打开java jnlp文件）实现在服务器远程虚拟控制台完成远程管理的方法
    OpenSUSE Leap 42.3 安装java（Oracle jre）
    linux下支持托盘的邮件客户端Sylpheed
    Ubuntu下通过Firefox Opera Chromium浏览器直接执行java应用程序（打开java jnlp文件）实现在服务器远程虚拟控制台完成远程管理的方法
    Firefox 浏览器添加Linux jre插件
  • 原文地址：https://www.cnblogs.com/kenshinobiy/p/4738705.html
Copyright © 2011-2022 走看看