zoukankan      html  css  js  c++  java
  • 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横屏状态下宽度固定)

  • 相关阅读:
    LeetCode 515. 在每个树行中找最大值(Find Largest Value in Each Tree Row)
    LeetCode 114. 二叉树展开为链表(Flatten Binary Tree to Linked List)
    LeetCode 199. 二叉树的右视图(Binary Tree Right Side View)
    LeetCode 1022. 从根到叶的二进制数之和(Sum of Root To Leaf Binary Numbers)
    LeetCode 897. 递增顺序查找树(Increasing Order Search Tree)
    LeetCode 617. 合并二叉树(Merge Two Binary Trees)
    LeetCode 206. 反转链表(Reverse Linked List) 16
    LeetCode 104. 二叉树的最大深度(Maximum Depth of Binary Tree)
    LeetCode 110. 平衡二叉树(Balanced Binary Tree) 15
    LeetCode 108. 将有序数组转换为二叉搜索树(Convert Sorted Array to Binary Search Tree) 14
  • 原文地址:https://www.cnblogs.com/Free-Thinker/p/4841144.html
Copyright © 2011-2022 走看看