Question

通常，当我们从纵向转向横向时，整个视图会旋转并“拉伸”以调整更改后的屏幕尺寸，并更新子视图以使其匹配。

我想要实现的是不旋转整个视图，而是旋转每个单独的元素到位，例如保持它们在屏幕上的实际位置。

这可以在股票“相机”应用中看到，例如，“翻转相机”按钮始终位于屏幕上完全相同的位置，但是方向正确，而不是整个屏幕旋转。

如果我将手机从横向向左翻转到横向向右，我不希望整个屏幕翻转180度，但是每个元素都单独留在原处并旋转。

我想做这样的事情：

肖像

横向顺时针旋转（如果将Img1 / Text1逆时针旋转，则将是第一个，并且图像将在文本下方）。

除了禁用整个应用程序的旋转功能，然后根据方向手动旋转每个元素外，还有其他方法可以做到吗？我觉得像这样的手动旋转将需要大量的工作，尤其是对于文本，以及如何确定标签获得多少宽度等。

有任何智能解决方案吗？

Answer 1

使用嵌套UIStackView和Adaptive Layout来开发这种用户界面。

没有代码，因为我是完全storyboard自己开发的。

故事板文件：

https://drive.google.com/file/d/1ftsrfPkdtA0F0wuWEjkcCJYjI3DSPSRO/view?usp=sharing

肖像：

横向：

情节提要的来源：

<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="14109" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="vhg-TG-ZL3">
    <device id="retina4_7" orientation="landscape">
        <adaptation id="fullscreen"/>
    </device>
    <dependencies>
        <deployment identifier="iOS"/>
        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="14088"/>
        <capability name="Aspect ratio constraints" minToolsVersion="5.1"/>
        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
        <capability name="Stack View standard spacing" minToolsVersion="9.0"/>
        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
    </dependencies>
    <scenes>
        <!--View Controller2-->
        <scene sceneID="awc-c5-ATF">
            <objects>
                <viewController id="vhg-TG-ZL3" customClass="ViewController2" customModule="SW4Temp" customModuleProvider="target" sceneMemberID="viewController">
                    <view key="view" contentMode="scaleToFill" id="hTC-e3-Ut5">
                        <rect key="frame" x="0.0" y="0.0" width="667" height="375"/>
                        <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                        <subviews>
                            <stackView opaque="NO" contentMode="scaleToFill" axis="vertical" distribution="fillEqually" spacingType="standard" translatesAutoresizingMaskIntoConstraints="NO" id="Gtq-Mi-7ud">
                                <rect key="frame" x="16" y="16" width="635" height="108.5"/>
                                <subviews>
                                    <stackView opaque="NO" contentMode="scaleToFill" alignment="center" spacingType="standard" translatesAutoresizingMaskIntoConstraints="NO" id="k1S-mL-qYO">
                                        <rect key="frame" x="0.0" y="0.0" width="206.5" height="108.5"/>
                                        <subviews>
                                            <imageView userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="Qgz-HE-riz">
                                                <rect key="frame" x="63" y="0.0" width="80" height="80"/>
                                                <color key="backgroundColor" red="0.94117647059999998" green="0.58823529409999997" blue="0.29411764709999999" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                                <constraints>
                                                    <constraint firstAttribute="height" constant="80" id="daX-ya-3IJ"/>
                                                    <constraint firstAttribute="width" secondItem="Qgz-HE-riz" secondAttribute="height" multiplier="1:1" id="erh-Sa-Mm0"/>
                                                </constraints>
                                            </imageView>
                                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Label 1" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="pfd-Cb-Ywa">
                                                <rect key="frame" x="76.5" y="88" width="53.5" height="20.5"/>
                                                <fontDescription key="fontDescription" type="system" pointSize="17"/>
                                                <nil key="textColor"/>
                                                <nil key="highlightedColor"/>
                                            </label>
                                        </subviews>
                                        <variation key="heightClass=compact-widthClass=compact" axis="vertical"/>
                                        <variation key="heightClass=compact-widthClass=regular" axis="vertical"/>
                                    </stackView>
                                    <stackView opaque="NO" contentMode="scaleToFill" alignment="center" spacingType="standard" translatesAutoresizingMaskIntoConstraints="NO" id="s9a-dA-1Bb">
                                        <rect key="frame" x="214.5" y="0.0" width="206" height="108.5"/>
                                        <subviews>
                                            <imageView userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="Dau-Qz-ghH">
                                                <rect key="frame" x="63" y="0.0" width="80" height="80"/>
                                                <color key="backgroundColor" red="1" green="0.14913141730000001" blue="0.0" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                                <constraints>
                                                    <constraint firstAttribute="width" secondItem="Dau-Qz-ghH" secondAttribute="height" multiplier="1:1" id="7eH-AY-pzT"/>
                                                    <constraint firstAttribute="height" constant="80" id="vd7-nt-yn4"/>
                                                </constraints>
                                            </imageView>
                                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Label 2" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="4qd-bl-v4g">
                                                <rect key="frame" x="75" y="88" width="56" height="20.5"/>
                                                <fontDescription key="fontDescription" type="system" pointSize="17"/>
                                                <nil key="textColor"/>
                                                <nil key="highlightedColor"/>
                                            </label>
                                        </subviews>
                                        <variation key="heightClass=compact-widthClass=compact" axis="vertical"/>
                                        <variation key="heightClass=compact-widthClass=regular" axis="vertical"/>
                                    </stackView>
                                    <stackView opaque="NO" contentMode="scaleToFill" alignment="center" spacingType="standard" translatesAutoresizingMaskIntoConstraints="NO" id="i46-aO-FbE">
                                        <rect key="frame" x="428.5" y="0.0" width="206.5" height="108.5"/>
                                        <subviews>
                                            <imageView userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="5Us-ZC-UrI">
                                                <rect key="frame" x="63.5" y="0.0" width="80" height="80"/>
                                                <color key="backgroundColor" red="0.0" green="1" blue="0.0" alpha="0.84999999999999998" colorSpace="calibratedRGB"/>
                                                <constraints>
                                                    <constraint firstAttribute="height" constant="80" id="SBb-j3-6dT"/>
                                                    <constraint firstAttribute="width" secondItem="5Us-ZC-UrI" secondAttribute="height" multiplier="1:1" id="bMn-hy-xGO"/>
                                                </constraints>
                                            </imageView>
                                            <label opaque="NO" userInteractionEnabled="NO" contentMode="top" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Label 3" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="6s1-yZ-SE5">
                                                <rect key="frame" x="75" y="88" width="56.5" height="20.5"/>
                                                <fontDescription key="fontDescription" type="system" pointSize="17"/>
                                                <nil key="textColor"/>
                                                <nil key="highlightedColor"/>
                                            </label>
                                        </subviews>
                                        <variation key="heightClass=compact-widthClass=compact" axis="vertical"/>
                                        <variation key="heightClass=compact-widthClass=regular" axis="vertical"/>
                                    </stackView>
                                </subviews>
                                <variation key="heightClass=compact-widthClass=compact" axis="horizontal"/>
                                <variation key="heightClass=compact-widthClass=regular" axis="horizontal"/>
                            </stackView>
                        </subviews>
                        <color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
                        <constraints>
                            <constraint firstItem="cw1-6J-jUF" firstAttribute="trailing" secondItem="Gtq-Mi-7ud" secondAttribute="trailing" constant="16" id="21L-TP-1k5"/>
                            <constraint firstItem="Gtq-Mi-7ud" firstAttribute="leading" secondItem="cw1-6J-jUF" secondAttribute="leading" constant="16" id="BC4-ZA-yHF"/>
                            <constraint firstItem="Gtq-Mi-7ud" firstAttribute="top" secondItem="hTC-e3-Ut5" secondAttribute="top" id="T00-yG-pwX">
                                <variation key="heightClass=compact-widthClass=compact" constant="16"/>
                                <variation key="heightClass=compact-widthClass=regular" constant="16"/>
                            </constraint>
                            <constraint firstItem="cw1-6J-jUF" firstAttribute="bottom" secondItem="Gtq-Mi-7ud" secondAttribute="bottom" id="j8A-YW-4fG"/>
                        </constraints>
                        <viewLayoutGuide key="safeArea" id="cw1-6J-jUF"/>
                        <variation key="heightClass=compact-widthClass=compact">
                            <mask key="constraints">
                                <exclude reference="j8A-YW-4fG"/>
                            </mask>
                        </variation>
                        <variation key="heightClass=compact-widthClass=regular">
                            <mask key="constraints">
                                <exclude reference="j8A-YW-4fG"/>
                            </mask>
                        </variation>
                    </view>
                </viewController>
                <placeholder placeholderIdentifier="IBFirstResponder" id="Yq1-y6-rRF" userLabel="First Responder" sceneMemberID="firstResponder"/>
            </objects>
            <point key="canvasLocation" x="-1458.4000000000001" y="45.42728635682159"/>
        </scene>
    </scenes>
</document>

旋转设备时如何保持每个视图的位置？

1 个答案: