ListView的下拉抽屉效果

来源：互联网发布：农村上网数据编辑：程序博客网时间：2024/06/16 20:53

效果如下图：当点击listview中的item时，下方会像抽屉一下显示一个新的布局出来，当重复点击同一个item或者点击别的item，上个展示出来的布局就会隐藏。

效果图

实现起来也很简单，就是在listview的item中添加一个监听事件，监听用户是否点击了item，点击了相应item则会在相应的下面显示布局。将界面中其他的以及显示的隐藏起来。下面看一下核心代码：

这个demo主要是给刚刚接触Android的小白看的。博主自己也是小白希望各位大牛指导指导！

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="wrap_content"    android:orientation="vertical"    >    <RelativeLayout        android:id="@+id/list_item"        android:layout_width="match_parent"        android:layout_height="70dp">        <ImageView            android:id="@+id/imageview"            android:layout_width="50dp"            android:layout_height="50dp"            android:layout_centerVertical="true"            android:layout_marginLeft="10dp"            android:src="@mipmap/ic_launcher" />        <TextView            android:id="@+id/tv_test"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_centerVertical="true"            android:layout_marginLeft="10dp"            android:layout_toRightOf="@id/imageview"            android:text="这个是测试用条目" />        <ImageView            android:id="@+id/checkbox"            android:layout_width="28dp"            android:layout_height="28dp"            android:layout_alignParentRight="true"            android:layout_centerVertical="true"            android:layout_marginRight="10dp"            android:background="@drawable/right_icon_selector"            android:clickable="true"            />    </RelativeLayout>    <include layout="@layout/item_hide_layout"        /></LinearLayout>

下面点击后要显示的布局：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:background="#bcb9b9"    android:id="@+id/ll_hide"    android:layout_width="match_parent"    android:layout_height="50dp"    android:orientation="horizontal"    android:visibility="gone"    >    <TextView    android:id="@+id/hide_1"    android:layout_width="0dp"    android:layout_height="match_parent"    android:layout_weight="1"    android:gravity="center"    android:text="收藏" />    <TextView    android:id="@+id/hide_2"    android:layout_width="0dp"    android:layout_height="match_parent"    android:layout_weight="1"    android:gravity="center"    android:text="查看详情" />    <TextView    android:id="@+id/hide_3"    android:layout_width="0dp"    android:layout_height="match_parent"    android:layout_weight="1"    android:gravity="center"    android:text="分享" />    <TextView    android:id="@+id/hide_4"    android:layout_width="0dp"    android:layout_height="match_parent"    android:layout_weight="1"    android:gravity="center"    android:text="删除" />    <TextView    android:id="@+id/hide_5"    android:layout_width="0dp"    android:layout_height="match_parent"    android:layout_weight="1"    android:gravity="center"    android:text="属性" />    </LinearLayout>

适配器：

package com.example.administrator.liststretchdemo.adapter;import android.content.Context;import android.util.Log;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;import com.example.administrator.liststretchdemo.R;import java.util.ArrayList;/** * Created by Administrator on 2017/8/17. */public class MyAdapter extends BaseAdapter implements View.OnClickListener {    private ArrayList<String> list = null;    private Context context = null;    private int clickPosition = -1;//记录用户点击了的item    public Boolean flag = false; //标识下拉view的显示状态    public MyAdapter(Context context, ArrayList<String> list){        this.context = context;        this.list = list;    }    @Override    public int getCount() {        return list.size();    }    @Override    public Object getItem(int position) {        return list.get(position);    }    @Override    public long getItemId(int position) {        return position;    }      @Override    public View getView(final int position, View convertView, ViewGroup parent) {        final MyViewHolder vh;        if (convertView == null) {            convertView = View.inflate(context, R.layout.item_layout, null);            vh = new MyViewHolder(convertView);            convertView.setTag(vh);        } else {            vh = (MyViewHolder) convertView.getTag();        }        vh.tv_test.setText(list.get(position));          //判断用户是不是点击了同一个item        if (clickPosition == position) {           //根据flage来处理下拉view是该消失 还是该展开状态            if(flag){                vh.ll_hide.setVisibility(View.GONE);                flag = false;            }else {                vh.ll_hide.setVisibility(View.VISIBLE);                flag = true;            }        } else {            //当填充的条目position不是刚才点击所标记的position时，让其隐藏，状态图标为false。            vh.ll_hide.setVisibility(View.GONE);            Log.e("listview","状态改变");        }        vh.hide_1.setOnClickListener(this);        vh.hide_2.setOnClickListener(this);        vh.hide_3.setOnClickListener(this);        vh.hide_4.setOnClickListener(this);        vh.hide_5.setOnClickListener(this);        vh.listtiem.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {               // Toast.makeText(context, "被点了", Toast.LENGTH_SHORT).show();                clickPosition = position;//记录点击的position                notifyDataSetChanged();//刷新adapter重新填充条目。在重新填充的过程中，被记录的position会做展开或隐藏的动作，具体的判断看上面代码                //在此处需要明确的一点是，当adapter执行刷新操作时，整个getview方法会重新执行，也就是条目重新做一次初始化被填充数据。            }        });          vh.selectorImg.setOnClickListener(new View.OnClickListener() {              @Override              public void onClick(View v) {                  if (vh.selectorImg.isSelected()) {                      vh.selectorImg.setSelected(false);                      //取消选中时的业务代码                      Log.e("but", "onClick: 没选中状态");                  } else {                      vh.selectorImg.setSelected(true);                      //做当被选中时的业务代码                      Log.e("but", "onClick: 选中状态");                  }              }          });        return convertView;    }    @Override    public void onClick(View v) {        switch (v.getId()) {            case R.id.hide_1:                Toast.makeText(context, "收藏", Toast.LENGTH_SHORT).show();                break;            case R.id.hide_2:                Toast.makeText(context, "查看详情", Toast.LENGTH_SHORT).show();                break;            case R.id.hide_3:                Toast.makeText(context, "分享", Toast.LENGTH_SHORT).show();                break;            case R.id.hide_4:                Toast.makeText(context, "删除", Toast.LENGTH_SHORT).show();                break;            case R.id.hide_5:                Toast.makeText(context, "属性", Toast.LENGTH_SHORT).show();                break;        }    }    class MyViewHolder {        View itemView;        TextView tv_test;        TextView hide_1, hide_2, hide_3, hide_4, hide_5;        ImageView selectorImg;        LinearLayout ll_hide;        RelativeLayout listtiem;        public MyViewHolder(View itemView) {            this.itemView = itemView;            tv_test = (TextView) itemView.findViewById(R.id.tv_test);            selectorImg = (ImageView) itemView.findViewById(R.id.checkbox);            hide_1 = (TextView) itemView.findViewById(R.id.hide_1);            hide_2 = (TextView) itemView.findViewById(R.id.hide_2);            hide_3 = (TextView) itemView.findViewById(R.id.hide_3);            hide_4 = (TextView) itemView.findViewById(R.id.hide_4);            hide_5 = (TextView) itemView.findViewById(R.id.hide_5);            ll_hide = (LinearLayout) itemView.findViewById(R.id.ll_hide);            listtiem = (RelativeLayout) itemView.findViewById(R.id.list_item);        }    }}

主要代码就这些。这些代码主要参考了http://www.cnblogs.com/epmouse/p/5555264.html的代码来的，将demo改成了Android studio 的项目。

如果有什么问题希望大家一起探讨一起进步。博主也是刚接触Android的小白。

demo 下载：

GitHub

https://github.com/cp1153750171/ChenpCode.git

阅读全文

1 0