如何实现类似于Google Play的可折叠视图?

20

我想实现一个可折叠的视图,就像Google Play市场中的那个一样。它显示了内容的多行,以及一个箭头,点击箭头可以展示全部内容。这是使用ExpandableListView实现的吗,还是有其他的解决方案?

附上屏幕截图,突出显示我要找的内容。谢谢。enter image description here


1
这可能会有所帮助:https://dev59.com/sm435IYBdhLWcg3w3EIi - 0gravity
是的,这有点帮助,因为它实现了我正在寻找的内容,但我希望它比自定义布局更容易解决。 - Mihaela Romanca
3个回答

33

有一种更简单的方法:

        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。这不会产生缓慢的动画(那将更加复杂),而是产生即时打开的效果。


1

我英语很差,请见谅。

根据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)的scrollview。在这些布局中:
<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" />

最后,我们的Activity

 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)));
                 }
             }

         });

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接