Android Design package 使用

SnackBar 的使用

SnackBar 主要是用于简短的提示，以及对于提示的简单反馈。主要使用方法

SnackBar.make(parentView,messageText,showTime)//init snackbar .setAction(actionText,onClickListener)//init action text and the onClickListener .setActionTextColor(color)// set action text color .show;// show the SnackBar

SnackBar 黑色的背景感觉很难看,或者是跟App整体颜色不符的话可以更换背景颜色

//get snackBar instance SnackBar sb = SnackBar.make(parentView,messageText,showTime); // get snackBar view View view = sb.getView(); //set view background view.setBackGroundColor(color); ...

以上就是SnackBar的一般用法 如果提示有两个或者两个以上的操作建议使用AlertDialog.

---

FloatingActionButton 的使用

因为SnackBar自parent view 底部弹出所以当使用FloatingActionButton的时候，弹出的SnackBar很可能会遮挡FAB，所以这个button会floating。 我们先看一下他怎么使用。 这是布局文件

<android.support.design.widget.FloatingActionButton android:id="@+id/floating_btn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|right" android:layout_margin="16dp" android:src="@mipmap/ic_launcher" app:fabSize="normal" app:layout_behavior="com.ysp.houge.ui.ScrollBehavior" />

我们自定义一个Behavior,这个behavior的目的我们视图滑动的时候，FloatingActionButton隐藏，

public class ScrollBehavior extends FloatingActionButton.Behavior { private AlphaAnimation mHideAnimation = null; private AlphaAnimation mShowAnimation = null; public ScrollBehavior(Context context, AttributeSet attrs) { super(context, attrs); } @Override public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, FloatingActionButton child, View directTargetChild, View target, int nestedScrollAxes) { boolean is = nestedScrollAxes == ViewCompat.SCROLL_AXIS_VERTICAL || super.onStartNestedScroll(coordinatorLayout, child, directTargetChild, target, nestedScrollAxes); return is; } @Override public void onNestedScroll(CoordinatorLayout coordinatorLayout, FloatingActionButton child, View target, int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed) { super.onNestedScroll(coordinatorLayout, child, target, dxConsumed, dyConsumed, dxUnconsumed, dyUnconsumed); setHideAnimation(child,500); } @Override public boolean onInterceptTouchEvent(CoordinatorLayout parent, FloatingActionButton child, MotionEvent ev) { switch (ev.getAction()) { case MotionEvent.ACTION_DOWN: break; case MotionEvent.ACTION_MOVE: // child.hide(); break; case MotionEvent.ACTION_POINTER_UP: // child.show(); break; } return super.onInterceptTouchEvent(parent, child, ev); } /** * View渐隐动画效果 */ private void setHideAnimation(View view, int duration) { if (null == view || duration < 0) { return; } if (null != mHideAnimation) { mHideAnimation.cancel(); } mHideAnimation = new AlphaAnimation(1.0f, 0.0f); mHideAnimation.setDuration(duration); view.startAnimation(mHideAnimation); } }

根据API，当视图滑动时调用startNestScroll(),方法

public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, FloatingActionButton child, View directTargetChild, View target, int nestedScrollAxes) { boolean is = nestedScrollAxes == ViewCompat.SCROLL_AXIS_VERTICAL || super.onStartNestedScroll(coordinatorLayout, child, directTargetChild, target, nestedScrollAxes); return is; }

nestedScrollAxes 的返回值表示滑动方向；

然后调用onNestedScroll();

public void onNestedScroll(CoordinatorLayout coordinatorLayout, FloatingActionButton child, View target, int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed) { super.onNestedScroll(coordinatorLayout, child, target, dxConsumed, dyConsumed, dxUnconsumed, dyUnconsumed); setHideAnimation(child,500); }

当时竖向滑动时 dyConsumed>0时表示向下滑动<0是表示向上滑动。 其他更复杂的情况。可以复写onInterceptTouchEvent();该方法提供了MotionEvent。

public boolean onInterceptTouchEvent(CoordinatorLayout parent, FloatingActionButton child, MotionEvent ev) { switch (ev.getAction()) { case MotionEvent.ACTION_DOWN: break; case MotionEvent.ACTION_MOVE: // child.hide(); break; case MotionEvent.ACTION_POINTER_UP: // child.show(); break; } return super.onInterceptTouchEvent(parent, child, ev); }

---

AppBarLayout 的使用

AppBarLayout使用的时候就是和CollapsingToolBarLayout一起使用的时候，制造一个折叠展开的效果可能会产生些困惑。那么我们下面就介绍一下这个怎么用： 我们从内到外使用的视图结构如下

<android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <android.support.design.widget.CollapsingToolbarLayout android:layout_width="match_parent" android:layout_height="wrap_content" ... > <!--如果展开时要显示图片，这里放置一个ImageView--> <ImageView android:layout_width="match_parent" android:layout_height="300dp" ... /> <android.support.v7.widget.Toolbar android:layout_width="match_parent" android:layout_height="wrap_content" ... > </android.support.v7.widget.Toolbar> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout>

我们在最外层用个AppBarLayout这个没有什么疑问以及要介绍的东西

<android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <android.support.design.widget.AppBarLayout>

我们为了创造折叠效果我们就用一个CollapsingToorBarLayout,从名字上来看我们就知道这个东西是要和android.support.widget.ToolBarLayout一起使用，我们先看看他的XML attributes的使用，我挑几个比较常用的介绍一下。其他的大家可以自己去查API。

折叠状态下ToolBarLayout 的title显示的位置。 android.support.design:collapsedTitleGravity

折叠状态下给ToolBarLayout设置的遮挡物，是个Drawable。

android.support.design:contentScrim

设置展开状态下ToolBarTitle的位置

android.support.design:expandedTitleGravity android.support.design:expandedTitleMargin android.support.design:expandedTitleMarginBottom 展开状态下文字的appearance,这个appearance可以是一个resource也可以是一个theme。 android.support.design:expandedTitleTextAppearance设置遮挡物显示的动画 android.support.design:scrimAnimationDuration

下面两个只有一起使用才生效

android.support.design:title android.support.design:titleEnabled

因为大家用ToolBarLayout的时间很长了我就不具体介绍怎么使用,这里我们使用的是 android.support.v7.widget.ToolBarLayout

那么AppBarLayout CollapsingToolBarLayout android.support.v7.widget.ToolBar 这三个怎么能知道视图（如 NestedScrollView 或者 recyclerView）的滑动了呢？这里就需要在视图添加一个

app:layout_behavior="@string/appbar_scrolling_view_behavior" 来告诉appbar 视图滑动了。

那么appbar怎么根据滑动信息来进行联动呢？这里就需要设置scroll_flag app:layout_scrollFlags="scroll|enterAlways"

这个scroll_flag有这么几个参数，我们分别来介绍一下

参数名参数值参数介绍enterAlways4无论视图（RecyclerView，NestedScroolView）是否滑动（比如滑动到顶的时候）设置这个属性的视图都将向下滑动enterAlwaysCollapsed8enterAlways增强版exitUntilCollapsed2设置折叠scroll1滑动，要使用其他参数之前都要使用这个参数snap10我也没翻译明白

这里面CollapsingToolBarLayout要设置折叠属性 app:layout_scrollFlags="scroll|exitUntilCollapsed"

ToolBarLayout要设置 app:layout_scrollFlags="scroll|enterAlwaysCollapsed"

然后要设置折叠属性就需要用到 app:layout_collapseMode="pin"

他有三个参数我们一一来看一下

ConstantvalueDescriptionnone0视图正常显示，不设置折叠的behaviorparallax2视图会滑动折叠，折叠倍数请参考 layout_collapseParallaxMultiplierpin1视图钉在初始位置，不做滑动，或者是折叠

layout_collapseParallaxMultiplier是一个float类型的倍数器。