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();
- }
- });
代码部分就讲到这里,大伙可以下载源码!