忍者刘米米

AdaptiveLayout设计用户界面

发表于  |    |   分类于   |  

使用Adaptive Layout

Device里选择Universal

AutoLayout基本布局和SizeClasses的个别调整

设置初始约束

为ImageView设置约束

约束1：水平居中

约束2：顶部置顶(含电池边距)

约束3：与下方view的垂直高度

按住imageview + ctrl 拖向下方的view，选择vertical spacing

点击image view，在右侧可以看见已经设定的约束,Edit vertical spacing to 20

约束4：与父视图的关系-高度40%

ctrl + 按住image view 拖向view,设定其与父视图的关系

为view设置约束

左 + 中 + 下

ImageSet为项目添加相关图片

双击后为图片组更名

更新frame让约束生效

橘红色的是可以调整的，红色的是有问题的

预览功能查看不同设备屏幕

为label1设定约束

水平居中

顶部置顶

为label2设定约束

水平居中

下部间隔

更新frame让约束生效

Size Classes的使用

两种尺寸组合表达所有设备: Regular and Compact

构建iPhone landscape size Class

点击下方的”W any H any”

重设image view约束(仅在该sizeClass)

卸载所有约束

点击image view，在右侧删除所有约束 - （只是在这个size class里uninstalling ）

将所有约束删除

新约束1:垂直居中

新约束2:左间隔10

新约束3:与父视图的宽度比例为40%

ctrl拖动到父视图view，设置宽度比例

重设TextContainer约束(仅在该sizeClass)

卸载约束

设定与父视图的顶部间距和宽度比例

更新Frame

在故事板中设置自适应字体

回到Any界面(w+h)

设置某个size class类别下的字体

点击字体旁的 + 按钮

设置字体能自动缩小50%

设置label与父视图的约束

避免标签的尺寸超出父视图

设置适配不同设备的图片

点击图片组，分别选择右侧的 iPhone , iPad。拖入图片，将针对不同设备采用不同的图片

表格单元格的自我调整（代码略）

效果图

单元格的设定

style为custom,selection为none

imageView约束设定(铺满整个cell)

Label约束设定

Press ctrl to drag to contentView and press shift to select all

场景布局与实际布局不符合，就会出现橘红色的标注

Label字体/背景色/透明度设定

设置单元格高度解决冲突

点击单元格，将高度拖至120

更新frame

设置table cell之间的分割符

在Controller中必须添加的两行代码

ViewController

override func viewDidLoad() {
  super.viewDidLoad()

  tableView.rowHeight = UITableViewAutomaticDimension
  tableView.estimatedRowHeight = 100
  }

总结

  1. 必须要由tableView来决定表格的宽度
  2. Autolayout必须约束高度，并且不能有冲突。比如该例子中的label。需要手动调整高度
  3. 两行代码

安装集合视图（代码略）

效果图

安装ContainerView并添加约束

ContainerView会自动创建ViewController

本案例不需要，可以删除

Container内嵌集合视图 (代码略)

Press ctrl to drag to collectionView ,选择 Embed

重新设定Label约束

删除顶部约束

与Container的顶部垂直距离为0

在iPhone横屏中去除集合视图

效果图

设定iPhone横屏size class

在该size class中卸载container

cmd + Delete = 卸载

卸载container view的约束(右侧删除)

重设label约束

显示Label所有约束(含卸载)

点击All

重设当前sizeClass约束

点击 + 号，选择size class ,然后install

iPhone竖屏上去除集合视图

DetailViewController

 override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view, typically from a nib.
    self.configureView()
    provideDataToChildViewControllers()

    navigationItem.leftItemsSupplementBackButton = true
    navigationItem.hidesBackButton = false

    configureTraitOverrideForSize(view.bounds.size)
}

override func viewWillTransitionToSize(size: CGSize, withTransitionCoordinator coordinator: UIViewControllerTransitionCoordinator) {
    configureTraitOverrideForSize(size)
}

private func configureTraitOverrideForSize(size:CGSize) {
    var traitOverride: UITraitCollection?

    if size.height < 1000 {
        traitOverride = UITraitCollection(verticalSizeClass: .Compact)
    }

    for vc in childViewControllers {
        setOverrideTraitCollection(traitOverride, forChildViewController: vc)
    }
}

为SizeClass配置相关图片

效果图

如图，集合视图和顶部所使用的图片不一样

在ImageAsset中构建size class

  1. 选择右侧width – Any&Compact
  2. Universal打勾，对应拖入图片。 * 代表 any, - 代表compact , + 代表regular
  3. 右侧取消iPhone,iPad

相关代码

override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view.
    configureView()

    let traitOverride = UITraitCollection(horizontalSizeClass: .Compact)

    for vc in childViewControllers {
        setOverrideTraitCollection(traitOverride, forChildViewController: vc)
    }
}

隐藏导航栏

效果图

如图，点击屏幕将导航栏隐藏

UIStoryboard中设置NavigationBar

选中NavigationController,在右侧hide bar打勾:“on tap” + “when vertically compact”

定制横竖屏的文字

效果图

横屏文字较小，竖屏文字较大

相关代码

private func prepareNavigationBarAppearance() {
    let font = UIFont(name: "HelveticaNeue-Light", size: 30)!
    let regularVertical = UITraitCollection(verticalSizeClass: .Regular)
    UINavigationBar.appearanceForTraitCollection(regularVertical).titleTextAttributes = [NSFontAttributeName: font]
    let compactVertical = UITraitCollection(verticalSizeClass: .Compact)
    UINavigationBar.appearanceForTraitCollection(compactVertical).titleTextAttributes = [NSFontAttributeName: font.fontWithSize(20)]
}

设定某UI元素height或width的约束

ctrl + drag 在该元素内部拖动