FAB(FloatingActionButton)
Material Design的标志性设计模式之一就是悬浮操作按钮，这是一种色彩鲜明的圆形图标按钮。
属性设置
android:src：FAB中显示的图标.
app:backgroundTint：正常的背景颜色
app:rippleColor：按下时的背景颜色
app:elevation：正常的阴影大小
app:pressedTranslationZ：按下时的阴影大小
app:layout_anchor：设置FAB的锚点，即以哪个控件为参照设置位置
app:layout_anchorGravity：FAB相对于锚点的位置
app:fabSize：FAB的大小，normal或mini（分别对应56dp和40dp）
app:borderWidth：边框宽度，通常设置为0 ，用于解决Android 5.X设备上阴影无法正常显示的问题
效果图：
oval_ripple.xml
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:colorControlHighlight">
<item>
<shape android:shape="oval">
<solid android:color="?android:colorAccent"/>
shape>
item>
ripple>
fab_raise.xml
xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="true" android:state_pressed="true">
<objectAnimator
android:duration="@android:integer/config_shortAnimTime"
android:propertyName="translationZ"
android:valueTo="8dp"
android:valueType="floatType"
/>
item>
<item>
<objectAnimator
android:duration="@android:integer/config_shortAnimTime"
android:propertyName="translationZ"
android:valueTo="0dp"
android:valueType="floatType"
/>
item>
selector>
fab_plus.xml
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:height="24dp"
android:width="24dp"
android:viewportWidth="24"
android:viewportHeight="24">
<path android:fillColor="#FFF" android:pathData="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" />
vector>
Activity_main.xml
xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<ImageButton
android:id="@+id/fab"
android:layout_width="56dp"
android:layout_height="56dp"
android:background="@drawable/oval_ripple"
android:stateListAnimator="@animator/fab_raise"
android:src="@drawable/fab_plus"
android:elevation="6dp"
android:layout_marginStart="19dp"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"
android:layout_marginTop="15dp" />
<android.support.design.widget.FloatingActionButton
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_margin="30dp"
android:src="@drawable/fab_plus"
app:fabSize="normal"
app:elevation="6dp"
app:pressedTranslationZ="18dp"
app:borderWidth="0dp"
app:layout_anchorGravity="bottom|right|end"
android:layout_alignTop="@+id/fab"
android:layout_toEndOf="@+id/fab"/>
RelativeLayout>
Toolbar
从5.0开始起,Google推出Toolbar替代ActionBar
如图：
activity_main.xml
xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/colorPrimary"
app:logo="@drawable/ic_launcher_foreground"
app:title="@string/title"
app:titleTextColor="@color/black"
app:subtitle="@string/subtitle"
app:subtitleTextColor="@color/black"
app:titleMarginStart="5dp"
app:navigationIcon="@drawable/ic_arrow_back_black_24dp"
app:navigationContentDescription="@string/back">
android.support.v7.widget.Toolbar>
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:src="@drawable/fab_plus"
app:rippleColor="@color/colorAccent"
app:borderWidth="0dp"
app:elevation="6dp"
android:layout_margin="50dp"
app:pressedTranslationZ="18dp"
app:fabSize="normal"/>
RelativeLayout>
menu.xml
xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="@+id/search"
android:title="@string/search"
android:icon="@drawable/ic_search_black_24dp"
app:showAsAction="always"/>
<item
android:id="@+id/settings"
android:title="@string/settings"
app:showAsAction="never"/>
menu>
MainActivity.java
package com.example.admin.fab;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar=findViewById(R.id.toolbar);
toolbar.inflateMenu(R.menu.menu);
}
}
CoordinatorLayout
实际上是一个更强大的FrameLayout, 可以通过Behavior 来控制其中各个child view的交互行为. 也可以指定anchor来指定floating view相对于其他某个View的位置. 比如Floating Action Button在显示Snackbar的时候自动向上移动. 为了使Toolbar响应滚动事件, 我们需要给它里边包一个AppBarLayout.
它是一个纵向的LinearLayout, 必须要作为CoordinateLayout的直接child使用.
然后, 我们需要定义AppBarLayout和我们scroll的内容View的关系.
这里可以是一个RecyclerView,
support library提供了@string/appbar_scrolling_view_behavior, 它映射到AppBarLayout.ScrollingViewBehavior.
它是用来告诉AppBarLayout下面那个scroll view上的scroll事件什么时候发生
所以这个属性必须在触发事件的view上指定。
当CoordinatorLayout看到自己的child(比如RecyclerView)声明了这个属性, 就会在自己的其他child中寻找相关的view(AppBarLayout).
这样, 当RecyclerView发生scroll事件的时候, AppBarLayout和其中的views都会被通知到.
AppBarLayout
AppBarLayout是一种支持响应滚动手势的app bar布局（比如工具栏滚出或滚入屏幕），CollapsingToolbarLayout则是专门用来实现子布局内不同元素响应滚动细节的布局。
滚动事件怎么通知到AppBarLayout的呢? 还需要一个属性:app:layout_scrollFlags.
app:layout_scrollFlags属性中:
app:layout_scrollFlags="scroll"
往上滑动就不说了，往下滑动就是当下面的滚动布局滑动到顶端时，标题栏toolbar才会滑出来。该属性实用性一般吧。
app:layout_scrollFlags="scroll|enterAlways"
往下滑动时，，标题栏 toolbar 会优先滑出来，然后滚动布局才开始滑动。就像该单词的意思一样：总是在。也就是只要添加了该属性值，下滑时 toolbar 总是优先滑出来。该属性比较实用。
app:layout_scrollFlags="scroll|enterAlways|snap"
不管是往下或者往上滑动时，，标题栏 toolbar 首先还是和前面一样的，不过有个细微的不同，toolbar会根据当前的滚动距离，自动选择是隐藏还是显示。该属性实用性也一般。
app:layout_scrollFlags=”scroll|enterAlways|exitUntilCollapsed”
android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="100dp" android:background="@color/colorAccent" android:minHeight="40dp" app:layout_scrollFlags="scroll|enterAlways|exitUntilCollapsed" app:popupTheme="@style/ToolbarPopupTheme"> 我们给Toolbar 设置了一个最小高度 android:minHeight=”40dp”，然后又把正常高度改变了，并随意改成了100dp。 默认toolbar 显示的正常高度值我们设置成的100dp，当我们上滑的时候，高度达到最小高度40dp时，toolbar不在滑动了。该属性感觉实用性不强 CollapsingToolbarLayout是5.0版本出现的控件，可以实现Toolbar的折叠效果。 背景图平行淡出 这个类使得我们可以做更高级的动画效果, 比如放一个ImageView, 它在折叠的时候淡出. CollapsingToolbarLayout的属性 app:contentScrim，指定布局内部未展开时的背景颜色 app:collapsedTitleTextAppearance，指定未展开时的标题文字字体 app:collapsedTitleTextColor，指定未展开时的标题文字颜色 app:collapsedTitleGravity，指定未展开时的标题文字对齐方式 app:expandedTitleTextAppearance，指定展开后的标题文字字体 app:expandedTitleTextColor，指定展开后的标题文字颜色 app:expandedTitleGravity，指定展开后的标题文字对齐方式 app:expandedTitleMargin，指定展开后的标题四周间距 以上控件组合的例子： 图片： axtivity_main.xml CollapsingToolbarLayout
这时候需要把ImageView的app:layout_collapseMode属性置为parallax.
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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="150dp">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|enterAlways">
<ImageView
android:id="@+id/image"
android:layout_width="match_parent"
android:layout_height="180dp"
android:contentDescription="@string/number"
android:fitsSystemWindows="true"
android:src="@drawable/green"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.1" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:title="@string/title"
app:titleTextColor="@color/white"
app:titleMarginStart="5dp"
app:navigationIcon="@drawable/ic_arrow_back_black_24dp"
app:navigationContentDescription="@string/back">
android.support.v7.widget.Toolbar>
android.support.design.widget.CollapsingToolbarLayout>
android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="@+id/recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/fab_plus"
app:rippleColor="@color/colorAccent"
app:borderWidth="0dp"
app:elevation="6dp"
android:layout_margin="50dp"
app:pressedTranslationZ="18dp"
app:fabSize="normal"
app:layout_anchor="@id/recyclerview"
app:layout_anchorGravity="bottom|right|end" />
android.support.design.widget.CoordinatorLayout>