android support design Library库之snakeBar
来源:互联网 发布:编程对cpu的要求高吗 编辑:程序博客网 时间:2024/06/04 01:08
1.snakeBar基本介绍:
要使用snakeBar首先导入com.android.support:design库
Snackbar显示在所有屏幕其它元素之上(屏幕最顶层),同一时间只能显示一个snackbar。
它的使用方法类似于Toast,
Snackbar.make(view, message_text, duration) .setAction(action_text, click_listener) .show();
make()方法是生成Snackbar的。Snackbar需要一个控件容器view用来容纳,
官方推荐使用CoordinatorLayout来确保Snackbar和其他组件的交互,
比如滑动取消Snackbar、Snackbar出现时FloatingActionButton上移。
显示时间duration有三种类型LENGTH_SHORT、LENGTH_LONG和LENGTH_INDEFINITE。
setAction()方法可设置Snackbar右侧按钮,增加进行交互事件。如果不使用setAction()则只显示左侧message
下面是运行结果:Snackbar长显示、点击Action弹出toast提示以及Snackbar在CoordinatorLayout中滑动取消。
2.多彩SnakeBar:
Snackbar和Toast的默认样式都很单一,但是有时我们希望把不同类型信息区别显示,从而使用户更容易注意到提示信息。所以使Snackbar变色是一个好主意。
Snackbar的官方API只提供了setActionTextColor()这个方法修改Action的文字颜色,这怎么办?查源码吧,哪里不会点哪里。
在源码中我们看到Snackbar中定义了一个继承自LinearLayout的内部类SnackbarLayout,
Snackbar的样子就是由这个SnackbarLayout实现的。
SnackbarLayout中加载了R.layout.design_layout_snackbar_include布局文件,
打开后看到下面这段代码(我把padding、margin的具体数值也打了出来):
<merge xmlns:android="http://schemas.android.com/apk/res/android"><TextView android:id="@+id/snackbar_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:paddingTop="14dp" android:paddingBottom="14dp" android:paddingLeft="12dp" android:paddingRight="12dp" android:textAppearance="@style/TextAppearance.Design.Snackbar.Message" android:maxLines="2" android:layout_gravity="center_vertical|left|start" android:ellipsize="end" android:textAlignment="viewStart"/><Button android:id="@+id/snackbar_action" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="0dp" android:layout_marginStart="0dp" android:layout_gravity="center_vertical|right|end" android:paddingTop="14dp" android:paddingBottom="14dp" android:paddingLeft="12dp" android:paddingRight="12dp" android:visibility="gone" android:textColor="?attr/colorAccent" style="?attr/borderlessButtonStyle"/></merge>
由命名可知,以snackbar_text为名的TextView就是Snackbar左侧的message。
好了,我们开始修改Snackbar的背景颜色和message字体颜色吧。
public static void setSnackbarColor(Snackbar snackbar, int messageColor, int backgroundColor) { View view = snackbar.getView();//获取Snackbar的view if(view!=null){ view.setBackgroundColor(backgroundColor);//修改view的背景色 ((TextView) view.findViewById(R.id.snackbar_text)).setTextColor(messageColor);//获取Snackbar的message控件,修改字体颜色 }}
3.在Snackbar中增加图标
短文本
通常 Snackbar 的高度应该仅仅用于容纳所有的文本,而文本应该与执行的操作相关。Snackbar 中不能包含图标,操作只能以文本的形式存在。
最多0-1个操作,不包含取消按钮
当一个动作发生的时候,应当符合提示框和可用性规则。当有2个或者2个以上的操作出现时,应该使用提示框而不是 Snackbar,即使其中的一个是取消操作。如果 Snackbar 中提示的操作重要到需要打断屏幕上正在进行的操作,那么理当使用提示框而非 Snackbar。
上面这段是谷歌 Material Design设计规范中的话。
前面我们提到过Snackbar的view是由SnackbarLayout实现的,
而SnackbarLayout是继承自LinearLayout,那么我们新建一个布局添加进去不就行了么
public static void SnackbarAddView(Snackbar snackbar,int layoutId,int index) { View snackbarview = snackbar.getView();//获取snackbar的View(其实就是SnackbarLayout) Snackbar.SnackbarLayout snackbarLayout=(Snackbar.SnackbarLayout)snackbarview;//将获取的View转换成SnackbarLayout View add_view = LayoutInflater.from(snackbarview.getContext()).inflate(layoutId,null);//加载布局文件新建View LinearLayout.LayoutParams p = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,LinearLayout.LayoutParams.WRAP_CONTENT);//设置新建布局参数 p.gravity= Gravity.CENTER_VERTICAL;//设置新建布局在Snackbar内垂直居中显示 snackbarLayout.addView(add_view,index,p);//将新建布局添加进snackbarLayout相应位置}
上面的代码中,如果我们不设置向Snackbar中添加的布局文件的布局参数,
新布局会显示在Snackbar内的顶部。使用上述任性方法的时候要注意新加布局的大小和Snackbar内文字长度
,Snackbar过大或过于花哨了可不好看。
下面是使用示例。我们先新建一个布局,暂时命名为snackbar_addview.xml,简单的放进了一个ImageView,
图片就是android默认图标。
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center_vertical"><ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:src="@mipmap/ic_launcher"/></LinearLayout>
然后在activity中写下snackbar的设置:
Snackbar snackbar= Snackbar.make(coordinatorLayout,"这是massage", Snackbar.LENGTH_LONG); SnackbarUtil.setSnackbarColor(snackbar,SnackbarUtil.blue); SnackbarUtil.SnackbarAddView(snackbar,R.layout.snackbar_addview,0); snackbar.show();
4.SnackbarUtil
我将我常用的Snackbar相关设置封装成了一个类,大家可以根据自己的需求使用。
public class SnackbarUtil {public static final int Info = 1;public static final int Confirm = 2;public static final int Warning = 3;public static final int Alert = 4;public static int red = 0xfff44336;public static int green = 0xff4caf50;public static int blue = 0xff2195f3;public static int orange = 0xffffc107;/** * 短显示Snackbar,自定义颜色 * @param view * @param message * @param messageColor * @param backgroundColor * @return */public static Snackbar ShortSnackbar(View view, String message, int messageColor, int backgroundColor){ Snackbar snackbar = Snackbar.make(view,message, Snackbar.LENGTH_SHORT); setSnackbarColor(snackbar,messageColor,backgroundColor); return snackbar;}/** * 长显示Snackbar,自定义颜色 * @param view * @param message * @param messageColor * @param backgroundColor * @return */public static Snackbar LongSnackbar(View view, String message, int messageColor, int backgroundColor){ Snackbar snackbar = Snackbar.make(view,message, Snackbar.LENGTH_LONG); setSnackbarColor(snackbar,messageColor,backgroundColor); return snackbar;}/** * 自定义时常显示Snackbar,自定义颜色 * @param view * @param message * @param messageColor * @param backgroundColor * @return */public static Snackbar IndefiniteSnackbar(View view, String message,int duration,int messageColor, int backgroundColor){ Snackbar snackbar = Snackbar.make(view,message, Snackbar.LENGTH_INDEFINITE).setDuration(duration); setSnackbarColor(snackbar,messageColor,backgroundColor); return snackbar;}/** * 短显示Snackbar,可选预设类型 * @param view * @param message * @param type * @return */public static Snackbar ShortSnackbar(View view, String message, int type){ Snackbar snackbar = Snackbar.make(view,message, Snackbar.LENGTH_SHORT); switchType(snackbar,type); return snackbar;}/** * 长显示Snackbar,可选预设类型 * @param view * @param message * @param type * @return */public static Snackbar LongSnackbar(View view, String message,int type){ Snackbar snackbar = Snackbar.make(view,message, Snackbar.LENGTH_LONG); switchType(snackbar,type); return snackbar;}/** * 自定义时常显示Snackbar,可选预设类型 * @param view * @param message * @param type * @return */public static Snackbar IndefiniteSnackbar(View view, String message,int duration,int type){ Snackbar snackbar = Snackbar.make(view,message, Snackbar.LENGTH_INDEFINITE).setDuration(duration); switchType(snackbar,type); return snackbar;}//选择预设类型private static void switchType(Snackbar snackbar,int type){ switch (type){ case Info: setSnackbarColor(snackbar,blue); break; case Confirm: setSnackbarColor(snackbar,green); break; case Warning: setSnackbarColor(snackbar,orange); break; case Alert: setSnackbarColor(snackbar,Color.YELLOW,red); break; }}/** * 设置Snackbar背景颜色 * @param snackbar * @param backgroundColor */public static void setSnackbarColor(Snackbar snackbar, int backgroundColor) { View view = snackbar.getView(); if(view!=null){ view.setBackgroundColor(backgroundColor); }}/** * 设置Snackbar文字和背景颜色 * @param snackbar * @param messageColor * @param backgroundColor */public static void setSnackbarColor(Snackbar snackbar, int messageColor, int backgroundColor) { View view = snackbar.getView(); if(view!=null){ view.setBackgroundColor(backgroundColor); ((TextView) view.findViewById(R.id.snackbar_text)).setTextColor(messageColor); }}/** * 向Snackbar中添加view * @param snackbar * @param layoutId * @param index 新加布局在Snackbar中的位置 */public static void SnackbarAddView( Snackbar snackbar,int layoutId,int index) { View snackbarview = snackbar.getView(); Snackbar.SnackbarLayout snackbarLayout=(Snackbar.SnackbarLayout)snackbarview; View add_view = LayoutInflater.from(snackbarview.getContext()).inflate(layoutId,null); LinearLayout.LayoutParams p = new LinearLayout.LayoutParams( LinearLayout.LayoutParams.WRAP_CONTENT,LinearLayout.LayoutParams.WRAP_CONTENT); p.gravity= Gravity.CENTER_VERTICAL; snackbarLayout.addView(add_view,index,p);}}
简单的使用示例:
SnackbarUtil.ShortSnackbar(coordinator,"妹子向你发来一条消息",SnackbarUtil.Info).show();
资料来源:详情查看《Design Support Library第三部分:Snackbar样式》和《Snackbar使用及其注意事项》两篇文章
0 0
- android support design Library库之snakeBar
- Android Design Support Library之TabLayout
- Android Design Support Library之CoordinatorLayout,AppBarLayout
- Android Support Design Library之CoordinatorLayout
- Android Support Design Library之NavigationView
- Android Support Design Library之FloatingActionButton
- Android Support Design Library之TabLayout
- Android Support Design Library之TextInputLayout
- Android Support Design Library之NavigationView
- Android Design Support Library实践之Snackbar
- Android Design Support Library之TabLayout
- Android之Design Support Library整理
- Android Design Support Library之NavigationView
- Android Support Design Library 之 TabLayout
- Android Support Design Library之CollapsingToolbarLayout
- Android Design Support Library之NavigationView
- Android Design Support Library
- Android Design Support Library
- Eclipse升级后之前代码异常处理
- use vue vuex vue-router, not use webpack
- web网站架构演变过程
- mqtt
- altera小实验——SRAM读取
- android support design Library库之snakeBar
- swift删除navigationBar底部一条黑线
- C++第一次实验:项目二分段函数求值
- Reverse Linked List
- 2017年前端领域可能迎来的6个发展趋势
- C++上机实验1-项目2
- JDK中集合包MAP的源码解读配合大神的一起看,秒懂。
- C++上机报告1
- ibatis返回一对多的关系的写法