按钮与 ConstraintLayout 中的 TabLayout 重叠

Question

在 Constraintlayout 中，我使用指南来显示 tablayout 和视图，tablayout 覆盖 10%，视图覆盖其余 90% 的屏幕。在选项卡上单击时，我想显示一些从底部到屏幕 55% 的按钮，我在 55% 处使用另一个指南（用于小部件）。

这里是xml：

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

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

        <View
            android:id="@+id/view"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="#D3D3D3"
            app:layout_constraintBottom_toTopOf="@+id/glTabLayout"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <Button
            android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@null"
            android:text="Button"
            android:drawableTop="@mipmap/ic_launcher"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintRight_toLeftOf="@+id/imageView"
            app:layout_constraintTop_toBottomOf="@+id/glWidgets" />

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@mipmap/ic_launcher"
            app:layout_constraintLeft_toRightOf="@+id/button"
            app:layout_constraintRight_toLeftOf="@+id/textView"
            app:layout_constraintTop_toBottomOf="@+id/glWidgets" />

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/test"
            android:textColor="#ff0000"
            app:layout_constraintLeft_toRightOf="@+id/imageView"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/glWidgets" />

        <android.support.constraint.Guideline
            android:id="@+id/glTabLayout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            app:layout_constraintGuide_percent="0.90" />

        <android.support.constraint.Guideline
            android:id="@+id/glWidgets"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            app:layout_constraintGuide_percent="0.55" />

        <android.support.design.widget.TabLayout
            android:id="@+id/tabLayout"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@android:color/white"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/glTabLayout"
            app:tabGravity="fill"
            app:tabMode="fixed"
            app:tabTextAppearance="@android:style/TextAppearance.Widget.TabWidget" />

    </android.support.constraint.ConstraintLayout>

</layout>

在开始时选择选项卡时，小部件将像第一个屏幕截图一样显示。但是在其他选项卡上单击我希望这些小部件滑动/动画到底部，我正在将指南（用于小部件）从 55% 更改为 90%，以便它隐藏在选项卡布局后面。

动画/更新指南的代码：

    ConstraintLayout constraintLayout = binding.cl;
    ConstraintSet constraintSet = new ConstraintSet();
    constraintSet.clone(constraintLayout);
    constraintSet.setGuidelinePercent(binding.glWidgets.getId(), percent);
    TransitionManager.beginDelayedTransition(constraintLayout);
    constraintSet.applyTo(constraintLayout);

现在 imageview、textview 或其他普通视图隐藏在 tablayout 下方但 Button 与 tablayout 重叠。我希望按钮在动画时位于标签布局下方。附上屏幕截图以便更好地理解：

Answer 1

当您处于想要在视图顶部显示选项卡的模式时，您是否尝试过将按钮类型转换为 textView？

• 如果您不需要太多 Button 类，这可以作为替代方案：

使用包含文本视图和图像视图而不是按钮的布局（相对或线性）。