簡體   English   中英

如何同時使用水平和垂直滾動視圖(快速)

[英]How to work with both a horizontal & vertical scrollview (swift)

我正在使用兩個滾動視圖的屏幕(如下所示)上工作。 垂直滾動視圖是基礎,並且在其中包含所有內容的另一個視圖。 在該視圖中,還有一個水平移動的滾動視圖。

因此可供參考:滾動視圖(垂直)->視圖->滾動視圖(水平)

需要指出的另一件事是第一個滾動視圖中的固有文本視圖,該文本視圖從后端提取數據。

我面臨的問題是:垂直滾動視圖允許您上下移動,但無論設置了什么高度,它都會停止。 因此,如果我將高度設置為1000,它將達到該點,但是不會再進一步​​了。 如果描述長於該描述,則會被截斷,因此

1)我如何調整滾動視圖(垂直),以便他滾動到所需的距離才能顯示整個說明文字? 基本上,我如何基於textview的高度調整scrollview的高度。

Im面臨的第二個問題是垂直滾動視圖有效,而水平滾動視圖無效。 我在具有相同約束條件的許多其他應用程序中使用了此水平滾動視圖(如下所示),但從未在垂直滾動視圖中使用它。 現在它在那里了,而其他都不能用了,反之亦然。 所以,

2) 如何正確約束兩個滾動視圖,以使其一致工作? 垂直滾動視圖應上下滾動,每當我在水平滾動視圖上向左或向右滑動時,它也應正確移動。

屏幕設計

屏幕限制和布局

屏幕限制和布局繼續

我將使用CollectionView或tableView,然后將CollectionView放入要水平滾動的單元格中。

您可以通過其他方式調整包含textview的單元格的大小

這是常見的有嵌入在一個垂直滾動視圖中的水平滾動視圖 - 你只需要得到正確設置限制。

而且,使用適當的約束,可以輕松地使滾動視圖的內容控制可滾動區域-無需計算並顯式設置.contentSize

這里是布局。 主視圖背景為粉紅色; 垂直滾動視圖為黃色; 水平滾動視圖為綠色:

在此處輸入圖片說明

垂直滾動視圖被約束為0上的所有4個邊, 並且它受限均等寬度和高度到主視圖。

水平滾動視圖的Leading,Top和Trailing約束為0 (無Bottom約束),Height約束為390並且對主視圖的Equal Width約束。

圖像視圖以W / H為40約束前導10

標題標簽僅限於圖像視圖。

“描述標簽”(行數= 0 )受到限制導致進入圖像視圖,“ 寬度”等於垂直滾動視圖-20 (左側為10,右側為10)。 並且在底部限制為0 當您向標簽中添加文本並且其高度增加時,這將自動增加垂直滾動視圖的可滾動區域( .contentSize )的高度。

滾動前后的結果如下:

在此處輸入圖片說明

而且,為清楚起見,使用“調試視圖層次結構”時的外觀:

在此處輸入圖片說明

為了幫助您正確設置它,下面是控制器類(無需調整大小代碼-它所做的就是在標簽上添加文本):

class EmbeddedScrollViewController: UIViewController {

    @IBOutlet var descriptionLabel: UILabel!

    override func viewDidLoad() {
        super.viewDidLoad()

        // 20 lines of text
        descriptionLabel.text = (1...20).map({ "Line \($0)" }).joined(separator: "\n")

    }
}

和情節提要源:

<?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="1GW-r8-dyB">
    <device id="retina4_7" orientation="portrait">
        <adaptation id="fullscreen"/>
    </device>
    <dependencies>
        <deployment identifier="iOS"/>
        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="14088"/>
        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
    </dependencies>
    <scenes>
        <!--Embedded Scroll View Controller-->
        <scene sceneID="EkT-c0-tFZ">
            <objects>
                <viewController id="1GW-r8-dyB" customClass="EmbeddedScrollViewController" customModule="SW4Temp" customModuleProvider="target" sceneMemberID="viewController">
                    <view key="view" contentMode="scaleToFill" id="Mgr-6N-2U6">
                        <rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
                        <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                        <subviews>
                            <scrollView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="K2x-mz-KcZ" userLabel="V-Scroll">
                                <rect key="frame" x="0.0" y="20" width="375" height="647"/>
                                <subviews>
                                    <scrollView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="Dcg-9m-tlK" userLabel="H-Scroll">
                                        <rect key="frame" x="0.0" y="0.0" width="375" height="390"/>
                                        <subviews>
                                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Upper Left" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="unz-8T-JcR">
                                                <rect key="frame" x="20" y="20" width="82" height="21"/>
                                                <color key="backgroundColor" red="0.45138680930000002" green="0.99309605359999997" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                                <fontDescription key="fontDescription" type="system" pointSize="17"/>
                                                <nil key="textColor"/>
                                                <nil key="highlightedColor"/>
                                            </label>
                                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Lower Right" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="Cdr-yN-9YB">
                                                <rect key="frame" x="500" y="330" width="90.5" height="21"/>
                                                <color key="backgroundColor" red="0.45138680930000002" green="0.99309605359999997" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                                <fontDescription key="fontDescription" type="system" pointSize="17"/>
                                                <nil key="textColor"/>
                                                <nil key="highlightedColor"/>
                                            </label>
                                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" textAlignment="natural" lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="qsY-aV-AFa" userLabel="InfoLabel">
                                                <rect key="frame" x="20" y="281" width="320" height="41"/>
                                                <color key="backgroundColor" red="0.45138680930000002" green="0.99309605359999997" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                                <constraints>
                                                    <constraint firstAttribute="width" constant="320" id="g2L-p3-Nt5"/>
                                                </constraints>
                                                <string key="text">To demonstrate Horizontal scrolling,
There is Another Label to the Right ---&gt;</string>
                                                <fontDescription key="fontDescription" type="system" pointSize="17"/>
                                                <nil key="textColor"/>
                                                <nil key="highlightedColor"/>
                                            </label>
                                        </subviews>
                                        <color key="backgroundColor" red="0.45009386540000001" green="0.98132258650000004" blue="0.4743030667" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                        <constraints>
                                            <constraint firstAttribute="height" constant="390" id="2ln-JF-25C"/>
                                            <constraint firstAttribute="bottom" secondItem="Cdr-yN-9YB" secondAttribute="bottom" constant="20" id="C6t-Uu-DXN"/>
                                            <constraint firstItem="Cdr-yN-9YB" firstAttribute="top" secondItem="qsY-aV-AFa" secondAttribute="bottom" constant="8" id="GfU-jw-KzP"/>
                                            <constraint firstItem="Cdr-yN-9YB" firstAttribute="leading" secondItem="qsY-aV-AFa" secondAttribute="trailing" constant="160" id="Q4e-Fl-IEg"/>
                                            <constraint firstAttribute="trailing" secondItem="Cdr-yN-9YB" secondAttribute="trailing" constant="20" id="X5C-nj-47A"/>
                                            <constraint firstItem="unz-8T-JcR" firstAttribute="leading" secondItem="Dcg-9m-tlK" secondAttribute="leading" constant="20" id="cVG-kM-8ZI"/>
                                            <constraint firstItem="qsY-aV-AFa" firstAttribute="leading" secondItem="unz-8T-JcR" secondAttribute="leading" id="pPP-Ko-du2"/>
                                            <constraint firstItem="qsY-aV-AFa" firstAttribute="top" secondItem="unz-8T-JcR" secondAttribute="bottom" constant="240" id="tMx-HW-l2L"/>
                                            <constraint firstItem="unz-8T-JcR" firstAttribute="top" secondItem="Dcg-9m-tlK" secondAttribute="top" constant="20" id="ybo-xk-6LG"/>
                                        </constraints>
                                    </scrollView>
                                    <pageControl opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" numberOfPages="3" translatesAutoresizingMaskIntoConstraints="NO" id="B7V-nL-rCv">
                                        <rect key="frame" x="121.5" y="353" width="132" height="37"/>
                                        <color key="backgroundColor" red="0.4756349325" green="0.47564673419999998" blue="0.47564041610000002" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                        <constraints>
                                            <constraint firstAttribute="width" constant="132" id="2ge-VP-yzz"/>
                                        </constraints>
                                    </pageControl>
                                    <imageView userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="3cl-Ou-kTu">
                                        <rect key="frame" x="10" y="405" width="40" height="40"/>
                                        <color key="backgroundColor" red="0.0" green="0.58980089430000004" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                        <constraints>
                                            <constraint firstAttribute="width" constant="40" id="E0D-Ed-vVX"/>
                                            <constraint firstAttribute="height" constant="40" id="MFN-Ap-lkV"/>
                                        </constraints>
                                    </imageView>
                                    <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="This Title" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="1Sf-bC-0yM">
                                        <rect key="frame" x="58" y="415" width="70" height="21"/>
                                        <color key="backgroundColor" red="0.92143100499999997" green="0.92145264149999995" blue="0.92144101860000005" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                        <fontDescription key="fontDescription" type="system" pointSize="17"/>
                                        <nil key="textColor"/>
                                        <nil key="highlightedColor"/>
                                    </label>
                                    <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Description Label" textAlignment="natural" lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="MkP-AG-X03">
                                        <rect key="frame" x="10" y="461" width="355" height="20.5"/>
                                        <color key="backgroundColor" red="1" green="0.83234566450000003" blue="0.47320586440000001" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                        <fontDescription key="fontDescription" type="system" pointSize="17"/>
                                        <nil key="textColor"/>
                                        <nil key="highlightedColor"/>
                                    </label>
                                </subviews>
                                <color key="backgroundColor" red="0.99953407049999998" green="0.98835557699999999" blue="0.47265523669999998" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                <constraints>
                                    <constraint firstAttribute="bottom" secondItem="MkP-AG-X03" secondAttribute="bottom" constant="8" id="62d-uw-l6l"/>
                                    <constraint firstItem="B7V-nL-rCv" firstAttribute="centerX" secondItem="Dcg-9m-tlK" secondAttribute="centerX" id="6TH-qD-Rpg"/>
                                    <constraint firstItem="Dcg-9m-tlK" firstAttribute="leading" secondItem="K2x-mz-KcZ" secondAttribute="leading" id="8Cm-Zq-jKu"/>
                                    <constraint firstItem="1Sf-bC-0yM" firstAttribute="centerY" secondItem="3cl-Ou-kTu" secondAttribute="centerY" id="D54-Jk-1zW"/>
                                    <constraint firstItem="MkP-AG-X03" firstAttribute="width" secondItem="K2x-mz-KcZ" secondAttribute="width" constant="-20" id="Sk8-fq-0I8"/>
                                    <constraint firstItem="3cl-Ou-kTu" firstAttribute="top" secondItem="Dcg-9m-tlK" secondAttribute="bottom" constant="15" id="XN2-Lz-nQQ"/>
                                    <constraint firstAttribute="trailing" secondItem="Dcg-9m-tlK" secondAttribute="trailing" id="YtO-y4-qn9"/>
                                    <constraint firstItem="MkP-AG-X03" firstAttribute="leading" secondItem="3cl-Ou-kTu" secondAttribute="leading" id="ZM0-3U-XLQ"/>
                                    <constraint firstItem="Dcg-9m-tlK" firstAttribute="top" secondItem="K2x-mz-KcZ" secondAttribute="top" id="fxa-1i-NHa"/>
                                    <constraint firstItem="Dcg-9m-tlK" firstAttribute="width" secondItem="K2x-mz-KcZ" secondAttribute="width" id="l7O-qV-Ja9"/>
                                    <constraint firstItem="3cl-Ou-kTu" firstAttribute="leading" secondItem="K2x-mz-KcZ" secondAttribute="leading" constant="10" id="on9-FW-ZiG"/>
                                    <constraint firstItem="B7V-nL-rCv" firstAttribute="bottom" secondItem="Dcg-9m-tlK" secondAttribute="bottom" id="tbv-ao-adS"/>
                                    <constraint firstItem="1Sf-bC-0yM" firstAttribute="leading" secondItem="3cl-Ou-kTu" secondAttribute="trailing" constant="8" id="wuV-fj-HFV"/>
                                    <constraint firstItem="MkP-AG-X03" firstAttribute="top" secondItem="3cl-Ou-kTu" secondAttribute="bottom" constant="16" id="x4z-IQ-o2z"/>
                                </constraints>
                            </scrollView>
                        </subviews>
                        <color key="backgroundColor" red="1" green="0.1857388616" blue="0.57339501380000002" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                        <constraints>
                            <constraint firstItem="MMC-8B-qcF" firstAttribute="trailing" secondItem="K2x-mz-KcZ" secondAttribute="trailing" id="3S9-mL-Ldn"/>
                            <constraint firstItem="MMC-8B-qcF" firstAttribute="bottom" secondItem="K2x-mz-KcZ" secondAttribute="bottom" id="7g2-ph-w0I"/>
                            <constraint firstItem="K2x-mz-KcZ" firstAttribute="top" secondItem="MMC-8B-qcF" secondAttribute="top" id="PIT-lg-Z3r"/>
                            <constraint firstItem="K2x-mz-KcZ" firstAttribute="leading" secondItem="MMC-8B-qcF" secondAttribute="leading" id="irI-yU-v4c"/>
                        </constraints>
                        <viewLayoutGuide key="safeArea" id="MMC-8B-qcF"/>
                    </view>
                    <connections>
                        <outlet property="descriptionLabel" destination="MkP-AG-X03" id="4xr-iw-3tF"/>
                    </connections>
                </viewController>
                <placeholder placeholderIdentifier="IBFirstResponder" id="gbQ-wO-etq" userLabel="First Responder" sceneMemberID="firstResponder"/>
            </objects>
            <point key="canvasLocation" x="41" y="2257"/>
        </scene>
    </scenes>
</document>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM