zoukankan      html  css  js  c++  java
  • ios开发-UI-UITableView及一个小实例

      [注意]转载时请注明出处博客园-吃唐僧肉的小悟空http://www.cnblogs.com/hukezhu/

      在IOS中,实现表格展示数据,最常用的做法就是使用UITableView.

    @interface UITableView : UIScrollView <NSCoding>

      UITableView继承自UIScrollView,所以支持垂直滚动,而且性能极佳(这个会在以后提到,支持重用cell)

      UITableView有两种样式:分组和不分组

        分组:UITableViewStyleGrouped

        不分组:UITableViewStylePlain

      

    @property (nonatomic, readonly) UITableViewStyle           style;
    @property (nonatomic, assign)   id <UITableViewDataSource> dataSource;
    @property (nonatomic, assign)   id <UITableViewDelegate>   delegate;
    @property (nonatomic)          CGFloat                     rowHeight;            
    // will return the default value if unset

      如何展示数据

      1.UITableView需要一个数据源(dataSource)来显示数据(如上面代码)

      2.UITableView会向数据源查询一共有多少行数据以及每一行显示什么数据等

        

    @protocol UITableViewDataSource<NSObject>
    
    @required
    
    - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section;
    
    // Row display. Implementers should *always* try to reuse cells by setting each cell's reuseIdentifier and querying for available reusable cells with dequeueReusableCellWithIdentifier:
    // Cell gets various attributes set automatically based on table (separators) and data source (accessory views, editing controls)
    
    - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath;
    
    @optional
    
    - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView;              // Default is 1 if not implemented
    
    - (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section;    // fixed font style. use custom view (UILabel) if you want something different
    - (NSString *)tableView:(UITableView *)tableView titleForFooterInSection:(NSInteger)section;
    
    // Editing
    
    // Individual rows can opt out of having the -editing property set for them. If not implemented, all rows are assumed to be editable.
    - (BOOL)tableView:(UITableView *)tableView canEditRowAtIndexPath:(NSIndexPath *)indexPath;
    
    // Moving/reordering
    
    // Allows the reorder accessory view to optionally be shown for a particular row. By default, the reorder control will be shown only if the datasource implements -tableView:moveRowAtIndexPath:toIndexPath:
    - (BOOL)tableView:(UITableView *)tableView canMoveRowAtIndexPath:(NSIndexPath *)indexPath;
    
    // Index
    
    - (NSArray *)sectionIndexTitlesForTableView:(UITableView *)tableView;                                                    // return list of section titles to display in section index view (e.g. "ABCD...Z#")
    - (NSInteger)tableView:(UITableView *)tableView sectionForSectionIndexTitle:(NSString *)title atIndex:(NSInteger)index;  // tell table which section corresponds to section title/index (e.g. "B",1))
    
    // Data manipulation - insert and delete support
    
    // After a row has the minus or plus button invoked (based on the UITableViewCellEditingStyle for the cell), the dataSource must commit the change
    // Not called for edit actions using UITableViewRowAction - the action's handler will be invoked instead
    - (void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath;
    
    // Data manipulation - reorder / moving support
    
    - (void)tableView:(UITableView *)tableView moveRowAtIndexPath:(NSIndexPath *)sourceIndexPath toIndexPath:(NSIndexPath *)destinationIndexPath;
    
    @end

      3.没有设置数据元的UITableView只是一个空的壳子,不会展示任何数据

      4.上面代码是UITableViewDataSource协议的,凡是遵守UITableViewDataSource协议的OC对象,都可以是UITableView的数据源,此处我们一般选择控制器为数据源.

      所以总结一下使用UITableView展示数据的步骤:

      • 遵守UITableViewDataSource协议
      • 设置控制器为UITableView的数据源(此处假设是控制器)
      • 实现数据源的方法

      

      UITableViewDataSource协议中必须要实现的方法:

      

    @required
    //每一组有多少行
    - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section;
    
    // Row display. Implementers should *always* try to reuse cells by setting each cell's reuseIdentifier and querying for available reusable cells with dequeueReusableCellWithIdentifier:
    // Cell gets various attributes set automatically based on table (separators) and data source (accessory views, editing controls)
    //每一行显示什么样的内容
    - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath;

      

      下面这个方法不是必须要实现的,不实现默认就是1组

    //一共有多少组
    - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView;
    //这个方法不是必须要实现的,如果不实现,就默认是一组

      下面通过一个小例子来演示UITableView的使用

      

    下图是应用代码结构及plist文件截图:

      

      此处的plist文件相对于前面文章介绍的比较复杂,此处是字典中又包含字典,所以使用的字典转模型的方法与之前也有所不同.首先要将里面的字典先转化为模型,再转化外面的.

    上图中标注的KZCar是汽车数据模型

    上图中标注的KZCarGroup是汽车组的数据模型,下面附上代码,其中尤其要注意,这个复杂的数据模型的转化过程.

    KZCar.h

     1 //
     2 //  KZCar.h
     3 //  UI基础-06-05-19
     4 //
     5 //  Created by hukezhu on 15/5/20.
     6 //
     7 //
     8 
     9 #import <Foundation/Foundation.h>
    10 
    11 @interface KZCar : NSObject
    12 
    13 /**
    14  *  声明图片属性
    15  */
    16 @property (nonatomic,copy) NSString *icon;
    17 
    18 /**
    19  *  声明名称属性
    20  */
    21 @property (nonatomic,copy) NSString *name;
    22 
    23 
    24 -(instancetype)initWithDict:(NSDictionary *)dict;
    25 
    26 +(instancetype)carWithDict:(NSDictionary *)dict;
    27 
    28 +(NSArray *)carsWithDict:(NSArray *)dictarray;
    29 @end

    KZCar.m

     1 //
     2 //  KZCar.m
     3 //  UI基础-06-05-19
     4 //
     5 //  Created by hukezhu on 15/5/20.
     6 //
     7 //
     8 
     9 #import "KZCar.h"
    10 
    11 @implementation KZCar
    12 
    13 -(instancetype)initWithDict:(NSDictionary *)dict{
    14 
    15     if (self = [super init]) {
    16         //使用KVC
    17         [self setValuesForKeysWithDictionary:dict];
    18     }
    19     return  self;
    20 }
    21 
    22 
    23 +(instancetype)carWithDict:(NSDictionary *)dict{
    24 
    25     return [[self alloc]initWithDict:dict];
    26 }
    27 
    28 //此处是里面的汽车数据模型,分析汽车数组转化的时候,发现此处只需要传入一个数组即可
    29 +(NSArray *)carsWithDict:(NSArray *)dictarray{
    30 
    31     
    32     NSMutableArray *tempArray = [NSMutableArray array];
    33     for (NSDictionary *dict in dictarray) {
    34         KZCar *car = [KZCar carWithDict:dict];
    35         [tempArray addObject:car];
    36     }
    37     return tempArray;
    38 }
    39 @end
    KZCarGroup.h
    //
    //  KZCarGroup.h
    //  UI基础-06-05-19
    //
    //  Created by hukezhu on 15/5/20.
    //
    //
    
    #import <Foundation/Foundation.h>
    
    @interface KZCarGroup : NSObject
    /**
     *  声明一个汽车的属性
     */
    @property (nonatomic,strong)NSArray *cars;
    
    /**
     *  声明一个标题的属性
     */
    @property (nonatomic,copy)NSString *title;
    
    
    
    -(instancetype)initWithDict:(NSDictionary *)dict;
    
    +(instancetype)carGroupWithDict:(NSDictionary *)dict;
    
    +(NSArray *)carGroups;
    @end
    KZCarGroup.m
     1 //
     2 //  KZCarGroup.m
     3 //  UI基础-06-05-19
     4 //
     5 //  Created by hukezhu on 15/5/20.
     6 //
     7 //
     8 
     9 #import "KZCarGroup.h"
    10 #import "KZCar.h"
    11 
    12 @implementation KZCarGroup
    13 -(instancetype)initWithDict:(NSDictionary *)dict{
    14 
    15     if (self = [super init]) {
    16         _title = dict[@"title"];
    17         
    18         //将字典中的数组cars取出来
    19         NSArray *array = dict[@"cars"];
    20         _cars = [KZCar carsWithDict:array];
    21     }
    22     return self;
    23 }
    24 
    25 +(instancetype)carGroupWithDict:(NSDictionary *)dict{
    26 
    27     return [[self alloc]initWithDict:dict];
    28 }
    29 
    30 +(NSArray *)carGroups{
    31 
    32 
    33     NSString *path = [[NSBundle mainBundle]pathForResource:@"cars_total" ofType:@"plist"];
    34     NSArray *dictArray = [NSArray arrayWithContentsOfFile:path];
    35     
    36     NSMutableArray *tempArray = [NSMutableArray array];
    37     for (NSDictionary *dict in dictArray) {
    38         KZCarGroup *carGroup = [KZCarGroup carGroupWithDict:dict];
    39         [tempArray addObject:carGroup];
    40     }
    41     return tempArray;
    42 }
    43 @end
    
    
    

    ViewController.m

      1 //
      2 //  ViewController.m
      3 //  05-car多数据
      4 //
      5 //  Created by hukezhu on 15/5/20.
      6 //
      7 
      8 
      9 
     10 
     11 #import "ViewController.h"
     12 #import "KZCarGroup.h"
     13 #import "KZCar.h"
     14 
     15 @interface ViewController ()<UITableViewDataSource>
     16 
     17 @property (weak, nonatomic) IBOutlet UITableView *tableView;
     18 
     19 
     20 
     21 @property(nonatomic,strong)NSArray *cars;
     22 @end
     23 
     24 @implementation ViewController
     25 
     26 - (void)viewDidLoad {
     27     [super viewDidLoad];
     28     
     29     self.tableView.dataSource = self;
     30     NSLog(@"%@",self.cars);
     31 
     32 }
     33 #pragma mark -数据源方法
     34 /**
     35  *  返回一共有多少组
     36 
     37  */
     38 -(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{
     39 
     40     return self.cars.count;
     41 }
     42 
     43 /**
     44  *  返回每一组有多少行
     45  *
     46  */
     47 -(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
     48 
     49     KZCarGroup *carGroup = self.cars[section];
     50     return carGroup.cars.count;
     51 }
     52 
     53 /**
     54  *  返回每行显示什么样的数据
     55  *
     56  */
     57 -(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
     58 
     59     NSString *identity = @"yes";
     60     UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:identity ];
     61     
     62     if (cell == nil) {
     63         cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:identity];
     64     }
     65     //取出组模型
     66     KZCarGroup *carGroup = self.cars[indexPath.section];
     67     //取出行模型
     68     KZCar *car = carGroup.cars[indexPath.row];
     69     
     70     cell.imageView.image = [UIImage imageNamed:car.icon];
     71     cell.textLabel.text = car.name;
     72     return cell;
     73 }
     74 
     75 
     76 /**
     77  *  设置头部biaoti
     78  *
     79  */
     80 -(NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section{
     81 
     82     //取出组模型
     83     KZCarGroup *carGroup = self.cars[section];
     84     return carGroup.title;
     85     
     86 }
     87 
     88 /**
     89  *  设置尾部描述
     90  *
     91  */
     92 -(NSString *)tableView:(UITableView *)tableView titleForFooterInSection:(NSInteger)section{
     93 
     94     //取出组模型
     95     KZCarGroup *carGroup = self.cars[section];
     96     return carGroup.title;
     97     
     98 }
     99 /**
    100  *  懒加载数据
    101  *
    102  */
    103 -(NSArray *)cars{
    104 
    105     if (_cars == nil) {
    106         _cars = [KZCarGroup carGroups];
    107     }
    108     return _cars;
    109 }
    110 @end
     
  • 相关阅读:
    echart自定义浮窗 增加点击事件
    原生js学习 选择dom
    GOjs版本2.0去除水印
    js 作用域
    javaScript的原型模式
    JavaScript的基本包装类型说明
    原生js 函数 callee属性
    Vue学习-基本指令
    js函数
    Kubernetes(一):云计算发展历程
  • 原文地址:https://www.cnblogs.com/hukezhu/p/4535106.html
Copyright © 2011-2022 走看看