android通用的屏幕底部弹出的选择框

step1:创建一个底部弹出的BottomListDialog,弹出动画(R.style.dialog_popFromBottom)可以自己设计

class BottomListDialog : AppCompatDialogFragment() {

    private lateinit var lstShow: ListView
    private lateinit var btnCancel: TextView

    private var itemList: Array<String>? = null
    private var itemIconList: Array<Int>? = null

    private var mComposite: CompositeDisposable = CompositeDisposable()

    override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
        val dialog = Dialog(activity!!, R.style.dialog_popFromBottom)
        dialog.requestWindowFeature(Window.FEATURE_NO_TITLE) // 设置Content前设定
        dialog.setContentView(R.layout.dialog_bottom_list)
        dialog.setCanceledOnTouchOutside(true) // 外部点击取消

        // 设置宽度为屏宽, 靠近屏幕底部。
        val window = dialog.window
        val lp = window!!.attributes
        lp.gravity = Gravity.BOTTOM // 紧贴底部
        lp.width = WindowManager.LayoutParams.MATCH_PARENT // 宽度持平
        window.attributes = lp
        initView(dialog)

        if (savedInstanceState != null) {
            itemList = savedInstanceState.getStringArray("itemList")
            itemIconList = GsonFormatter.fromJson(savedInstanceState.getString("itemIconList")!!, Array<Int>::class.java)
        }

        if (itemIconList?.size == itemList?.size) {
            val list = ArrayList<Map<String, Any>>()
            for (i in itemList!!.indices) {
                val map = HashMap<String, Any>()
                map["item"] = itemList!![i]
                map["itemIcon"] = itemIconList!![i]
                list.add(map)
            }
            lstShow.adapter = SimpleAdapter(context, list, R.layout.item_simple_list, arrayOf("item", "itemIcon"), intArrayOf(R.id.txtShow, R.id.imgIcon))
        } else {
            lstShow.adapter = ArrayAdapter(context!!, R.layout.item_simple_list, R.id.txtShow, itemList!!)
        }

        mComposite.addAll(
                RxView.clicks(btnCancel)
                        .throttleFirst(1, TimeUnit.SECONDS)
                        .subscribe({
                            dismiss()
                        }, {
                            Timber.e(it)
                        })
        )

        lstShow.onItemClickListener = AdapterView.OnItemClickListener { parent, view, position, id ->
            onItemClickListener.onItemClick(parent, view, position, id, itemList!![position], itemList!!)
            dismiss()
        }

        return dialog
    }

    private fun initView(dialog: Dialog) {
        lstShow = dialog.findViewById(R.id.lstShow)
        btnCancel = dialog.findViewById(R.id.tv_cancel)
    }

    fun setItemList(itemList: ArrayList<String>): BottomListDialog {
        this.itemList = itemList.toTypedArray()
        return this
    }

    fun setItemIconList(itemIconList: ArrayList<Int>): BottomListDialog {
        this.itemIconList = itemIconList.toTypedArray()
        return this
    }

    override fun onSaveInstanceState(outState: Bundle) {
        super.onSaveInstanceState(outState)
        outState.putStringArray("itemList", itemList)
        outState.putString("itemIconList", GsonFormatter.toJson(itemIconList!!))
    }

    override fun onDestroyView() {
        mComposite.clear()
        super.onDestroyView()
    }

    interface OnItemClickListener {
        fun onItemClick(parent: AdapterView<*>?, view: View?, position: Int, id: Long, selectItem: String, itemList: Array<String>)
    }

    private lateinit var onItemClickListener: OnItemClickListener

    fun setOnItemClickListener(onItemClickListener: OnItemClickListener): BottomListDialog {
        this.onItemClickListener = onItemClickListener
        return this
    }
}

step2:很简单的xml,listview的item样式可以按照自己需要自由设计

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

    <ListView
        android:id="@+id/lstShow"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/white"
        android:listSelector="@android:color/transparent"
        android:divider="@color/dividerColor"
        android:dividerHeight="1px"
        android:scrollbars="none" />

    <TextView
        android:id="@+id/tv_cancel"
        android:layout_width="match_parent"
        android:layout_height="142px"
        android:layout_marginTop="22px"
        android:background="@color/white"
        android:gravity="center"
        android:text="@string/cancel"
        android:textColor="@color/textColorPrimary"
        android:textSize="15sp" />
</LinearLayout>

step3:使用

RxView.clicks(tvChildRelationShip)
                .subscribe({
                    BottomListDialog().setItemList(
                        arrayListOf(
                            getString(R.string.father),
                            getString(R.string.mather),
                            getString(R.string.grandpa),
                            getString(R.string.grandma),
                            getString(R.string.grand_father),
                            getString(R.string.grand_mather)
                        )
                    ).setOnItemClickListener(object : BottomListDialog.OnItemClickListener {
                        override fun onItemClick(
                            parent: AdapterView<*>?,
                            view: View?,
                            position: Int,
                            id: Long,
                            selectItem: String,
                            itemList: Array<String>
                        ) {
                            tvChildRelationShip.text = selectItem
                            selectedRelationShip = selectItem
                        }

                    }).show(supportFragmentManager, "bottomListDialog")
                }) {
                    Timber.e(it)
                }

效果:
在这里插入图片描述

  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在微信小程序中,可以通过自定义一个底部弹出选择来实现带有取消和确定按钮的功能。 首先,创建一个wxml文件,命名为"bottom_dialog.wxml"。在该文件中,可以使用`<view>`标签来实现底部弹出选择的整体布局。例如: ```xml <!-- bottom_dialog.wxml --> <view class="dialog-container"> <!-- 选择内容 --> <view class="dialog-content"> <!-- 添加选择项 --> <view class="option-item">选项1</view> <view class="option-item">选项2</view> <view class="option-item">选项3</view> </view> <!-- 底部按钮 --> <view class="dialog-footer"> <view class="cancel-btn">取消</view> <view class="confirm-btn">确定</view> </view> </view> ``` 接下来,在对应的wxss文件(如"bottom_dialog.wxss")中为底部弹出选择进行样式设置,例如: ```css /* bottom_dialog.wxss */ .dialog-container { position: fixed; left: 0; bottom: 0; width: 100%; background-color: #fff; } .dialog-content { padding: 10px; } .option-item { padding: 10px 0; border-bottom: 1px solid #eee; text-align: center; } .dialog-footer { display: flex; justify-content: space-between; padding: 10px; } .cancel-btn, .confirm-btn { width: 100px; padding: 6px 0; text-align: center; background-color: #eee; } .confirm-btn { background-color: #007aff; color: #fff; } ``` 最后,在业务逻辑的js文件中使用`wx.showModal`方法来控制底部弹出选择的显示与隐藏。例如: ```javascript // dialog.js Page({ showModal() { wx.showModal({ title: '底部选择', content: '', showCancel: false, cancelText: '取消', confirmText: '确定', success(res) { if (res.confirm) { // 用户点击确定按钮的逻辑处理 console.log('用户点击确定'); } else if (res.cancel) { // 用户点击取消按钮的逻辑处理 console.log('用户点击取消'); } } }) } }) ``` 通过上述步骤,就可以在小程序中实现带有取消和确定按钮的底部弹出选择
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值