点击ListItem时展开到新视图

Question

我有一个列表视图，其中包含一些文本，如下所示

我想要将每个项目扩展为这样

我看过这个答案（如何在Android中使ListView中的单元格在被触摸时垂直展开和收缩？），它不会切换到新视图，只是改变了高度。

UPDATE:list_item.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/container1"
android:layout_width="match_parent"
android:layout_height="100dp"
android:clickable="true"
android:background="@drawable/list_selected">

<RelativeLayout

    android:id="@+id/relaboveline1"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <View
        android:id="@+id/sidebar"
        android:layout_width="15dp"
        android:layout_height="match_parent"
        android:background="#4ED6CA" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingTop="5dp"
        android:paddingBottom="5dp"
        android:weightSum="100"
        android:layout_toRightOf="@+id/sidebar"
        android:layout_toEndOf="@+id/sidebar">

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="20">

            <RelativeLayout
                android:id="@+id/cal"
                android:layout_width="60dp"
                android:layout_height="match_parent">

                <TextView
                    android:id="@+id/date"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="22"
                    android:textColor="#FF8801"
                    android:textStyle="bold"
                    android:layout_centerHorizontal="true"
                    android:textSize="35sp"
                    android:layout_alignParentTop="true" />


                <TextView
                    android:id="@+id/month"
                    android:textColor="#FF8801"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerHorizontal="true"
                    android:layout_below="@+id/date"
                    android:textSize="20sp"
                    android:text="MAY" />

                <TextView
                    android:id="@+id/year"
                    android:textColor="#FF8801"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerHorizontal="true"
                    android:layout_below="@+id/month"
                    android:textSize="20sp"
                    android:text="2015" />
            </RelativeLayout>

            <View
                android:id="@+id/divider"
                android:layout_width="1dp"
                android:layout_height="match_parent"
                android:layout_toRightOf="@+id/cal"
                android:layout_toEndOf="@+id/cal"
                android:background="#DADADA" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="60">

            <RelativeLayout
                android:id="@+id/content"

                android:layout_width="200dp"
                android:paddingTop="5dp"

                android:paddingLeft="8dp"
                android:layout_height="match_parent">

                <TextView
                    android:id="@+id/title"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="18sp"
                    android:textStyle="bold"
                    android:text="High School Graduation" />

                <TextView
                    android:id="@+id/contentdesc"
                    android:layout_width="wrap_content"
                    android:layout_marginTop="10dp"

                    android:layout_height="wrap_content"
                    android:layout_below="@+id/title"
                    android:text="@string/dummy" />
            </RelativeLayout>
        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="20">

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:paddingTop="10dp"
               >

                <TextView

                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="18sp"
                    android:layout_centerHorizontal="true"
                    android:textStyle="bold"

                    android:text="5B"
                    android:id="@+id/classDiv" />

                <RelativeLayout
                    android:layout_below="@+id/classDiv"
                    android:layout_width="40dp"
                    android:layout_height="40dp"
                    android:layout_centerHorizontal="true">

                    <ImageView
                        android:layout_width="20dp"
                        android:layout_height="20dp"
                        android:layout_centerInParent="true"
                        android:src="@drawable/star_yellow" />
                </RelativeLayout>
            </RelativeLayout>
        </LinearLayout>
    </LinearLayout>
</RelativeLayout>

<View
    android:id="@+id/line2"
    android:layout_width="match_parent"
    android:layout_height="0.5dp"
    android:layout_below="@+id/relaboveline1"
    android:background="#DADADA" />

- shine_joseph

---

这里它不会切换到新视图， 但是在你提到的例子中只有一个TextView。我想你有更多的项目。那么你是如何开始适应代码的呢？请展示你的列表项布局xml。 - greenapps

请回答我的评论/问题。请告诉我您想要使xml布局中的哪个部分可见/不可见。（在代码块中作为注释写下来）。 - greenapps

我认为提供的图片已经很清晰了。展开列表项并像第二张图片一样显示布局。 - shine_joseph

Answer 1

您可以使用ExpandableListView：

1. 您需要为子项定义一个自定义布局（即单击行时显示的详细信息）

2. 您需要定义一个 public class ExpandableAdapter extends BaseExpandableListAdapter

3. 重写方法

   public View getChildView(int groupPosition, int childPosition, boolean isLastChild, View convertView, ViewGroup parent) { .... }

   在该方法中实现您的详细布局（子项布局）。

4. 重写方法

   public View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent) { ... }

   在该方法中实现与ListView类似的布局。

5. 将自定义适配器设置到ExpandableListView实例中

如果您想要更多信息，请查看我在这里的帖子。

- FrancescoAzzola

Answer 2

你是否尝试过每个组视图只有一个子视图的可扩展列表视图？这样你就可以随意展开和折叠行。

- Tofasio