为啥不一样
最近做一个小项目,项目中需要一个具备圆角背景的居中的提示。这让我想到了优雅的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 显示时提示文字和按钮。既然如此我们只要替换这个布局,我们就可以自定义布局了。
修改布局代码设计分析
make 方法是一个静态方法,通重写是不可行的
然后我想到是否可以将旧的布局移除添加新的布局?
这种方式可以实现布局的修改,SnackBar中的内容布局已经变了;
然后我们要考虑make时的文字内容及button是否能应用到新的布局中去。我们在上一张图中看到内容布局是一个SnackbarContentLayout。内部有一个ID为snackbar_text的TextView和ID为snackbar_action的Button;我们的自定义布局中没有这个ID;而我们又想通过布局文件可视化的自定义布局我们该怎么办呢?
使用布局文件自定义布局,并使得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 } }
布局文件(这只是我的一个简单实现,可根据实际情况自定义)
<?xml version="1.0" encoding="utf-8"?><android.support.design.internal.SnackbarContentLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_gravity="bottom" android:padding="<padding>"> <android.support.constraint.ConstraintLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <TextView android:id="@id/jepack_snack_bar_msg" android:layout_width="wrap_content" android:layout_height="wrap_content" android:singleLine="true" android:ellipsize="end" android:textColor="@android:color/white" android:layout_gravity="center_horizontal" android:background="@drawable/shape_tip_bg" android:paddingStart="@dimen/snack_padding" android:paddingEnd="@dimen/snack_padding" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" /> <Button android:id="@id/jepack_snack_bar_action" android:layout_width="wrap_content" android:layout_height="wrap_content" android:button="@null" android:visibility="gone" /> </android.support.constraint.ConstraintLayout></android.support.design.internal.SnackbarContentLayout>
这里面的图片,dimen等需要你根据需求修改;
ids设置,方便扩展
<?xml version="1.0" encoding="utf-8"?><resources> <item type="id" name="jepack_snack_bar_msg" /> <item type="id" name="jepack_snack_bar_action" /></resources>
到此我们就可以轻松实现了我们需要的效果。
“效果图”
此代码将增加到Github仓库中, 欢迎指正!
作者:Jepack
链接:https://www.jianshu.com/p/33c0d7edc3bb