当前位置: 移动技术网 > IT编程>移动开发>IOS > 实例讲解iOS应用开发中使用UITableView创建自定义表格

实例讲解iOS应用开发中使用UITableView创建自定义表格

2019年07月24日  | 移动技术网IT编程  | 我要评论

目前黄金价格,高根鞋,教师节活动主持稿

一、带索引目录的表视图

1.效果图

201613093142428.png (320×478)

2.数据源

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

复制代码 代码如下:

@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];
}


3.显示索引
复制代码 代码如下:

// 每个分区的页眉
-(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;
}


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

1.效果图

201613093224243.png (320×511)

2.在cellforrow方法中,将cell的accessorytype设置为none

复制代码 代码如下:

// 定义其辅助样式
       cell.accessorytype      = uitableviewcellaccessorynone;

3.在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的重用机制造成的,在第一篇文章中就这个问题有提到过

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

复制代码 代码如下:

nsstring *cellidentifier = [nsstring stringwithformat:@"cellidentifier%d%d",indexpath.row,indexpath.section];

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

1.我们做一个类似网易新闻客户端的新闻列表的table,如下图左;简易效果图,如下图右

201613093245537.png (320×511)201613093259537.png (320×469)

2.数据源,在interface中声明

复制代码 代码如下:

nsmutablearray *news_marray;// 新闻内容数据源
    新建一个model类,命名为"newsmodel",存放每一项数据

    newsmodel.h如下,.m中没有添加其他代码,如果需要拷贝,可以重载copywithzone方法,
#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];
}

3.行数
复制代码 代码如下:

// 每个分区行数
-(nsinteger)tableview:(uitableview *)tableview numberofrowsinsection:(nsinteger)section
{
    return [news_marray count];
}

4.自定义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];// 设置跟帖数量
/********************/

5.设置行高
复制代码 代码如下:

-(cgfloat) tableview:(uitableview *)tableview heightforrowatindexpath:(nsindexpath *)indexpath
{
    return 75;
}

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

  • ios uicollectionview实现横向滚动

    现在使用卡片效果的app很多,之前公司让实现一种卡片效果,就写了一篇关于实现卡片的文章。文章最后附有demo实现上我选择了使用uicollectionview ... [阅读全文]
  • iOS UICollectionView实现横向滑动

    本文实例为大家分享了ios uicollectionview实现横向滑动的具体代码,供大家参考,具体内容如下uicollectionview的横向滚动,目前我使... [阅读全文]
  • iOS13适配深色模式(Dark Mode)的实现

    iOS13适配深色模式(Dark Mode)的实现

    好像大概也许是一年前, mac os系统发布了深色模式外观, 看着挺刺激, 时至今日用着也还挺爽的终于, 随着iphone11等新手机的发售, ios 13系统... [阅读全文]
  • ios 使用xcode11 新建项目工程的步骤详解

    ios 使用xcode11 新建项目工程的步骤详解

    xcode11新建项目工程,新增了scenedelegate这个类,转而将原appdelegate负责的对ui生命周期的处理担子接了过来。故此可以理解为:ios... [阅读全文]
  • iOS实现转盘效果

    本文实例为大家分享了ios实现转盘效果的具体代码,供大家参考,具体内容如下demo下载地址: ios转盘效果功能:实现了常用的ios转盘效果,轮盘抽奖效果的实现... [阅读全文]
  • iOS开发实现转盘功能

    本文实例为大家分享了ios实现转盘功能的具体代码,供大家参考,具体内容如下今天给同学们讲解一下一个转盘选号的功能,直接上代码直接看viewcontroller#... [阅读全文]
  • iOS实现轮盘动态效果

    本文实例为大家分享了ios实现轮盘动态效果的具体代码,供大家参考,具体内容如下一个常用的绘图,主要用来打分之类的动画,效果如下。主要是ios的绘图和动画,本来想... [阅读全文]
  • iOS实现九宫格连线手势解锁

    本文实例为大家分享了ios实现九宫格连线手势解锁的具体代码,供大家参考,具体内容如下demo下载地址:效果图:核心代码://// clockview.m// 手... [阅读全文]
  • iOS实现卡片堆叠效果

    本文实例为大家分享了ios实现卡片堆叠效果的具体代码,供大家参考,具体内容如下如图,这就是最终效果。去年安卓5.0发布的时候,当我看到安卓全新的material... [阅读全文]
  • iOS利用余弦函数实现卡片浏览工具

    iOS利用余弦函数实现卡片浏览工具

    本文实例为大家分享了ios利用余弦函数实现卡片浏览工具的具体代码,供大家参考,具体内容如下一、实现效果通过拖拽屏幕实现卡片移动,左右两侧的卡片随着拖动变小,中间... [阅读全文]
验证码:
移动技术网