android ListView显示和隐藏二级内容

1.概述

android开发中，有时候发现ListView每一项内容比较多，展现全部内容会影响美观，且整个手机屏显示不了几条记录。这时需要筛选重点内容进行显示，而其他内容隐藏起来，当用户点击感兴趣的记录时才显示其他相对次要或详细信息。

本文将介绍一种实现上述功能点的listview使用样例，希望有所帮助！先上图：

2.代码实现

首先，介绍数据对象，比较简单。

package com.example.dropdownlist;

public class ListItem {
	public String title;
	public String subTitle;
}

接下来，介绍MainActivity，其中，最重要的是MyAdapter对象adapter。后面将重点介绍该adapter是如何实现显示/隐藏二级内容的。

package com.example.dropdownlist;

import java.util.ArrayList;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.widget.ListView;

public class MainActivity extends Activity {

	private ListView lvContent;
	
	private ArrayList<ListItem> alItems;
	private MyAdapter adapter;
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		lvContent = (ListView) this.findViewById(R.id.lv_content);
		
		initData();
	}
	
	/**
	 * 初始化内容
	 */
	private void initData()
	{
		alItems = new ArrayList<ListItem>();
		
		// 一共20个item
		for (int i = 0; i < 20; i++) {
			ListItem item = new ListItem();
			item.title = "Title - " + i;
			item.subTitle = "Subtitle - " + i;
			alItems.add(item);
		}
		
		adapter = new MyAdapter(this, alItems);
		lvContent.setAdapter(adapter);
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.activity_main, menu);
		return true;
	}

}

下面是activity_main.xml布局文件，简单，就一个ListView。

<?xml version="1.0" encoding="UTF-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <ListView 
	 	android:id="@+id/lv_content"       
      	android:layout_width="match_parent" 
      	android:layout_height="wrap_content"
      	android:choiceMode="singleChoice"
      	android:scrollbars="none"
      	android:cacheColorHint="@android:color/transparent"
      	/>

</RelativeLayout>

接下来是list_item.xml布局文件，表示每一个ListView item包含哪些内容。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="0.0dip"
    android:orientation="vertical" >

    <RelativeLayout
        android:id="@+id/rl_top_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="0.0dip"
        android:background="@drawable/bg_list_item"
        android:clickable="true"
        android:padding="5.0dip" >

        <ImageView
            android:id="@+id/iv_logo"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:background="@drawable/shape_imageview"
            android:src="@drawable/default_pic"
            android:layout_marginLeft="10dip"
            android:padding="2.0dip" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_centerVertical="true"
            android:layout_toRightOf="@+id/iv_logo"
            android:orientation="vertical"
            android:paddingLeft="5dip" >

            <TextView
                android:id="@+id/tv_title"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:singleLine="true"
                android:textColor="@color/white"
                android:textSize="18sp"
                android:layout_marginLeft="5dip"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/tv_subtitle"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:singleLine="true"
                android:textColor="@color/white"
                android:textSize="16sp"
                android:layout_marginLeft="10dip" />
        </LinearLayout>
    </RelativeLayout>

    <LinearLayout
        android:id="@+id/ll_bottom_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/bkg_drop_area"
        android:gravity="center_vertical"
        android:orientation="horizontal"
        android:padding="5dip"
        android:visibility="gone" >

        <TextView
            android:id="@+id/tv_btn1"
            android:layout_width="0.0dip"
            android:layout_height="wrap_content"
            android:layout_weight="1.0"
            android:drawableTop="@drawable/bg_btn"
            android:gravity="center_horizontal"
            android:padding="3dip"
            android:text="@string/tv_btn1"
            android:textColor="@color/white"
            android:textSize="12sp" >
        </TextView>

        <TextView
            android:id="@+id/tv_btn2"
            android:layout_width="0.0dip"
            android:layout_height="wrap_content"
            android:layout_weight="1.0"
            android:drawableTop="@drawable/bg_btn"
            android:gravity="center_horizontal"
            android:padding="3dip"
            android:text="@string/tv_btn2"
            android:textColor="@color/white"
            android:textSize="12sp" >
        </TextView>

        <TextView
            android:id="@+id/tv_btn3"
            android:layout_width="0.0dip"
            android:layout_height="wrap_content"
            android:layout_weight="1.0"
            android:drawableTop="@drawable/bg_btn"
            android:gravity="center_horizontal"
            android:padding="3dip"
            android:text="@string/tv_btn3"
            android:textColor="@color/white"
            android:textSize="12sp" >
        </TextView>
    </LinearLayout>

</LinearLayout>

其中，需要重点关注RelativeLayout控件（android:id="@+id/rl_top_bar"）和LinearLayout控件（android:id="@+id/ll_bottom_bar"）。通过改变LinearLayout控件的visibility属性来显示或隐藏其中的子项内容，也就是二级内容。

最后，重点介绍一下MyAdapter。

package com.example.dropdownlist;

import java.util.ArrayList;
import java.util.List;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;
import android.widget.Toast;

class ViewHolder {
	// 顶部控件
	public RelativeLayout rlTop;
	public ImageView ivLogo;
	public TextView tvTitle;
	public TextView tvSubTitle;
	// 底部控件
	public LinearLayout llBottom;
	public TextView tv1;
	public TextView tv2;
	public TextView tv3;
}

public class MyAdapter extends BaseAdapter {

	private Context mContext = null;
	private LayoutInflater mInflater = null;
	private List<ListItem> lData = null;
	// 用一组list保存下拉状态（true - 显示下拉， false - 隐藏下拉）
	public ArrayList<Boolean> lDropDown;

	public MyAdapter(Context context, List<ListItem> list) {
		super();
		this.mContext = context;
		this.mInflater = LayoutInflater.from(context);
		this.lData = list;

		// 初始状态，所有都不显示下拉
		lDropDown = new ArrayList<Boolean>();
		for (int i = 0; i < lData.size(); i++) {
			lDropDown.add(false);
		}
	}

	@Override
	public int getCount() {
		return lData.size();
	}

	@Override
	public Object getItem(int arg0) {
		return null;
	}

	@Override
	public long getItemId(int position) {
		return 0;
	}

	@Override
	public View getView(int position, View convertView, ViewGroup parent) {
		ViewHolder holder = null;
		if (convertView == null) {
			holder = new ViewHolder();
			convertView = mInflater.inflate(R.layout.list_item, null);

			holder.rlTop = (RelativeLayout) convertView
					.findViewById(R.id.rl_top_bar);
			holder.ivLogo = (ImageView) convertView.findViewById(R.id.iv_logo);
			holder.tvTitle = (TextView) convertView.findViewById(R.id.tv_title);
			holder.tvSubTitle = (TextView) convertView
					.findViewById(R.id.tv_subtitle);
			holder.llBottom = (LinearLayout) convertView
					.findViewById(R.id.ll_bottom_bar);
			holder.tv1 = (TextView) convertView.findViewById(R.id.tv_btn1);
			holder.tv2 = (TextView) convertView.findViewById(R.id.tv_btn2);
			holder.tv3 = (TextView) convertView.findViewById(R.id.tv_btn3);
			convertView.setTag(holder);
		} else {
			holder = (ViewHolder) convertView.getTag();
		}

		ListItem item = lData.get(position);

		holder.tvTitle.setText(item.title);
		holder.tvSubTitle.setText(item.subTitle);

		if (lDropDown.get(position)) {
			holder.llBottom.setVisibility(View.VISIBLE);	// 显示下拉内容
		} else {
			holder.llBottom.setVisibility(View.GONE);		// 隐藏下拉内容
		}

		final int index = position;
		
		// 顶部控件组（RelativeLayout）响应点击操作，用于显示/隐藏底部控件组（下拉内容）
		holder.rlTop.setOnClickListener(new View.OnClickListener() {

			@Override
			public void onClick(View v) {
				boolean bFlagTemp = lDropDown.get(index);
				for (int i = 0; i < lData.size(); i++) {
					lDropDown.set(i, false);
				}
				lDropDown.set(index, !bFlagTemp);
				notifyDataSetChanged();
			}
		});

		holder.tv1.setOnClickListener(new View.OnClickListener() {

			@Override
			public void onClick(View v) {
				Toast.makeText(mContext, "list item - " + index + ", btn 1",
						Toast.LENGTH_SHORT).show();
			}
		});

		holder.tv2.setOnClickListener(new View.OnClickListener() {

			@Override
			public void onClick(View v) {
				Toast.makeText(mContext, "list item - " + index + ", btn 2",
						Toast.LENGTH_SHORT).show();
			}
		});

		holder.tv3.setOnClickListener(new View.OnClickListener() {

			@Override
			public void onClick(View v) {
				Toast.makeText(mContext, "list item - " + index + ", btn 3",
						Toast.LENGTH_SHORT).show();
			}
		});

		return convertView;
	}

}

仔细观察这部分代码，大伙会发现，其实就是利用lDropDown来记录着每一项listview item二级内容的显示/隐藏状态。每次点击listview item时会改变lDropDown开关序列，并刷新整个listview来达到二级内容显示/隐藏的目的。

下面两段代码是重点：

		if (lDropDown.get(position)) {
			holder.llBottom.setVisibility(View.VISIBLE);	// 显示下拉内容
		} else {
			holder.llBottom.setVisibility(View.GONE);		// 隐藏下拉内容
		}

		// 顶部控件组（RelativeLayout）响应点击操作，用于显示/隐藏底部控件组（下拉内容）
		holder.rlTop.setOnClickListener(new View.OnClickListener() {

			@Override
			public void onClick(View v) {
				boolean bFlagTemp = lDropDown.get(index);
				for (int i = 0; i < lData.size(); i++) {
					lDropDown.set(i, false);
				}
				lDropDown.set(index, !bFlagTemp);
				notifyDataSetChanged();
			}
		});

代码部分就讲到这里，大伙可以下载源码！

3.源码

http://download.youkuaiyun.com/detail/chadeltu/8377631