滚动视图中的约束布局

Posted 2023-04-18

技术标签:

【中文标题】滚动视图中的约束布局【英文标题】：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_
android:layout_>

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


<TextView
    android:id="@+id/tvPageHeader"
    android:layout_
    android:layout_
    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_
    android:layout_
    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_
    android:layout_
    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_
    android:layout_
    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_
    android:layout_
    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_
    android:layout_
    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_
    android:layout_
    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_
    android:layout_
    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_
    android:layout_
    tools:text="11 Frozan St, ***vale 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_
    android:layout_
    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_
    android:layout_
    tools:text="1 Rozan St, ***vale 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_
    android:layout_
    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之外”有什么不明白的地方？喜欢

&lt;RelativeLayout&gt;&lt;Button at parent bottom/&gt;&lt;ScrollView top of parent and above button/&gt;&lt;/RelativeLayout&gt;

【参考方案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_
android:layout_>

<ScrollView
    android:layout_
    android:layout_
    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_
        android:layout_>

        <android.support.constraint.Guideline
            android:id="@+id/guideline40PercentVertical"
            android:layout_
            android:layout_
            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_
            android:layout_
            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_
            android:layout_
            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_
            android:layout_
            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_
            android:layout_
            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_
            android:layout_
            app:layout_constraintBaseline_toBaselineOf="@+id/tvLabelMobile"
            app:layout_constraintLeft_toLeftOf="@+id/tvName"
            tools:text="189232323" />


        <TextView
            android:id="@+id/tvLabelEmail"
            android:layout_
            android:layout_
            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_
            android:layout_
            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_
            android:layout_
            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_
            android:layout_
            android:maxLines="2"
            app:layout_constraintBaseline_toBaselineOf="@+id/tvLabelResidential"
            app:layout_constraintLeft_toLeftOf="@+id/tvEmail"
            tools:text="11 Frozan St, ***vale 01-1000" />


        <TextView
            android:id="@+id/tvLabelPostal"
            android:layout_
            android:layout_
            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_
            android:layout_
            android:maxLines="2"
            app:layout_constraintBaseline_toBaselineOf="@+id/tvLabelPostal"
            app:layout_constraintLeft_toLeftOf="@+id/tvResidential"
            tools:text="1 Rozan St, ***vale 01-1000" />
    </android.support.constraint.ConstraintLayout>
</ScrollView>

<Button
    android:id="@+id/btnDone"
    android:layout_
    android:layout_
    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 的嵌套？

以上是关于滚动视图中的约束布局的主要内容，如果未能解决你的问题，请参考以下文章

使用约束布局或android中的任何其他方式进行垂直滚动的粘性视图

分页滚动视图约束布局问题

Xamarin iOS：滚动视图中的自动布局？

滚动视图内的Android约束布局高度无效

带有约束的滚动视图自动布局问题 xcode 8

我的带有自动布局约束的 Swift 4 UIScrollView 没有滚动