滚动视图中的 ConstraintLayout

Question

我想构建一个 UI，我想在其中显示横向滚动条，并将按钮保持在屏幕的最底部并固定在页脚上，但两者之间应该有一定的差距在横向视图中滚动。

非常感谢任何帮助。

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">

<android.support.constraint.Guideline
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/guideline40PercentVertical"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.35" />


<TextView
    android:id="@+id/tvPageHeader"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="30dp"
    android:text="Your detail"
    android:textAlignment="center"
    android:textSize="25sp"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<TextView
    android:id="@+id/tvLabelName"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="name"
    android:textAlignment="viewEnd"
    app:layout_constraintRight_toLeftOf="@+id/guideline40PercentVertical"
    android:layout_marginRight="10dp"
    android:layout_marginTop="62dp"
    app:layout_constraintTop_toBottomOf="@+id/tvPageHeader" />

<TextView
    android:id="@+id/tvName"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    tools:text="Mr. Ian Citizen"
    android:layout_marginLeft="10dp"
    app:layout_constraintLeft_toLeftOf="@+id/guideline40PercentVertical"
    app:layout_constraintBaseline_toBaselineOf="@+id/tvLabelName" />


<TextView
    android:id="@+id/tvLabelMobile"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="mobile"
    android:layout_marginRight="2dp"
    app:layout_constraintRight_toRightOf="@+id/tvLabelName"
    android:layout_marginTop="10dp"
    app:layout_constraintTop_toBottomOf="@+id/tvLabelName" />

<TextView
    android:id="@+id/tvMobile"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    tools:text="189232323"
    android:layout_marginLeft="0dp"
    app:layout_constraintLeft_toLeftOf="@+id/tvName"
    app:layout_constraintBaseline_toBaselineOf="@+id/tvLabelMobile" />



<TextView
    android:id="@+id/tvLabelEmail"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="email"
    android:layout_marginRight="2dp"
    app:layout_constraintRight_toRightOf="@+id/tvLabelMobile"
    android:layout_marginTop="10dp"
    app:layout_constraintTop_toBottomOf="@+id/tvLabelMobile" />

<TextView
    android:id="@+id/tvEmail"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    tools:text="Ian.citizen@app.com"
    android:layout_marginLeft="0dp"
    app:layout_constraintLeft_toLeftOf="@+id/tvMobile"
    app:layout_constraintBaseline_toBaselineOf="@+id/tvLabelEmail" />


<TextView
    android:id="@+id/tvLabelResidential"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="residential"
    android:layout_marginRight="2dp"
    app:layout_constraintRight_toRightOf="@+id/tvLabelEmail"
    android:layout_marginTop="10dp"
    app:layout_constraintTop_toBottomOf="@+id/tvLabelEmail" />

<TextView
    android:id="@+id/tvResidential"
    android:maxLines="2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    tools:text="11 Frozan St, Brookvale 01-1000"
    android:layout_marginLeft="0dp"
    app:layout_constraintLeft_toLeftOf="@+id/tvEmail"
    app:layout_constraintBaseline_toBaselineOf="@+id/tvLabelResidential" />


<TextView
    android:id="@+id/tvLabelPostal"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="postal"
    android:layout_marginRight="2dp"
    app:layout_constraintRight_toRightOf="@+id/tvLabelResidential"
    android:layout_marginTop="10dp"
    app:layout_constraintTop_toBottomOf="@+id/tvLabelResidential" />

<TextView
    android:id="@+id/tvPostal"
    android:maxLines="2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    tools:text="1 Rozan St, Brookvale 01-1000"
    android:layout_marginLeft="0dp"
    app:layout_constraintLeft_toLeftOf="@+id/tvResidential"
    app:layout_constraintBaseline_toBaselineOf="@+id/tvLabelPostal" />

<Button
    android:id="@+id/btnDone"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="0dp"
    android:layout_marginLeft="0dp"
    android:layout_marginRight="0dp"
    android:text="@string/controller_origination_review_personal_detail_button_done"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent" />

[

Answer 1

我认为您应该像这样更改代码：

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">

<ScrollView
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    android:layout_marginBottom="0dp"
    app:layout_constraintBottom_toTopOf="@+id/btnDone">

    <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.constraint.Guideline
            android:id="@+id/guideline40PercentVertical"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintGuide_percent="0.35"
            tools:layout_editor_absoluteX="137dp"
            tools:layout_editor_absoluteY="62dp" />


        <TextView
            android:id="@+id/tvPageHeader"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="30dp"
            android:text="Your detail"
            android:textAlignment="center"
            android:textSize="25sp"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/tvLabelName"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginEnd="10dp"
            android:layout_marginRight="10dp"
            android:layout_marginTop="62dp"
            android:text="name"
            android:textAlignment="viewEnd"
            app:layout_constraintRight_toLeftOf="@+id/guideline40PercentVertical"
            app:layout_constraintTop_toBottomOf="@+id/tvPageHeader" />

        <TextView
            android:id="@+id/tvName"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_marginStart="10dp"
            app:layout_constraintBaseline_toBaselineOf="@+id/tvLabelName"
            app:layout_constraintLeft_toLeftOf="@+id/guideline40PercentVertical"
            tools:text="Mr. Ian Citizen" />


        <TextView
            android:id="@+id/tvLabelMobile"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="2dp"
            android:layout_marginRight="2dp"
            android:layout_marginTop="10dp"
            android:text="mobile"
            app:layout_constraintRight_toRightOf="@+id/tvLabelName"
            app:layout_constraintTop_toBottomOf="@+id/tvLabelName" />

        <TextView
            android:id="@+id/tvMobile"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintBaseline_toBaselineOf="@+id/tvLabelMobile"
            app:layout_constraintLeft_toLeftOf="@+id/tvName"
            tools:text="189232323" />


        <TextView
            android:id="@+id/tvLabelEmail"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="2dp"
            android:layout_marginRight="2dp"
            android:layout_marginTop="10dp"
            android:text="email"
            app:layout_constraintRight_toRightOf="@+id/tvLabelMobile"
            app:layout_constraintTop_toBottomOf="@+id/tvLabelMobile" />

        <TextView
            android:id="@+id/tvEmail"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintBaseline_toBaselineOf="@+id/tvLabelEmail"
            app:layout_constraintLeft_toLeftOf="@+id/tvMobile"
            tools:text="Ian.citizen@app.com" />


        <TextView
            android:id="@+id/tvLabelResidential"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="2dp"
            android:layout_marginRight="2dp"
            android:layout_marginTop="10dp"
            android:text="residential"
            app:layout_constraintRight_toRightOf="@+id/tvLabelEmail"
            app:layout_constraintTop_toBottomOf="@+id/tvLabelEmail" />

        <TextView
            android:id="@+id/tvResidential"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:maxLines="2"
            app:layout_constraintBaseline_toBaselineOf="@+id/tvLabelResidential"
            app:layout_constraintLeft_toLeftOf="@+id/tvEmail"
            tools:text="11 Frozan St, Brookvale 01-1000" />


        <TextView
            android:id="@+id/tvLabelPostal"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="2dp"
            android:layout_marginRight="2dp"
            android:layout_marginTop="10dp"
            android:text="postal"
            app:layout_constraintRight_toRightOf="@+id/tvLabelResidential"
            app:layout_constraintTop_toBottomOf="@+id/tvLabelResidential" />

        <TextView
            android:id="@+id/tvPostal"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:maxLines="2"
            app:layout_constraintBaseline_toBaselineOf="@+id/tvLabelPostal"
            app:layout_constraintLeft_toLeftOf="@+id/tvResidential"
            tools:text="1 Rozan St, Brookvale 01-1000" />
    </android.support.constraint.ConstraintLayout>
</ScrollView>

<Button
    android:id="@+id/btnDone"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="_button_done"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent" /></android.support.constraint.ConstraintLayout>

滚动视图中的 ConstraintLayout

ConstraintLayout within scrollview

android

android-layout

android-constraintlayout

constraint-layout-chains