fragment实现仿美团下拉筛选功能

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/f552126367/article/details/83688109

1、前言

在开发APP中，大家基本都会用到筛选功能，而美团、房天下、淘宝等都会有一个下拉筛选功能，其实实现起来并不是很难，先上图看一看，样式可能不太好看，还请见谅。页面筛选时有动画效果。

2、思路总结和源码

（1）首先是一个xml页面，整体思路就是上方按钮正常布局，下方通过fragment写入两个listview，因为listview是浮动的，通过控制上层listview的弹出和回收来控制弹框。具体xml代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="match_parent">
    <include layout="@layout/top"/>
    <LinearLayout
        android:id="@+id/ll_head_layout"
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:background="@color/white"
        android:gravity="center_vertical"
        android:orientation="horizontal">

        <LinearLayout
            android:id="@+id/ll_category"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@drawable/ripple_item_clicked"
            android:clickable="true"
            android:gravity="center"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/tv_category_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/iv_image"
                android:layout_centerHorizontal="true"
                android:text="分类"
                android:textColor="@color/gray_font"
                android:textSize="13sp"/>

            <ImageView
                android:id="@+id/iv_category_arrow"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:src="@mipmap/home_down_arrow"/>
        </LinearLayout>

        <View
            android:layout_width="1px"
            android:layout_height="20dp"
            android:background="@color/gray_font"/>

        <LinearLayout
            android:id="@+id/ll_sort"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@drawable/ripple_item_clicked"
            android:clickable="true"
            android:gravity="center"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/tv_sort_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/iv_image"
                android:layout_centerHorizontal="true"
                android:text="排序"
                android:textColor="@color/gray_font"
                android:textSize="13sp"/>

            <ImageView
                android:id="@+id/iv_sort_arrow"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:src="@mipmap/home_down_arrow"/>
        </LinearLayout>

        <View
            android:layout_width="1px"
            android:layout_height="20dp"
            android:background="@color/gray_font"/>

        <LinearLayout
            android:id="@+id/ll_filter"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@drawable/ripple_item_clicked"
            android:clickable="true"
            android:gravity="center"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/tv_filter_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/iv_image"
                android:layout_centerHorizontal="true"
                android:text="筛选"
                android:textColor="@color/gray_font"
                android:textSize="13sp"/>

            <ImageView
                android:id="@+id/iv_filter_arrow"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:src="@mipmap/home_down_arrow"/>
        </LinearLayout>
    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="1px"
        android:background="@color/gray_font"/>

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <ListView
            android:id="@+id/list_drop_data"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:divider="@color/white"
            android:dividerHeight="0dp"
            android:listSelector="#00000000"
            android:background="@color/white"
            android:paddingLeft="10dp">
        </ListView>
        <View
            android:id="@+id/view_mask_bg"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:alpha="0.4"
            android:visibility="gone"
            android:background="@color/gray_font"/>

        <LinearLayout
            android:id="@+id/ll_content_list_view"
            android:layout_width="match_parent"
            android:layout_height="240dp"
            android:orientation="horizontal">

            <ListView
                android:id="@+id/lv_left"
                android:layout_width="90dp"
                android:layout_height="match_parent"
                android:background="@color/gray_font"
                android:divider="@null"
                android:dividerHeight="0dp"
                android:scrollbars="none"
                android:visibility="gone"/>

            <ListView
                android:id="@+id/lv_right"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@color/white"
                android:divider="@null"
                android:dividerHeight="0dp"
                android:scrollbars="none"
                android:visibility="gone"/>
        </LinearLayout>
    </FrameLayout>
</LinearLayout>

（2）activity代码如下，主要是控制三个按钮的点击效果和弹出效果，并且来显示不同的内容。

class DropScreenActivity : BaseActivity() {
    var listData=ArrayList<String>()  //弹出内容数据列表
    var isShowing : Boolean?=false  //判断当前状态是否显示了下拉框

    private var nowPosition = -1//记住下拉内容的是哪个位置点击的，-1表示空白
    val POSITION_CATEGORY = 0 // 分类的位置
    val POSITION_SORT = 1 // 排序的位置
    val POSITION_FILTER = 2 // 筛选的位置
    var index=0
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.main_drop_screen)
        initView()
        setTitle("下拉筛选",false,null)
        registerBack()
    }

    fun initView(){
        initData()
        categoryInit()
        OrderMethod()
        secondButton()
        blankViewMethod()
    }

    /*
    * 初始化下方数据
    * */
    fun initData(){
        getValues()
        val adapter=DropScreenAdapter(this)
        list_drop_data!!.adapter=adapter
        adapter.refreshData(listData)
        list_drop_data.onItemClickListener=object : AdapterView.OnItemClickListener{
            override fun onItemClick(p0: AdapterView<*>?, p1: View?, p2: Int, p3: Long) {
                nowPosition=-1
                show(nowPosition)
                showToastShort(listData[p2])
            }

        }
    }


    /*
    * 分类筛选点击效果
    * */
    fun categoryInit(){
        //分类筛选
        ll_category!!.setOnClickListener({
            //当前
            show(POSITION_CATEGORY)
            getValues()
            val adapter=DropScreenAdapter(this)
            lv_right!!.adapter=adapter
            adapter.refreshData(listData)
            lv_right!!.onItemClickListener=object : AdapterView.OnItemClickListener{
                override fun onItemClick(p0: AdapterView<*>?, p1: View?, p2: Int, p3: Long) {
                    nowPosition=-1
                    show(nowPosition)
                    showToastShort(listData[p2])
                }
            }

        })
    }
    /*
    * 排序第二行的执行方法
    * */
    fun OrderMethod(){
        ll_sort!!.setOnClickListener( {
            show(POSITION_SORT)
            getValues()
            val adapter=DropScreenAdapter(this)
            lv_right!!.adapter=adapter
            adapter.refreshData(listData)
            lv_right!!.onItemClickListener=object : AdapterView.OnItemClickListener{
                override fun onItemClick(p0: AdapterView<*>?, p1: View?, p2: Int, p3: Long) {
                    showToastShort(listData[p2])
                }
            }
        })
    }
    /*
* 第三行的执行方法
* */
    fun secondButton(){
        ll_filter!!.setOnClickListener( {
            show(POSITION_FILTER)
            getValues()
            val adapter=DropScreenAdapter(this)
            lv_right!!.adapter=adapter
            adapter.refreshData(listData)
            lv_right!!.onItemClickListener=object : AdapterView.OnItemClickListener{
                override fun onItemClick(p0: AdapterView<*>?, p1: View?, p2: Int, p3: Long) {
                    showToastShort(listData[p2])
                }
            }
        })
    }

    /*
    * 点击空白执行的方法
    * */

    fun blankViewMethod(){
        view_mask_bg!!.setOnClickListener(View.OnClickListener {
            nowPosition=-1
            show(nowPosition)
        })
    }
    /*
    * 判断是否弹出下拉框
    * */
    // 动画显示
    fun show(position: Int) {
        //当下拉页面没显示则显示页面
        var endVal : Float= DensityUtil.dip2px(this,240f).toFloat()
        if(!isShowing!!){
            view_mask_bg.visibility=View.VISIBLE
            var alphaAnimator = ObjectAnimator.ofFloat(ll_content_list_view,"translationY", -endVal,0f)
            alphaAnimator.duration = 1000
            alphaAnimator.start()
            lv_right!!.visibility=View.VISIBLE
            isShowing=true
            nowPosition=position
            //箭头动画效果
            val animation = RotateAnimation(0f, 180f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f)
            animation.duration = 1000
            animation.fillAfter = true
            iv_category_arrow.startAnimation(animation)
            //当是空白或者是显示状态并且点击的和当前状态一致时则隐藏
        }else if(isShowing!! &&(nowPosition==-1 || (nowPosition==position))){
            view_mask_bg.visibility=View.GONE
            nowPosition=-1
            isShowing=false
            val alphaAnimator = ObjectAnimator.ofFloat(ll_content_list_view,"translationY", 0f,-endVal)
            alphaAnimator.duration = 1000
            alphaAnimator.start()

            val animation = RotateAnimation(180f, 360f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f)
            animation.duration = 1000
            animation.fillAfter = true
            iv_category_arrow.startAnimation(animation)

            //ObjectAnimator.ofFloat(llContentListView, "translationY", 0, -panelHeight).setDuration(200).start()
            //即没显示也没有隐藏说明平移了点击另一个按钮
        }else{
            nowPosition=position
        }
    }

    fun getValues(){
        listData.clear()
        ++index
        for(i in 0..20){
            listData.add(index.toString()+"、您好、欢迎来到我的程序")
        }
    }

（3）OK，是不是实现起来其实挺简单的啊。