版权声明:本文为程序园中猿原创文章,转载请注明出处 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
更多技术总结好文,请关注:「程序园中猿」