Android开发的UI设计——Material Design

本文介绍了Android中的Material Design,特别是BottomSheetDialogFragment组件。它属于Bottom Sheets,提供独特的生命周期,支持折叠、展开和销毁。文章详细阐述了BottomSheetDialogFragment的使用方法,包括如何添加到项目中,如何自定义样式,以及如何处理触摸行为和高度控制。通过示例代码展示了如何创建和定制带有圆角和无阴影的BottomSheetDialogFragment。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前言

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去控制弹窗本身的行为,比如高度控制和一些弹窗的属性设置

在onCreateDialog方法中我们把弹窗布局加进去,使用setContentView()方法获取到布局,一定要写该方法&

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值