iOS开发九宫格布局案例:自动布局、字典转模型运用、id和instancetype区别、xib重复视图运用及与nib关系

转载自:http://blog.csdn.net/weisubao/article/details/40075409

本次九宫格案例:


(1)导入app.plist和各种图片素材,方便后续开发。实际开发中,也是如此。


(2)把plist中数组导入进来。

——因为本案例中app.plist最终是一个数组,数组里面是字典。所以我们需要一个数组类型来接受这个plist文件。

——我们利用之前掌握的在变量的getter中进行延迟加载数据。

[objc]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. #import "ViewController.h"  
  2.   
  3. @interface ViewController ()  
  4. @property(nonatomic,strongNSArray *arr1;  
  5. @end  
  6.   
  7. @implementation ViewController  
  8.   
  9. - (void)viewDidLoad {  
  10.     self.arr1;  
  11.     [super viewDidLoad];  
  12. }  
  13.   
  14. -(NSArray *)arr1{  
  15.     if (_arr1==nil) {  
  16.         NSString *path=[[NSBundle mainBundle]pathForResource:@"app.plist" ofType:nil];  
  17.         _arr1=[NSArray arrayWithContentsOfFile:path];  
  18.         NSLog(@"%@",_arr1);  
  19.     }  
  20.     return _arr1;  
  21. }  
  22.   
  23. @end  
输出结果是:

[objc]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1.       {  
  2.       icon = "icon_00";  
  3.       name = "\U5929\U5929\U9177\U8dd1";  
  4.   },  
  5.       {  
  6.       icon = "icon_01";  
  7.       name = "\U5168\U6c11\U98de\U673a\U5927\U6218";  
  8.   },  
  9. ……  


icon后面就是icon的名称,name后面也是name的名称,只不过中文被转换成了Unicode形式,一个汉字就是一个\U****。

(3)九宫格计算

——关键在于利用 / 和 % 运算得到元素所在的行和列,注意%符号运算前后不能有CGFloat,都换成int类型较好。

——CGFloat其实就是float和double的集合。所有用float和double的地方几乎都可以用CGFloat。会根据当前系统自动解析,如果是32位系统,则用float,如果是64位系统,则解析成double。

[objc]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. - (void)viewDidLoad {  
  2.     //定义总列数、每个九宫格的宽高  
  3.     int totalColumns=3;  
  4.     CGFloat appW=90;  
  5.     CGFloat appH=100;  
  6.     //定义水平和垂直方面的间距  
  7.     CGFloat marginX=(self.view.frame.size.width-totalColumns*appW)/(totalColumns+1);  
  8.     CGFloat marginY=20;  
  9.       
  10.     //根据arr1中数据数量来初始化并加载一个一个的UIVIew  
  11.     for (int index=0; index<self.arr1.count; index++) {  
  12.         //计算这个app在几行几列  
  13.         int row=index/totalColumns;  
  14.         int col=index%totalColumns;  
  15.         //创建UIView  
  16.         UIView *appView=[[UIView alloc]init];  
  17.         //根据一些计算,确定不同UIView的位置  
  18.         appView.frame=CGRectMake(marginX+col*(marginX+appW), 30+row*(marginY+appH), appW, appH);  
  19.         appView.backgroundColor=[UIColor redColor];  
  20.         [self.view addSubview:appView];  
  21.     }  
  22.       
  23.     [super viewDidLoad];  
  24.     // Do any additional setup after loading the view, typically from a nib.  
  25. }  

(4)往每个appView里面添加一个UIImageView、UIlabel和UIButton。直接在for循环中添加,即创建UIView *appView的时候顺便把它里面的东西也创建了。

——其中,UIImageView里的图片用到取得图片的名称,这个可以存放在plist里面,我们把_arr1里对应的字典取出来使用即可。

——重点是,UIButton的字体大小无法直接设置,而是用到UIbutton里的子视图titleLabel来设置。(因为UIButton里面其实封装了两个子视图控件,一个是装文字的UILabel *titleLabel,一个装图片的UIImageView *imageView)

[objc]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1.     for (int index=0; index<self.arr1.count; index++) {  
  2.         //计算这个app在几行几列  
  3.         int row=index/totalColumns;  
  4.         int col=index%totalColumns;  
  5.         //创建UIView  
  6.         UIView *appView=[[UIView alloc]init];  
  7.         //根据一些计算,确定不同UIView的位置  
  8.         appView.frame=CGRectMake(marginX+col*(marginX+appW), 30+row*(marginY+appH), appW, appH);  
  9. //        appView.backgroundColor=[UIColor redColor];  
  10.         [self.view addSubview:appView];  
  11.           
  12.         //根据索引拿到plist每个字典的数据  
  13.         NSDictionary *appDic=_arr1[index];  
  14.           
  15.         //往appView里增加子控件icon  
  16.         //根据字典拿到里面的icon名称  
  17.         UIImageView *appIcon=[[UIImageView alloc]init];  
  18.         CGFloat iconW=65;  
  19.         CGFloat iconH=65;  
  20.         CGFloat iconX=(appW-iconW)/2;  
  21.         CGFloat iconY=0;  
  22.         appIcon.frame=CGRectMake(iconX, iconY, iconW, iconH);  
  23.         appIcon.image=[UIImage imageNamed:appDic[@"icon"]];  
  24.         [appView addSubview:appIcon];  
  25.           
  26.         //往appView里增加子控件label  
  27.         UILabel *appLabel=[[UILabel alloc]init];  
  28.         CGFloat labelW=appW;  
  29.         CGFloat labelH=20;  
  30.         CGFloat labelX=(appW-labelW)/2;  
  31.         CGFloat labelY=iconY+iconH;  
  32.         appLabel.frame=CGRectMake(labelX, labelY, labelW, labelH);  
  33.         appLabel.text=appDic[@"name"];  
  34.         appLabel.textAlignment=NSTextAlignmentCenter;  
  35.         appLabel.font=[UIFont systemFontOfSize:14];  
  36.         [appView addSubview:appLabel];  
  37.           
  38.         //往appView里增加子控件button  
  39.         UIButton *appBtn=[[UIButton alloc]init];  
  40.         CGFloat btnW=65;  
  41.         CGFloat btnH=26;  
  42.         CGFloat btnX=(appW-btnW)/2;  
  43.         CGFloat btnY=labelY+labelH;  
  44.         appBtn.frame=CGRectMake(btnX, btnY, btnW, btnH);  
  45.         [appBtn setTitle:@"下载" forState:UIControlStateNormal];  
  46.         appBtn.titleLabel.font=[UIFont systemFontOfSize:14];  
  47.         [appBtn setBackgroundImage:[UIImage imageNamed:@"buttongreen"] forState:UIControlStateNormal];  
  48.         [appBtn setBackgroundImage:[UIImage imageNamed:@"buttongreen_highlighted"] forState:UIControlStateNormal];  
  49.         [appView addSubview:appBtn];  
  50.     }  

(5)最重要的:字典转模型

使用字典的坏处:需要用key值调取和设置数据,有时候会出错,虽然可以用宏变量改进,但是更要命的写错了key值,没有错误提示。

模型:严格叫做模型数据。核心就是我们把字典当成一个对象,字典里面的几个数据,我们分别转换成对象的几个属性,我们调用和设置数据的时候直接是“对象.属性”即可。

所以,我们需要创建一个类,这个专门用来存放数据,也就是常说的模型类。

本例中,创建一个JiuGongGe类,在.h中声明2个变量,和2种初始化方法(规范都是有2种初始化方法,其实核心是一种,第二种还是通过第一种来实现的)。

[objc]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. #import <Foundation/Foundation.h>  
  2.   
  3. @interface JiuGongGe : NSObject  
  4. @property(nonatomic,copyNSString *name;  
  5. @property(nonatomic,copyNSString *icon;  
  6.   
  7. -(instancetype)initWithJiuGongGe:(NSDictionary *)dic;  
  8. +(instancetype)jiuGongGeWith:(NSDictionary *)dic;  
  9.   
  10. @end  

在JiuGongGe.m中实现(注意写法,记忆):

[objc]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. #import "JiuGongGe.h"  
  2.   
  3. @implementation JiuGongGe  
  4.   
  5. -(instancetype)initWithJiuGongGe:(NSDictionary *)dic{  
  6.     if (self=[super init]) {  
  7.         self.name=dic[@"name"];  
  8.         self.icon=dic[@"icon"];  
  9.     }  
  10.     return self;  
  11. }  
  12.   
  13. +(instancetype)jiuGongGeWith:(NSDictionary *)dic{  
  14.     return [[JiuGongGe alloc]initWithJiuGongGe:dic];  
  15. }  
  16.   
  17. @end  

其实,我们的小标题是“字典转模型”,也就是说只是把字典转换成模型(对象),原先字典存放在数组中的,然后通过数组[index]一个个调用字典,现在模型(对象)依然存放在数组中。所以我们需要对数组的那个getter方法进行改进:(注意:需要在ViewController.m中#import "JiuGongGe.h",因为要实例化对象)

[objc]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. -(NSArray *)arr1{  
  2.     if (_arr1==nil) {  
  3.         NSString *path=[[NSBundle mainBundle]pathForResource:@"app.plist" ofType:nil];  
  4.         NSArray *tmpArr=[NSArray arrayWithContentsOfFile:path];  
  5.         NSMutableArray *muArr1=[[NSMutableArray alloc]init];  
  6.         for (NSDictionary *dict in tmpArr) {  
  7.             JiuGongGe *jiugognge=[JiuGongGe jiuGongGeWith:dict];  
  8.             [muArr1 addObject:jiugognge];  
  9.         }  
  10.         _arr1=muArr1;  
  11.     }  
  12.     return _arr1;  
  13. }  

在ViewDidLoad的那个for循环中,用到的地方都可以用对象.属性来调用数据了:

[objc]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. //根据索引拿到每个对象,此处appDic名称未改,还是用之前取字典的那个变量,看的不太习惯  
  2. JiuGongGe *appDic=_arr1[index];  
  3.   
  4. //往appView里增加子控件icon  
  5. ……  
  6. appIcon.image=[UIImage imageNamed:appDic.icon];  
  7.   
  8. //往appView里增加子控件label  
  9. appLabel.text=appDic.name;  

(6)jiuGongGeWith:(NSDictionary *)dic;初始化方法的改进

——里面用到的类名,可以替换成self。因为防止这个类有子类,如果子类调用jiuGongGeWith:(NSDictionary *)dic;时调用到父类的这个方法,里面写得名字还是父类的名字,初始化结果是一个父类的对象,而不是子类的对象。所以用self,谁调用就初始化谁的对象。


(7)id类型和instancetype的说明

——instancetype和id一样,都是万能指针。

——iOS建议我们使用instancetype代替id。尽管官方很多init方法的返回值也是id。

——使用id的好处就是,id是万能指针,我们不用担心它的返回值类型不匹配的问题。

——使用id的坏处:也正是因为它是万能指针,我们可以用任意指针接受这个返回值,比如NSString *str1=****,NSArray *arr1=****,这句代码写出来不会报错。但是有可能不是我们需要的返回值类型。

——使用instancetype的好处是,如果我们返回值是一个对象,那么你用上面两个任意指针接受这个返回值,它会有warning警告,我们用类对象JiuGongGe *jiugognge=***,就不会警告。

——instancetype只能用在返回值类型上,不能像id一样用在参数上。


(8)利用xib图形化布局减少代码

xib和storyboard的区别在于,storyboard是描述整个程序界面的,而xib多用于局部重复界面的描述。

比如本例中有12个应用,每个应用的视图都是一样的,可以用xib来实现,然后再把xib加载进来即可。

xib的创建(用empty):


在ourXib中布局:

——给UIImageView和UILabel分别设置tag为10和20,方便调用。

——拖动控件到界面中,改变大小时候,UIImageView需要把size设置成Freeform才能调整大小。


ourXib设置好后,就可以调用:

——除了图片之外的资源,都需要用[NSBundle mainBundle]来调用。

——调用xib文件的方法是mainBundle的loadNibNamed方法。

[objc]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. for (int index=0; index<self.arr1.count; index++) {  
  2.     //计算这个app在几行几列  
  3.     int row=index/totalColumns;  
  4.     int col=index%totalColumns;  
  5.       
  6.     //根据索引拿到每个对象  
  7.     JiuGongGe *appDic=_arr1[index];  
  8.     NSArray *xibArr=[[NSBundle mainBundle]loadNibNamed:@"ourXib" owner:nil options:nil];  
  9.     UIView *xibView=[xibArr lastObject];  
  10.     xibView.frame=CGRectMake(marginX+col*(marginX+appW), 30+row*(marginY+appH), appW, appH);  
  11.     UIImageView *imgView2=(UIImageView *)[xibView viewWithTag:10];  
  12.     imgView2.image=[UIImage imageNamed:appDic.icon];  
  13.       
  14.     UILabel *label2=(UILabel *)[xibView viewWithTag:20];  
  15.     label2.text=appDic.name;  
  16.     //添加到主view中  
  17.     [self.view addSubview:xibView];  
  18. }  

(9)xib文件和nib文件是什么关系?

——xib文件是我们开发者在开发的时候看到的东西;

——而运行在用户手机里时,xib文件会被转化为nib文件。

我们可以在iOS Simulator产生的沙盒中查看。

——找不到资源库路径,直接用NSLog(@"%@",[NSBundle mainBundle);把路径打印出来。

查找发现,这个资源库中确实有个ourXib.nib文件,xib文件确实转化成nib文件了。




  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值