Design各控件的搭配使用

PS:使用design包需要在design项目中导入appcompat包

使用到的控件包括：
CoordinatorLayout
AppBarLayout----->AppBarLayout.OnOffsetChangedListener的使用
CollapsingToolbarLayout
Toolbar
RecyclerView
CardView----->关于使用 CardView 开发过程中要注意的细节
FloatingActionButton
Snackbar----->从顶部显示的snackbar



基本结构：

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:id="@+id/coordinatorLayout"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:fitsSystemWindows="true"    tools:context=".MainActivity" >    <!-- 第一部分：伸缩工具栏 --><!-- AppBarLayout目前必须是第一个嵌套在CoordinatorLayout里面的子view --><!-- AppBarLayout里面定义的view只要设置了app:layout_scrollFlags属性，就可以在RecyclerView滚动事件发生的时候被触发： --><!-- app:layout_scrollFlags属性里面必须至少启用scroll这个flag，这样这个view才会滚动出屏幕，否则它将一直固定在顶部。 --><!-- 可以使用的其他flag有：enterAlways: 一旦向上滚动这个view就可见。enterAlwaysCollapsed: 顾名思义，这个flag定义的是何时进入（已经消失之后何时再次显示）。假设你定义了一个最小高度（minHeight）同时enterAlways也定义了，那么view将在到达这个最小高度的时候开始显示，并且从这个时候开始慢慢展开，当滚动到顶部的时候展开完。exitUntilCollapsed: 同样顾名思义，这个flag时定义何时退出，当你定义了一个minHeight，这个view将在滚动到达这个最小高度的时候消失。 --> <!-- 记住，要把带有scroll flag的view放在前面，这样收回的view才能让正常退出，而固定的view继续留在顶部。 -->    <android.support.design.widget.AppBarLayout        android:id="@+id/appbar"        android:layout_width="match_parent"        android:layout_height="240dp"        android:fitsSystemWindows="true"        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" >        <!-- 如果想制造toolbar的折叠效果，我们必须把Toolbar放在CollapsingToolbarLayout中： -->        <!-- 通常，我们我们都是设置Toolbar的title，而现在，我们需要把title设置在CollapsingToolBarLayout上，而不是Toolbar。 -->        <!-- 给需要有折叠效果的组件设置 layout_collapseMode属性 -->        <!-- Toolbar 的高度layout_height必须固定，不能 “wrap_content”，否则Toolbar不会滑动，也没有折叠效果 -->        <android.support.design.widget.CollapsingToolbarLayout            android:id="@+id/collapsing_toolbar"            android:layout_width="match_parent"            android:layout_height="match_parent"            app:layout_scrollFlags="scroll|exitUntilCollapsed"            android:fitsSystemWindows="true"            app:contentScrim="?attr/colorPrimary"            app:expandedTitleMarginEnd="64dp"            app:expandedTitleMarginStart="48dp" >            <!-- 制造视差效果 -->            <!-- CollapsingToolbarLayout还能让我们做出更高级的动画，比如在里面放一个ImageView，然后在它折叠的时候渐渐淡出。同时在用户滚动的时候title的高度也会随着改变。 -->            <!-- 为了制造出这种效果，我们添加一个定义了app:layout_collapseMode="parallax" 属性的ImageView。 -->            <ImageView                android:id="@+id/backdrop"                android:layout_width="match_parent"                android:layout_height="match_parent"                app:layout_collapseMode="parallax"                android:fitsSystemWindows="true"                android:scaleType="centerCrop"                app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"                android:src="@drawable/ic_launcher" />                        <android.support.v7.widget.Toolbar                android:id="@+id/toolbar"                android:layout_width="match_parent"                android:layout_height="?attr/actionBarSize"                app:layout_collapseMode="pin"                app:layout_scrollFlags="scroll|enterAlways"                app:titleTextAppearance="@style/TextAppearance.AppCompat.Headline"                app:popupTheme="@style/ThemeOverlay.AppCompat.Dark" />                    </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"        />    <!-- FloatingActionButton继承自ImageView；backgroundTint背景颜色，默认的背景颜色是Theme主题中的； elevation阴影的深度--><android.support.design.widget.FloatingActionButton    android:id="@+id/floatingActionButton"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_margin="16dp"        android:src="@drawable/ic_launcher"        app:fabSize="normal"        app:backgroundTint="#CCCC00"        app:elevation="16dp"        app:layout_anchor="@id/recyclerView"        app:layout_behavior="com.mb.widget.ScrollAwareFABBehavior"        app:layout_anchorGravity="bottom|right|end"/><!-- 为了能让FloatingActionButton也能折叠且消失出现，我们必须给FAB设置锚点属性app:layout_anchor="@id/appbar" --><android.support.design.widget.FloatingActionButton        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:src="@drawable/ic_launcher"        app:fabSize="normal"        app:backgroundTint="#CC00CC"        app:layout_anchor="@id/appbar"        app:layout_anchorGravity="bottom|right|end"/></android.support.design.widget.CoordinatorLayout>

import java.util.Arrays;import com.mb.widget.Cheeses;import com.mb.widget.SimpleStringRecyclerViewAdapter;import android.os.Bundle;import android.support.design.widget.CollapsingToolbarLayout;import android.support.design.widget.CoordinatorLayout;import android.support.design.widget.FloatingActionButton;import android.support.design.widget.Snackbar;import android.support.v7.app.AppCompatActivity;import android.support.v7.widget.LinearLayoutManager;import android.support.v7.widget.RecyclerView;import android.support.v7.widget.Toolbar;import android.view.Menu;import android.view.MenuItem;import android.view.View;/** * http://www.open-open.com/lib/view/open1437312265428.html * @author pythoner * */public class MainActivity extends AppCompatActivity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);// App Logo//        toolbar.setLogo(R.drawable.ic_launcher);        // Title        toolbar.setTitle("App Title");        // Sub Title        toolbar.setSubtitle("Sub title");        //Navigation Icon        toolbar.setNavigationIcon(R.drawable.ic_launcher);                setSupportActionBar(toolbar);        getSupportActionBar().setDisplayHomeAsUpEnabled(true);        final CoordinatorLayout coordinatorLayout = (CoordinatorLayout) findViewById(R.id.coordinatorLayout);                //通常，我们我们都是设置Toolbar的title，而现在，我们需要把title设置在CollapsingToolBarLayout上，而不是Toolbar。        CollapsingToolbarLayout collapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);        collapsingToolbar.setTitle("Title");                FloatingActionButton floatingActionButton = (FloatingActionButton) findViewById(R.id.floatingActionButton);        floatingActionButton.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {// TODO Auto-generated method stubfinal Snackbar snackbar = Snackbar.make(coordinatorLayout, "测试弹出提示", Snackbar.LENGTH_LONG);snackbar.show();snackbar.setAction("取消", new View.OnClickListener() {@Overridepublic void onClick(View v) {snackbar.dismiss();}});}});        RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recyclerView);        recyclerView.setAdapter(new SimpleStringRecyclerViewAdapter(this,Arrays.asList(Cheeses.sCheeseStrings)));        recyclerView.setLayoutManager(new LinearLayoutManager(this));        }@Overridepublic boolean onCreateOptionsMenu(Menu menu) {// Inflate the menu; this adds items to the action bar if it is present.getMenuInflater().inflate(R.menu.main, menu);return true;}@Overridepublic boolean onOptionsItemSelected(MenuItem item) {// Handle action bar item clicks here. The action bar will// automatically handle clicks on the Home/Up button, so long// as you specify a parent activity in AndroidManifest.xml.int id = item.getItemId();if (id == R.id.action_settings) {return true;}return super.onOptionsItemSelected(item);}}

<resources>    <!--        Base application theme, dependent on API level. This theme is replaced        by AppBaseTheme from res/values-vXX/styles.xml on newer devices.    -->    <style name="AppBaseTheme" parent="android:Theme.Light">        <!--            Theme customizations available in newer API levels can go in            res/values-vXX/styles.xml, while customizations related to            backward-compatibility can go here.        -->    </style>    <!-- Application theme. -->    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <!-- Theme.AppCompat.Light.NoActionBar -->        <item name="windowActionBar">false</item>        <item name="windowNoTitle">true</item>        <!-- 导航栏底色 -->        <item name="colorPrimary">@color/accent_material_dark</item>        <!-- 状态栏底色-->        <item name="colorPrimaryDark">@color/accent_material_light</item>        <!-- 导航栏上的标题颜色 -->        <item name="android:textColorPrimary">@android:color/black</item> <!-- Activity窗口的颜色 -->        <item name="android:windowBackground">@color/material_blue_grey_800</item> <!-- 按钮选中或者点击获得焦点后的颜色 -->        <item name="colorAccent">#00ff00</item> <!-- 和 colorAccent相反，正常状态下按钮的颜色 -->        <item name="colorControlNormal">#ff0000</item> <!-- Button按钮正常状态颜色 -->        <item name="colorButtonNormal">@color/accent_material_light</item> <!-- EditText 输入框中字体的颜色 -->        <item name="editTextColor">@android:color/darker_gray</item>    </style></resources>

参考：
http://www.open-open.com/lib/view/open1437312265428.html
http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0718/3197.html
http://www.jcodecraeer.com/a/anzhuokaifa/developer/2015/0531/2958.html

android design library提供的TabLayout的用法
http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0731/3247.html
当InstaMaterial遇到Design Support Library
http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0728/3224.html

总结一下现在关于Design Support Library的几个博客
http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0713/3179.html



TabbedCoordinatorLayout是一个演示在CollapsingToolbarLayout中使用TabLayout的例子，两者均放在CoordinatorLayout中
http://www.jcodecraeer.com/a/opensource/2015/1010/3564.html



新的AppBarLayout flag：SCROLL_FLAG_SNAP
http://www.open-open.com/lib/view/open1445225861898.html