提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其它

当前栏目

Swift - 使用Auto Layout和Size Classes实现页面自适应弹性布局

实现 页面 布局 swift 适应 size Auto 弹性
2023-09-11 14:17:59 时间

在过去只有iphone4的时候，可以在代码里将一个可视单元的位置写死，这样是没问题的，但随着iPhone5，6的发布，屏幕尺寸有了越来越多种可能。这就要求App的UI控件具有在不同屏幕尺寸的设备上具有一定动态的可调性，实现较好的UI展示效果。

    结合使用Auto Layout和Size Classes可对UI可视单元的父子关系，兄弟视图关系进行全方位的调整，而且调整精度更高。不仅能确定一个View的位置尺寸的变化依据是什么还能对 这些依据加以不同的优先级，即先满足什么条件，再满足什么条件，对于重要的位置尺寸给予优先保证，这样整个APP就具有极强的动态可调性，可以满足不同设 备，不同应用场景下的需求。

一，Auto Layout（自动布局）
自动布局是iOS 6发布后引入的一个全新的布局特性，其目的是弥补以往autoresizing的布局方面的不足之处，使未来面对更多尺寸适配时，界面布局可以跟好的适配。
它通过内定的Constraint（约束）和各项条件来计算出合理的布局，Constraint的设定非常灵活，实现一种布局的方法可以通过多个Constraint套来完成。而不需要设定具体控件坐标x多少，y多少，Frame、Center和autoresing等。

1，在StoryBoard中使用自动布局
我们以如下的界面来演示（可以看到由于自动布局，不管在横屏还是竖屏都很好的实行屏幕自适应）
 
（1）先拖入一个Text Filed并设置约束（距上方距离为20，距左右距离为5）

 
（2）拖入一个Button并设置约束（距下方距离为5，水平居中）

 
（3）拖入一个Text View并设置约束（距上方即TextField距离为20，距下方即Button距离为20，距左右两侧为5）

 
（4）在左侧的列表栏目可以看到对应生成的约束，同时如果约束设置不正确会显示红色圆圈
 
 
（5）而选择具体的View组件，在右边的Size Inspector控制面板中可以进行约束的修改和删除 


2，使用纯代码来实现自动布局
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
import UIKit
 
class ViewController: UIViewController {
 
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
         
        //创建组件
        var textField = UITextField(frame: CGRectZero) //这里不再需要刻意制定x,y坐标
        textField.borderStyle = UITextBorderStyle.RoundedRect
        self.view.addSubview(textField)
         
        var button = UIButton.buttonWithType(UIButtonType.System) as UIButton;
        button.setTitle("按钮", forState:UIControlState.Normal)
        button.backgroundColor = UIColor(red: 55/255, green: 186/255, blue: 89/255, alpha: 0.5)
        self.view.addSubview(button)
         
        var textView = UITextView(frame: CGRectZero)
        textView.text="hangge.com"
        textView.backgroundColor = UIColor(red: 55/255, green: 186/255, blue: 89/255, alpha: 0.5)
        self.view.addSubview(textView)
         
        //使用Auto Layout的方式来布局
        textField.setTranslatesAutoresizingMaskIntoConstraints(false)
        button.setTranslatesAutoresizingMaskIntoConstraints(false)
        textView.setTranslatesAutoresizingMaskIntoConstraints(false)
         
        //创建一个控件数组
        var views:NSMutableDictionary = NSMutableDictionary()
        views.setValue(textField, forKey: "textField")
        views.setValue(button, forKey: "button")
        views.setValue(textView, forKey: "textView")
         
        //创建一个水平居中约束（按钮）
        var constraint:NSLayoutConstraint = NSLayoutConstraint(item: button, attribute: .CenterX,
            relatedBy: .Equal, toItem: self.view, attribute: .CenterX, multiplier: 1.0, constant: 0.0)
        self.view.addConstraint(constraint)
        //创建水平方向约束
        self.view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat(
            "H:|-5-[textField]-5-|", options: nil, metrics: nil, views: views))
        self.view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat(
            "H:|-5-[textView]-5-|", options: nil, metrics: nil, views: views))
        //创建垂直方向约束
        self.view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat(
            "V:|-20-[textField]-20-[textView]-20-[button]-20-|", options:nil,
            metrics: nil, views: views))
    }
 
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}


二，Size Classes（适配各类型的屏幕）

1，说明
（1）iOS8中新增了Size Classes特性，是对老式UI思路的全新抽象，把所有设备（iPhone4、5、6、iPad、Apple Watch）屏幕抽象成屏幕Size的变化，把屏幕的宽和高分成三种情况：紧凑（Compact）、任意（Any）和正常（Regular），这样宽和高 3*3共9种布局。
（2）每种Size都可以设置特定的一套布局，如果不特殊指定，默认是在（宽任意，高任意）
（3）通过Size Classes和Auto Layout的结合，可以很完美适配各种不同的分辨率。先用Size Classes将屏幕分类后，再用Auto Layout执行布局。

2，Size Classes主要的几种设备类型
Compact Width | Compact Height：横屏iPhone
Compact Width | Regular Height：竖屏iPhone
Regular Width | Regular Height：任意方向的iPad
Regular Width | Regular Height：未知设备
Any Width | Any Height：任意宽高

3，使用样例
比如我要把一个按钮放在页面的最下方并居中。但要求在竖屏下按钮宽度自适应（距两边框5像素），而在横屏下按钮使用固定宽度（150像素）

效果图如下：

 
（1）首先我们在默认类型下设置按钮水平居中，以及距下边框的距离
 
 
（2）给按钮添加两个新约束（对应iPhone的横屏和竖屏）

 
（3）选择wC hR布局，并设置约束（竖屏宽度自适应，距两侧5像素）
  
 
（4）选择wC hC布局，并设置约束（iPhone横屏状态下宽度固定）

相关文章