• IOS-UITableView


    课程要点:

    •  UITableView及其两种风格和三部分
    •   UITableViewController
    •   UITableViewCell及其四种风格
    •   通过代理给UITableView设置cell
    •   性能优化
    •   tableView的其他代理方法

    UITableView及其两种风格和三部分

         UITableView是一个能滑动,能够承载多个单元格的视图控件,例如下图:能够滑动的是tableView,上面的每一条新闻都放在一个cell里面。

           

         

          UITableView有两种风格

          1、UITableViewStylePlain(普通风格)

          2、UITableViewStyleGrouped(分组风格)

    复制代码
        //在设置frame的同时设置一种风格,现在先选择普通风格,后面讲到段的时候会用效果来展示两者的不同
    UITableView *tableView = [[UITableView alloc]initWithFrame:CGRectMake(0, 0, 320, 480) style:UITableViewStylePlain];
        tableView.backgroundColor = [UIColor grayColor];
        
        [self.view addSubview:tableView];
    复制代码

         UITableView由三部分组成

         1、表头

         2、UITableViewCell(单元格)

         3、表尾

        //给tableView设置表头
        tableView.tableHeaderView = [self addHeaderView];
        //给tableView设置表尾
        tableView.tableFooterView = [self addFooterView];

         PS:设置表头和表尾是通过点属性来设置的,都需要赋值一个View,所以自己写了两个返回值是View的方法来设置表头和表尾的试图,如果将某个试图作为表头或者表尾,该试图的x,y,width都按照tableView默认的来,只有height会变成表头或表尾的高。

    复制代码
    //设置表头
    - (UIView *)addHeaderView{
        
        UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, 0, 40)];
        
        label.text = @"表头";
        
        label.backgroundColor = [UIColor yellowColor];
        
        return label;
    }
    
    //设置表尾
    - (UIView *)addFooterView{
        
        UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, 0, 40)];
        
        label.text = @"表尾";
        
        label.backgroundColor = [UIColor yellowColor];
        
        return label;
    }
    复制代码

         运行效果如下:

          

         PS:此时只有表头和表尾,中间没有UITableViewCell(单元格)。这是因为目前我只给他设置了表头和表尾,并未设置单元格。

     UITableViewController

        每个控制器都自带一个视图,UITableViewController自带的试图是一个TableViewController。如果一个页面只有TableView的话可以采用这种控制器。自己可以私下尝试一下。这里不做过多解释了。

     UITableViewCell及其四种风格

     cell自带textLabeldetailTextLabelimageView 不同风格的cell,这三种控件的摆放位置不同

      1、UITableViewCellStyleDefault  

            图片居左,textlabel在图片右边,detailTextLabel默认不显示

      2、UITableViewCellStyleValue1  

            图片居左,textlabel在图片的右边,detailTextLabel居右

      3、UITableViewCellStyleValue2  

            左边一个主标题textLabel,挨着右边一个副标题detailTextLabel

      4、UITableViewCellStyleSubtitle  

            图片居左,textLabel在图片的右边,deetailTextlabel在textlabel的下方。

      将viewDidiLoad里的代码都给注释了,然后在ViewDidLoad中调用这个方法。

      //addTableViewCell方法是我自己写的,在这个方法内我将创建好的cell放到self.view上面
    [self addTableViewCell];

      实现addTableViewCell方法

    复制代码
    - (void)addTableViewCell{
        
        //UITableCell也是一种试图空间,在这里初始化的同时给cell设置风格和标识符
        UITableViewCell *cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:@"cellID"];
        
        cell.frame = CGRectMake(0, 150, 320, 40);
        
        cell.backgroundColor = [UIColor brownColor];
        
        [self.view addSubview:cell];
        
        //cell自带textLabel、detailTextLabel、imageView 不同风格的cell,这三种控件的摆放位置不同
        
        /*
         * UITableViewCellStyleDefault 
           图片居左,textlabel在图片右边,detailTextLabel默认不显示
         
         * UITableViewCellStyleValue1
           图片居左,textlabel在图片的右边,detailTextLabel居右
         
         * UITableViewCellStyleValue2
           左边一个主标题textLabel,挨着右边一个副标题detailTextLabel
         
         * UITableViewCellStyleSubtitle
           图片居左,textLabel在图片的右边,deetailTextlabel在textlabel的下方。
         */
        
        cell.textLabel.text = @"张三";
        cell.textLabel.textColor = [UIColor redColor];
        cell.detailTextLabel.text = @"张三是张家人";
        cell.imageView.image = [UIImage imageNamed:@"zhangsan.png"];
    
        //右边出现小箭头
        cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
        
        //圈i加箭头
        cell.accessoryType = UITableViewCellAccessoryDetailDisclosureButton;
        
        //对号
        cell.accessoryType = UITableViewCellAccessoryCheckmark;
        
        //圈i
        cell.accessoryType = UITableViewCellAccessoryDetailButton;
        
    }
    复制代码

        运行效果如下:

        

    通过代理给UITableView设置cell

      PS:之前我们学习了两种控件,UITableView和UITableViewCell,他两之间的关系应该是UITableView中有很多排列的UITableViewCell。接下俩我们要做的就是通过代理将两者给关联起来。

       将viewDidLoad中的内容恢复至此:

    复制代码
        UITableView *tableView = [[UITableView alloc]initWithFrame:CGRectMake(0, 0, 320, 480) style:UITableViewStylePlain];
        
        //给tableView设置表头
        tableView.tableHeaderView = [self addHeaderView];
        //给tableView设置表尾
        tableView.tableFooterView = [self addFooterView];
            
        tableView.backgroundColor = [UIColor grayColor];
        
        [self.view addSubview:tableView];
    复制代码

          本模块的标题已经说明咱们是通过代理方法来设置cell。

         1、遵守协议   

    //这两个协议分别有不同的方法
    @interface ContactViewController()<UITableViewDataSource,UITableViewDelegate>
    @end

         2、挂代理

    tableView.delegate = self;
    tableView.dataSource = self;

         3、实现代理方法,给tableView设置cell,有两个属性是必须的

         1)tableView里面有多少行.(- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section)

         2)每一行是个什么样的cell.(- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath)

        

    复制代码
    //返回tableView有多少行
    - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
        
        
        return 10;
    }
    //给每一行设置一个cell
    - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
           UITableViewCell *cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:nil];
        
        cell.textLabel.text = @"张三";
        cell.textLabel.textColor = [UIColor redColor];
        cell.detailTextLabel.text = @"张三是张家人";
        cell.imageView.image = [UIImage imageNamed:@"zhangsan.png"];
        
        //右边出现小箭头
        cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
    
        return cell;
       
    }
    复制代码

      运行效果如下:

        

      完整代码如下:

    复制代码
    //
    //  ContactViewController.m
    //  UI-No8-UITableView
    //
    //  Created by  on 15/12/14.
    //  Copyright © 2015年 王立广. All rights reserved.
    //
    
    #import "ContactViewController.h"
    
    @interface ContactViewController()<UITableViewDataSource,UITableViewDelegate>@end
    
    @implementation ContactViewController
    
    - (void)viewDidLoad{
        [super viewDidLoad];
        
        UITableView *tableView = [[UITableView alloc]initWithFrame:CGRectMake(0, 0, 320, 480) style:UITableViewStylePlain];
        
        //给tableView设置表头
        tableView.tableHeaderView = [self addHeaderView];
        //给tableView设置表尾
        tableView.tableFooterView = [self addFooterView];
        
        tableView.delegate = self;
        tableView.dataSource = self;
        
        tableView.backgroundColor = [UIColor grayColor];
        
        [self.view addSubview:tableView];
        
        
    }
    
    //设置表头
    - (UIView *)addHeaderView{
        
        UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, 0, 40)];
        
        label.text = @"表头";
        
        label.backgroundColor = [UIColor yellowColor];
        
        return label;
    }
    
    //设置表尾
    - (UIView *)addFooterView{
        
        UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, 0, 40)];
        
        label.text = @"表尾";
        
        label.backgroundColor = [UIColor yellowColor];
        
        return label;
    }
    
    //返回tableView有多少行
    - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
        
        return 10;
    }
    
    
    //tableView上将要显示一个cell时会调用这个方法,在方法内设置一个cell并返回便可将cell放到tableView上。
    - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
        
        UITableViewCell *cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:nil];
        
        cell.textLabel.text = @"张三";
        cell.textLabel.textColor = [UIColor redColor];
        cell.detailTextLabel.text = @"张三是张家人";
        cell.imageView.image = [UIImage imageNamed:@"zhangsan.png"];
        
        //右边出现小箭头
        cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
        
        return cell;
    }
    @end
    复制代码

     性能优化

       上面学习的东西,咱们已经能够将UItableView和UITableViewCell结合起来了,在上面的代码中有一个问题是每次出现一个新的cell,系统会创建一个新的cell对象。这样是十分浪费内存的,接下来咱们重写优化这个方法。

    复制代码
    //tableView上将要显示一个cell时会调用这个方法,在方法内设置一个cell并返回便可将cell放到tableView上。
    - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
        /*
         * UITableView每次滑动,必定有消失的cell,系统会自动将这些消失的cell放到缓存池里,需要新cell时,系统先在缓存池里看是否有cell,有的话就利用,没有的话就新建。
         
         * 前提:UITableView滑动
           1、旧的cell消失,系统自动将这个cell放到缓存池里面。
           2、新的cell要显示,就会代理方法。
              1) 首先看缓存池里面有没有cell
              2)  如果有cell就利用,如果没有就新建
              3) 在代理方法中返回设置的cell
         */
        
      static NSString *cellID = @"cellID";
        
        UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellID];
        
        if (cell == nil) {
            
            cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:cellID];
        }
        
        cell.textLabel.text = @"张三";
        cell.textLabel.textColor = [UIColor redColor];
        cell.detailTextLabel.text = @"张三是张家人";
        cell.imageView.image = [UIImage imageNamed:@"zhangsan.png"];

    //右边出现小箭头 cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator; return cell; }
    复制代码

       tableView的其他代理方法 

     

    复制代码
    //设置每行的高
    - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{ return 100; }
    复制代码

     

    复制代码
    //给tablView设置段数
    /*
    * tableView如果不实现这个代理方法,默认是一段,所以之前是给第一段设置行数,通过这个方法能够给tableView设置多段
    */
    - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{ return 3; }
    复制代码

      PS:之前讲UITableView时说到有两种风格,现在切换到grouped模式运行看效果,现在看到分段效果即可,后面会慢慢的告诉你分段的用处。

            

    总结:这次只是简单的讲了一些UITableView基本使用,和一些简单的代理方法。后面会继续深入带领大家学习。

     

  • 相关阅读:
    Android使用注解代替枚举从而节省系统使用的内存开销
    android9.0系统适配遇到的问题
    android 图片上传图片 报Socket: Broken pipe
    android H5支付 网络环境未能通过安全验证,请稍后再试
    Error:Execution failed for task ':app:processDebugManifest'. Manifest merger failed with multiple errors, see logs
    NightWatch端到端测试
    JavaScript生成斐波那契数列
    Vue Material
    Jasmine
    Postman
  • 原文地址:https://www.cnblogs.com/good-ios/p/5049849.html
Copyright © 2020-2023  润新知