当前位置:   article > 正文

Android 自定义下拉菜单的实现(基于PopupWindow+RecyclerView)_android 下拉菜单

android 下拉菜单

一、引言

安卓自带的Spinner局限性较大,基本不能满足开发样式要求,当前又没有成熟的相关框架,所以决定自己使用PopupWindow实现一个下拉菜单

二、效果

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

三、代码实现

布局:
新建xml文件:layout_dropdown_menu

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="48dp">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:layout_marginLeft="12dp"
        android:id="@+id/ly_dropdown_tab">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@color/black"
            android:textSize="16sp"
            android:layout_gravity="center_vertical"
            android:id="@+id/tv_dropdown_title"/>
        <ImageView
            android:layout_width="12dp"
            android:layout_height="12dp"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="4dp"
            android:src="@drawable/ic_up"
            android:layout_marginStart="4dp"
            android:id="@+id/iv_dropdown_icon"/>
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:layout_alignParentRight="true"
        android:layout_marginRight="12dp"
        android:layout_alignParentEnd="true">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@color/black"
            android:textSize="16sp"
            android:layout_gravity="center_vertical"
            android:text="@string/choose"/>
        <ImageView
            android:layout_width="16dp"
            android:layout_height="16dp"
            android:src="@drawable/ic_choose"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="4dp"
            android:layout_marginStart="4dp" />
    </LinearLayout>

</RelativeLayout>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52

在需要使用的地方引用

<include layout="@layout/layout_dropdown_menu"/>
  • 1

为下面布局添加一个遮罩的View:
ps:比如我下拉框下面是一个rv,使用FrameLayout布局,为rv添加一个相同大小的View,来实现遮罩效果(当然有更好的实现方式欢迎私信我)

   <include layout="@layout/layout_dropdown_menu"/>

    <com.scwang.smart.refresh.layout.SmartRefreshLayout
        android:id="@+id/refreshLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="8dp">
        <com.scwang.smart.refresh.header.ClassicsHeader
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <androidx.recyclerview.widget.RecyclerView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/rv"/>

            <View
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:id="@+id/mask_view"
                android:visibility="gone"
                android:background="@color/shadow_bg"/>
        </FrameLayout>

    </com.scwang.smart.refresh.layout.SmartRefreshLayout >
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28

最后添加动画文件:
style.xm

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="popwin_anim" parent="android:Animation">
        <item name="android:windowEnterAnimation">@anim/pop_enter_anim</item>
        <item name="android:windowExitAnimation">@anim/pop_exit_anim</item>
    </style>
</resources>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

pop_enter_anim.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale
        android:duration="200"
        android:fromXScale="1.0"
        android:fromYScale="0.0"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:pivotX="50%"
        android:pivotY="0%"
        android:toXScale="1.0"
        android:toYScale="1.0" >
    </scale>

    <alpha
        android:duration="180"
        android:fromAlpha="0.0"
        android:toAlpha="1.0" />
</set>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

pop_exit_anim.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale
        android:duration="200"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:pivotX="50%"
        android:pivotY="0%"
        android:toXScale="1.0"
        android:toYScale="0.0" >
    </scale>

    <alpha
        android:duration="180"
        android:fromAlpha="1.0"
        android:toAlpha="0.0" />
</set>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

代码:
新建一个DropdownMenu类,进行基本封装

package cn.edu.swu.reptile_android.ui.base

import android.content.Context
import android.graphics.Color
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.view.animation.AnimationUtils
import android.widget.ImageView
import android.widget.LinearLayout
import android.widget.PopupWindow
import android.widget.TextView
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView
import cn.edu.swu.reptile_android.R

class DropdownMenu (
    val context: Context?
) {

    lateinit var maskView: View
    lateinit var tabView: LinearLayout
    lateinit var tabTitle: TextView
    lateinit var tabIcon: ImageView

    lateinit var data: List<String>

    private var onItemSelectListener: OnItemSelectListener? = null

    public fun init(view: View,data: List<String>) {

        this.data = data
        tabView = view.findViewById(R.id.ly_dropdown_tab)
        tabTitle = view.findViewById(R.id.tv_dropdown_title)
        tabIcon = view.findViewById(R.id.iv_dropdown_icon)
        maskView = view.findViewById(R.id.mask_view)

        //默认显示item
        tabTitle.text = data[0]

        tabView.setOnClickListener {
            //角标变化
            tabIcon.setImageResource(R.drawable.ic_down)
            //遮罩层动画
            maskView.startAnimation(
                AnimationUtils.loadAnimation(
                    context,
                    R.anim.view_mask_enter_anim
                )
            )
            //弹出popWin
            showPopupWindow(tabView)
        }

    }

    public fun setOnItemSelectListener(onItemSelectListener: OnItemSelectListener){
        this.onItemSelectListener = onItemSelectListener
    }

    interface OnItemSelectListener{
        fun onItemSelect(position: Int)
        fun onDismiss()
    }

    private fun showPopupWindow(tabView: View) {
        val contentView: View =
            LayoutInflater.from(context).inflate(R.layout.popup_dropdown_menu, null)
        val popWindow = PopupWindow(
            contentView, ViewGroup.LayoutParams.MATCH_PARENT,
            ViewGroup.LayoutParams.WRAP_CONTENT, true
        )
        popWindow.contentView = contentView

        //RV
        val dropdownRv: RecyclerView = contentView.findViewById(R.id.rv)
        dropdownRv.layoutManager = LinearLayoutManager(contentView.context)
        val adapter = BaseAdapter(R.layout.item_rv_dropdown, data) { view, s ->
            view.findViewById<TextView>(R.id.tv_item_title).text = s
            if (s == tabTitle.text) { //当前选中的item
                view.findViewById<TextView>(R.id.tv_item_title).setTextColor(Color.BLACK)
                view.findViewById<ImageView>(R.id.iv_item_icon).visibility = View.VISIBLE
            }
        }
        //select item
        adapter.setOnItemClickListener(object : BaseAdapter.OnItemClickListener {
            override fun onItemClick(position: Int) {
                popWindow.dismiss()
                tabTitle.text = data[position]
                //加载数据
                //暴露给调用者自定义选项逻辑
                onItemSelectListener?.onItemSelect(position)

            }
        })
        dropdownRv.adapter = adapter

        //弹出动画
        popWindow.animationStyle = R.style.popwin_anim

        //遮罩效果
        maskView.visibility = View.VISIBLE
        popWindow.setOnDismissListener {
            maskView.visibility = View.GONE
            tabIcon.setImageResource(R.drawable.ic_up)
            onItemSelectListener?.onDismiss()
        }

        //弹出窗口
        popWindow.showAsDropDown(tabView)
    }


}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114

最后,在Activity或者Fragment中使用:

    private fun initDropdownMenu(view: View) {
        val dropdownMenu = DropdownMenu(context)
        dropdownMenu.init(view, vm.dropdownData)
        dropdownMenu.setOnItemSelectListener(object : DropdownMenu.OnItemSelectListener {
            override fun onItemSelect(position: Int) {
                //点击item后逻辑(加载数据?)
            }
            override fun onDismiss() {

            }
        })
    }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

四、结语

自己实现的一个基于PopupWindow和RecyclerView实现的下拉菜单,几乎自己实现,可能想法不太成熟,比如遮罩的实现和对于控件的一些封装还存在一些问题,这里仅提供一些思路,有更好的想法欢迎私信讨论。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/IT小白/article/detail/111909
推荐阅读
相关标签