展开/折叠LinearLayout内的两个CardView但是将两个CardView保持在屏幕边界内

时间:2016-11-05 19:18:38

标签: android

现在已经花了很多时间研究这个问题,我无法提出解决方案。

我有一个包含两个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>

我想要实现的是点击折叠的卡片以展开它的可扩展部分,同时折叠折叠其他卡片视图。与此同时,我希望将两个cardview保持在屏幕边界内。看起来应该是这样的。

+--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|||
| |              ||
| +--------------+|
+-----------------+

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

任何人遇到同样的问题并提出解决方案?任何帮助表示赞赏!!

1 个答案:

答案 0 :(得分:0)

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

问题: 在我的情况下,挑战是在两个可扩展视图之间切换,但也要确保它们都保持在屏幕边界内。

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

BottomSheet: 对我有用的解决方案是使用Android支持库23.2中的BottomSheet。现在我的布局包含两个viewGroups,顶部viewbottomSheet。当我点击其中一个时,bottomSheet会相应地展开或折叠。请注意,顶部视图不再是ExpandableRalativeLayout的实例,而是展开LinearLayout时重叠的bottomSheet