iOS基于代码按比例约束方法进行屏幕适配

还记得刚刚开始学习iOS的开发的时候,简简单单的小控件练习,我总是习惯性的写死Frame,后来知道了屏幕适配,添加约束这样才能使UI更好的展示在屏幕上,Objective-C中的Masonry,Swift中的SnapKit,以及Xib和Storyboard的AutoLayout加上SizeClasses的组合,都极大程度上的帮助我们做屏幕的适配约束。

推荐一下很精彩的博客 --- 很详解并表达自己观点非常棒的博客。

  • Masonry介绍与使用实践(快速上手Autolayout)

  • Snapkit的启示录

今天突然间就有了个想法,那么我是否可以基于一种屏幕的尺寸,通过写死Frame然后通过某些捷径的方法进行屏幕的比例约束适配呢?

  • 1 首先这种方法不适合ipad开发,只适用于手机(4 5 6 系列)
  • 2 这种方法并不推荐,因为现在有很多流行合理的适配方法,但是嘛,做开发,有时候可以自己嗨一下嘛,做出来也是好样的
  • 3 只是非常简单的按比例兼容。只要每张图都有@1x,@2x,@3x的话,该方法完全不会让图片模糊或者变形,能还原出设计师的最初稿
  • 4 由于iphone不同系列屏幕宽高比都是相差无几的,所以按照比例约束适配的方法绝对是可行的

首先,我们可以以iphone5(320 * 568)为最初设计机型,然后以iphone5系列为模板,进行比例的放大或者缩小。

//获取device的屏幕宽高
#define MainScreenWidth  [[UIScreen mainScreen]bounds].size.width
#define MainScreenHeight  [[UIScreen mainScreen]bounds].size.height

    //以iphone5,5s,5c为基本机型,其他型号机器按比例系数做乘法.
    AppDelegate  *appdelegate = [UIApplication sharedApplication].delegate;
    appdelegate.autoSizeScaleX = MainScreenWidth/320.f;
    appdelegate.autoSizeScaleY = MainScreenWidth/568.f;

我们获得了屏幕的宽高的比例系数之后,在创建我们一些控件的时候,就可以进行按比例适配了

AppDelegate *apd = [UIApplication sharedApplication].delegate;
    UIButton *loginBtn = [[UIButton alloc]initWithFrame:CGRectMake(10*apd.autoSizeScaleX, 20*apd.autoSizeScaleY, (320-10*2)*apd.autoSizeScaleX, 44*apd.autoSizeScaleY)];
    [loginBtn setTitle:@"login" forState:UIControlStateNormal];
    [loginBtn setTitleColor:[UIColor blueColor] forState:UIControlStateNormal];
    [loginBtn.titleLabel setFont:[UIFont systemFontOfSize:14]];
    [loginBtn setBackgroundColor:[UIColor cyanColor]];
    [self.view addSubview:loginBtn];
  • 这样就有个问题,那么每个View上的控件,我们都需要重新设置下frame,这样的代码量以及维护都特别艰难,我们可以考虑封装下,来进行整个项目的适配~~

首先我们创建一个工具类来进行比例约束适配方法的封装

iOS基于代码按比例约束方法进行屏幕适配_第1张图片
屏幕快照 2016-06-29 下午5.40.50.png
iOS基于代码按比例约束方法进行屏幕适配_第2张图片
屏幕快照 2016-06-29 下午5.41.03.png
iOS基于代码按比例约束方法进行屏幕适配_第3张图片
屏幕快照 2016-06-29 下午5.41.16.png

图上很清楚的说明,首先工具类AutoFillScreenutils调用类方将需要进行按比例约束的view当做参数传递进来,通过遍历的方式来重新设置一遍Frame,如果你的view层级很高的话,可以多进行几遍遍历。

  • (void)autoLayoutFillScreen:(UIView *)view

  • (CGRect)updateViewsFrame:(CGFloat) x withY:(CGFloat) y AndWidth:(CGFloat) width AndHeight:(CGFloat) height

然后在ViewController中,将View当做参数传递过去即可。

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor lightGrayColor];
    [self setUpViews];
    [AtuoFillScreenUtils autoLayoutFillScreen:self.view];

    // Do any additional setup after loading the view, typically from a nib.
}

我们通过测试就可以发现,原来在iphone5系列上布局正常的图,到iphone6及iphone6+上就变形了,通过我们的按比例约束,又重新适配了,不得不说这样还是蛮简单的。

iOS基于代码按比例约束方法进行屏幕适配_第4张图片
Paste_Image.png
iOS基于代码按比例约束方法进行屏幕适配_第5张图片
Paste_Image.png

Demo已经上传到Github,有兴趣的可以看一下,很简单一个小东西,也是不断学习过程中的一个小经验,不喜勿喷,谢谢啦~

  • Github

你可能感兴趣的:(iOS基于代码按比例约束方法进行屏幕适配)