ScrollView 中的 Swift CollectionView 和 TableView [英] Swift CollectionView and TableView in ScrollView
本文介绍了ScrollView 中的 Swift CollectionView 和 TableView的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
那么，您如何在下面的图片中看到，我在 ScrollView 中有 collectionView 和 TableView.它的工作方式与我预期的不一样.您可以在 gif 图片中看到问题.CollectionView 有静态高度 = 100 并且 tableview 有 selfsizeble 高度.StackView 的高度和宽度等于 ScrollView 的高度和宽度.好像有个小错误，但是查不出来.
So, how you can see in pic below, i have collectionView and TableView in ScrollView. And it works not how i expected. You can see the problem in gif picture. The CollectionView has static height = 100 and tableview has selfsizeble height.StackView's height and width are equal to height and width of ScrollView. It looks like there is somewhere a tiny mistake, but i cant find it out.
此处为 TableView 的 AutoSizeClass:
here AutoSizeClass for TableView:
class AutoSizingTableView: UITableView {
override var intrinsicContentSize: CGSize {
self.layoutIfNeeded()
return CGSize(width: UIView.noIntrinsicMetric, height: contentSize.height)
}
override var contentSize: CGSize {
didSet{
self.invalidateIntrinsicContentSize()
}
}
override func reloadData() {
super.reloadData()
self.invalidateIntrinsicContentSize()
}
}
问题是 View 和 Collection View 停留在同一个地方并且不会向上滚动.
The problem is that View with Collection View staying in the same place and doesnt scroll up.
推荐答案
根据您的评论在 tableview 中禁用滚动它根本无法滚动" ...您做错了什么与您的设置.
Based on your comment "with disabled scrolling in tableview it non scrollable at all" ... you've done something wrong with your setup.
以下是如何在 Storyboard 中对其进行布局以使其正常工作.请注意，表格视图必须滚动禁用:
Here is how it needs to be laid-out in Storyboard to get it to work. Note that the table view must have scrolling disabled:
这是该故事板的来源:
<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="16096" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="for-Xa-JUC">
<device id="retina4_7" orientation="portrait" appearance="light"/>
<dependencies>
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="16087"/>
<capability name="Safe area layout guides" minToolsVersion="9.0"/>
<capability name="collection view cell content view" minToolsVersion="11.0"/>
<capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
</dependencies>
<scenes>
<!--Azdaev View Controller-->
<scene sceneID="UV2-bp-BSw">
<objects>
<viewController id="for-Xa-JUC" customClass="AzdaevViewController" customModule="TableAdd" customModuleProvider="target" sceneMemberID="viewController">
<view key="view" contentMode="scaleToFill" id="Aiw-Z0-OHR">
<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="NiW-5R-cfc">
<rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
<subviews>
<stackView opaque="NO" contentMode="scaleToFill" axis="vertical" spacing="8" translatesAutoresizingMaskIntoConstraints="NO" id="Iqj-ag-gPR">
<rect key="frame" x="0.0" y="0.0" width="375" height="348"/>
<subviews>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="Ewg-bZ-eyT">
<rect key="frame" x="0.0" y="0.0" width="375" height="100"/>
<subviews>
<collectionView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" dataMode="prototypes" translatesAutoresizingMaskIntoConstraints="NO" id="PVP-gp-7EW">
<rect key="frame" x="0.0" y="0.0" width="375" height="100"/>
<color key="backgroundColor" systemColor="systemBackgroundColor" cocoaTouchSystemColor="whiteColor"/>
<constraints>
<constraint firstAttribute="height" constant="100" id="4ie-da-XpJ"/>
</constraints>
<collectionViewFlowLayout key="collectionViewLayout" scrollDirection="horizontal" automaticEstimatedItemSize="YES" minimumLineSpacing="10" minimumInteritemSpacing="10" id="JhR-eW-5b9">
<size key="itemSize" width="80" height="80"/>
<size key="headerReferenceSize" width="0.0" height="0.0"/>
<size key="footerReferenceSize" width="0.0" height="0.0"/>
<inset key="sectionInset" minX="0.0" minY="0.0" maxX="0.0" maxY="0.0"/>
</collectionViewFlowLayout>
<cells>
<collectionViewCell opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" reuseIdentifier="SimpleCollCell" id="znX-Ra-Axt" customClass="SimpleCollCell" customModule="TableAdd" customModuleProvider="target">
<rect key="frame" x="0.0" y="10" width="80" height="80"/>
<autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
<collectionViewCellContentView key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" insetsLayoutMarginsFromSafeArea="NO" id="GWE-KA-31W">
<rect key="frame" x="0.0" y="0.0" width="80" height="80"/>
<autoresizingMask key="autoresizingMask"/>
<subviews>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Label" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="7U6-uF-qZB">
<rect key="frame" x="19" y="30" width="42" height="20.5"/>
<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 firstItem="7U6-uF-qZB" firstAttribute="centerY" secondItem="GWE-KA-31W" secondAttribute="centerY" id="8E5-5k-QqV"/>
<constraint firstItem="7U6-uF-qZB" firstAttribute="centerX" secondItem="GWE-KA-31W" secondAttribute="centerX" id="FTH-Df-wyE"/>
</constraints>
</collectionViewCellContentView>
<connections>
<outlet property="theLabel" destination="7U6-uF-qZB" id="kcQ-Wy-2wY"/>
</connections>
</collectionViewCell>
</cells>
</collectionView>
</subviews>
<color key="backgroundColor" systemColor="systemBackgroundColor" cocoaTouchSystemColor="whiteColor"/>
<constraints>
<constraint firstAttribute="trailing" secondItem="PVP-gp-7EW" secondAttribute="trailing" id="941-fg-5DC"/>
<constraint firstItem="PVP-gp-7EW" firstAttribute="top" secondItem="Ewg-bZ-eyT" secondAttribute="top" id="9kx-ps-iUv"/>
<constraint firstItem="PVP-gp-7EW" firstAttribute="leading" secondItem="Ewg-bZ-eyT" secondAttribute="leading" id="OYx-qn-7cl"/>
<constraint firstAttribute="bottom" secondItem="PVP-gp-7EW" secondAttribute="bottom" id="OgJ-Yv-Jal"/>
</constraints>
</view>
<tableView clipsSubviews="YES" contentMode="scaleToFill" placeholderIntrinsicWidth="infinite" placeholderIntrinsicHeight="240" alwaysBounceVertical="YES" scrollEnabled="NO" dataMode="prototypes" style="plain" separatorStyle="default" rowHeight="-1" estimatedRowHeight="-1" sectionHeaderHeight="28" sectionFooterHeight="28" translatesAutoresizingMaskIntoConstraints="NO" id="XGR-gS-YDa" customClass="ContentSizedTableView" customModule="TableAdd" customModuleProvider="target">
<rect key="frame" x="0.0" y="108" width="375" height="240"/>
<color key="backgroundColor" systemColor="systemBackgroundColor" cocoaTouchSystemColor="whiteColor"/>
<prototypes>
<tableViewCell clipsSubviews="YES" contentMode="scaleToFill" preservesSuperviewLayoutMargins="YES" selectionStyle="default" indentationWidth="10" reuseIdentifier="SimpleTableCell" id="LTQ-ke-1N0" customClass="SimpleTableCell" customModule="TableAdd" customModuleProvider="target">
<rect key="frame" x="0.0" y="28" width="375" height="43"/>
<autoresizingMask key="autoresizingMask"/>
<tableViewCellContentView key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" preservesSuperviewLayoutMargins="YES" insetsLayoutMarginsFromSafeArea="NO" tableViewCell="LTQ-ke-1N0" id="ILn-2o-e6E">
<rect key="frame" x="0.0" y="0.0" width="375" height="43"/>
<autoresizingMask key="autoresizingMask"/>
<subviews>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Label" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="QxE-9g-2Hm">
<rect key="frame" x="15" y="11" width="345" height="21"/>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
</label>
</subviews>
<constraints>
<constraint firstAttribute="bottomMargin" secondItem="QxE-9g-2Hm" secondAttribute="bottom" id="2kY-7j-i6k"/>
<constraint firstAttribute="trailingMargin" secondItem="QxE-9g-2Hm" secondAttribute="trailing" id="8Rb-MN-fCq"/>
<constraint firstItem="QxE-9g-2Hm" firstAttribute="top" secondItem="ILn-2o-e6E" secondAttribute="topMargin" id="IFx-mV-xVp"/>
<constraint firstItem="QxE-9g-2Hm" firstAttribute="leading" secondItem="ILn-2o-e6E" secondAttribute="leadingMargin" id="SkZ-FP-3Xk"/>
</constraints>
</tableViewCellContentView>
<connections>
<outlet property="theLabel" destination="QxE-9g-2Hm" id="tCs-qB-RnZ"/>
</connections>
</tableViewCell>
</prototypes>
</tableView>
</subviews>
</stackView>
</subviews>
<constraints>
<constraint firstItem="Iqj-ag-gPR" firstAttribute="width" secondItem="cNU-lA-jis" secondAttribute="width" id="YWn-il-cIA"/>
<constraint firstItem="Iqj-ag-gPR" firstAttribute="bottom" secondItem="78Z-qi-tb8" secondAttribute="bottom" id="dWW-mF-X02"/>
<constraint firstItem="Iqj-ag-gPR" firstAttribute="leading" secondItem="78Z-qi-tb8" secondAttribute="leading" id="jlB-bm-lOp"/>
<constraint firstItem="Iqj-ag-gPR" firstAttribute="top" secondItem="78Z-qi-tb8" secondAttribute="top" id="oPw-KA-7Eb"/>
<constraint firstItem="Iqj-ag-gPR" firstAttribute="trailing" secondItem="78Z-qi-tb8" secondAttribute="trailing" id="t90-TH-ogv"/>
</constraints>
<viewLayoutGuide key="contentLayoutGuide" id="78Z-qi-tb8"/>
<viewLayoutGuide key="frameLayoutGuide" id="cNU-lA-jis"/>
</scrollView>
</subviews>
<color key="backgroundColor" systemColor="systemBackgroundColor" cocoaTouchSystemColor="whiteColor"/>
<constraints>
<constraint firstItem="NiW-5R-cfc" firstAttribute="top" secondItem="kCj-qX-p52" secondAttribute="top" id="18n-ZT-7rU"/>
<constraint firstItem="NiW-5R-cfc" firstAttribute="leading" secondItem="kCj-qX-p52" secondAttribute="leading" id="1BY-QR-X5K"/>
<constraint firstItem="NiW-5R-cfc" firstAttribute="trailing" secondItem="kCj-qX-p52" secondAttribute="trailing" id="YHh-qb-ygU"/>
<constraint firstItem="NiW-5R-cfc" firstAttribute="bottom" secondItem="kCj-qX-p52" secondAttribute="bottom" id="tzd-Zo-fNv"/>
</constraints>
<viewLayoutGuide key="safeArea" id="kCj-qX-p52"/>
</view>
<connections>
<outlet property="theCollectionView" destination="PVP-gp-7EW" id="MxW-WG-GPj"/>
<outlet property="theTableView" destination="XGR-gS-YDa" id="NhY-EO-L3y"/>
</connections>
</viewController>
<placeholder placeholderIdentifier="IBFirstResponder" id="nbL-KS-cva" userLabel="First Responder" customClass="UIResponder" sceneMemberID="firstResponder"/>
</objects>
<point key="canvasLocation" x="447.82608695652175" y="3079.6875"/>
</scene>
</scenes>
</document>
和演示代码:
final class ContentSizedTableView: UITableView {
override var contentSize:CGSize {
didSet {
invalidateIntrinsicContentSize()
}
}
override var intrinsicContentSize: CGSize {
layoutIfNeeded()
return CGSize(width: UIView.noIntrinsicMetric, height: contentSize.height)
}
}
class SimpleCollCell: UICollectionViewCell {
@IBOutlet var theLabel: UILabel!
}
class SimpleTableCell: UITableViewCell {
@IBOutlet var theLabel: UILabel!
}
class AzdaevViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate, UITableViewDataSource, UITableViewDelegate {
@IBOutlet var theCollectionView: UICollectionView!
@IBOutlet var theTableView: ContentSizedTableView!
override func viewDidLoad() {
super.viewDidLoad()
theTableView.dataSource = self
theTableView.delegate = self
theCollectionView.dataSource = self
theCollectionView.delegate = self
}
func numberOfSections(in tableView: UITableView) -> Int {
return 1
}
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return 30
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let c = tableView.dequeueReusableCell(withIdentifier: "SimpleTableCell", for: indexPath) as! SimpleTableCell
c.theLabel.text = "Row \(indexPath.row)"
return c
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 10
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let c = collectionView.dequeueReusableCell(withReuseIdentifier: "SimpleCollCell", for: indexPath) as! SimpleCollCell
c.theLabel.text = "\(indexPath.item)"
return c
}
}
结果:
这篇关于ScrollView 中的 Swift CollectionView 和 TableView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
