1

I need to make table view inside the scroll view, so the page can be scrolled, and the height of the scroll view depends on the number of data in the table view. I have read similar thread below but my problem seems different

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

what I want is like the picture below :

(before scrolling)

enter image description here

(after scrolling to the bottom of the page)

enter image description here

I don't know if this should be done using autolayout or by using code. but I have tried to simplify the problem like the picture below, but I can't set the autolayout for the table view

enter image description here

and here are the constraints.

constraints for scroll view enter image description here

constraints for base view enter image description here

constraints for yellow view enter image description here

constraints for table view enter image description here

really need your help. could you please help me?

sarah
  • 3,819
  • 4
  • 38
  • 80
  • why to use `scrollview` ? you can achieve this using `tableview` only. Create custom cells for different UI. – Amit Jul 12 '18 at 09:44
  • Table view is already a subclass of scroll view. You shouldn't put it inside a scroll view. – Desdenova Jul 12 '18 at 09:53

3 Answers3

1

You can easily accomplish this by giving the table an initial height hook it to IB and change it according to number of rows as your images it seems it's static say 70 , you can look this layout , open Main.storyboard as source code and copy paste this 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()

and implement this method

func tableView(_ tableView: UITableView, 
     heightForRowAt indexPath: IndexPath) -> CGFloat {
  return 70 // height for every row 
}
Shehata Gamal
  • 98,760
  • 8
  • 65
  • 87
  • I believe this is the best answer, but I little bit confused how to dynamically change the tableView height, I have tried to connect the heightContraint but I don't know how to trigger tableViewHeightContraint.constant = numberOfRow * heightOfRow. here is the sreenshot what I tried https://i.stack.imgur.com/LYMsS.png , but the result is weird. could you please help me a little bit more sir ? :( – sarah Jul 13 '18 at 21:26
  • if you have 100 rows then it should be **tableViewHeightConstraint.constant = 70 * 100 self.view.layoutIfNeeded** – Shehata Gamal Jul 13 '18 at 21:29
  • ummm it gives me an error :( https://i.stack.imgur.com/tJhb1.png , I don't know how to get the height of the row and I am not sure where to put that code, I assume in viewDidLoad – sarah Jul 14 '18 at 10:23
  • This solution is not really using a "table view" if the initial height of your table view is the size of all the content then all the content will load and there is no use of the cell reuse feature. – Kex Dec 08 '20 at 04:02
0

Add the 4 constraints of the tableView and set fix height for it :

enter image description here

now connect an iboutlet to height constraint of tableView and change it's value programmatically :

heightConstraint.constant = yourArray.count * rowHeightOfTableView

Try and see if it works in your scenario.

But still I will say don't use both. Better to use only tableview and create custom cells according to the UI.

Amit
  • 4,837
  • 5
  • 31
  • 46
0

You can try this way, at first take the scroll view set the layout of this scroll view taking (leading -> 0, tailing -> 0, top -> 0,bottom - > 0).Then take a view inside the scroll view and set the layout of view taking (leading, tailing, top, bottom, height) and center horizontal to view. Then take the yellow view (calendar) inside view and set the layout taking (leading, tailing, top, height). Then take the table view and set the layout of the table view taking (vertical space to yellow view, leading, tailing, bottom). Now you set all the layout.

enter image description here

Romio Bera
  • 1
  • 1
  • 2