ios - 如何在 ScrollView 中制作表格 View ？

Question

我需要在scroll view里面做table view，这样页面才能滚动，scroll view的高度取决于table view的数据条数。我在下面阅读过类似的帖子，但我的问题似乎有所不同

How to Make the scroll of a TableView inside ScrollView behave naturally

我想要的是如下图:

(滚动前)

(滚动到页面底部后)

我不知道这是应该使用自动布局还是使用代码来完成。但是我试图像下图那样简化问题，但是我无法为表格 View 设置自动布局

这是限制条件。

ScrollView 的约束

基本 View 的约束

黄色 View 的约束

TableView 的约束

真的需要你的帮助。你能帮帮我吗？

Answer 1

你可以通过给表格一个初始高度来轻松实现这一点，将它 Hook 到 IB 并根据行数更改它，因为你的图像看起来它是静态的，比如 70，你可以看看这个布局，打开 Main.storyboard 作为源代码并复制粘贴此 XML

<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="14113" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="BYZ-38-t0r">
<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>
    <!--View Controller-->
    <scene sceneID="tne-QT-ifu">
        <objects>
            <viewController id="BYZ-38-t0r" customClass="ViewController" customModule="CustomTexF" customModuleProvider="target" sceneMemberID="viewController">
                <view key="view" contentMode="scaleToFill" id="8bC-Xf-vdC">
                    <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="gQl-vh-MlV">
                            <rect key="frame" x="0.0" y="20" width="375" height="647"/>
                            <subviews>
                                <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="7JP-ij-rQ3">
                                    <rect key="frame" x="0.0" y="0.0" width="375" height="650"/>
                                    <subviews>
                                        <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="oNu-7X-37n">
                                            <rect key="frame" x="0.0" y="0.0" width="375" height="200"/>
                                            <color key="backgroundColor" red="1" green="0.49823676220000002" blue="1" alpha="1" colorSpace="calibratedRGB"/>
                                            <constraints>
                                                <constraint firstAttribute="height" constant="200" id="IR2-Tm-rye"/>
                                            </constraints>
                                        </view>
                                        <tableView clipsSubviews="YES" contentMode="scaleToFill" alwaysBounceVertical="YES" dataMode="prototypes" style="plain" separatorStyle="default" rowHeight="-1" estimatedRowHeight="-1" sectionHeaderHeight="28" sectionFooterHeight="28" translatesAutoresizingMaskIntoConstraints="NO" id="ivs-Bl-FXa">
                                            <rect key="frame" x="0.0" y="200" width="375" height="300"/>
                                            <color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
                                            <constraints>
                                                <constraint firstAttribute="height" constant="300" id="Jir-gH-kN4"/>
                                            </constraints>
                                        </tableView>
                                        <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="Lma-pM-X0g">
                                            <rect key="frame" x="0.0" y="500" width="375" height="150"/>
                                            <color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
                                            <constraints>
                                                <constraint firstAttribute="height" constant="150" id="1eR-tC-Mar"/>
                                            </constraints>
                                        </view>
                                    </subviews>
                                    <color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
                                    <constraints>
                                        <constraint firstAttribute="trailing" secondItem="oNu-7X-37n" secondAttribute="trailing" id="IF5-Q4-Yyz"/>
                                        <constraint firstItem="oNu-7X-37n" firstAttribute="leading" secondItem="7JP-ij-rQ3" secondAttribute="leading" id="L5c-9H-y57"/>
                                        <constraint firstItem="ivs-Bl-FXa" firstAttribute="leading" secondItem="7JP-ij-rQ3" secondAttribute="leading" id="MTy-Go-8Nz"/>
                                        <constraint firstAttribute="trailing" secondItem="ivs-Bl-FXa" secondAttribute="trailing" id="NBz-UU-WZr"/>
                                        <constraint firstItem="ivs-Bl-FXa" firstAttribute="top" secondItem="oNu-7X-37n" secondAttribute="bottom" id="Sn8-9m-9HT"/>
                                        <constraint firstItem="Lma-pM-X0g" firstAttribute="leading" secondItem="7JP-ij-rQ3" secondAttribute="leading" id="TSl-Yd-64k"/>
                                        <constraint firstItem="Lma-pM-X0g" firstAttribute="top" secondItem="ivs-Bl-FXa" secondAttribute="bottom" id="eGZ-3R-Rey"/>
                                        <constraint firstAttribute="bottom" secondItem="Lma-pM-X0g" secondAttribute="bottom" id="pef-k0-8nU"/>
                                        <constraint firstItem="oNu-7X-37n" firstAttribute="top" secondItem="7JP-ij-rQ3" secondAttribute="top" id="qsE-OQ-4x6"/>
                                        <constraint firstAttribute="trailing" secondItem="Lma-pM-X0g" secondAttribute="trailing" id="u4o-l3-56h"/>
                                    </constraints>
                                </view>
                            </subviews>
                            <constraints>
                                <constraint firstAttribute="bottom" secondItem="7JP-ij-rQ3" secondAttribute="bottom" priority="250" id="5Pl-Zc-jKy"/>
                                <constraint firstItem="7JP-ij-rQ3" firstAttribute="leading" secondItem="gQl-vh-MlV" secondAttribute="leading" id="6wk-HX-XUh"/>
                                <constraint firstAttribute="trailing" secondItem="7JP-ij-rQ3" secondAttribute="trailing" id="hSU-wA-1v0"/>
                                <constraint firstItem="7JP-ij-rQ3" firstAttribute="top" secondItem="gQl-vh-MlV" secondAttribute="top" id="o0p-fH-VhV"/>
                                <constraint firstItem="7JP-ij-rQ3" firstAttribute="width" secondItem="gQl-vh-MlV" secondAttribute="width" id="wgf-e8-HLU"/>
                            </constraints>
                        </scrollView>
                    </subviews>
                    <color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                    <constraints>
                        <constraint firstItem="6Tk-OE-BBY" firstAttribute="bottom" secondItem="gQl-vh-MlV" secondAttribute="bottom" id="Axy-dp-ZiJ"/>
                        <constraint firstItem="6Tk-OE-BBY" firstAttribute="trailing" secondItem="gQl-vh-MlV" secondAttribute="trailing" id="LED-nS-Ba6"/>
                        <constraint firstItem="gQl-vh-MlV" firstAttribute="top" secondItem="6Tk-OE-BBY" secondAttribute="top" id="RS2-MF-Aya"/>
                        <constraint firstItem="gQl-vh-MlV" firstAttribute="leading" secondItem="6Tk-OE-BBY" secondAttribute="leading" id="euc-Qn-E0q"/>
                    </constraints>
                    <viewLayoutGuide key="safeArea" id="6Tk-OE-BBY"/>
                </view>
            </viewController>
            <placeholder placeholderIdentifier="IBFirstResponder" id="dkx-z0-nzr" sceneMemberID="firstResponder"/>
        </objects>
    </scene>
</scenes>
</document>

//

 tableViewHeightConstraint.constant = 100 * 70 
 self.view.layoutIfNeeded()

并实现这个方法

func tableView(_ tableView: UITableView, 
     heightForRowAt indexPath: IndexPath) -> CGFloat {
  return 70 // height for every row 
}