如何在滚动视图中制作表格视图？
Posted
技术标签:
【中文标题】如何在滚动视图中制作表格视图？【英文标题】：how to make a table view inside scroll view? 【发布时间】：2018-07-12 09:33:34 【问题描述】：我需要在scroll view里面做table view，这样页面就可以滚动了，scroll view的高度取决于table view里面的数据个数。我在下面阅读了类似的帖子，但我的问题似乎有所不同
How to Make the scroll of a TableView inside ScrollView behave naturally
我想要的是如下图：
（滚动前）
（滚动到页面底部后）
我不知道这应该使用自动布局还是使用代码来完成。但我试图简化如下图所示的问题，但我无法为表格视图设置自动布局
这里是限制条件。
滚动视图的约束
基础视图的约束
黄色视图的限制
表格视图的约束
真的需要你的帮助。你能帮帮我吗？
【问题讨论】：
为什么要使用scrollview？您只能使用tableview 来实现此目的。为不同的 UI 创建自定义单元格。
表格视图已经是滚动视图的子类。你不应该把它放在滚动视图中。
【参考方案1】：
您可以通过给表格一个初始高度来轻松完成此操作，并将其与 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" />
<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" />
<subviews>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="7JP-ij-rQ3">
<rect key="frame" x="0.0" y="0.0" />
<subviews>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="oNu-7X-37n">
<rect key="frame" x="0.0" y="0.0" />
<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" />
<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" />
<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
【讨论】：
我相信这是最好的答案，但我有点困惑如何动态改变tableView高度，我尝试连接heightContraint但我不知道如何触发tableViewHeightContraint.constant = numberOfRow * 行高。这是我尝试过的截图 i.stack.imgur.com/LYMsS.png ，但结果很奇怪。先生，您能帮我多一点吗？ :( 如果你有 100 行那么它应该是 tableViewHeightConstraint.constant = 70 * 100 self.view.layoutIfNeeded 嗯，它给了我一个错误:(i.stack.imgur.com/tJhb1.png，我不知道如何获取行的高度，我不确定该代码应该放在哪里，我假设在 viewDidLoad 中跨度> 如果你的表格视图的初始高度是所有内容的大小，那么这个解决方案并没有真正使用“表格视图”，那么所有内容都会加载并且没有使用单元格重用功能.【参考方案2】：添加tableView的4个约束并为其设置固定高度：
现在将 iboutlet 连接到 tableView 的高度约束并以编程方式更改它的值：
heightConstraint.constant = yourArray.count * rowHeightOfTableView
试试看它是否适用于你的场景。
但我仍然会说不要同时使用两者。最好只使用 tableview 并根据 UI 创建自定义单元格。
【讨论】：
【参考方案3】：你可以试试这样，首先取scroll view设置这个scrollview取的布局(leading -> 0, tailing -> 0, top -> 0,bottom -> 0)。然后取一个view里面滚动视图并设置视图的布局（前导、尾随、顶部、底部、高度）和水平居中以查看。 然后取黄色视图（日历）内部视图并设置布局（前导、尾随、顶部、高度）。然后取表视图，设置表视图取的布局（垂直空间为黄色视图，前导，尾随，底部）。 现在您设置所有布局。
enter image description here
【讨论】：
以上是关于如何在滚动视图中制作表格视图？的主要内容，如果未能解决你的问题，请参考以下文章