ListView的下拉抽屉效果

效果如下图:当点击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


猜你喜欢

转载自blog.csdn.net/cp1153750171/article/details/77450021