使一个 UIView 组件可上下滚动
Posted
技术标签:
【中文标题】使一个 UIView 组件可上下滚动【英文标题】：make one UIView component scrollable up and down 【发布时间】：2017-08-30 13:18:31 【问题描述】：在下面的截图中，蓝色区域是我的 UIScrollView，黄色区域是 UIView 组件。
我想要实现的是只有黄色区域可以在 iPhone 上上下移动。 （我会在黄色的 UIView 上添加更多的 UI 组件，它们应该作为一个整体移动/可滚动）
我现在卡住了，我不确定我是否朝着实现它的正确方向前进。有人可以指导我正确的方向吗？
（我还需要将蓝色背景更改为不应滚动的图像）
【问题讨论】：
我认为您应该改用 UITableView（或 UICollectionView）。很难控制通常的 UIScrollView。你也可以设置 UITableView.backgroundView = UIImageView(..) 为什么不添加平移手势？ 看看：***.com/questions/4980534/… 无论您的内部视图大小，您都可以通过设置巨大的 contentSize 来使您的 scrollView 滚动，并将图像作为背景很容易您可以将图像视图放在滚动视图和 pin 后面的视图层次结构中它位于 UIScrollView 的顶部、左侧、底部和右侧 使用自动布局是不可能的 【参考方案1】：尝试把黄色view放在长透明view中，把透明view放在scrollView中。调整透明视图的高度和滚动视图的内容插入调整黄色视图的滚动范围。
【讨论】：
但是如何将图像作为背景并且只有黄色区域可以上下滚动？ 将图像设置为滚动视图背景或设置滚动视图背景颜色以清除并在滚动视图下方放置图像视图【参考方案2】：我已经创建了演示，对我来说它工作正常这里是故事板XML
<!--View Controller Test-->
<scene sceneID="Mea-LA-Bdd">
<objects>
<viewController id="apb-o6-bca" customClass="ViewControllerTest" customModule="StoryBoard" customModuleProvider="target" sceneMemberID="viewController">
<layoutGuides>
<viewControllerLayoutGuide type="top" id="M5h-pq-oJT"/>
<viewControllerLayoutGuide type="bottom" id="Szm-1V-GvH"/>
</layoutGuides>
<view key="view" contentMode="scaleToFill" id="6Fa-fa-e1T">
<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="Cy8-Tt-uZI">
<rect key="frame" x="0.0" y="0.0" />
<subviews>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="YI6-Cd-VzM">
<rect key="frame" x="0.0" y="0.0" />
<subviews>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="2a3-Zk-7dR">
<rect key="frame" x="0.0" y="768" />
<color key="backgroundColor" white="0.66666666666666663" alpha="1" colorSpace="calibratedWhite"/>
<constraints>
<constraint firstAttribute="height" constant="256" id="hFq-kg-mhd"/>
</constraints>
</view>
</subviews>
<color key="backgroundColor" red="0.87843137250000003" green="0.89411764709999997" blue="0.89411764709999997" alpha="1" colorSpace="calibratedRGB"/>
<constraints>
<constraint firstItem="2a3-Zk-7dR" firstAttribute="centerY" secondItem="YI6-Cd-VzM" secondAttribute="centerY" id="N66-2N-D4i"/>
<constraint firstItem="2a3-Zk-7dR" firstAttribute="leading" secondItem="YI6-Cd-VzM" secondAttribute="leading" id="avT-2f-PKx"/>
<constraint firstAttribute="trailing" secondItem="2a3-Zk-7dR" secondAttribute="trailing" id="nnJ-PW-ft4"/>
</constraints>
</view>
</subviews>
<color key="backgroundColor" red="0.68627450980000004" green="0.72549019609999998" blue="0.74901960779999999" alpha="1" colorSpace="calibratedRGB"/>
<constraints>
<constraint firstItem="YI6-Cd-VzM" firstAttribute="top" secondItem="Cy8-Tt-uZI" secondAttribute="top" id="C4r-zI-jfx"/>
<constraint firstAttribute="bottom" secondItem="YI6-Cd-VzM" secondAttribute="bottom" id="NDs-Z7-us0"/>
<constraint firstItem="YI6-Cd-VzM" firstAttribute="height" secondItem="Cy8-Tt-uZI" secondAttribute="height" constant="768" id="NnT-HW-g61"/>
<constraint firstItem="YI6-Cd-VzM" firstAttribute="width" secondItem="Cy8-Tt-uZI" secondAttribute="width" id="W7n-ym-257"/>
<constraint firstAttribute="trailing" secondItem="YI6-Cd-VzM" secondAttribute="trailing" id="bWQ-Fn-3rw"/>
<constraint firstItem="YI6-Cd-VzM" firstAttribute="leading" secondItem="Cy8-Tt-uZI" secondAttribute="leading" id="dTM-iV-SPc"/>
</constraints>
<edgeInsets key="layoutMargins" top="0.0" left="0.0" bottom="0.0" right="0.0"/>
</scrollView>
</subviews>
<color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
<constraints>
<constraint firstItem="Cy8-Tt-uZI" firstAttribute="leading" secondItem="6Fa-fa-e1T" secondAttribute="leading" id="R2l-Qe-Ovp"/>
<constraint firstItem="Szm-1V-GvH" firstAttribute="top" secondItem="Cy8-Tt-uZI" secondAttribute="bottom" id="TTP-dE-fVr"/>
<constraint firstItem="Cy8-Tt-uZI" firstAttribute="top" secondItem="6Fa-fa-e1T" secondAttribute="top" id="xee-OO-b7e"/>
<constraint firstAttribute="trailing" secondItem="Cy8-Tt-uZI" secondAttribute="trailing" id="zAr-p0-gYR"/>
</constraints>
</view>
<connections>
<outlet property="scrollView" destination="Cy8-Tt-uZI" id="Qqw-qu-YBE"/>
<outlet property="viewToMove" destination="2a3-Zk-7dR" id="Jjc-bt-n4N"/>
</connections>
</viewController>
<placeholder placeholderIdentifier="IBFirstResponder" id="Jhi-9S-UE4" userLabel="First Responder" sceneMemberID="firstResponder"/>
</objects>
<point key="canvasLocation" x="1317.5999999999999" y="-497.00149925037488"/>
</scene>
希望它对你有用..
【讨论】：
以上是关于使一个 UIView 组件可上下滚动的主要内容，如果未能解决你的问题，请参考以下文章