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，是不是實現起來其實挺簡單的啊。