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

时间:2012-07-03 13:04:22

标签: android android-layout

我希望实现一个可折叠的视图,就像Google Play市场中的一样。它显示内容中的多个行和箭头,并点击箭头显示整个内容。这是用ExpandableListView实现的还是有其他解决方案吗?

附加屏幕截图,突出显示我正在寻找的内容。 感谢。enter image description here

3 个答案:

答案 0 :(得分:30)

有一种更简单的方法:

        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 :(得分: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)。在这些:

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

         });

答案 2 :(得分: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>