ScrollView 根目录中的 ConstraintLayout 未按预期工作答案

【问题标题】：ConstraintLayout inside ScrollView root not working as expectedScrollView 根目录中的 ConstraintLayout 未按预期工作
【发布时间】：2018-07-04 10:37:17
【问题描述】：

我在ScrollView 中有一个ConstraintLayout，这是我的布局的根视图。一旦设备的高度小于布局所需的高度，我希望 ScrollView 开始滚动。

我的布局 xml 是：

<?xml version="1.0" encoding="utf-8"?>
<ScrollView android:layout_width="match_parent"
android:layout_height="match_parent"
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"
tools:context="com.clickagee.babybind.AccountSettingActivity"
android:descendantFocusability="beforeDescendants"
android:focusableInTouchMode="true"
android:fillViewport="true">

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/tv_account_title"
        style="@style/textXLargePurple"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="@dimen/margin_padding_size_medium"
        android:layout_marginTop="@dimen/margin_padding_size_medium"
        android:text="@string/account"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/btn_add_partner"
        style="@style/button"
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:layout_marginEnd="@dimen/margin_padding_size_medium"
        android:background="@drawable/custom_button_purple_outline"
        android:paddingEnd="@dimen/margin_padding_size_medium"
        android:paddingStart="@dimen/margin_padding_size_medium"
        android:text="@string/add_partner"
        android:textColor="@color/colorAccent"
        app:layout_constraintBottom_toBottomOf="@id/tv_account_title"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@id/tv_account_title" />


    <LinearLayout
        android:id="@+id/ll_upload_change_photo_pane"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/margin_padding_size_large"
        android:orientation="vertical"
        app:layout_constraintEnd_toStartOf="parent"
        app:layout_constraintStart_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/btn_add_partner">

        <de.hdodenhof.circleimageview.CircleImageView
            android:id="@+id/civ_change_upload_photo"
            android:layout_width="130dp"
            android:layout_height="130dp"
            android:src="@drawable/ic_upload_user_image" />

        <TextView
            android:id="@+id/tv_upload_change_photo"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="@string/upload_photo" />

    </LinearLayout>

    <android.support.design.widget.TextInputLayout
        android:id="@+id/til_user_name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginEnd="@dimen/margin_padding_size_medium"
        android:layout_marginStart="@dimen/margin_padding_size_medium"
        android:layout_marginTop="@dimen/margin_padding_size_medium"
        app:layout_constraintTop_toBottomOf="@id/ll_upload_change_photo_pane">

        <android.support.design.widget.TextInputEditText
            android:id="@+id/et_user_name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="@string/name_hint"
            android:inputType="textCapWords"
            android:lines="1"
            android:maxLines="1"
            android:singleLine="true"
            android:paddingBottom="@dimen/margin_padding_size_medium"/>

    </android.support.design.widget.TextInputLayout>

    <TextView
        android:id="@+id/tv_gender_account_setting"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="@dimen/margin_padding_size_medium"
        android:layout_marginTop="@dimen/margin_padding_size_small"
        android:text="@string/gender"
        android:textColor="@color/light_grey"
        android:textSize="@dimen/text_size_small"
        app:layout_constraintTop_toBottomOf="@id/til_user_name" />

    <RadioGroup
        android:id="@+id/rg_user_gender"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginEnd="@dimen/margin_padding_size_medium"
        android:layout_marginStart="@dimen/margin_padding_size_medium"
        android:layout_marginTop="@dimen/margin_padding_size_small"
        android:orientation="horizontal"
        android:weightSum="3"
        app:layout_constraintTop_toBottomOf="@id/tv_gender_account_setting">

        <RadioButton
            android:id="@+id/rb_user_male_account_settings"
            style="@style/textLarge"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="@dimen/margin_padding_size_medium"
            android:layout_weight="1"
            android:background="@drawable/rbtn_selector"
            android:button="@drawable/custom_radio_button_male"
            android:padding="@dimen/margin_padding_size_small"
            android:paddingEnd="@dimen/margin_padding_size_medium"
            android:text="@string/male"
            android:ellipsize="end"
            android:maxLines="1"
            android:textColor="@color/radio_button_text_colors" />

        <RadioButton
            android:id="@+id/rb_user_female_account_settings"
            style="@style/textLarge"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="@dimen/margin_padding_size_medium"
            android:layout_weight="1"
            android:background="@drawable/rbtn_selector"
            android:button="@drawable/custom_radio_button_female"
            android:padding="@dimen/margin_padding_size_small"
            android:paddingEnd="@dimen/margin_padding_size_medium"
            android:text="@string/female"
            android:ellipsize="end"
            android:maxLines="1"
            android:textColor="@color/radio_button_text_colors" />

        <RadioButton
            android:id="@+id/rb_user_other_account_settings"
            style="@style/textLarge"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@drawable/rbtn_selector"
            android:button="@drawable/custom_radio_button_other"
            android:padding="@dimen/margin_padding_size_small"
            android:paddingEnd="@dimen/margin_padding_size_medium"
            android:text="@string/other"
            android:ellipsize="end"
            android:maxLines="1"
            android:textColor="@color/radio_button_text_colors" />

    </RadioGroup>

    <android.support.design.widget.TextInputLayout
        android:id="@+id/til_user_phone_number"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/margin_padding_size_medium"
        app:layout_constraintTop_toBottomOf="@id/rg_user_gender">

        <android.support.design.widget.TextInputEditText
            android:id="@+id/et_user_phone_number"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginEnd="@dimen/margin_padding_size_medium"
            android:layout_marginStart="@dimen/margin_padding_size_medium"
            android:hint="@string/phone_number_hint"
            android:inputType="phone"
            android:lines="1"
            android:maxLines="1"
            android:singleLine="true"
            android:paddingBottom="@dimen/margin_padding_size_medium"/>

    </android.support.design.widget.TextInputLayout>

    <android.support.design.widget.TextInputLayout
        android:id="@+id/til_user_email"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginEnd="@dimen/margin_padding_size_medium"
        android:layout_marginStart="@dimen/margin_padding_size_medium"
        android:layout_marginTop="@dimen/margin_padding_size_medium"
        app:layout_constraintTop_toBottomOf="@id/til_user_phone_number">

        <android.support.design.widget.TextInputEditText
            android:id="@+id/et_user_email"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="@string/email_hint"
            android:inputType="textEmailAddress"
            android:lines="1"
            android:maxLines="1"
            android:singleLine="true"
            android:paddingBottom="@dimen/margin_padding_size_medium"/>

    </android.support.design.widget.TextInputLayout>

    <LinearLayout
        android:id="@+id/btn_save_details_ll"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginEnd="@dimen/margin_padding_size_medium"
        android:layout_marginStart="@dimen/margin_padding_size_medium"
        android:layout_marginTop="@dimen/margin_padding_size_large"
        android:gravity="center"
        android:orientation="horizontal"
        app:layout_constraintTop_toBottomOf="@id/til_user_email">
          <br.com.simplepass.loading_button_lib.customViews.CircularProgressButton
            android:id="@+id/btn_save_details"
            style="@style/button"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/custom_button"
            android:padding="@dimen/margin_padding_size_small"
            android:text="@string/save_details"
            android:textColor="@color/white"
            app:spinning_bar_color="@color/white"
            app:spinning_bar_padding="@dimen/spinning_bar_padding"
            app:spinning_bar_width="@dimen/spinning_bar_width" />

    </LinearLayout>

    <Button
        android:id="@+id/btn_cancel_account_settings"
        style="@style/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginEnd="@dimen/margin_padding_size_medium"
        android:layout_marginStart="@dimen/margin_padding_size_medium"
        android:layout_marginTop="16dp"
        android:background="@drawable/custom_button_purple_outline"
        android:padding="@dimen/margin_padding_size_small"
        android:text="@string/cancel"
        android:textColor="@color/colorAccent"
        app:layout_constraintTop_toBottomOf="@id/btn_save_details_ll"
        android:layout_marginBottom="@dimen/margin_padding_size_small"/>

    </android.support.constraint.ConstraintLayout>

</ScrollView>

但是，无论所需高度是否小于，我都会滚动。

这种异常行为的截图是

以下不应该发生，我在这里遗漏了什么吗？：

【问题讨论】：

我在我的项目中检查了您的代码，它的布局运行良好。它不是过度滚动。能否请您更具体地说明问题
@BrijeshJoshi 问题正是它过度滚动。对于可以容纳此高度的屏幕，它不应该滚动，但无论屏幕高度如何，它都会滚动。我想知道这个确切的代码是如何工作的。
我想知道这是否与我的ConstarintLayout 版本有关。你用的是什么ConstraintLayout 版本@BrijeshJoshi？
我正在使用1.1.2。
@BrijeshJoshi 使用1.1.2 并没有为我解决这个特殊问题，但它确实打破了我的其他布局。我不知道这个布局有什么问题

标签： android android-scrollview android-constraintlayout

【解决方案1】：

您的btn_cancel_account_settings 缺少layout_constraintBottom_toBottomOf="parent"

<Button
        android:id="@+id/btn_cancel_account_settings"
        style="@style/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginEnd="@dimen/margin_padding_size_medium"
        android:layout_marginStart="@dimen/margin_padding_size_medium"
        android:layout_marginTop="16dp"
        android:background="@drawable/custom_button_purple_outline"
        android:padding="@dimen/margin_padding_size_small"
        android:text="@string/cancel"
        android:textColor="@color/colorAccent"
        app:layout_constraintTop_toBottomOf="@id/btn_save_details_ll"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginBottom="@dimen/margin_padding_size_small"/>

【讨论】：

这样做只会在取消按钮上添加一个约束，使其位于保存按钮的底部和底部父级的顶部。我在发布之前确实尝试过这个。看看添加这个app:layout_constraintBottom_toBottomOf="parent" 会做什么here

【解决方案2】：

改变

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

【讨论】：

没有好人。不工作。如果这是导致问题的原因，我会把头撞到桌子上。加上在 ConstraintLayout 上使用 match_parent 会产生 lint 警告。

【解决方案3】：

这是因为您的文本输入字段具有默认焦点。放弃输入文本字段的焦点并添加以下属性：app:layout_constraintBottom_toBottomOf="parent" 到 btn_cancel_account_settings。

【讨论】：

什么意思，我的EditText 有默认焦点。 ScrollView 中的 android:descendantFocusability="beforeDescendants" 和 android:focusableInTouchMode="true" 行会阻止后代视图在开始时获得焦点。还将android:focusableInTouchMode="true" 添加到“取消”按钮会产生this 结果。