(Kotlin) Android使用DialogX实现iOS风格底部弹窗(带Toggle开关)

本文将详细介绍如何使用DialogX库实现一个iOS风格的底部弹窗,包含图标文本Toggle 开关的列表项。
实现步骤
1. 添加依赖

build.gradle文件中添加:

复制代码
implementation 'com.github.kongzue.DialogX:DialogX:0.0.49.beta14'
implementation 'com.github.kongzue.DialogX:DialogXIOSStyle:0.0.49.beta14'
implementation 'androidx.recyclerview:recyclerview:1.3.2'

2. 创建布局文件

底部弹窗主布局 (dialog_bottom_toggle.xml)

复制代码
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:background="@drawable/bg_bottom_dialog_round_top">

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="16dp"
        android:textSize="18sp"
        android:textStyle="bold"/>

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:maxHeight="400dp"/>

    <Button
        android:id="@+id/btn_cancel"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:text="取消"
        android:background="?attr/selectableItemBackground"/>
</LinearLayout>

列表项布局 (item_toggle.xml)

复制代码
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="56dp"
    android:orientation="horizontal"
    android:paddingStart="24dp"
    android:paddingEnd="16dp"
    android:gravity="center_vertical">

    <ImageView
        android:id="@+id/iv_icon"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:layout_marginEnd="16dp"/>

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:textSize="16sp"/>

    <androidx.appcompat.widget.SwitchCompat
        android:id="@+id/switch_toggle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
</LinearLayout>

3. 实现工具类

复制代码
import android.content.Context
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.Button
import android.widget.ImageView
import android.widget.TextView
import androidx.appcompat.widget.SwitchCompat
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView
import com.kongzue.dialogx.dialogs.CustomDialog
import com.kongzue.dialogx.interfaces.OnBindView
import com.kongzue.dialogx.style.IOSStyle
import smartconnection.com.smartconnect.R

object BottomToggleDialog {

    data class ToggleItem(
        val iconRes: Int,
        val title: String,
        var isChecked: Boolean = false,
        val onToggleChanged: ((Boolean) -> Unit)? = null
    )

    /**
     * 使用CustomDialog的可靠实现
     */
    fun show(
        context: Context,
        title: String? = null,
        items: List<ToggleItem>
    ) {
        CustomDialog.build()
            .setCustomView(object : OnBindView<CustomDialog>(R.layout.dialog_bottom_toggle) {
                override fun onBind(dialog: CustomDialog?, view: View?) {
                    view?.apply {
                        // 绑定视图
                        val recyclerView = findViewById<RecyclerView>(R.id.recyclerView)
                        val tvTitle = findViewById<TextView>(R.id.tv_title)
                        val btnCancel = findViewById<Button>(R.id.btn_cancel)

                        // 设置标题
                        title?.let { tvTitle.text = it } ?: run { tvTitle.visibility = View.GONE }

                        // 配置列表
                        recyclerView.layoutManager = LinearLayoutManager(context)
                        recyclerView.adapter = ToggleAdapter(items).apply {
                            onItemClick = { position, isChecked ->
                                items[position].isChecked = isChecked
                                items[position].onToggleChanged?.invoke(isChecked)
                            }
                        }

                        // 取消按钮
                        btnCancel.setOnClickListener { dialog?.dismiss() }
                    }
                }
            })
            .setStyle(IOSStyle.style())
            .setAlign(CustomDialog.ALIGN.BOTTOM)
            .setCancelable(true)
            .show()
    }

    private class ToggleAdapter(private val items: List<ToggleItem>) :
        RecyclerView.Adapter<ToggleAdapter.ViewHolder>() {

        var onItemClick: ((Int, Boolean) -> Unit)? = null

        class ViewHolder(view: View) : RecyclerView.ViewHolder(view) {
            val ivIcon: ImageView = view.findViewById(R.id.iv_icon)
            val tvTitle: TextView = view.findViewById(R.id.tv_title)
            val switch: SwitchCompat = view.findViewById(R.id.switch_toggle)
        }

        override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
            val view = LayoutInflater.from(parent.context)
                .inflate(R.layout.item_toggle, parent, false)
            return ViewHolder(view)
        }

        override fun onBindViewHolder(holder: ViewHolder, position: Int) {
            val item = items[position]
            holder.ivIcon.setImageResource(item.iconRes)
            holder.tvTitle.text = item.title
            holder.switch.isChecked = item.isChecked

            holder.switch.setOnCheckedChangeListener { _, isChecked ->
                onItemClick?.invoke(position, isChecked)
            }

            holder.itemView.setOnClickListener {
                holder.switch.toggle()
            }
        }

        override fun getItemCount() = items.size
    }
}

使用示例

复制代码
// 准备数据
val items = listOf(
    BottomToggleDialog.ToggleItem(
        iconRes = R.drawable.ic_notification,
        title = "消息通知",
        isChecked = true
    ) { isChecked ->
        Toast.makeText(this, "通知状态: $isChecked", Toast.LENGTH_SHORT).show()
    },
    BottomToggleDialog.ToggleItem(
        iconRes = R.drawable.ic_dark_mode,
        title = "暗黑模式",
        isChecked = false
    ) { isChecked ->
        Toast.makeText(this, "暗黑模式: $isChecked", Toast.LENGTH_SHORT).show()
    }
)

// 显示弹窗
BottomToggleDialog.show(
    context = this,
    title = "功能设置",
    items = items
)

关键点说明
1.底部显示控制:

setAlignBottom() 确保内容对齐底部

自定义动画实现滑动效果

顶部圆角背景优化视觉效果

2.数据绑定:

使用RecyclerView实现高效列表

通过回调处理Toggle状态变化

相关推荐
auxor5 分钟前
Android AMS拦截Activity启动
android
勤劳打代码6 分钟前
曲径通幽 —— Android 息屏 TCP 连接管理
android·tcp/ip·flutter
恋猫de小郭1 小时前
Flutter 里的 Layer 解析,带你了解不一样角度下的 Flutter 渲染逻辑
android·前端·flutter
vivo高启强1 小时前
FD 泄露引发的AGP8 build 失败问题
android
用户2018792831672 小时前
Binder 事务失败(FAILED BINDER TRANSACTION)
android
柿蒂2 小时前
Android图片批量添加处理优化:从「30」秒缩短至「4.4」秒
android·android jetpack
拓端研究室3 小时前
专题:2025医药生物行业趋势与投融资研究报告|附90+份报告PDF、原数据表汇总下载
android·开发语言·kotlin
小鱼人爱编程3 小时前
当上组长一年里,我保住了俩下属
android·前端·后端
2501_916013743 小时前
移动端 WebView 调试实战,多平台行为差异排查与统一调试流程
android·ios·小程序·https·uni-app·iphone·webview
liosen7 小时前
【安卓笔记】OOM与内存优化
android·oom·内存优化·内存分析命令·内存分析工具