滚动视图中的约束布局答案

【问题标题】：ConstraintLayout within scrollview滚动视图中的约束布局
【发布时间】：2017-10-09 01:39:34
【问题描述】：

我正在寻找构建一个 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" />

[

【问题讨论】：

把Button放到ScrollView外面
@Selvin ScrollView 在这里不能有多个子级，同时使用 ConstraintLayout 和 Button
“在ScrollView之外”有什么不明白的地方？喜欢<RelativeLayout><Button at parent bottom/><ScrollView top of parent and above button/></RelativeLayout>

标签： android android-layout android-constraintlayout constraint-layout-chains

【解决方案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>

【讨论】：

+1 但将ScrollView 的底部限制在按钮顶部并关闭ConstraintLayout。
感谢您的回答。它工作得很好，我希望在 Landscapeview 期间从按钮“完成”和邮政地址之间有一个一致的填充。 Bcz 我在纵向上有填充
太棒了，这也解决了我的问题，为什么我们在ScrollView 的高度/宽度上需要'0dp'？
有没有办法避免 ConstraintLayout 的嵌套？