UITableView 实现汽车品牌(demo)
看tableview的资料其实已经蛮久了,一直想写点儿东西,却总是因为各种原因拖延,今天晚上有时间静下心来记录一些最近学习的tableview的知识。下面进入正题,uitableview堪称uikit里面最复杂的一个控件了,使用起来不算难,但是要用好并不容易。当使用的时候我们必须要考虑到后台数据的设计,tableviewcell的设计和重用以及tableview的效率等问题。
上次介绍的uitableview,这里再做一个uitableview的小程序,汽车品牌,截图如下:
1.1创建项目,这里不多讲。
1.2 把所有汽车品牌的图片放到images.xcassets中,如下图:
1.3创建 plist数据,plist数据里面每个array为一个汽车品牌分组,每个array里面又有一个array,这里面存放每个分组下所有的品牌汽车数据,数据如下图。
1.4数据创建完之后,然后设计页面,页面很简单,直接放一个uitable view就可以了。
2.1后台代码,第一步导入
<uitableviewdatasource,uitableviewdelegate,uialertviewdelegate>
只有导入这uitable view的这几个代理,我们才能在后面的代码中使用uitable view的一些相对应的方法。
2.2 创建uitable view控件的属性,和创建一个存储数据的数组,如下。
@property (weak, nonatomic) iboutlet uitableview *tableview; @property(nonatomic,strong)nsarray *cargroups;
2.3 加载数据,这边先要创建两个模型类来保存数据,国为我们这里的数据都在本地的plist文化中,所以我们要把这个plist里面的数据读取出来保存在
创建的cargroups数组中,而本地的plist文件是一个array类型,而每个array里面又有一个array数组,所以我们要创建两个模型类来保存数据,一个模型类保存外面的array数据,一个模型类来保存array里面的子array数据,然后在模型类里面创建和plist里面对应的数据的属性和方法
代码如下:
#import <foundation/foundation.h> @interface zkcarmodel : nsobject //头像 @property(nonatomic,copy)nsstring * icon; //名字 @property(nonatomic,copy)nsstring *name; +(instancetype)carwithdict:(nsdictionary *)dic; -(instancetype)initwithdict:(nsdictionary *)dic; @end #import "zkcarmodel.h" @implementation zkcarmodel -(instancetype)initwithdict:(nsdictionary *)dic { if(self=[super init]) { [self setvaluesforkeyswithdictionary:dic]; } return self; } +(instancetype)carwithdict:(nsdictionary *)dic { return [[self alloc] initwithdict:dic]; } @end #import <foundation/foundation.h> #import "zkcarmodel.h" @interface zkcargroupmodel : nsobject //题目 @property(nonatomic,copy)nsstring *title; @property(nonatomic,strong)nsarray *cars; +(instancetype)cargroupwithdic:(nsdictionary *)dic; -(instancetype)initwithdict:(nsdictionary *)dic; @end #import "zkcargroupmodel.h" @implementation zkcargroupmodel -(instancetype)initwithdict:(nsdictionary *)dic { if(self=[super init]) { self.title=dic[@"title"]; nsmutablearray *array=[nsmutablearray array]; for (nsdictionary *dict in dic[@"cars"]) { zkcarmodel *car=[zkcarmodel carwithdict:dict]; [array addobject:car]; } self.cars=array; } return self; } +(instancetype)cargroupwithdic:(nsdictionary *)dic { return [[self alloc] initwithdict:dic]; } @end
2.4,对应数据的模型类创建好以后,开始创建数组懒加载
代码如下:
#import <foundation/foundation.h> @interface zkcarmodel : nsobject //头像 @property(nonatomic,copy)nsstring * icon; //名字 @property(nonatomic,copy)nsstring *name; +(instancetype)carwithdict:(nsdictionary *)dic; -(instancetype)initwithdict:(nsdictionary *)dic; @end #import "zkcarmodel.h" @implementation zkcarmodel -(instancetype)initwithdict:(nsdictionary *)dic { if(self=[super init]) { [self setvaluesforkeyswithdictionary:dic]; } return self; } +(instancetype)carwithdict:(nsdictionary *)dic { return [[self alloc] initwithdict:dic]; } @end #import <foundation/foundation.h> #import "zkcarmodel.h" @interface zkcargroupmodel : nsobject //题目 @property(nonatomic,copy)nsstring *title; @property(nonatomic,strong)nsarray *cars; +(instancetype)cargroupwithdic:(nsdictionary *)dic; -(instancetype)initwithdict:(nsdictionary *)dic; @end #import "zkcargroupmodel.h" @implementation zkcargroupmodel -(instancetype)initwithdict:(nsdictionary *)dic { if(self=[super init]) { self.title=dic[@"title"]; nsmutablearray *array=[nsmutablearray array]; for (nsdictionary *dict in dic[@"cars"]) { zkcarmodel *car=[zkcarmodel carwithdict:dict]; [array addobject:car]; } self.cars=array; } return self; } +(instancetype)cargroupwithdic:(nsdictionary *)dic { return [[self alloc] initwithdict:dic]; } @end
2.5,数据加载完以后,然后就要开始写uitable view中相对应的代理方法了
代码如下:
//设置分区 -(nsinteger)numberofsectionsintableview:(uitableview *)tableview { return self.cargroups.count; } //设置每个分区显示多少行数据 -(nsinteger)tableview:(uitableview *)tableview numberofrowsinsection:(nsinteger)section { zkcargroupmodel *model=self.cargroups[section]; return model.cars.count; } //每行显示的数据 -(uitableviewcell *)tableview:(uitableview *)tableview cellforrowatindexpath:(nsindexpath *)indexpath { static nsstring *id=@"a"; //从缓存中读取cell uitableviewcell *cell=[tableview dequeuereusablecellwithidentifier:id]; //如果缓存中没有cell,创建一个新的cell if(cell==nil){ cell=[[uitableviewcell alloc] initwithstyle:uitableviewcellstylesubtitle reuseidentifier:id]; } //找到当前分区的索引 zkcargroupmodel *groupmodel=self.cargroups[indexpath.section]; //找到当前分区的行 zkcarmodel *carmodel=groupmodel.cars[indexpath.row]; //设置cell显示的文字 cell.textlabel.text=carmodel.name; //设置cell显示的图片 cell.imageview.image=[uiimage imagenamed:carmodel.icon]; return cell; }
上面3个代理方法是uitable view中最常用的3个方法。写完这3个方法运行xcode就可以看到数据了。
但这里还有些小问题,这里显示的所有品牌都是从上往下排的,没有一个分组,这样我们想找哪个品牌的汽车并不太好找,所以,我们要把同一个数据的汽车品牌加一个字母表示,这怎么做呢,这就要给uitable view的每个分区加一个头了,使用titleforheaderinsection代理方法
代码如下:
//设置头样式 -(nsstring *)tableview:(uitableview *)tableview titleforheaderinsection:(nsinteger)section { //找到当前分区在数组中的索引 zkcargroupmodel *model=self.cargroups[section]; //返回当前分区的数据中的title return model.title; }
2.6上面的程序中,在屏幕的最右边还有一个索引,点这个索引就找找到相对应的分区数据,其实这个也很简单,也是调用一个
sectionindextitlesfortableview的代理方法,这个方法返回一个array的数组。
代码如下:
//设置索引 -(nsarray *)sectionindextitlesfortableview:(uitableview *)tableview { return [self.cargroups valueforkeypath:@"title"]; }
2.7,这个程序中还做了一个,当你点击屏幕上每个汽车品牌的时候还会弹出一个对话框,为什么要做这个呢,因为很多时候屏幕上的图片和文字都是可以点击的,所以光做一个静态显示好不是很好,虽然这个对话框好像并没有什么用,但这里只是讲下这个方法的使用
代码如下:
//点击cell时变化 -(void)tableview:(uitableview *)tableview didselectrowatindexpath:(nsindexpath *)indexpath { //创建对话框 uialertview *alertview=[[uialertview alloc] initwithtitle:@"汽车" message:@"取消" delegate:self cancelbuttontitle:@"确认" otherbuttontitles:@"取消", nil]; //设置样式 alertview.tag=1; alertview.alertviewstyle=uitableviewcellstylesubtitle; //[alertview ]; [alertview show]; }
3.1 一个uitableview做的汽车品牌就这样ok了,虽然这并不是一个app但,这里已经把uitableview的一些常用代理方法都写到了,当然uitableview还有很多代表方法,这里并没有讲,但会了这些以后,在以后的使用中我们可以再来查询,重要的是思想。
以上是uitableview 实现汽车品牌的全部内容,希望对大家有所帮助。
推荐阅读
-
Android编程实现仿优酷圆盘旋转菜单效果的方法详解【附demo源码下载】
-
Python实现使用request模块下载图片demo示例
-
Django框架实现的分页demo示例
-
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
-
基于h5 ajax实现手机定位(demo)
-
详解iOS开发中UItableview控件的数据刷新功能的实现
-
iOS应用中UITableView左滑自定义选项及批量删除的实现
-
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
-
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
-
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】