文档章节

iOS学习之UITableView(三):进阶篇索引,标记和自定义的table

芳仔小脚丫
 芳仔小脚丫
发布于 2014/03/03 09:30
字数 1398
阅读 8977
收藏 29


一、带索引目录的表视图

      ①效果图

                                 图1 带索引的列表

          

       ② 数据源

            本想获取通讯录中得名字,但为了用模拟器调试方便,就写死了数据,所以也只写了部分字母,总之有那么点意思就成

@interface ViewController ()<UITableViewDataSource,UITableViewDelegate>
{
    NSArray *sectionTitles; // 每个分区的标题
    NSArray *contentsArray; // 每行的内容
}


/** @brief 准备数据源 在viewDidLoad方法中调用*/
- (void)readySource
{
    
    sectionTitles       = [[NSArray alloc] initWithObjects:
                           @"A",@"C",@"F",@"G",@"H",@"M",@"S",@"T",@"X",@"Z", nil];
    contentsArray       = [[NSArray alloc] initWithObjects:
                            @[@"阿伟",@"阿姨",@"阿三"],
                            @[@"蔡芯",@"成龙",@"陈鑫",@"陈丹",@"成名"],
                            @[@"芳仔",@"房祖名",@"方大同",@"芳芳",@"范伟"],
                            @[@"郭靖",@"郭美美",@"过儿",@"过山车"],
                            @[@"何仙姑",@"和珅",@"郝歌",@"好人"],
                            @[@"妈妈",@"毛主席"],
                            @[@"孙中山",@"沈冰",@"婶婶"],
                            @[@"涛涛",@"淘宝",@"套娃"],
                            @[@"小二",@"夏紫薇",@"许巍",@"许晴"],
                            @[@"周恩来",@"周杰伦",@"张柏芝",@"张大仙"],nil];
}
         ③显示索引
// 每个分区的页眉
-(NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section
{
    return [sectionTitles objectAtIndex:section];
}
// 索引目录
-(NSArray *)sectionIndexTitlesForTableView:(UITableView *)tableView
{
    return sectionTitles;
}

        ④点击索引,跳转到点击的分区

// 点击目录
-(NSInteger)tableView:(UITableView *)tableView sectionForSectionIndexTitle:(NSString *)title atIndex:(NSInteger)index
{
    // 获取所点目录对应的indexPath值
    NSIndexPath *selectIndexPath = [NSIndexPath indexPathForRow:0 inSection:index];
    
    // 让table滚动到对应的indexPath位置
    [tableView scrollToRowAtIndexPath:selectIndexPath atScrollPosition:UITableViewScrollPositionBottom animated:YES];
    
    return index;
}

二、可以进行行标记的表视图

        ①效果图

                                            图2 可标记的列表

                    

    ②在cellForRow方法中,将Cell的accessoryType设置为None

// 定义其辅助样式
        cell.accessoryType      = UITableViewCellAccessoryNone;
     ③在didSelectRow方法中
// 点击行事件
-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    // 获取点击行的cell
    UITableViewCell *cell   = [tableView cellForRowAtIndexPath:indexPath];
    
    // 如果cell已经被标记
    if (cell.accessoryType == UITableViewCellAccessoryCheckmark) {
        // 取消标记
        cell.accessoryType  = UITableViewCellAccessoryNone;
    }
    
    // 如果cell未标记
    else{
        // 标记cell
        cell.accessoryType  = UITableViewCellAccessoryCheckmark;
    }
    // 取消选中效果
    [tableView deselectRowAtIndexPath:indexPath animated:YES];
}

此时,点击行即可选中,取消选中,但是滚动一下视图吧,你会发现下面某些未被点击的行也已经被标记了,这是因为cell的重用机制造成的,在第一篇文章中就这个问题有提到过

④解决cell重用问题,在cellForRow方法中,定义cellIdetifier时,将其每一行都定义为不同的值,就不会出现覆盖,重复等现象了,但是这个方法太过粗暴,并不是最好的解决办法,情急之下可以先用,然后再慢慢调试Table上的数据

NSString *cellIdentifier = [NSString stringWithFormat:@"cellIdentifier%d%d",indexPath.row,indexPath.section];

三、定制表视图的每一行内容

    ①我们做一个类似网易新闻客户端的新闻列表的table,如图3;简易效果图,如图4

                       图3  网易新闻效果                                 图4 demo效果

     

    ②数据源,在interface中声明

NSMutableArray *news_MArray;// 新闻内容数据源

    新建一个model类,命名为"newsModel",存放每一项数据

    newsModel.h如下,.m中没有添加其他代码,如果需要拷贝,可以重载copyWithZone方法,参考http://my.oschina.net/joanfen/blog/135053

#import <Foundation/Foundation.h>

typedef NS_ENUM(NSInteger, NEWSReportType){
    NEWSReportOrdinary, // 普通新闻
    NEWSReportExclusive,// 独家新闻
    NEWSReportSpecial,  // 专题新闻
};

@interface newsModel : NSObject

@property (nonatomic, copy)NSString *       news_image;     //图片
@property (nonatomic, copy)NSString *       news_title;     //标题
@property (nonatomic, copy)NSString *       news_summary;   //摘要
@property (nonatomic, assign)NSInteger      news_replyNo;   //跟帖数量
@property (nonatomic, assign)NEWSReportType reportType;     //报道类型


@end

    在viewDidLoad方法中

news_MArray = [[NSMutableArray alloc] init];
    for(NSInteger index =0; index<10; index++){
        newsModel *model    = [[newsModel alloc] init];
        model.news_image    = [NSString stringWithFormat:@"%d.jpg",index+1];
        model.news_title    = @"曾在月光之下望烟花";
        model.news_summary  = @"曾共看夕阳渐降下 我怎么舍得去放下 要怎么舍得去放下";
        model.news_replyNo  = index+196;
        model.reportType    = index%3;
        
        [news_MArray addObject:model];
    }

    ③行数

// 每个分区行数
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return [news_MArray count];
}

    ④自定义cell上控件

    在cellForRow方法中if(cell==nil)前

/*****自定义cell******/
    newsModel *model    = [news_MArray objectAtIndex:indexPath.row];
    
    UIImageView *   image_view;     //1.添加imageView
    UILabel *       title_label;    //2.添加标题Label
    UILabel *       summary_label;  //3.添加摘要Label
    UILabel *       replyNo_label;  //4.添加跟帖数量Label
    UIButton  *     extra_view;     //5.属于专题或者独家报道,进行标记
    /********************/

    在if(cell==nil)内

/*****自定义cell******/
        
        //1.添加imageView
        CGRect imageViewF   = CGRectMake(5, 5, 85, 65);
        image_view          = [[UIImageView alloc] initWithFrame:imageViewF];
        [cell addSubview:image_view];
        
        //2.添加标题Label
        CGRect titleLabelF  = CGRectMake(95, 5, 230, 24);
        title_label         = [[UILabel alloc] initWithFrame:titleLabelF];
        title_label.font    = [UIFont systemFontOfSize:16];//字体大小
        [cell addSubview:title_label];
        
        //3.添加摘要Label
        CGRect summaryLabelF  = CGRectMake(97, 27, 210, 40);
        summary_label         = [[UILabel alloc] initWithFrame:summaryLabelF];
        summary_label.font    = [UIFont systemFontOfSize:12];    // 字体大小
        summary_label.textColor     = [UIColor darkGrayColor];  // 文字颜色
        summary_label.numberOfLines = 2;
        [cell addSubview:summary_label];
        
        //4.跟帖数量Label
        CGRect replyNoLabelF  = CGRectMake(210, 45, 95, 24);
        replyNo_label         = [[UILabel alloc] initWithFrame:replyNoLabelF];
        replyNo_label.font    = [UIFont systemFontOfSize:12];    // 字体大小
        replyNo_label.textColor     = [UIColor darkGrayColor];  // 文字颜色
        replyNo_label.textAlignment = NSTextAlignmentRight;      // 文字右对齐
        
        //5.专题extraView
        CGRect extraViewF       = CGRectMake(270, 50, 28, 14);
        extra_view              = [[UIButton alloc] initWithFrame:extraViewF];
        extra_view.titleLabel.font = [UIFont boldSystemFontOfSize:10];
        [extra_view setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
        
        // 普通新闻,只添加跟帖数量
        if (model.reportType==NEWSReportOrdinary) {
           [cell addSubview:replyNo_label];
        }
        // 专题新闻,添加专题标志,并添加跟帖数量
        else if(model.reportType == NEWSReportSpecial){
            
            // 设置背景色
            extra_view.backgroundColor = [UIColor colorWithRed:120.0/255.0 green:170.0/255.0 blue:245.0/255.0 alpha:1.0];
            
            [extra_view setTitle:@"独家" forState:UIControlStateNormal];// 设置标题
            
            [cell addSubview:extra_view];                               // 添加
            
            replyNo_label.frame = CGRectMake(170, 45, 95, 24);          // 改变跟帖数量Label的坐标
            
            [cell addSubview:replyNo_label];                            // 添加跟帖数量Label
        }
        // 独家新闻,只添加独家标志
        else if(model.reportType == NEWSReportExclusive){
            
            extra_view.backgroundColor = [UIColor redColor];            // 设置背景颜色
            
            [extra_view setTitle:@"专题" forState:UIControlStateNormal]; // 设置标题
            
            [cell addSubview:extra_view];                               // 添加到cell
        }
/********************/

    在if(cell==nil)后

/*****自定义cell******/
    [image_view setImage:[UIImage imageNamed:model.news_image]];// 设置图片
    title_label.text    = model.news_title;                     // 设置标题
    summary_label.text  = model.news_summary;                   // 设置小标题
    replyNo_label.text  = [NSString stringWithFormat:@"%d 跟帖",model.news_replyNo];// 设置跟帖数量
/********************/

    ⑤设置行高

-(CGFloat) tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    return 75;
}

代码下载

http://www.oschina.net/action/code/download?code=33723&id=48636

© 著作权归作者所有

芳仔小脚丫
粉丝 931
博文 83
码字总数 76301
作品 0
闵行
程序员
私信 提问
加载中

评论(3)

可齐
可齐
很棒~谢谢分享
谷雨落江南
谷雨落江南
79女程序员真恐怖~
Single夏
Single夏
真是高产.. 已订阅!
IOS学习,最简单的表格应用程序,学习,列出博客

IOS编程浅蓝教程,这是博客地址http://www.cnblogs.com/haichao/category/425378.html IOS编程浅蓝教程:锲子 IOS编程浅蓝教程(一)先决条件:开始iOS编程的必要准备 IOS编程浅蓝教程(二) Hel...

andy521zhu
2015/01/17
0
0
iOS UITableView代理方法详解

iOS UITableView的代理方法详解 一、补充 在上一篇博客中,http://my.oschina.net/u/2340880/blog/404605,我将IOS中tableView(表视图)的一些常用方法总结了一下,这篇将tableView的代理方法...

珲少
2015/04/22
0
2
iOS开发tips-神奇的UITableView

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/jianxin160/article/details/71436920 概述 UITableView是iOS开发中使用频率最高的UI控件,在前面的文章中对于...

KenshinCui
2017/05/08
0
0
iOS开发系列--UITableView全面解析

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/jianxin160/article/details/47753205 --UIKit之UITableView 概述 在iOS开发中UITableView可以说是使用最广泛...

KenshinCui
2015/08/18
0
0
ios学习--TableView详细解释

ios学习--TableView详细解释 分类: ios Object-C2012-05-17 08:48 1714人阅读 评论(0) 收藏 举报 -、建立 UITableView (NSArray )sectionIndexTitlesForTableView:(UITableView )tableView......

wcj
2012/11/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

web前端性能优化

js相关 根据js时间线,将js放在最下面加载,先加载DOM,再加载js 懒执行,就是将某些逻辑延迟到使用时再执行。该技术可用于首屏优化,对于某些耗时逻辑并不需要在首屏就使用的,就可以使用懒...

祖达
19分钟前
0
0
websocket通信failed to execute 'send'问题的解决

在建立web socket通信后,发送数据时,出现下图所示现象: 问题代码演示 function TestSockets() { //实例化一个WebSocket对象 var socket = new WebSocket("ws://127.0.0.1:8000/w...

城市之雾
25分钟前
0
0
PHPStorm 如何设置 yaf 代码提示?

下载 php-yaf-doc git clone https://github.com/elad-yosifon/php-yaf-doc.git PHPStorm 如下设置 使用

whoru
26分钟前
0
0
typeorm drop foreign key

1. 问题描述 项目代码中使用typeorm进行mysql的数据操作, 昨天突然部署测试环境发现测试环境数据库的外键都为空了, 导致涉及的整个系统不可用. 2. 问题探究 尝试复现 mysqldump 线上数据, 然...

jimmywa
27分钟前
2
0
好程序员web前端开发测验之css部分

好程序员web前端开发测验之css部分Front End Web Development Quiz CSS 部分问题与解答 Q: CSS 属性是否区分大小写? <p><font size="3">  ul {</font></p> <p><font size="3">  MaRGin:......

好程序员IT
32分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部