美文网首页
Snackbar的自定义的一些思路

Snackbar的自定义的一些思路

作者: 洋葱er | 来源:发表于2022-08-09 11:05 被阅读0次

    Snackbar因为封装的比较多,所以留给我们自定义的空间比较小,为了最小改动达到我们想要的效果,我看了一下Snackbar的实现,然后得到了我想要的答案!
    关于如何自定义Snackbar的显示位置,修改Snackbar的样式,你都可以在这里得到启发或者答案。

    UI想要的效果及问题

    UI效果

    主要的效果是需要显示在距离底部的一个指定位置,显示的Snackbar需要有左右边距,弹窗内容的背景需要有圆角以及背景颜色是透明的,还有actionText颜色的更改。
    其中显示在指定位置之上,以及actionText颜色更改这些Snackbar都提供了默认方法,所以我们主要考虑的是其它问题。

    实现思路

    看到这个我首先想到的是让Snackbar显示在指定控件上方,以及加左右两边的边距,来达到需要实现的效果。首先看看Snackbar提供的方法,发现Snackbar封装的比较多,暴露出来的方法比较少,主要是设置文字、颜色以及点击事件的一些方法,提供了设置显示在某个view之上的方法,但是无法设置左右边距,所以表面上Snackbar是没给我们提供直接实现效果的方法的。但是它提供的方法里面有提供getView()这个方法,这就吸引到了我的注意,如果我们获取到了Snackbar的布局view,那对布局的一些自定义的操作不是手到擒来!

    重新设置边距,我首先想到的是通过设置layoutParams来设置它对应父布局的一个边距,一般这个方法需要知道父布局的一个类型,然后去进行对应的一个方法设置,我通过getParent方法获取父布局,发现Snackbar的父布局居然是null,所以这个方法肯定是不可行的了。所以也难怪网络上一堆设置位置使用lp去设置的最终你发现都没有效果的原因。

    既然设置边距没有用,那我就去Snackbar的源代码里面寻找答案了,通过一番寻找,在setAction这个方法中,发现Snackbar是通过view.getChildAt(0)这种方式来获取contentLayout,然后再通过contentLayout来获取MessageView和ActionView,前者是设置消息内容的,后者是设置点击按钮的事件的,所以整个Snackbar的结构目前我们就了解了。

    Snackbar结构

    所以我的思路调整为,通过把最外层的view设置为透明,然后给它设置底部边距和左右边距,再给ContentLayout这个view设置圆角背景,来达到一种错觉的视觉效果,让Snackbar看起来是到达了我们的自定义的位置。所以最终实现的代码大概就是。

    val snackbar = Snackbar.make(buttonView,"MessageText", Snackbar.LENGTH_LONG)
        .setAnchorView(toolsView)//设置显示在指定控件之上
        .setAnimationMode(Snackbar.ANIMATION_MODE_FADE)//设置Snackbar动画的模式
    val layout = snackbar.view as Snackbar.SnackbarLayout
    if (layout != null && layout.getChildAt(0) != null && 
            layout.getChildAt(0) is SnackbarContentLayout) {
        val contentLayout = layout.getChildAt(0) as SnackbarContentLayout
        layout.setPadding(DensityUtil.dip2px(content, 12f), 0, 
                          DensityUtil.dip2px(content, 12f), 
                          DensityUtil.dip2px(content, 12f))//如果想要和底部有距离,可以在这里增加底部边距
        layout.setBackgroundColor(Color.parseColor("#00000000"))
        contentLayout.background = resources.getDrawable(R.drawable.bg_common_radius10)
        contentLayout.backgroundTintList = ColorStateList.valueOf(Color.parseColor("#cc000000"))
    }
    snackbar.setAction("ActionText") {
    }.setActionTextColor(Color.parseColor("#FF00B88F")).show()
    

    代码就是分别设置了view和contentlayout的背景,因为需求UI需要Snackbar修改显示动画,所以设置view的AnimationMode为ANIMATION_MODE_FADE就可以改成渐隐效果显示了,最终实现我们想要的自定义效果。

    相关文章

      网友评论

          本文标题:Snackbar的自定义的一些思路

          本文链接:https://www.haomeiwen.com/subject/utxgwrtx.html