Android开发的UI设计——Material Design

最新推荐文章于 2024-09-23 17:23:31 发布

fjnu_se

最新推荐文章于 2024-09-23 17:23:31 发布

阅读量1k

点赞数 1

分类专栏： Android 文章标签： android ui kotlin

本文链接：https://blog.csdn.net/fjnu_se/article/details/128173238

版权

本文介绍了如何在Android应用中实现Material Design，特别是使用BottomSheetDialogFragment组件。BottomSheetDialogFragment作为DialogFragment的子类，提供了一个模态底部表功能，允许灵活的定制和交互。文中详细阐述了其优势、使用方法，并通过代码示例展示了如何创建和自定义带有圆角和无阴影效果的BottomSheetDialog，同时讨论了避免触控冲突的解决方案。

摘要由CSDN通过智能技术生成

前言

Material Design 是用于指导用户在各种平台和设备上进行视觉、动作和互动设计的全面指南。如需在您的 Android 应用中使用 Material Design，请遵循 Material Design 规范中定义的准则，并使用 Material Design 支持库中提供的新组件和样式。

正篇

安卓中的Material Design

作为Google旗下的一员——安卓，则是将其一些最具代表性一些控件和效果封装在_Material库_,这就让我们开发者可以在不了解Material Design的情况下，也很容易将自己的应用Material化，当然现在在AndroidX库中的一些组件也可以实现一些Material Design的效果。

BottomSheetDialogFragment组件

介绍

这个组件在Material Design中分属Bottom Sheets：

编辑

BottomSheetDialogFragment 继承自 AppCompatDialogFragment，官方解释为模态底部表，是 DialogFragment 的一个版本，它使用的是 BottomSheetDialog，而不是浮动对话框。

优势

1、拥有自己的生命周期；
2、可对整个页面进行折叠、展开和销毁；
3、可灵活使用自定义样式。

使用方法

implementation 'com.google.android.material:material:1.7.0'

添加好后Sync Gradle成功后，我们就可以在项目中添加BottomSheetDialogFragment了，很简单，和正常写继承DialogFragment的Dialog一样，因为在上述中我们看到了其继承关系，BottomSheetDialogFragment是继承自AppCompatDialogFragment，而
AppCompatDialogFragment又是继承自DialogFragment。如此一来，由于BottomSheetDialogFragment是DialogFragment的子类，故它具有DialogFragment的所有特性。

实现需求

Dialog部分的实现代码：

class DialogMore : BottomSheetDialogFragment() {
    private var height : Int = 0

    fun newInstance(): DialogMore {
        return DialogMore()
    }

    fun setDialogHeight(height: Int): DialogMore {
        this.height = height
        return this
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setStyle(STYLE_NORMAL, R.style.StyleBottomSheetDialogBg)
    }

    override fun onStart() {
        super.onStart()
        //拿到系统的 bottom_sheet
        val bottomSheetDialog = (dialog as BottomSheetDialog?)!!
        val view =
            bottomSheetDialog.delegate.findViewById<FrameLayout>(com.google.android.material.R.id.design\_bottom\_sheet)!!
        val behavior = BottomSheetBehavior.from(view)
        //设置弹出高度
        behavior.peekHeight = height
        view.layoutParams.height = ViewGroup.LayoutParams.MATCH_PARENT
        behavior.isHideable = false
    }

    override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
        val dialog = super.onCreateDialog(savedInstanceState)
        val view = LayoutInflater.from(context).inflate(R.layout.layout\_item\_dialog_more, null)
        dialog.setContentView(view)
        view.vDownClose.setOnClickListener {
            dismiss()
        }
        return dialog
    }

}

可以看到，这部分实现代码和我们平时写底部弹窗方法差不多，不过我们在onStar()方法可以使用BottomSheetBehavior去控制弹窗本身的行为，比如高度控制