• Swift


    在过去只有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横屏状态下宽度固定)

  • 相关阅读:
    .net百度编辑器的使用
    phpstudy远程连接mysql
    HDU-2389 Rain on your Parade
    HDU-2768 Cat vs. Dog
    HDU-1151 Air Raid
    HDU-1507 Uncle Tom's Inherited Land*
    HDU-1528/1962 Card Game Cheater
    HDU-3360 National Treasures
    HDU-2413 Against Mammoths
    HDU-1045 Fire Net
  • 原文地址:https://www.cnblogs.com/Free-Thinker/p/4841144.html
Copyright © 2020-2023  润新知