iPad的自适应布局

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了iPad的自适应布局相关的知识,希望对你有一定的参考价值。

我正在关注这篇文章,以便在ios Building Adaptive User Interfaces for iOS 8中构建自适应布局。

它可以在iPhone上正常工作。现在我不想在iPad上给出同样的效果。但对于iPad自适应布局是行不通的。 这是iPhone5中应用程序的屏幕截图(绿色框表示view1,黄色框表示view2) 1.Portrait模式

  1. 景观模式

问题:如何才能为iPad实现同样的效果? 扩展问题:如何在横向模式下设置iPad的初始方向?

答案

iPad的问题在于两个方向都表示为常规。

其中一个解决方案是将两个IBOutlet集合添加到您希望进行此方向更改的视图控制器中,例如:

@IBOutlet var landscapeConstraints: [NSLayoutConstraint]!
@IBOutlet var portraitConstraints: [NSLayoutConstraint]!

转到故事板,切换到您想要在iPad纵向方向上发生的自适应布局,并控制从每个ACTIVE约束拖动到portraitConstraints IBOutlet。将自适应布局更改为您想要为横向发生的布局,并再次控制从ACTIVE约束拖动到landscapeConstraints IBOutlet。

在视图控制器覆盖viewWillTransitionToSize方法:

    override func viewWillTransitionToSize(size: CGSize, withTransitionCoordinator coordinator: UIViewControllerTransitionCoordinator) {
        super.viewWillTransitionToSize(size, withTransitionCoordinator: coordinator)
        let transitionToLandscape = size.width > size.height 
        let constraintsToUninstall = transitionToLandscape ? ortraitConstraints : landscapeConstraints 
        let constraintsToInstall = transitionToLandscape ? landscapeConstraints : portraitConstraints

        view.layoutIfNeeded()
        coordinator.animateAlongsideTransition({
            _ in
            NSLayoutConstraint.deactivateConstraints(constraintsToUninstall) 
            NSLayoutConstraint.activateConstraints(constraintsToInstall) 
            self.view.layoutIfNeeded()
        }, completion: nil)
}

//扩展,约束示例:

转到任何任何大小的类,并看到约束中的一些将被gayed out,这意味着这里不活动但将在不同的大小类中激活,例如任何 - 常规。

//扩展

要设置初始方向,您可以覆盖viewWillAppear并安装/卸载正确的约束:

override func viewWillAppear(animated: Bool) {
        super.viewWillAppear(animated)

        let transitionToLandscape = view.frame.size.width > view.frame.size.height

        let constraintsToUninstall = transitionToLandscape ? portraitConstraints : landscapeConstraints
        let constraintsToInstall = transitionToLandscape ? landscapeConstraints : portraitConstraints

        view.layoutIfNeeded()
        NSLayoutConstraint.deactivateConstraints(constraintsToUninstall)
        NSLayoutConstraint.activateConstraints(constraintsToInstall)
    }

以上是关于iPad的自适应布局的主要内容,如果未能解决你的问题,请参考以下文章

片段设计:通过在单个 Activity 中显示/隐藏片段来适应多种屏幕布局?

利用@media screen实现网页布局的自适应

使用flexbox的自适应照片布局

AngularJS 中的自适应布局(移动/桌面) - 首选方式是啥(内部示例)

实现网页布局的自适应 利用@media screen

不同 iDevices 的自适应布局 UICollectionViewCell 大小