make one UIView component scrollable up and down

Question

In the screenshot below, the blue area is my UIScrollView, the yellow area is a UIView component.

What I want to achieve is only yellow area can be moved up and down on iPhone. (I will add more UI components on the yellow UIView, they should move/scrollable as a whole)

I get stuck now, I am not sure whether I am in the right direction of achieving it. Could someone please guide me to the right direction?

(I also need to change the blue color background to a image which shouldn't be scrollable)

I think you should use UITableView (or UICollectionView) instead. It's hard to control the usual UIScrollView. You can also set UITableView.backgroundView = UIImageView(..) — Aleksandr Honcharov, Aug 30 '17 at 13:24
take a look : https://stackoverflow.com/questions/4980534/dragging-uiview-under-finger — Nitin Gohel, Aug 30 '17 at 13:30
You can make your scrollView scroll by setting a huge contentSize, regardless your inside view size, and put an image as background is easy you can put in your view hierarchy your image view behind your scroll view and pin it to top,left,botom,and right of your UIScrollView — Reinier Melian, Aug 30 '17 at 13:56
*"only yellow area can be moved up and down"* -- do you mean, you want to slide the Yellow Box (plus any views inside it) up and down? That is basic `UIScrollView` function... are you setting `.contentSize` in code? Or using constraints? And for a background image, make your scroll view background color clear, and put an image view behind it? — DonMag, Aug 30 '17 at 14:36

score 0 · Answer 1 · answered Aug 30 '17 at 13:48

0

Try put the yellow view in a long transparent view and put the transparent view in the scrollView. Adjust the height of the transparent view and the scrollView content inset to adjust yellow view scrolling range.

answered Aug 30 '17 at 13:48

J.CHE

101
3

But how to have a image as background and have only the yellow area scrollable up and down? – Leem.fin Aug 30 '17 at 13:58
set the image as scrollview background or set scroll view background color to clear and put an image view underneath the scroll view – J.CHE Aug 30 '17 at 16:43

score 0 · Answer 2 · answered Aug 31 '17 at 05:53

I have created demo , and for me it is working fine here is storyboard 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" width="768" height="1024"/>
                    <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" width="768" height="1024"/>
                            <subviews>
                                <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="YI6-Cd-VzM">
                                    <rect key="frame" x="0.0" y="0.0" width="768" height="1792"/>
                                    <subviews>
                                        <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="2a3-Zk-7dR">
                                            <rect key="frame" x="0.0" y="768" width="768" height="256"/>
                                            <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>

Hope it works for you..

make one UIView component scrollable up and down

2 Answers2