码迷,mamicode.com
首页 > 移动开发 > 详细

iOS开发——适配篇&App适配简单概括

时间:2015-07-17 22:38:47      阅读:3240      评论:0      收藏:1      [点我收藏+]

标签:

 App适配简单概括

1:适配:适应、兼容各种不同的情况

系统适配

  • 针对不同版本的操作系统进行适配

 屏幕适配

  • 针对不同大小的屏幕尺寸进行适配

在用户眼中

  • 屏幕是由无数个像素组成的
  • 像素越多,屏幕越清晰

在开发者眼中

  • 屏幕是由无数个点组成的,点又是由像素组成的
  • 像素越多,屏幕越清晰

 

 iOS设置尺寸图

 

技术分享

 

一:Autoresizing:基本的控件布局----掌握

 

在Autolayout之前,有Autoresizing可以作屏幕适配,但局限性较大,有些任务根本无法完成

相比之下,Autolayout的功能比Autoresizing强大很多

 

技术分享

 

代码:

   

 1  // 1.创建父控件
 2 
 3     UIView *greenView = [[UIView alloc] init];
 4 
 5     greenView.frame = CGRectMake(0, 0, 200, 200);
 6 
 7     greenView.backgroundColor = [UIColor greenColor];
 8 
 9     [self.view addSubview:greenView];
10 
11     self.greenView = greenView;
12 
13     
14 
15     // 2.创建子控件
16 
17     UIView *redView = [[UIView alloc] init];
18 
19     redView.frame = CGRectMake(0, 0, 100, 100);
20 
21     redView.backgroundColor = [UIColor redColor];
22 
23     [greenView addSubview:redView];
24 
25     

 

3.设置子控件的autoresizing

     注意: 代码中的上下左右和Storyboard中的是相反的

  •      Storyboard中勾选上左边, 就代表当前控件和父控件的左边的距离是固定的
  •      而在代码中如果写上FlexibleLeftMargin, 就代表当前控件和父控件的左边是可拉伸的
  •      换句话说就是: 如果设置了FlexibleLeftMargin, 就代表着右边是固定的

     

  1.      UIViewAutoresizingFlexibleLeftMargin // 左边可以伸缩
  2.      UIViewAutoresizingFlexibleRightMargin // 右边可以伸缩
  3.      UIViewAutoresizingFlexibleTopMargin // 顶部可以伸缩
  4.      UIViewAutoresizingFlexibleBottomMargin // 底部可以伸缩
  5.      
  6.      // 以下两个和Storyboard中的是一样的
  7.      UIViewAutoresizingFlexibleWidth // 宽度可以伸缩
  8.      UIViewAutoresizingFlexibleHeight // 高度可以伸缩

 1 redView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;

 

技术分享

触摸一下屏幕红色的View就会随着蓝色的View变化而变化

 

二:AutorLayout:界面布局适配----通过StoryBoard拖线必须熟练

Autolayout是一种“自动布局”技术,专门用来布局UI界面的

Autolayout自iOS 6开始引入,由于Xcode 4的不给力,当时并没有得到很大推广

自iOS 7(Xcode 5)开始,Autolayout的开发效率得到很大的提升

苹果官方也推荐开发者尽量使用Autolayout来布局UI界面

 技术分享

 

 

 

 

一个NSLayoutConstraint对象就代表一个约束

 

创建约束对象的常用方法

+(id)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constant:(CGFloat)c;

  • view1 :要约束的控件
  • attr1 :约束的类型(做怎样的约束)
  • relation :与参照控件之间的关系
  • view2 :参照的控件
  • attr2 :约束的类型(做怎样的约束)
  • multiplier :乘数
  • c :常量

 

代码

  

 1   // 1.创建两个控件, 并且添加到父控件上
 2 
 3     UIView *blueView = [[UIView alloc] init];
 4 
 5     blueView.backgroundColor = [UIColor blueColor];
 6 
 7     [self.view addSubview:blueView];
 8 
 9     
10 
11     UIView *redView = [[UIView alloc] init];
12 
13     redView.backgroundColor = [UIColor redColor];
14 
15     [self.view addSubview:redView];
16 
17     

 

    

 2.添加约束

1 //    self.view.translatesAutoresizingMaskIntoConstraints = NO; // 错误写法, 禁用父控件的对子控件无效
2 
3     
4 
5     redView.translatesAutoresizingMaskIntoConstraints = NO;
6 
7     blueView.translatesAutoresizingMaskIntoConstraints = NO;
8 
9     

 

2.1添加蓝色的约束

   

 1  // 2.1.1顶部
 2 
 3     NSLayoutConstraint *blueTopCos = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:20];
 4 
 5     [self.view addConstraint:blueTopCos];
 6 
 7     
 8 
 9     // 2.1.2左边
10 
11     NSLayoutConstraint *blueLeftCos = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:20];
12 
13     [self.view addConstraint:blueLeftCos];
14 
15     
16 
17     
18 
19     // 2.1.3右边
20 
21     NSLayoutConstraint *blueRightCos = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1.0 constant:-20];
22 
23     [self.view addConstraint:blueRightCos];
24 
25     
26 
27     // 2.1.4高度
28 
29     NSLayoutConstraint *blueHeightCos = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:kNilOptions multiplier:1.0 constant:50];
30 
31     [blueView addConstraint:blueHeightCos];
32 
33     

 

    

 2.2添加红色的约束

   

 1  // 2.2.1顶部
 2 
 3     NSLayoutConstraint *redTopCos = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeBottom multiplier:1.0 constant:20];
 4 
 5     [self.view addConstraint:redTopCos];
 6 
 7     
 8 
 9     // 2.2.2右边
10 
11     NSLayoutConstraint *redRightCos = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1.0 constant:-20];
12 
13     [self.view addConstraint:redRightCos];
14 
15     
16 
17     // 2.2.3高度
18 
19     NSLayoutConstraint *redHeightCos = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:kNilOptions multiplier:1.0 constant:50];
20 
21     [redView addConstraint:redHeightCos];
22 
23     
24 
25     // 2.2.4宽度
26 
27     NSLayoutConstraint *redWidthCos = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeWidth multiplier:0.5 constant:0.0];
28 
29     [self.view addConstraint:redWidthCos];    
30 
31  

 

技术分享

 

优先级:(默认是100)

技术分享

 

 

警告

控件的frame不匹配所添加的约束, 

比如约束控件的宽度为100, 而控件现在的宽度是110

 

错误

缺乏必要的约束, 比如

只约束了宽度和高度, 没有约束具体的位置

 

两个约束冲突, 比如

1个约束控件的宽度为100, 1个约束控件的宽度为110

 

:自动布局的核心计算公式

obj1.property1 =(obj2.property2 * multiplier)+ constant value

技术分享

 

规则:

  • 1)对于两个同层级view之间的约束关系,添加到它们的父view上
  • 2)对于两个不同层级view之间的约束关系,添加到他们最近的共同父view上
  •  3)对于有层次关系的两个view之间的约束关系,添加到层次较高的父view上

 

 

三:Size Class:屏幕适配----必须熟练

 

 技术分享

 

 

 

四:VFL语言----了解

VFL全称是Visual Format Language,翻译过来是“可视化格式语言”

VFL是苹果公司为了简化Autolayout的编码而推出的抽象语言

 

基本语法:

  • H:[cancelButton(72)]-12-[acceptButton(50)]

canelButton宽72,acceptButton宽50,它们之间间距12

 

  • H:[wideView(>=60@700)]

wideView宽度大于等于60point,该约束条件优先级为700(优先级最大值为1000,优先级越高的约束越先被满足)

 

  • V:[redBox][yellowBox(==redBox)]

竖直方向上,先有一个redBox,其下方紧接一个高度等于redBox高度的yellowBox

 

  • H:|-10-[Find]-[FindNext]-[FindField(>=20)]-|

水平方向上,Find距离父view左边缘默认间隔宽度,之后是FindNext距离Find间隔默认宽度;再之后是宽度不小于20的FindField,它和FindNext以及父view右边缘的间距都是默认宽度。(竖线“|” 表示superview的边缘)

 

使用VFL来创建约束数组

+ (NSArray *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(NSDictionary *)metrics views:(NSDictionary *)views;

  • format :VFL语句
  • opts :约束类型
  • metrics :VFL语句中用到的具体数值
  • views :VFL语句中用到的控件
 1     // 1.创建一个红色View, 并且添加到父控件
 2 
 3     UIView *blueVeiw = [[UIView alloc] init];
 4 
 5     blueVeiw.backgroundColor = [UIColor blueColor];
 6 
 7     [self.view addSubview:blueVeiw];
 8 
 9     
10 
11     UIView *redVeiw = [[UIView alloc] init];
12 
13     redVeiw.backgroundColor = [UIColor redColor];
14 
15     [self.view addSubview:redVeiw];
16 
17     
18 
19     
20 
21     
22 
23     // 2.禁止红色View的Autgoresizing
24 
25     blueVeiw.translatesAutoresizingMaskIntoConstraints = NO;
26 
27     redVeiw.translatesAutoresizingMaskIntoConstraints = NO;
28 
29     
30 
31     // 3.利用VFL添加约束
32 
33     /*
34 
35      VisualFormat: VFL语句
36 
37      options: 对齐方式等
38 
39      metrics: VFL语句中使用到的一些变量
40 
41      views: VFL语句中使用到的一些控件
42 
43      */
44 
45     // 3.1设置蓝色
46 
47     // 3.1.1水平方向
48 
49     NSArray *blueHCos = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[blueVeiw]-20-|" options:kNilOptions metrics:nil views:@{@"blueVeiw":blueVeiw}];
50 
51     [self.view addConstraints:blueHCos];
52 
53     
54 
55     // 3.1.2垂直方向
56 
57     NSArray *blueVCos = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[blueVeiw(==50)]" options:kNilOptions metrics:nil views:@{@"blueVeiw":blueVeiw}];
58 
59      [self.view addConstraints:blueVCos];
60 
61     
62 
63     // 3.2设置红色
64 
65     // 3.2.1垂直方向
66 
67     NSArray *redVCos = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[blueVeiw]-20-[redVeiw(==50)]" options:NSLayoutFormatAlignAllRight metrics:nil views:@{@"blueVeiw":blueVeiw, @"redVeiw":redVeiw}];
68 
69     [self.view addConstraints:redVCos];
70 
71     
72 
73     // 3.2.2水平方向
74 
75 //    NSArray *redHCos = [NSLayoutConstraint constraintsWithVisualFormat:@"H:[redVeiw(==blueVeiw * 0.5)]" options:kNilOptions metrics:nil views:@{@"blueVeiw":blueVeiw, @"redVeiw":redVeiw}];
76 
77 //    [self.view addConstraints:redHCos];
78 
79     
80 
81 #warning VFL不支持乘除法
82 
83     NSLayoutConstraint *redHCos =[NSLayoutConstraint constraintWithItem:redVeiw attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:blueVeiw attribute:NSLayoutAttributeWidth multiplier:0.5 constant:0.0];
84 
85     [self.view addConstraint:redHCos];

 

 技术分享

 

注:不支持乘除法

 

五:牛逼框架:Masonry框架的使用======熟悉使用

 简介:

  • 目前最流行的Autolayout第三方框架
  • 用优雅的代码方式编写Autolayout
  • 省去了苹果官方恶心的Autolayout代码
  • 大大提高了开发效率

 

框架地址:

https://github.com/SnapKit/Masonry

 

导入

技术分享

技术分享 

 

 

 

 

 1     // 1.创建两个View, 并且添加到父控件
 2 
 3     UIView *blueVeiw = [[UIView alloc] init];
 4 
 5     blueVeiw.backgroundColor = [UIColor blueColor];
 6 
 7     [self.view addSubview:blueVeiw];
 8 
 9     self.blueVeiw = blueVeiw;
10 
11     
12 
13     UIView *redVeiw = [[UIView alloc] init];
14 
15     redVeiw.backgroundColor = [UIColor redColor];
16 
17     [self.view addSubview:redVeiw];
18 
19     
20 
21     // 2.禁止红色View的Autgoresizing
22 
23     blueVeiw.translatesAutoresizingMaskIntoConstraints = NO;
24 
25     redVeiw.translatesAutoresizingMaskIntoConstraints = NO;
26 
27     
28 
29     // 3.添加蓝色的约束
30 
31     [blueVeiw makeConstraints:^(MASConstraintMaker *make) {
32 
33         make.left.equalTo(self.view.left).offset(20);
34 
35         make.right.equalTo(self.view.right).offset(-20);
36 
37         make.top.equalTo(self.view.top).offset(20);
38 
39         make.height.equalTo(50);
40 
41     }];
42 
43     
44 
45     // 4.添加红色的约束
46 
47     [redVeiw makeConstraints:^(MASConstraintMaker *make) {
48 
49         make.top.equalTo(blueVeiw.bottom).offset(20);
50 
51         make.height.equalTo(blueVeiw.height);
52 
53         make.right.equalTo(blueVeiw.right);
54 
55         make.width.equalTo(blueVeiw.width).multipliedBy(0.5);
56 
57     }];
58 
59  

 

   注意: 在Storyboard中约束是可以重复添加的, 通过Masonry添加约束也是可以重复的, 要注意重复添加导致的错误和冲突

 

 使用makeConstraints, 每次都会添加新的约束, 也就是会导致重复添加

    [self.blueVeiw makeConstraints:^(MASConstraintMaker *make) {

        make.height.equalTo(100);

    }];

    要更新约束使用updateConstraints

    updateConstraints特点: 如果没有设置过, 就添加一个新的

    如果已经设置过了, 就更新以前设置的那一个

    [self.blueVeiw updateConstraints:^(MASConstraintMaker *make) {

        make.height.equalTo(100);

    }];

 

    

    

  清空约束 remakeConstraints

 1 [self.blueVeiw remakeConstraints:^(MASConstraintMaker *make) { 2 3 4 5 }];  

注:#define MAS_SHORTHAND 

 只要添加这个宏, 就可以去掉Masonry框架中对象访问对象属性前面的mas_属性, 和方法前的mas_前缀

 

 例如添加前的写法

  •  make.left.equalTo(self.view.mas_left).with.offset(20);

 例如添加后的写法

  •  make.left.equalTo(self.view.left).with.offset(20);

 

#define MAS_SHORTHAND_GLOBALS

  •  只要添加上这个宏, 给equalTo传递参数的时候, 就可以直接传递基本数据类型 ,系统会自动包装
  •  如果没有添加上面这个宏, 那么给equalTo传递参数的时候, 必须传递对象
  • 如果要传递基本数据类型必须使用mas_equalTo

 

 只需要在导入Masonry.h之前, 添加上一上两个宏, 就可以简化代码

#import "Masonry.h"

 

现在实际iOS项目开发中,80%以上都是使用AutorLayout结合SizeClass来实现的,除非部分特殊情况,所以基本上是要熟悉使用AutorLayout和SizeClass久可以,再就是关于框架的使用,除非苹果在后期害处更好的技术。

关于Masonery详细介绍请查看:iCocos博客园(iOS梦工厂)

 

iOS开发——适配篇&App适配简单概括

标签:

原文地址:http://www.cnblogs.com/iCocos/p/4655777.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!