android ListView显示和隐藏二级内容

来源：互联网发布：小t娱乐网源码编辑：程序博客网时间：2024/06/11 08:06

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

0 0