安卓开发弹出式菜单的四种方案(使用PopupMenu及第三方组件)

版权声明：本文为程序园中猿原创文章，转载请注明出处 https://blog.csdn.net/yinxing2008/article/details/88876647

简要介绍

UI设计需要开发弹出式菜单,大致效果如下:

实现方案

方案一: 原生方式(最简单调用)

• main_menu.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/menu1"
          android:title="menu1"/>
    <item android:id="@+id/menu2"
          android:title="menu2"/>
</menu>

• MainActivity

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        button.setOnClickListener { onMenuClick(it) }
        custBtn.setOnClickListener {
            startActivity(Intent(this@MainActivity, CustMenuActivity::class.java))
        }
        xPopupBtn.setOnClickListener {
            startActivity(Intent(this@MainActivity, XPopupActivity::class.java))
        }
        basePopupBtn.setOnClickListener {
            startActivity(Intent(this@MainActivity, BasePopupActivity::class.java))
        }
    }

    private fun onMenuClick(view: View) {
        val popup = PopupMenu(this, view)
        popup.menuInflater.inflate(R.menu.main_menu, popup.menu)
        popup.setOnMenuItemClickListener { onMenuItemClick(it) }
        popup.show()
    }

    private fun onMenuItemClick(item: MenuItem): Boolean {
        when (item.itemId) {
            R.id.menu1 -> Toast.makeText(this, "menu1", Toast.LENGTH_SHORT).show()
            R.id.menu2 -> Toast.makeText(this, "menu2", Toast.LENGTH_SHORT).show()
            else -> {
            }
        }
        return false
    }
}

效果图:

方案二: 原生方式(定制背景、分割线、字体大小颜色,但是不能修改宽度)

• styles.xml中增加定义

<style name="custMenuStyle" parent="AppTheme">
        <item name="android:popupMenuStyle">@style/popmenuStyle</item>
        <item name="android:dropDownListViewStyle">@style/popmenuDivier</item>
        <item name="android:textAppearanceSmallPopupMenu">@style/popmeuText</item>
        <item name="android:textAppearanceLargePopupMenu">@style/popmeuText</item>
    </style>
    <!--popMenu的Style-->
    <style name="popmenuStyle" parent="@android:style/Widget.PopupMenu">
        <item name="android:popupBackground">#000000</item><!-- popMenu的背景色-->
    </style>
    <!--popmenu的字体颜色-->
    <style name="popmeuText">
        <item name="android:textColor">#FFFFFF</item>
        <item name="android:textSize">20sp</item>
        <item name="android:gravity">center</item>
    </style>
    <!--popMenu分割线的颜色-->
    <style name="popmenuDivier">
        <item name="android:divider">@color/colorAccent</item>
        <item name="android:dividerHeight">2sp</item>
    </style>

• Manifest文件定义activity时指定theme

<activity
            android:name=".CustMenuActivity"
            android:theme="@style/custMenuStyle" />

效果图:

方案三:第三方组件XPopup

• 增加依赖
  implementation 'com.lxj:xpopup:1.6.2'
• 调用样例

XPopup.Builder(this)
    .atView(it)  // 依附于所点击的View，内部会自动判断在上方或者下方显示
    .asAttachList(arrayOf("Share", "Edit"),
            null
    ) { position, text -> Toast.makeText(this, "clicked pos:$position", Toast.LENGTH_SHORT).show() }
    .show()

效果图:

方案四:第三方组件BasePopup

• 增加依赖
  implementation 'com.github.razerdp:BasePopup:2.1.9'
• 增加菜单文件popup_menu_small.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#FFFFFF"
    android:orientation="vertical">

    <TextView
        android:id="@+id/tx_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:gravity="center"
        android:padding="16dp"
        android:text="Item 1"
        android:textSize="14sp" />

    <View
        android:layout_width="match_parent"
        android:layout_height="0.5dp"
        android:background="#6c6c6c" />

    <TextView
        android:id="@+id/tx_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:padding="16dp"
        android:text="Item 2"
        android:textSize="14sp" />

    <View
        android:layout_width="match_parent"
        android:layout_height="0.5dp"
        android:background="#6c6c6c" />

    <TextView
        android:id="@+id/tx_3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:padding="16dp"
        android:text="Item 3"
        android:textSize="14sp" />
</LinearLayout>

• 调用样例

QuickPopupBuilder.with(this)
        .contentView(R.layout.popup_menu_small)
        .config(QuickPopupConfig()
                .clipChildren(true)
                .backgroundColor(Color.parseColor("#8C617D8A"))
                .withClick(R.id.tx_1, { Toast.makeText(this, "tx1", Toast.LENGTH_SHORT).show() }, true)
                .withClick(R.id.tx_2, { Toast.makeText(this, "tx2", Toast.LENGTH_SHORT).show() }, true)
                .withClick(R.id.tx_3, { Toast.makeText(this, "tx3", Toast.LENGTH_SHORT).show() }, true)
        )
        .show(button)

Demo源代码

https://github.com/cxyzy1/popupMenuDemo

安卓开发技术分享: https://blog.csdn.net/yinxing2008/article/details/84555061
更多技术总结好文，请关注：「程序园中猿」