android - 如何实现像 Google Play 那样的可折叠视图？

Question

我想实现一个可折叠的视图，就像来自 Google Play 市场的一样。它显示内容中的许多行和一个箭头，点击箭头会显示整个内容。这是用 ExpandableListView 实现的还是有其他解决方案？

附有突出显示我正在寻找的内容的屏幕截图。谢谢。

Answer 1

有一个更简单的方法：

        final TextView descriptionText = (TextView) view.findViewById(R.id.detail_description_content);
        final TextView showAll = (TextView) view.findViewById(R.id.detail_read_all);
        showAll.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                showAll.setVisibility(View.INVISIBLE);

                descriptionText.setMaxLines(Integer.MAX_VALUE);
            }
        });

XML:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
        android:id="@+id/detail_description_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        >

        <TextView
            android:id="@+id/detail_description_content"
            android:maxLines="5"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
        <TextView
            android:id="@+id/detail_read_all"
            android:clickable="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </LinearLayout>
</ScrollView>

重要的部分是maxlines 和scrollview。这不会给出一个缓慢的动画（这将是一个更复杂的出价），而是一个即时的打开效果。

Answer 2

原谅我糟糕的英语。

基于 Warpzip 响应

res/values/strings.xml
 ...
 ...
 <string name="str_more"><![CDATA[<p><b>This is the header</b><u>( see more ..)</u>]]></string>
 <string name="str_less"><![CDATA[<p><b>This is the header</b><u>(less ..)</u>]]></string>
 <string name="str_details"><![CDATA[<p>A long string of text that do not want to show all the time.A long string of text that do not want to show all the time.A long string of text that do not want to show all the time.A long string of text that do not want to show all the time.A long string of text that do not want to show all the time.</p>]]></string>
 ...
 ...

在我们的布局中，我们可以在我们的布局中包含一个带有垂直 LinearLayout 的滚动视图（或者稍加工作的一个 RelativeLayout）。在这些：

<TextView
             android:id="@+id/txtvw_header"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_alignParentLeft="true"
             android:layout_alignParentTop="true"
             android:text="@string/str_more"
             android:textAppearance="?android:attr/textAppearanceMedium" />

         <TextView
             android:id="@+id/txtvw_detail"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_alignParentLeft="true"
             android:layout_below="@+id/txtvw_tituloEntreTodos"
             android:text="@string/str_details"
             android:textAppearance="?android:attr/textAppearanceMedium" />

最后我们的活动

 view = inflater.inflate(R.layout.f_entretodos, container, false);
         info = (TextView) view.findViewById(R.id.txtvw_header);
         fullinfo = (TextView) view.findViewById(R.id.txtvw_detail);
         info.setText(Html.fromHtml(getString(R.string.str_more)));
         fullinfo.setText(Html.fromHtml(getString(R.string.str_detail)));
         fullinfo.setVisibility(View.GONE);
         info.setOnClickListener(new OnClickListener(){

             @Override
             public void onClick(View v) {
                 // TODO Auto-generated method stub
                 if (fullinfo.isShown()){
                     fullinfo.setVisibility(View.GONE);
                     info.setText(Html.fromHtml(getString(R.string.str_more)));
                 }else{
                     fullinfo.setVisibility(View.VISIBLE);
                     info.setText(Html.fromHtml(getString(R.string.str_less)));
                 }
             }

         });

Answer 3

Warpzits 的解决方案升级（扩展任何容器内容）：

布局 XML：

<LinearLayout
    android:layout_width = "match_parent"
    android:layout_height = "wrap_content"
    android:clickable = "true"
    android:focusable = "true"
    android:orientation = "vertical"
    android:gravity="end">

    <ImageButton
      android:id = "@+id/expandImageButton"
      android:layout_width = "wrap_content"
      android:layout_height = "wrap_content"
      android:layout_margin = "12dp"
      android:background = "#00ffffff"
      android:src = "@drawable/dropdown_white"
      android:onClick="onClickExpandImageButton"/>

    <TextInputLayout
      android:id = "@+id/container"
      android:layout_width = "match_parent"
      android:layout_height = "match_parent"
      android:visibility="gone">

      <EditText
        android:layout_width = "match_parent"
        android:layout_height = "wrap_content"/>

    </TextInputLayout>

  </LinearLayout>

一个 onClick 处理程序：

public void onClickExpandImageButton(
  View expandImageButton) {

  expandImageButton
    .setRotation(
      container.getVisibility() == View.GONE ?
      180 :
      0);

  container.setVisibility(
    container.getVisibility() == View.GONE ?
    View.VISIBLE :
    View.GONE);
}

图片来自 /res/drawable/：

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">

<path
  android:fillColor="#f5f5f5"
  android:pathData="M7,10 L12,15 L17,10 Z" />
<path
  android:pathData="M0,0 L24,0 L24,24 L0,24 Z" />
</vector>