Constraints autolayout for uitableview and uiview

Question

I'm facing a constraints autolayout issue which is I have a UITableView at upper and UIView at lower. When the UITableView expand the tableView section, I want the UIView at the bottom shift down automatically, when collapse the tableView section, the UIView at bottom will move up automatically.

Below is my storyboard design, on the green sector is UITableView, on the red sector is UIView.

You can get my code from here

Your help is much appreciated.

Cant you just make that UIView a part of your tableview (a cell or footer view) then it will shift with your other table view cell — Tj3n, Jul 19 '17 at 03:26
@NurII isn't it automatically adjusted when you add a row on the section (expanded)? as long as your bottom view's top is flushed on the tableview's bottom — Joshua, Jul 19 '17 at 06:13

score 0 · Answer 1 · answered Jul 19 '17 at 03:40

0

Try use ViewForHeaderSection: title1, title 2... is tableview header section. When expand numberofRowinsection = 1 and = 0 when collapse - your uiview is uitableview cell in section.
Reload section when click section view.

answered Jul 19 '17 at 03:40

Nguyen Hoan

1,583
1
11
18

Balasubramanian · Accepted Answer · 2017-07-19T10:30:10.867

0

Add the IBOutlet of height constraints of your tableview.

control + drag and drop to the view controller. You will get the property like this.

@property (strong, nonatomic) IBOutlet NSLayoutConstraint * tableviewHeightConstraints;

Then call this one whenever you toggle the tableview. contentSize will calculate the tableview height and update the height to the tableviewHeightConstraints constraints.

CGFloat height = MIN(self.view.bounds.size.height, self.tableView.contentSize.height);
self.tableviewHeightConstraints.constant = height;
[self.view layoutIfNeeded];

edited Jul 19 '17 at 10:30

answered Jul 19 '17 at 08:28

Balasubramanian

5,274
6
33
62

Err is that "@property (nonatomic, strong) NSLayoutConstraint * tableviewHeightConstraints;" instead of "@property (nonatomic, strong) IBOutlet NSLayoutConstraints * tableviewHeightConstraints;" ? – Nur II Jul 19 '17 at 09:50
Yes. Updated. Please check now. did you manage to get it to work? – Balasubramanian Jul 19 '17 at 10:19
Hi Bala, it got respond. But when I click the section expand & collapse. The result become opposite way. I've uploaded my code into this link, could you help me take a look? https://drive.google.com/open?id=0B3e7l6RGD-rnMmFDZi1LOS1MMkU – Nur II Jul 20 '17 at 08:21
Did you added `bottom constraint` for last subview to its superview which is below your tableview ?. – Balasubramanian Jul 20 '17 at 09:36
Remove that constraints and instead set the height of that view. So that when your tableview height increases, it will push all of your view below. If its goes out the screen, then will need to add scrollView. Otherwise you will see wierd thing. – Balasubramanian Jul 20 '17 at 10:39
1

Thanks Bala for your help, it work perfectly for me now. – Nur II Jul 21 '17 at 06:47

Al Imran · Answer 3 · 2017-07-19T06:30:54.423

don't worry and be happy. I have make a solution for you. Just simple thinking about your Layout and flow the steep below:

1.Your parent layout is ConstraintLayout,
2.Secondly take a RelativeLayout,
3.Then take another ConstraintLayout and
4.Finally add your "ExpandableListView" and your UI element

You can also see the code below:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="#EACB3B"
    tools:context="com.example.uitableview.MainActivity">

        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:orientation="vertical"
            tools:layout_constraintTop_creator="1"
            tools:layout_constraintRight_creator="1"
            tools:layout_constraintBottom_creator="1"
            android:layout_marginStart="8dp"
            android:layout_marginEnd="8dp"
            android:layout_marginTop="8dp"
            android:layout_marginBottom="8dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            tools:layout_constraintLeft_creator="1"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toTopOf="parent">

                <android.support.constraint.ConstraintLayout
                    android:id="@+id/lvID"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">


                        <ImageView
                            android:id="@+id/imgView"
                            android:layout_width="wrap_content"
                            android:layout_height="234dp"
                            android:src="@drawable/mango"
                            app:layout_constraintLeft_toLeftOf="parent"
                            app:layout_constraintRight_toRightOf="parent"
                            android:layout_marginTop="8dp"
                            app:layout_constraintTop_toBottomOf="@+id/expLv"
                            app:layout_constraintHorizontal_bias="0.0" />

                        <ExpandableListView
                            android:id="@+id/expLv"
                            android:layout_width="352dp"
                            android:layout_height="wrap_content"
                            android:layout_marginTop="16dp"
                            android:orientation="vertical"
                            app:layout_constraintLeft_toLeftOf="parent"
                            app:layout_constraintRight_toRightOf="parent"
                            app:layout_constraintTop_toTopOf="parent" />
                </android.support.constraint.ConstraintLayout>

        </RelativeLayout>
</android.support.constraint.ConstraintLayout>

Or you can also flow the Google Link: https://drive.google.com/open?id=0B-yo9VvU7jyBUHN6RHVXQmUtVU0

Constraints autolayout for uitableview and uiview

3 Answers3

Linked