一个 xib 有不同的纵向和横向布局？答案

【问题标题】：Different portrait and landscape layouts with one xib?一个 xib 有不同的纵向和横向布局？
【发布时间】：2019-04-03 03:07:36
【问题描述】：

我正在尝试实现具有纵向和横向方向的不同设计布局。横向将具有纵向没有的视图。如何将这两个方向放在一个 XIB 文件中，并在方向更改时相应地加载它们？

我尝试过this answer here，但横向视图看起来不正确。当从横向切换回纵向时，视图每次都会从屏幕上移开。

【问题讨论】：

标签： autolayout xib ios-autolayout

【解决方案1】：

您可以使用Vary for Traits 来做到这一点 - 如果您不熟悉它，那里有很多教程。这可能是一个很好的起点：https://www.raywenderlich.com/492-adaptive-layout-tutorial-in-ios-11-getting-started

基本上，您将从标准手机纵向开始：wC hR

在紫色视图上设置顶部、前导、尾随和高度约束。
为红色视图设置零的顶部、前导、宽度和高度约束。
为蓝色视图设置零的顶部、前导、宽度和高度约束。

更改为横向：wC hC

添加约束以获得横向布局，并删除不再需要的任何纵向布局约束。

这是一个带有约束设置的 xib 文件，以获得您想要的结果。新建一个xib，作为源代码打开，替换整个源代码，然后作为Interface Builder XIB Document重新打开：

<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="14109" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
    <device id="retina4_7" orientation="portrait">
        <adaptation id="fullscreen"/>
    </device>
    <dependencies>
        <deployment identifier="iOS"/>
        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="14088"/>
        <capability name="Constraints with non-1.0 multipliers" minToolsVersion="5.1"/>
        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
    </dependencies>
    <objects>
        <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner" customClass="TraitTestView" customModule="SW4Temp" customModuleProvider="target"/>
        <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
        <view contentMode="scaleToFill" id="iN0-l3-epB">
            <rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
            <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
            <subviews>
                <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Purple" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="x2I-Wo-fEl">
                    <rect key="frame" x="0.0" y="0.0" width="375" height="333.5"/>
                    <color key="backgroundColor" red="0.45490196078431372" green="0.52156862745098043" blue="0.73725490196078436" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                    <fontDescription key="fontDescription" type="boldSystem" pointSize="26"/>
                    <nil key="textColor"/>
                    <nil key="highlightedColor"/>
                </label>
                <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Red" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="w2j-KG-F8a">
                    <rect key="frame" x="375" y="0.0" width="0.0" height="0.0"/>
                    <color key="backgroundColor" red="0.97254901960784312" green="0.40392156862745099" blue="0.38039215686274508" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                    <constraints>
                        <constraint firstAttribute="height" id="AXD-eQ-1h9"/>
                        <constraint firstAttribute="width" id="tez-lx-gm1"/>
                    </constraints>
                    <fontDescription key="fontDescription" type="boldSystem" pointSize="26"/>
                    <nil key="textColor"/>
                    <nil key="highlightedColor"/>
                    <variation key="heightClass=compact">
                        <mask key="constraints">
                            <exclude reference="AXD-eQ-1h9"/>
                            <exclude reference="tez-lx-gm1"/>
                        </mask>
                    </variation>
                </label>
                <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Blue" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="sXo-w2-aKd">
                    <rect key="frame" x="0.0" y="667" width="0.0" height="0.0"/>
                    <color key="backgroundColor" red="0.17254901960784313" green="0.59607843137254901" blue="0.98039215686274506" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                    <constraints>
                        <constraint firstAttribute="width" id="jIU-Ld-Txe"/>
                        <constraint firstAttribute="height" id="wOE-gF-bPQ"/>
                    </constraints>
                    <fontDescription key="fontDescription" type="boldSystem" pointSize="26"/>
                    <nil key="textColor"/>
                    <nil key="highlightedColor"/>
                    <variation key="heightClass=compact">
                        <mask key="constraints">
                            <exclude reference="jIU-Ld-Txe"/>
                            <exclude reference="wOE-gF-bPQ"/>
                        </mask>
                    </variation>
                </label>
            </subviews>
            <color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
            <constraints>
                <constraint firstAttribute="bottom" secondItem="sXo-w2-aKd" secondAttribute="bottom" id="1T3-Jy-K0Z"/>
                <constraint firstItem="x2I-Wo-fEl" firstAttribute="height" secondItem="iN0-l3-epB" secondAttribute="height" multiplier="0.5" id="8cP-nw-Azc"/>
                <constraint firstItem="w2j-KG-F8a" firstAttribute="height" secondItem="x2I-Wo-fEl" secondAttribute="height" id="96S-1z-Dye"/>
                <constraint firstItem="sXo-w2-aKd" firstAttribute="leading" secondItem="iN0-l3-epB" secondAttribute="leading" id="Bd2-O2-2Sf"/>
                <constraint firstAttribute="trailing" secondItem="x2I-Wo-fEl" secondAttribute="trailing" id="Btf-sR-nFF"/>
                <constraint firstItem="w2j-KG-F8a" firstAttribute="top" secondItem="iN0-l3-epB" secondAttribute="top" id="Feh-7O-9tt"/>
                <constraint firstAttribute="trailing" secondItem="w2j-KG-F8a" secondAttribute="trailing" id="Gp9-jJ-YcU"/>
                <constraint firstItem="x2I-Wo-fEl" firstAttribute="leading" secondItem="iN0-l3-epB" secondAttribute="leading" id="XM4-sb-5fz"/>
                <constraint firstAttribute="trailing" secondItem="sXo-w2-aKd" secondAttribute="trailing" constant="375" id="Ztc-MA-Jq0">
                    <variation key="heightClass=compact" constant="0.0"/>
                </constraint>
                <constraint firstItem="w2j-KG-F8a" firstAttribute="width" secondItem="x2I-Wo-fEl" secondAttribute="width" id="cYb-Dp-5J7"/>
                <constraint firstItem="x2I-Wo-fEl" firstAttribute="height" secondItem="iN0-l3-epB" secondAttribute="height" multiplier="2:3" id="coI-el-yOt"/>
                <constraint firstItem="sXo-w2-aKd" firstAttribute="top" secondItem="x2I-Wo-fEl" secondAttribute="bottom" constant="167" id="dbt-2z-a3G">
                    <variation key="heightClass=compact" constant="0.0"/>
                </constraint>
                <constraint firstItem="w2j-KG-F8a" firstAttribute="leading" secondItem="x2I-Wo-fEl" secondAttribute="trailing" constant="563.5" id="eia-Ec-aAO">
                    <variation key="heightClass=compact" constant="0.0"/>
                </constraint>
                <constraint firstItem="x2I-Wo-fEl" firstAttribute="top" secondItem="iN0-l3-epB" secondAttribute="top" id="otL-1i-mP0"/>
            </constraints>
            <viewLayoutGuide key="safeArea" id="vUN-kp-3ea"/>
            <variation key="default">
                <mask key="constraints">
                    <exclude reference="Ztc-MA-Jq0"/>
                    <exclude reference="coI-el-yOt"/>
                    <exclude reference="dbt-2z-a3G"/>
                    <exclude reference="96S-1z-Dye"/>
                    <exclude reference="cYb-Dp-5J7"/>
                    <exclude reference="eia-Ec-aAO"/>
                </mask>
            </variation>
            <variation key="heightClass=compact">
                <mask key="constraints">
                    <exclude reference="Btf-sR-nFF"/>
                    <include reference="Ztc-MA-Jq0"/>
                    <exclude reference="8cP-nw-Azc"/>
                    <include reference="coI-el-yOt"/>
                    <include reference="dbt-2z-a3G"/>
                    <include reference="96S-1z-Dye"/>
                    <include reference="cYb-Dp-5J7"/>
                    <include reference="eia-Ec-aAO"/>
                </mask>
            </variation>
        </view>
    </objects>
</document>

被视为 iPhone 8 纵向：

作为 iPhone 8 横向查看：

编辑：

如果您需要为 iPhone 和 iPad 提供相同的布局设计，您可以将其添加到您的视图控制器类中。不一定推荐，但它应该可以解决问题：

override public var traitCollection: UITraitCollection {

    var desiredTraits = [UITraitCollection]()

    if view.bounds.width < view.bounds.height {
        desiredTraits = [UITraitCollection(horizontalSizeClass: .compact), UITraitCollection(verticalSizeClass: .regular)]
    } else {
        desiredTraits = [UITraitCollection(horizontalSizeClass: .compact), UITraitCollection(verticalSizeClass: .compact)]
    }

    return UITraitCollection(traitsFrom: desiredTraits)

}

编辑 2：

如果您需要使用大小为 iPad 尺寸的 xib 来处理布局，您可以这样做。

在 IB 中打开 xib 并为“查看为：”选择其中一部手机 - 我选择 iPhone 8 - 和纵向：

您会看到它显示了wC hR 特征，并且该视图看起来像 iPhone 8 的大小和形状。

现在，在 Attributes Inspector 窗格中，将 Size: Inferred 更改为 Size: Freeform：

接下来，选择 Size Inspector 窗格，并将视图的大小更改为 768 x 1024：

您现在有一个纵向“iPad”xib 来设计和设置您的wC hR 约束。

准备就绪后，为“查看为：”选择横向方向

您会看到 Traits 更改为 wC hC -- 但您不会在设计视图中看到任何更改。因此，返回到 Size Inspector 窗格并将大小更改为 1024 x 768：

您的设计视图现在看起来像横向的 iPad，您可以为 Traits 选择 Vary 来配置您想要的 wC hC 布局。

在设计时，您需要在每次更改方向时手动更改尺寸，但您会看到特征的变化。

现在，IB 中的肖像：

还有，IB 中的风景：

【讨论】：

我怎样才能在 iPad 上实现这一点？纵向和横向都是“wR hR”
这给了我 ipad 的白屏。有没有办法只用 ipad 实现这两种不同的布局？
我不知道为什么你会得到一个白屏...我发布了一个示例项目到github.com/DonMag/IPadTraits
我下载了你的例子，它似乎工作。但是当转到 xib 并以 iPad Pro 9.7 横向查看时，它只显示紫色视图
是的……你不能只用 IB 做你想做的事。您必须为wC hR 和wC hC 设置布局约束，然后在运行时使用代码。