前言
更多Material Design 文章请看:
Material Design 之 Toolbar 开发实践总结
Material Design之 AppbarLayout 开发实践总结
Material Design 之 Behavior的使用和自定义Behavior
Material Design 之 TabLayout 使用
Material Design 之 TextInputLayout和TextInputEditText
这是Material Design 系列的最后一篇文章,前面几篇文章讲了Material Design中一些比较重要并且常用的控件,最后这一篇文章算是一个补充,讲一下CardView、FloatActionButton 和 Snackbar。由于用法比较简单,所以就不每一个都拎出来单讲。以下分别是这三个控件的用法。
CardView(卡片)
卡片是一张带有材料属性的纸片,用作展示更多详细信息的入口点。卡片包含了一组特定的数据集,数据集含有各种相关信息,如主题照片、文本,链接等等。卡片有固定的宽度和可变的高度。最大高度限制于可适应平台上单一视图的内容,但如果需要它可以临时扩展(例如,显示评论栏)。卡片不会翻转以展示其背后的信息。
卡片集是共面的,或者统一平面的多张卡片布局。如下:
![3513995-4f3d4125e2a9fdf2.png](https://i-blog.csdnimg.cn/blog_migrate/0889830837ae10d21483a441f34649cb.png)
一张卡片包含了一组特定的数据集,考虑在以下这些情况使用卡片:
作为一个集合,比较多种数据类型,比如:图片、视频和文本。
不需要直接比较(如:用户不会直接比较图片和文本)
支持内容高度可变,比如评论。
包含响应按钮,比如+1 按钮或者评论
要使用网格列表,但需要显示更多文本来补充图片
以上就是使用卡片的一些场景,看一个使用不当的例子(图片来自官网):
![3513995-0bcd5a2ce2c13bc1.png](https://i-blog.csdnimg.cn/blog_migrate/4b686fe0d9a8cebcabb1dd721b5c35e8.png)
** 错误示例:** 这种卡片的使用分散了用户的注意力,不能快速浏览,也不能忽略掉,所以将这些内容放在不同的卡片上是难以理解的。其实国内有些知名APP也没有按照规范来做,给我们做了错误的示范,如知乎日报首页:
![3513995-4f8071bd2fc48075.png](https://i-blog.csdnimg.cn/blog_migrate/ea5af4af6185de6c369bb63dd25d2de6.png)
正确的用法如下:
![3513995-870895bb8980c6d0.png](https://i-blog.csdnimg.cn/blog_migrate/39c110b8bc0f82065773b43740f97a9b.png)
正确示例:可快速浏览的列表,用来代替卡片,是表现没有许多操作的同类内容的合适方法。
以上就是Material Design 设计规范里给的使用卡片的一些场景和正确使用方法,更多的设计规范请看:Material Design 官网。
我们要怎么实现卡片设计呢?Google 给我们提供了CardView,并且是像下兼容的(L 以下仍然可以用)。CardView 的用法比较简单,重要的属性也就几个。其实用CardView主要实现的圆角和阴影效果。看一下CardView的属性:
app:cardBackgroundColor 设置卡片的背景色
app:cardCornerRadius 设置卡片的圆角
app:cardElevation 设置卡片的阴影
app:cardUseCompatPadding 是否添加padding
app:cardPreventCornerOverlap 在v20和v20以前的版本添加padding,防止CardView的内容和圆角相交
上面几个属性是CardView的几个常用的属性,当然也可以在代码中设置,调用CardView.setXXX就行
mCardView = (CardView) findViewById(R.id.card_view);
//设置背景
mCardView.setCardBackgroundColor(getColor(R.color.colorPrimary));
//设置圆角
mCardView.setRadius(5);
//设置阴影
mCardView.setCardElevation(3);
//设置 兼容padding
mCardView.setUseCompatPadding(true);
//
mCardView.setPreventCornerOverlap(true);
比较简单,就上面几个属性,都一一介绍了,看一些示例:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="8dp"
>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardCornerRadius="3dp"
app:cardElevation="3dp"
app:cardUseCompatPadding="true"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="300dp"
android:scaleType="centerCrop"
android:src="@drawable/meizhi"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="24sp"
android:text="Material Design"
android:textColor="@color/black"
android:layout_marginTop="16dp"
android:paddingRight="16dp"
android:paddingLeft="16dp"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="16sp"
android:layout_marginTop="6dp"
android:paddingRight="16dp"
android:paddingLeft="16dp"
android:text=" material metaphor is the unifying theory of a rationalized space and a system of motion."
/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="16sp"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@color/orange"
android:textSize="24sp"
android:text="SHARE"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@color/orange"
android:textSize="24sp"
android:text="EXPLORE"
android:layout_marginLeft="20dp"
/>
</LinearLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="@+id/card_view"
android:layout_width="match_parent"
android:layout_height="100dp"
app:cardBackgroundColor="@color/DarkCyan"
app:cardUseCompatPadding="true"
app:cardElevation="4dp"
app:cardCornerRadius="5dp"
>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Card"
android:textColor="@color/white"
android:textSize="20sp"
android:gravity="center"
/>
</android.support.v7.widget.CardView>
</LinearLayout>
效果如下:
![3513995-ef9f350babcfea19.png](https://i-blog.csdnimg.cn/blog_migrate/851b99d9d01745ef8aca3d6df637e888.png)
CardView 点击效果
Material Design 的设计就是为了更贴近现实生活中的场景,当点击之后,是会有反馈的,可以给CardView 添加点击效果。
android:clickable="true"
android:foreground="?attr/selectableItemBackground"
这样点击时就会有波纹扩散效果了,增加体验。
![3513995-5d4a2194f2d3717f.gif](https://i-blog.csdnimg.cn/blog_migrate/ce270ff6339602ba49547f63819966ba.gif)
FloatingActionButton (浮动操作按钮)
FloatingActionButton(浮动操作按钮,以下简称FAB)适用于特定的进阶操作。它是漂浮在 UI 上的一个圆形图标,具有一些动态的效果,比如变形、弹出、位移等等。FAB有3种尺寸,默认尺寸、mini 尺寸和 auto 尺寸 。
默认尺寸:适用于大多数情况
mini 尺寸:仅用于创建与其他屏幕元素视觉的连续性。
auto: 基于Window(窗口)大小变化的,当窗口大小小于470dp,会选择一个较小尺寸的button,更大一点的窗口就选择更大的button
可以通过 fabSize 来控制FAB的size。因为FAB这个类继承自ImageView,所以我们可以通过setImageDrawable() 方法来控制FAB icon 的显示。FAB 默认的背景色是colorAccent,如果你想在运行时改变它的颜色,你可以调用方法setBackgroundTintList(ColorStateList) 来改变。
介绍一下FAB的几个属性:
app:elevation 设置阴影
app:rippleColor 扩散效果的颜色
app:fabSize 设置 FAB 的 size
app:layout_anchor 设置锚点
app:useCompatPadding 兼容padding 可用
属性比较简单,前面讲Behavior 的时候提到过,FAB 和 AppbarLayout 的联动和FAB和Snackbar的Behavior 确保Snackbar 从底部弹出时,不会遮挡FAB,而会相应的上移。这2个也是FAB 常用的场景,效果如下:
![3513995-fe30d9e724e699da.gif](https://i-blog.csdnimg.cn/blog_migrate/87e078c4bfd4d9f836797769f7100151.gif)
布局如下:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="200dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="200dp"
android:src="@drawable/meizhi"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
/>
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="18dp"
android:text="@string/large_text"/>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@android:drawable/ic_dialog_email"
android:layout_marginBottom="20dp"
android:layout_marginRight="15dp"
android:layout_gravity="bottom|right"
app:rippleColor="@android:color/darker_gray"
app:elevation="3dp"
/>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_book_list"
android:layout_marginBottom="20dp"
android:layout_marginRight="15dp"
app:layout_anchor="@+id/appbar_layout"
app:layout_anchorGravity="bottom|right"
app:elevation="5dp"
/>
</android.support.design.widget.CoordinatorLayout>
代码中改变FAB 颜色,icon等:
fab1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Snackbar.make(fab1,"点击fab1",Snackbar.LENGTH_LONG).show();
}
});
fab1.setBackgroundTintList(ColorStateList.valueOf(getResources().getColor(R.color.colorPrimary)));
fab2.setImageResource(R.drawable.ic_book_list);
fab2.setCompatElevation(6);
fab2.setSize(FloatingActionButton.SIZE_NORMAL);
还可以监听FAB的隐藏或者显示,在项目中可能会有这样的需求,当FAB隐藏或者显示之后,接下来做什么操作,监听代码如下:
fab2.hide(new FloatingActionButton.OnVisibilityChangedListener() {
@Override
public void onHidden(FloatingActionButton fab) {
Log.i(TAG,"fab hidden...");
}
});
fab2.show(new FloatingActionButton.OnVisibilityChangedListener() {
@Override
public void onShown(FloatingActionButton fab) {
Log.i(TAG,"fab show...");
}
});
可以在对应的回调方法里做接下来的操作。
Snackbar
Snackbar 是一种针对操作的轻量级反馈机制,常以一个小的弹出框的形式,出现在手机屏幕下方或者桌面左下方。它们出现在屏幕所有层的最上方,包括浮动操作按钮。
它们会在超时或者用户在屏幕其他地方触摸之后自动消失。Snackbar 可以在屏幕上滑动关闭。当它们出现时,不会阻碍用户在屏幕上的输入,并且也不支持输入。屏幕上同时最多只能现实一个 Snackbar。
Android 也提供了一种主要用于提示系统消息的胶囊状的提示框 Toast。Toast 同 Snackbar 非常相似,但是 Toast 并不包含操作也不能从屏幕上滑动关闭。
用法:
Snackbar的高度应该能容纳下所提示的 文本,并且提示与操作相关,所以不应该提示长文本,Snackbar的用法与Toast非常相似。
弹出一个Toast 的代码:
Toast.makeText(FABSimpleActivity.this,"哈哈,我是Toast",Toast.LENGTH_SHORT).show();
弹出一个snackbar的代码:
fab2.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Snackbar.make(fab2,"哈哈,我是Snackbar",Snackbar.LENGTH_SHORT).show();
}
});
效果如下:
![3513995-754b755bda015ddb.png](https://i-blog.csdnimg.cn/blog_migrate/42535cfcdd5d9581762758feeacf8beb.png)
从上面的代码可以看出,Toast与Snackbar的调用方法非常相似,第一个参数有点区别,Toast的第一个参数是一个Context,Snackbar的第一个参数是View,但其实都是殊途同归的,Snackbar也是根据传入的View找到一个Parent View ,然后再获取Context。或许你们跟我一样很奇怪为什么要绕着么大一圈来获取这个Context,像Toast 一样直接传一个Context不行吗?答案是不行的,因为需要告诉Snackbar,让它显示在哪个容器内。Snackbar 和Toast的方式不一样,看一下源码一目了然,走读一下源码:
1,在make方法里构造了Snackbar,传入的参数是根据传的View找到的Parent View :
public static Snackbar make(@NonNull View view, @NonNull CharSequence text,
@Duration int duration) {
Snackbar snackbar = new Snackbar(findSuitableParent(view));
snackbar.setText(text);
snackbar.setDuration(duration);
return snackbar;
}
Snackbar 构造方法:
private Snackbar(ViewGroup parent) {
mTargetParent = parent;
mContext = parent.getContext();
ThemeUtils.checkAppCompatTheme(mContext);
LayoutInflater inflater = LayoutInflater.from(mContext);
mView = (SnackbarLayout) inflater.inflate(
R.layout.design_layout_snackbar, mTargetParent, false);
mAccessibilityManager = (AccessibilityManager)
mContext.getSystemService(Context.ACCESSIBILITY_SERVICE);
}
上面inflate 的时候用到了mTargetParent,告诉Snackbar要显示在哪个容器内。
再看一下show 的方式:
public void show() {
SnackbarManager.getInstance().show(mDuration, mManagerCallback);
}
然后调用scheduleTimeoutLocked 方法:
private void scheduleTimeoutLocked(SnackbarRecord r) {
if (r.duration == Snackbar.LENGTH_INDEFINITE) {
// If we're set to indefinite, we don't want to set a timeout
return;
}
int durationMs = LONG_DURATION_MS;
if (r.duration > 0) {
durationMs = r.duration;
} else if (r.duration == Snackbar.LENGTH_SHORT) {
durationMs = SHORT_DURATION_MS;
}
mHandler.removeCallbacksAndMessages(r);
mHandler.sendMessageDelayed(Message.obtain(mHandler, MSG_TIMEOUT, r), durationMs);
}
最后是用Handler 发了一条消息,通知显示:
static {
sHandler = new Handler(Looper.getMainLooper(), new Handler.Callback() {
@Override
public boolean handleMessage(Message message) {
switch (message.what) {
case MSG_SHOW:
((Snackbar) message.obj).showView();
return true;
case MSG_DISMISS:
((Snackbar) message.obj).hideView(message.arg1);
return true;
}
return false;
}
});
}
看到这儿大概就明白了,最终调用的是showView()这个方法显示:
final void showView() {
...
// 上面省略的部分主要是判断是不是CoordinatorLayout的子View,如果添加Behavior
if (ViewCompat.isLaidOut(mView)) {
if (shouldAnimate()) {
// If animations are enabled, animate it in
animateViewIn();
} else {
// Else if anims are disabled just call back now
onViewShown();
}
} else {
// Otherwise, add one of our layout change listeners and show it in when laid out
mView.setOnLayoutChangeListener(new SnackbarLayout.OnLayoutChangeListener() {
@Override
public void onLayoutChange(View view, int left, int top, int right, int bottom) {
mView.setOnLayoutChangeListener(null);
if (shouldAnimate()) {
// If animations are enabled, animate it in
animateViewIn();
} else {
// Else if anims are disabled just call back now
onViewShown();
}
}
});
}
}
以上分析了Snackbar 的创建显示过程。其实使用是很简单的,跟以前使用Toast提示差不多。
最后还有一点就是,Toast只能给个提示,而Snackbar我们还可以给他设置一个Action,当显示Snackbar的时候,我们点击Action按钮,执行相应的操作
代码:
private void showSnackbar(){
Snackbar snackbar = Snackbar.make(fab2,"哈哈,我是Snackbar",Snackbar.LENGTH_SHORT);
snackbar.setAction("UNDO", new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(FABSimpleActivity.this,"执行Undo操作",Toast.LENGTH_LONG).show();
}
});
snackbar.setActionTextColor(getResources().getColor(R.color.DarkCyan));
snackbar.setText("已经删除1张照片");
snackbar.show();
}
效果如下:
![3513995-31a3740530fbec3f.gif](https://i-blog.csdnimg.cn/blog_migrate/c347cab6507fa05de06189f2a080e0a2.gif)
如上图所示,添加了一个UNDO 按钮,点击按钮之行相应操作。
最后
这个三个控件的用法比较简单,本文从它们的使用场景和原理讲了它们的基本用法,了解这些之后,可以加深印象。本文是Material Design 相关的最后一篇文章,可能还有一些零碎的东西没有讲到,还有一些像RecyclerView 这些的用法网上的博客已经很多了,有的也写得很好很详细,不打算再写。另外,Material Design 系列的Demo在这儿:MaterialDesignSamples