自定义Snackbar-我们不一样

为啥不一样

最近做一个小项目，项目中需要一个具备圆角背景的居中的提示。这让我想到了优雅的Snackbar。但是Google了许多自定义Snackbar的帖子都不甚满意，主要是在修改时不能很好的确定你想要的布局，大部分的文章都是通过获取View，在代码中修改例如背景，文字颜色等，无法通过布局文件设置显示的样式。于是我设计了一个不一样的实现，实现并不复杂，只希望对看到此文的人有所帮助。

分析源码

• Snackbar的接口中没有指定布局的接口，我们只能从源码分析是否有“漏洞“可寻。我们首先看一下make的源码：

  
  
  SnackBar#make源码
  
  

  如图所示，我们看到了一个布局文件 “R.layout.design_layout_snackbar_include”，他对应着Snackbar的content。看到这里我们基本可以确定，这就是控制显示样式的布局文件。

• 布局文件“ R.layout.design_layout_snackbar_include”：

  
  
  "内容布局文件"

这个布局文件中一个SnackbarContentLayout包含一个Textview和一个Button，这正是Snackbar 显示时提示文字和按钮。既然如此我们只要替换这个布局，我们就可以自定义布局了。

修改布局代码设计分析

1. make 方法是一个静态方法，通重写是不可行的
2. 然后我想到是否可以将旧的布局移除添加新的布局？
   • 这种方式可以实现布局的修改，SnackBar中的内容布局已经变了；
   • 然后我们要考虑make时的文字内容及button是否能应用到新的布局中去。我们在上一张图中看到内容布局是一个SnackbarContentLayout。内部有一个ID为snackbar_text的TextView和ID为snackbar_action的Button；我们的自定义布局中没有这个ID；而我们又想通过布局文件可视化的自定义布局我们该怎么办呢？
3. 使用布局文件自定义布局，并使得SnackbarContentLayout使用我们自定义的Msg view和Action button:

• 我们无法再xml中指定id为support库中的ID snackbar_text 和 snackbar_action。那么我们退一步，初始时我们用我们的ID，在Inflate布局后修改这个ID为相应的ID。这样修改后我们在show时会出现问题：snackbar_text和snackbar_action对应的View是空的。我们在看一下源码：

  
  
  ”onFinishInflate“

源码中看出，这两个view在inflate完成后就不再find了，不管是requesLayout还是invalid都不行。而且这个onFinishInflate是protected修饰的，无法重写。我们只能找其他方式，于是我想到了反射，用反射调用onFinishInflate。至此我们的设计已经完成

具体编码实现：

• JSnackBar

class JSnackBar{
    private lateinit var snackbar: Snackbar
    private lateinit var msgView:TextView
    private lateinit var actBtn:Button
    fun make(view: View, msg:String, duration: Int, layout:Int):Snackbar{
            snackbar = Snackbar.make(view, msg, duration)
            val parent = snackbar.view as Snackbar.SnackbarLayout
            //Layout depend on your custon layout file
            parent.layoutParams.width = ViewGroup.LayoutParams.MATCH_PARENT
            parent.setBackgroundColor(Color.TRANSPARENT)
            parent.setPadding(0, 0,0, 0)
            val contentView = parent.getChildAt(0) as SnackbarContentLayout
            val newContentView = LayoutInflater.from(view.context).inflate(layout, contentView, false) as SnackbarContentLayout
            //Reset Id
            newContentView.id = contentView.id
            msgView = newContentView.findViewById(R.id.jepack_snack_bar_msg)
            actBtn  = newContentView.findViewById(R.id.jepack_snack_bar_action)

            msgView.id = android.support.design.R.id.snackbar_text
            actBtn.id = android.support.design.R.id.snackbar_action
            //Reflect find views。
            try {

                val method = newContentView::class.java.getDeclaredMethod("onFinishInflate")
                method.isAccessible = true
                method.invoke(newContentView)
                //Reset msg text
                msgView.text = msg
                val index = parent.indexOfChild(contentView)
                //替换布局
                parent.removeViewAt(index)
                parent.addView(newContentView, index)
            }catch (e:Exception){
                LogUtil.e("Failed to change snackbar layout! ", e.message)
            }
            return snackbar
        }
}

• 布局文件（这只是我的一个简单实现，可根据实际情况自定义）

这里面的图片，dimen等需要你根据需求修改；

• ids设置，方便扩展

到此我们就可以轻松实现了我们需要的效果。

“效果图”

此代码将增加到Github仓库中, 欢迎指正！