android ListView显示和隐藏二级内容

1.概述

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

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

2.代码实现

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

[java] view
plaincopy

package com.example.dropdownlist;

public class ListItem {

public String title;

public String subTitle;

}

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

[java] view
plaincopy

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。

[html] view
plaincopy

<?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包含哪些内容。

[html] view
plaincopy

<?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。

[java] view
plaincopy

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来达到二级内容显示/隐藏的目的。

下面两段代码是重点：

[java] view
plaincopy

if (lDropDown.get(position)) {

holder.llBottom.setVisibility(View.VISIBLE); // 显示下拉内容

} else {

holder.llBottom.setVisibility(View.GONE); // 隐藏下拉内容

}

[java] view
plaincopy

// 顶部控件组（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.csdn.net/detail/chadeltu/8377631