AutoLayout适配

http://www.raywenderlich.com/113768/adaptive-layout-tutorial-in-ios-9-getting-started

iOS布局和屏幕适配的一点总结

曾经,iOS开发是不需要考虑屏幕适配问题的,因为只有一种屏幕尺寸。而现在已经有了4种屏幕,4,5,6,6P,因此屏幕适配也成了iOS开发中必须考虑的问题。并且,这4种屏幕的宽高比全部都不一样,所以简单的按比例缩放并不能解决问题。我们最近做的一个APP也处理了屏幕适配,本文简单总结一下
根据屏幕类型判断
我不知道有没有更好的办法,我们的做法是根据设备类型,写一些if...else,或者switch语句
判断机型可以使用screen的height(不能使用width,因为4和5的width是一样的,都是320),也可以使用API里的宏,都差不多。我个人感觉,if...else似乎是不可避免的,虽然有auto layout,但是有一些大的布局改动,或者字体大小,不用判断似乎是无法解决的
比如说,为了达到最佳显示效果,我们在大的屏幕上使用CollectionView,而在4S上使用TableView,用自动布局应该是没有办法做到的。或者根据屏幕的大小,切换字体大小,好像也只能通过if...else来实现
根据屏幕类型适配,代码类似:
Objc代码 收藏代码
if(screenType == LosScreenType6P){
layout.minimumInteritemSpacing = 30;
}else if(screenType == LosScreenType5){
layout.minimumInteritemSpacing = 5;
}else{
layout.minimumInteritemSpacing = 15;
}

frame计算
我们也用了比较多的“硬计算”,比如对于UICollectionView里的每个cell的width,我们是这么处理的:
Objc代码 收藏代码
CGRect rect = [[UIScreen mainScreen] bounds];
screenWidth = rect.size.width;
cellWidth = (screenWidth - 30) / 3;
cellHeight = cellWidth * 0.8 + 50;

Objc代码 收藏代码
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
return CGSizeMake(cellWidth, cellHeight);
}

我们规定CollectionView里每行有3个单元格,整个section的左右间距是10,列间距是5,因此计算出 (width - 30) / 3就是每个单元格的宽度,单元格的高度也是经过计算写死的
我不太确定这种方式好不好,不过对于这个页面是好使的。类似这种基于屏幕尺寸做计算的方法,APP里在几个页面都有用到
Masonry
Masonry是我们实现屏幕适配的重要手段之一,本质上是界面约束的语法糖。基本上,我们的做法是:大的页面关系,用计算完成;每个小块里面的相对位置关系,用Masonry来做。在有些场景下,Masonry有非常大的优势。比如说:
1、设置某个View的宽高比
Objc代码 收藏代码
[thumbImageView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(@0);
make.left.equalTo(@0);
make.width.equalTo(self);
make.height.equalTo(thumbImageView.mas_width).multipliedBy(0.8);
}];

此View的宽度与父View同宽,高度是宽度的0.8
2、设置居中,设置相对边距
Objc代码 收藏代码
[authorName mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerY.equalTo(avatarImageView);
make.left.equalTo(avatarImageView.mas_right).offset(5);
make.right.equalTo(@-5);
}];

垂直方向与另一个View对齐,左边距离上一个元素的右边5,右边距离父View右边5
类似这种布局,用frame来写会复杂很多,如果再考虑屏幕适配,需要非常多代码。这类的需求,Masonry堪称神器。不过使用中发现,用Masonry布局的View,我们通常会init,或者initWithFrame:CGRectZero。这个View直到经过Masonry处理以后,它的origin和size才能确定,如果在此之前就用到它的origin和size,就会有问题
整体替换UIView
对于适配后变化不大的页面,把if...else写在UIView里,但是有个别页面,完全要根据设备显示不同的View。这种情况比较适合在Controller里做判断,然后load不同的View

时间: 2024-11-05 03:24:58

AutoLayout适配的相关文章

纯代码添加约束,autolayout 适配

IOS AutoLayout 代码约束—VFL 2014-12-22 22:19:43http://my.oschina.net/carson6931-Carson6931-点击数:2148 IOS 提供了两种添加约束的方法 第一种: +(instancetype)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(id)view2

IOS SizeClass 和 Autolayout 适配各种设备

现在苹果生态圈中的设备尺寸也已经变得种类繁多了,设备种类如下:iPad:iPad1,iPad2,newPad,iPad4,iPad air,iPad air2,iPad mini1,iPad mini2,iPad mini3,iPad pro;iPhone:iPhone3Gs,iPhone4,iPhone4S,iPhone5,iPhone5S,iPhone5C iPhone6,iPhone6 Plus,iPhone6S,ipad iPhone6S Plus;iWatch 屏幕大小: iPhone

屏幕适配Autoresizing / Autolayout / Mansory / 自定义Frame实现

1. 什么是适配: 适应.兼容不同版本不同尺寸的移动智能设备 iPhone尺寸:3.5.4.0.4.7.5.5inch iPad尺寸:7.9.9.7inch,横竖屏适配 2. 点与像素 非retaina屏:1个点 = 1个像素 retain屏:1个点 = 4个像素 3. 什么是Autolayout 1>  是一种“自动布局”技术,专门用来布局UI界面的 2> 自iOS 6开始引入,由于Xcode 4的不给力,当时并没有得到很大推广 3> 自iOS 7(Xcode 5)开始,Autolay

使用AutoLayout布局适配时,如何提前获得AutoLayout完成适配后的子控件的真实frame

当我们使用AutoLayout做适配时,可能会有这样的需求,就是在想在适配完成前就取得子控件的真实frame,来做一些操作.比如我们想把一个正方形的UIImageView剪成一个圆形,这时候就需要这么做 self.imageView.layer.cornerRadius = self.imageView.frame.size.width / 2; self.imageView.clipsToBounds = YES 之前我们只要把上面两句放在layoutSubviews: 方法中设置即可,因为在

适配----Autolayout

AutLayout 相对布局,根据参照视图的位置 来定义自己的位置.通过约束视图和视图之间的关系来分配屏幕上的位置,通常与VFL语言配合使用 VFL(visual format language)视觉格式化语言,通过字符串来约束字符和字符之间的关系 使用AutLayout必须把translatesAutoresizingMaskIntoConstraints禁用才可以使用frame  原点  自身的尺寸 来确定 自身位置.而autoLayout  根据参照视图的位置  来定义自己的位置 auto

autoLayout (相对布局)1()

// //  ViewController.m //  UI-AutoLayout // //  Created by Bruce on 15/9/6. //  Copyright (c) 2015年 Bruce. All rights reserved. // /*  frame  原点  自身的尺寸 来确定 自身位置    autoLayout  根据参照视图的位置  来定义自己的位置      autoLayout相对布局  约束视图和视图之间的关系 来分配 屏幕上的位置    //  

AutoLayout代码布局使用大全—一种全新的布局思想

相信ios8出来之后,不少的ios程序员为了屏幕的适配而烦恼.相信不少的人都知道有AutoLayout 这么个玩意可以做屏幕适配,事实上,AutoLayout不仅仅只是一个为了多屏幕适配的工具, 它真正的意义所在是给了程序员一种全新的布局思想. 本文主要依据真实项目实例从三个方向全方位讲解AutoLayout的使用大全. 一.AutoLayout布局原理和语法 二.约束冲突和AutoLayout动画处理 三.AutoLayout布局思想,约束链的控制. 本文讲解的内容和代码主要依赖于一个名为UI

初识 AutoLayout

一.使用"公式": 1.frame: 原点以及自身的位置来确定自身的位置 2.autoLayout: 根据参照视图的位置  来定义自己的位置 3.autoLayout: 相对布局  约束视图和视图之间的关系 来分配 屏幕上的位置 4.使用VFL(Visual Format Language 视觉格式化语言)通过添加字符,来约束视图和视图之间的关系 5.使用autoLayout 必须把 translatesAutoresizingMaskIntoConstraints禁用才可以使用相对布

iOS 在xib或者storyboard中添加AutoLayout后,在代码中修改AutoLayout约束条件

如果是viewControl则AutoLayout适配写在- (void)updateViewConstraints方法中修改约束: 如果是view则AutoLayout适配 则在- (void)updateConstraints方法中修改. 可以直接把视图的约束像拖控件一样拖成属性直接在下面的方法里更改即可 //遍历self.myView控件中的约束,找到NSLayoutAttributeHeight控件高度这个约束关系,然后修改 -(void)updateViewConstraints {