在 LinearLayout 内展开/折叠两个 CardView，但将两个 CardView 保持在屏幕边界内答案

【问题标题】：Expand/collapse two CardViews inside a LinearLayout BUT keep both CardViews inside the screen boundaries在 LinearLayout 内展开/折叠两个 CardView，但将两个 CardView 保持在屏幕边界内
【发布时间】：2017-01-03 17:43:05
【问题描述】：

现在已经工作了很多小时，但我无法提出解决方案。

我有一个包含两个 CardView 的 LinearLayout。每个 CardView 包含两个 RelativeLayouts。一种始终可见、高度固定且可点击的 RelativeLayout。第二个 RelativeLayout 可以展开/折叠。 xml结构如下：

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.v7.widget.CardView
        android:id="@+id/cardview_one"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <RelativeLayout
                android:id="@+id/visible_part_one"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:onClick="toggleCardViews">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="visible part one"/>

            </RelativeLayout>

            <com.github.aakira.expandablelayout.ExpandableRelativeLayout
                android:id="@+id/expandable_layout_one"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:ael_expanded="true"
                app:ael_duration="500"
                app:ael_interpolator="linear"
                app:ael_orientation="vertical">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="expandable part one"/>

            </com.github.aakira.expandablelayout.ExpandableRelativeLayout>

        </LinearLayout>

    </android.support.v7.widget.CardView>

    <android.support.v7.widget.CardView
        android:id="@+id/cardview_two"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <RelativeLayout
                android:id="@+id/visible_part_two"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:onClick="toggleCardViews">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="visible part two"/>

            </RelativeLayout>

            <com.github.aakira.expandablelayout.ExpandableRelativeLayout
                android:id="@+id/expandable_layout_two"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:ael_expanded="false"
                app:ael_duration="500"
                app:ael_interpolator="linear"
                app:ael_orientation="vertical">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="expandable part two"/>

            </com.github.aakira.expandablelayout.ExpandableRelativeLayout>

        </LinearLayout>

    </android.support.v7.widget.CardView>

</LinearLayout>

我想要实现的是单击折叠的 cardVie 以展开它的可展开部分，同时折叠折叠的其他卡片视图。同时，我想将两个卡片视图都保留在屏幕边界内。它应该看起来像这样。

+--LinearLayout---+
| +--CardView1---+|
| |visible part  ||
| |--------------||
| |exppanded part||
| |80% of screen|||
| |              ||
| +--------------+|
|                 |
| +--CardView2---+|
| |visible part  ||
| |20% of screen ||
| +--------------+|
+-----------------+

用户点击第一个 CardView 的可见部分后（反之亦然）：

+--LinearLayout---+
| +--CardView1---+|
| |visible part  ||
| |20% of screen ||
| +--------------+|
| +--CardView2---+|
| |visible part  ||
| |--------------||
| |exppanded part||
| |80% of screen|||
| |              ||
| +--------------+|
+-----------------+

目前，为了在折叠或展开时将两个卡片视图保持在屏幕内，尝试以编程方式更改卡片视图的权重属性，如this。此解决方案将两个卡片视图都保留在屏幕内，但过渡动画根本不流畅。我怀疑使用 ExpandableRelativeLayout 会导致问题。

有人遇到过同样的问题并想出了解决方案吗？任何帮助表示赞赏！

【问题讨论】：

也许可以使用这个库github.com/AAkira/ExpandableLayout
感谢您的评论，但我已经在使用这个库了。
我已经实现了同样的事情。为此，我创建了一个卡片视图，其中包含两种布局，一种用于折叠视图，另一种用于展开视图。能否请您发布所需的屏幕截图以便于理解？

标签： android

【解决方案1】：

到目前为止，还没有答案。与此同时，我尝试了替代方案。我发现BottomSheet 是一个非常流畅的动画解决方案。

问题：我的挑战是在两个可扩展视图之间切换，但还要确保它们都保持在屏幕边界内。

我最初的解决方案（不起作用）： 最初，我使用LinearLayout 作为父视图，并为两个子视图设置了layout_weight 属性。因此，在单击展开子视图时，另一个视图正在折叠，我正在以编程方式为每个视图设置 height。 heights 的视图切换动画非常糟糕。

底页： 对我有用的解决方案是使用来自 Android 支持库 23.2 的BottomSheet。现在我的布局由两个viewGroups、顶部view 和bottomSheet 组成。当我单击其中一个时，bottomSheet 会相应地展开或折叠。请注意，顶视图不再是 ExpandableRalativeLayout 的实例，而是在 bottomSheet 展开时重叠的 LinearLayout。

【讨论】：