Android Material Design 兼容库的使用详解

Misty8089 8年前
   <p>众所周知Material Design(材质设计)是Google在2014年I/O大会上发布的一种新的设计规范。一经推出就好评如潮,个人是非常喜欢这种风格的,由于他只支持5.0及其以上的设备,开发者也只是去尝尝鲜,并没用在真实的项目中去,使得其在国内的市场并不是太好。随后不久Google就退出了其兼容库Android Design Support Library,兼容至2.1!这绝对是业界良心,极大的便利了我们这些开发者。这一兼容库可以让我们可以在自己的项目真实的去体验一把。百度谷歌一下,其实现在已经有个很多介绍这个支持库的文章,但是很多都并不太详细,大部分让人看了都似懂非懂,我之前也学习过这个库的用法,很久没看基本又忘了,最近我又重新开始学习了这个库,所以本文也主要是对这次学习的一个总结,当然也参考了其他很多的文章,算是站在巨人的肩膀上吧,当然这篇文章也为后来的学习者有更多的参考资料。</p>    <p>先来几张效果图吧:</p>    <p><img src="https://simg.open-open.com/show/4a3501e0dc7e3d06ed22d3b46e24c268.png" alt="Android Material Design 兼容库的使用详解 " width="1174" height="744"></p>    <p>图1</p>    <p><img src="https://simg.open-open.com/show/bf662e65f3da8474765629d033760a9c.png" alt="Android Material Design 兼容库的使用详解 " width="1779" height="741"></p>    <p>图2</p>    <p>感兴趣的也可以先看看,最后能做一个什么样的App:<a href="/misc/goto?guid=4959671201733366394">MDDemo.apk</a></p>    <p>说到这个兼容库,其实很多都是可以在Github去找到对应的效果的,其实我们也是可以去用Github上的那些开源项目,那么多的库都要一个一个去引用,还是非常的麻烦,我猜可能Google也是看到这些东西经常被开发者用在了项目中,索性自己将其封装成了一个库,以方便开发者的使用。这个库我们应该怎样去使用呢?这是本文讲解的重点。首先我们看看这个库怎么去引用到我们的项目中:</p>    <blockquote>     <p>compile 'com.android.support:design:23.1.1'</p>    </blockquote>    <p>我们只需将其添加到项目的依赖中去,然后同步一下就OK了。<br> 添加了依赖之后我们再来看看这个库里面都有哪些控件吧,如下图,红色边框矩形框出来的就是这个库里面包含的控件,我们可以看到有<strong>AppBarLayout、CollapsingToolbarLayout、CoordinatorLayout,FloatingActionButton、NavigationView、Snackbar、TabLayout、TextInputLayout</strong>这八种,后面我会一个一个介绍用法,如果还没学过这些控件使用的本文可以手把手教你学会怎么去使用,如果之前有了解过的或者对这个还比较熟悉的,也可以继续看下去,就当做温习一下,顺便还可以帮我找出有表达不正确的地方。</p>    <p><img src="https://simg.open-open.com/show/67560d0cb4e7a9a0ffd73c4ff58aec3f.png" alt="Android Material Design 兼容库的使用详解 " width="408" height="778"></p>    <p>库中包含的控件.png</p>    <h2>1.Snackbar</h2>    <p>SnackBar通过在屏幕底部展示简洁的信息,为一个操作提供了一个轻量级的反馈,并且在Snackbar中还可以包含一个操作,在同一时间内,仅且只能显示一个 Snackbar,它的显示依赖于UI,不像Toast那样可以脱离应用显示。它的用法和Toast很相似,唯一不同的就是它的第一个参数不是传入Context而是传入它所依附的父视图,但是他比Toast更强大。<br> 我们来看看它的基本使用</p>    <pre>  <code class="language-xml">Snackbar.make(mDrawerLayout, "SnackbarClicked", Snackbar.LENGTH_SHORT).show();</code></pre>    <p>是不是和Toast很相似。我们来看看它的效果图:</p>    <p><img src="https://simg.open-open.com/show/c44d6e69f541ce19c5b0570cf519e27e.png" alt="Android Material Design 兼容库的使用详解 " width="423" height="686"></p>    <p>SnackWithoutAction</p>    <p><br> 是不是看着比Toast舒服多了</p>    <p>好了,我们再来看看一个包含Action的Snackbar怎么使用</p>    <pre>  <code class="language-java">  Snackbar.make(mDrawerLayout, "SnackbarClicked", Snackbar.LENGTH_SHORT).setAction("Action", new View.OnClickListener() {                              @Override                              public void onClick(View v) {                                  Toast.makeText(MainActivity.this, "I'm a Toast", Toast.LENGTH_SHORT).show();                              }                          }).setActionTextColor(Color.RED).show();</code></pre>    <p>这里我给Snackbar设置了一个Action,设置其文字颜色为红色,并带有了一个点击事件,在单击这个Action后就弹出一个Toast,效果图如下</p>    <p><img src="https://simg.open-open.com/show/ff273bbf1d157b0a40db7cc3db87e38d.png" alt="Android Material Design 兼容库的使用详解 " width="902" height="542"></p>    <p>SnackbarWithAction</p>    <h2>2.TextInputLayout</h2>    <p>使用过EditText的同学肯定知道,有一个叫hint的属性,它可以提示用户此处应该输入什么内容,然而当用户输入真实内容之后,hint的提示内容就消失了,用户的体验效果是十分不好的,TextInputLayout的出现解决了这个问题。</p>    <p>我们来看看这个控件的是怎么使用的</p>    <pre>  <code class="language-xml"><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"      xmlns:tools="http://schemas.android.com/tools"      android:layout_width="match_parent"      android:layout_height="match_parent"      android:orientation="vertical"      android:padding="10dp"      tools:context="burgess.com.materialdesignstudy.MDTextViewActivity">      <!--TextInputLayout的颜色来自style中的colorAccent的颜色-->      <android.support.design.widget.TextInputLayout          android:layout_width="match_parent"          android:layout_height="wrap_content">          <EditText              android:id="@+id/edit_username"              android:layout_width="match_parent"              android:layout_height="wrap_content"              android:hint="用户名/手机号"              android:inputType="textEmailAddress" />      </android.support.design.widget.TextInputLayout>      <android.support.design.widget.TextInputLayout          android:layout_width="match_parent"          android:layout_height="wrap_content">          <EditText              android:id="@+id/edit_pwd"              android:layout_width="match_parent"              android:layout_height="wrap_content"              android:hint="密码"              android:inputType="textPassword" />      </android.support.design.widget.TextInputLayout>  </LinearLayout></code></pre>    <p>其实这个控件的使用非常简单,我们只需在EditText外面再嵌套一个TextInputLayout就行了。我们来看看效果</p>    <p><img src="https://simg.open-open.com/show/7a9415e417dcd78475bb99a898e94e70.png" alt="Android Material Design 兼容库的使用详解 " width="368" height="541"></p>    <p>TextInputLayout</p>    <p><br> 还是很不错的,当用户在输入的时候hint的内容就会跑到输入内容的上边去,其中TextInputLayout中字体的颜色是style文件中的colorAccent(关于colorAccent是什么,文末有一张图看了就清楚了)的颜色。</p>    <h2>3.FloatingActionButton</h2>    <p>FloatingActionButton从名字可以看出它是一个浮动的按钮,它是一个带有阴影的圆形按钮,可以通过fabSize来改变其大小,主要负责界面的基本操作,这个按钮总体来说还是比较简单的。<br> 我们来看看它的一些属性:</p>    <ul>     <li>默认FloatingActionButton 的背景色是应用主题的 colorAccent(其实MD中的控件主题默认基本都是应用的这个主题),可以通过<strong>app:backgroundTint </strong>属性或者<strong>setBackgroundTintList (ColorStateList tint)</strong>方法去改变背景颜色。</li>     <li>上面提到 Floating action button 的大小尺寸,可以用过<strong>app:fabSize </strong>属性设置(normal or mini)</li>     <li><strong>android:src</strong> 属性改变 drawable</li>     <li><strong>app:rippleColor</strong>设置点击 button 时候的颜色(水波纹效果)</li>     <li><strong>app:borderWidth</strong>设置 button 的边框宽度</li>     <li><strong>app:elevation</strong>设置普通状态阴影的深度(默认是 6dp)</li>     <li><strong>app:pressedTranslationZ</strong>设置点击状态的阴影深度(默认是 12dp)</li>    </ul>    <p>怎么去使用:</p>    <pre>  <code class="language-xml"><android.support.design.widget.FloatingActionButton          android:id="@+id/fab_search"          android:layout_width="wrap_content"          android:layout_height="wrap_content"          android:layout_gravity="bottom|end"          android:layout_margin="16dp"          android:src="@android:drawable/ic_dialog_email"          app:borderWidth="2dp"          app:fabSize="normal"          app:rippleColor="#ff0000" /></code></pre>    <p><br> 其效果图如下:</p>    <p><img src="https://simg.open-open.com/show/5be63db822eb98459dbb9cabb6827590.png" alt="Android Material Design 兼容库的使用详解 " width="352" height="540"></p>    <p>FloatingActionButton</p>    <p><br> ##<strong>4.CoordinatorLayout</strong><br> 我们来看看官方对他的描述:<br> - CoordinatorLayout is a super-poweredFrameLayout.<br> - CoordinatorLayout is intended for two primary use cases:<br> 1.As a top-level application decor or chrome layout<br> 2.As a container for a specific interaction with one or more child views<br> 从这里我们可以知道它是一个增强版的FrameLayout,他可以协调其子View的交互,控制手势机滚动技巧。这个控件十分的强大,用处也十分的广泛。就比如刚才说的FloatingActionButton如果用CoordinatorLayout 作为FloatingActionButton的父布局,它将很好的协调Snackbar的显示与FloatingActionButton。</p>    <p><img src="https://simg.open-open.com/show/a82a28c3aff17f4eb0084abf9d552204.gif" alt="Android Material Design 兼容库的使用详解 " width="209" height="371"></p>    <p>没有使用CoordinatorLayout 作为父布局的FloatingActionButton显示Snackbar</p>    <p> </p>    <p><img src="https://simg.open-open.com/show/41332432d7ba25b8ff224a9214a1677d.gif" alt="Android Material Design 兼容库的使用详解 " width="209" height="371"></p>    <p>使用了CoordinatorLayout 作为父布局的FloatingActionButton显示Snackbar</p>    <p><br> 这两个动态图来源于网上,效果是显而易见的,原谅我用的手机测试,所以没法录制动态图(如果有人知道怎么去录制的请告知)。<br> 还有它的另外一个比较重要的用处是控制协调内容区和AppBarLayout的滚动,这个后面会讲到。这个控件还是比较复杂的,用多了就能慢慢体会到他的强大之处。我对这个控件的还不是那么的清楚,所以在这里提供一篇关于CoordinatorLayout 用法的译文: <a href="https://www.aswifter.com/2015/11/12/mastering-coordinator/?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io">掌握 Coordinator Layout</a><br> ##<strong>5.NavigationView</strong><br> 抽屉式的导航控件,有了他我们可以使得导航更简单。我们可以直接通过菜单资源文件生成所需的元素。下图左边的即是NavigationView。</p>    <p><img src="https://simg.open-open.com/show/10e142ecb3e35e560d6be109cf677f44.png" alt="Android Material Design 兼容库的使用详解 " width="473" height="744"></p>    <p>NavigationView</p>    <p><br> 下面我们来看看它是怎么实现的吧。</p>    <pre>  <code class="language-xml"><?xml version="1.0" encoding="utf-8"?>  <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"      xmlns:app="http://schemas.android.com/apk/res-auto"      android:id="@+id/drawer_layout"      android:layout_width="match_parent"      android:layout_height="match_parent"      android:fitsSystemWindows="true">      <!--内容区-->      <android.support.design.widget.CoordinatorLayout          android:id="@+id/main_content"          android:layout_width="match_parent"          android:layout_height="match_parent">          <include              android:id="@+id/appbar"              layout="@layout/toolbar" />          <FrameLayout              android:id="@+id/frame_content"              android:layout_width="match_parent"              android:layout_height="match_parent"              android:layout_below="@+id/appbar"              android:scrollbars="none"              app:layout_behavior="@string/appbar_scrolling_view_behavior" />      </android.support.design.widget.CoordinatorLayout>      <!--左侧导航菜单-->      <android.support.design.widget.NavigationView          android:id="@+id/navigation_view"          android:layout_width="wrap_content"          android:layout_height="match_parent"          android:layout_gravity="start"          app:headerLayout="@layout/navigation_header"          app:menu="@menu/drawer" />  </android.support.v4.widget.DrawerLayout></code></pre>    <p>可以看到这里我们是以DrawerLayout作为其父布局,对于DrawLayout他可以实现一种抽屉式的侧滑效果,这里不多做讲解,这里只简单说一点:DrawLayout中的第一个布局是内容布局,第二个是菜单布局。现在我们直接定位到NavigationView,我们看到这里有<strong> app:headerLayout="@layout/navigation_header"</strong>、<strong>app:menu="@menu/drawer"</strong>这两行代码,其中headerLayout是设置其头部的布局,这个布局我们可以随便写,就和写普通的布局文件一样的。对于menu就是菜单项的配置了,其配置文件如下:</p>    <pre>  <code class="language-xml"><?xml version="1.0" encoding="utf-8"?>  <menu xmlns:android="http://schemas.android.com/apk/res/android"      xmlns:tools="http://schemas.android.com/tools"      tools:context=".MainActivity">      <group android:checkableBehavior="single">          <item              android:id="@+id/navigation_item_home"              android:icon="@drawable/iconfont_home"              android:title="首页" />          <item              android:id="@+id/navigation_item_blog"              android:icon="@drawable/iconfont_blog"              android:title="我的博客" />          <item              android:id="@+id/navigation_item_about"              android:icon="@drawable/iconfont_about"              android:title="关于" />      </group>  </menu></code></pre>    <p>就这么简单,我们要实现上述的效果就只要这些就足够了。但是如果我们想要对Item添加一个点击的事件怎么做呢?请看下面:</p>    <pre>  <code class="language-java"> private void setNavigationViewItemClickListener() {          mNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {              @Override              public boolean onNavigationItemSelected(MenuItem item) {                  switch (item.getItemId()) {                      case R.id.navigation_item_home:                          mToolbar.setTitle("首页");                          switchFragment("MainFragment");                          break;                      case R.id.navigation_item_blog:                          mToolbar.setTitle("我的博客");                          switchFragment("BlogFragment");                          break;                      case R.id.navigation_item_about:                          mToolbar.setTitle("关于");                          switchFragment("AboutFragment");                          break;                      default:                          break;                  }                  item.setChecked(true);                  mDrawerLayout.closeDrawer(Gravity.LEFT);                  return false;              }          });      }</code></pre>    <p><br> 上面的代码很清楚了,就是为NavigationView添加了一个OnNavigationItemSelectedListener的监听事件,然后我们就可以做我们想做的事了。<br> ##<strong>6. AppBarLayout、CollapsingToolbarLayout、TabLayout</strong><br> 这三个控件我用一个例子一下讲解了,在实际的使用中这三个控件还是经常会组合在一起的。<br> - <strong>AppBarLayout</strong>:其继承于LinearLayout,使用AppBarLayout可以让包含在其中的子控件能响应被标记了ScrollingViewBehavior的的滚动事件(要与CoordinatorLayout 一起使用),利用它我们可以很容易的去实现视差滚动效果,这样所你可能还是不太懂,千言万语不如一张图来的直接爽快(这样图还是来源于网上,其蓝色的部分就是AppBarLayout,内容区就是被标记了ScrollingViewBehavior的,可以看到效果是不是挺不错的)。</p>    <p><img src="https://simg.open-open.com/show/1bfd9172afc813a1c6500dc9d42b31e4.gif" alt="Android Material Design 兼容库的使用详解 " width="323" height="575"></p>    <p><br> - <strong>CollapsingToolbarLayout</strong> :让Toolbar可伸缩,在伸缩的时候决定ToolBar是移除屏幕和固定在最上面。由于Toolbar 只能固定到屏幕顶端并且不能做出好的动画效果,所以才有了这个Layout的出现。<br> - <strong>TabLayout</strong>:这个其实和我们之前使用的第三方库ViewPagerIndicator是很类似的,一般都和ViewPager一起使用,效果如下图:</p>    <p><img src="https://simg.open-open.com/show/458e48ac68107e165d290839418055b9.gif" alt="Android Material Design 兼容库的使用详解 " width="458" height="759"></p>    <p>动态图来源于网上</p>    <p><br> 基本知道他们是干什么用的了,下面就让我们动手,看看到底怎么用吧。<br> 先来几张下面我们要实现的效果。由于我是真机测试,没法录制动态图,这里就用几张静态图代替了。</p>    <p><img src="https://simg.open-open.com/show/732311fc3d6b6d2b126bdb88a473c0bc.png" alt="Android Material Design 兼容库的使用详解 " width="1775" height="744"></p>    <p><br> 布局文件(这个是很重要的,很多的效果都是直接在布局文件中配置的):</p>    <pre>  <code class="language-xml"><?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:layout_width="match_parent"      android:layout_height="match_parent">      <android.support.design.widget.AppBarLayout          android:layout_width="match_parent"          android:layout_height="200dp"          android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">          <android.support.design.widget.CollapsingToolbarLayout              android:id="@+id/collapsing_toolbar_layout"              android:layout_width="match_parent"              android:layout_height="match_parent"              android:fitsSystemWindows="true"              app:contentScrim="?attr/colorPrimary"              app:expandedTitleMarginEnd="64dp"              app:expandedTitleMarginStart="48dp"              app:layout_scrollFlags="scroll|exitUntilCollapsed">              <ImageView                  android:id="@+id/iv_book_image"                  android:layout_width="match_parent"                  android:layout_height="match_parent"                  android:fitsSystemWindows="true"                  android:scaleType="centerInside"                  android:transitionName="transition_book_img"                  app:layout_collapseMode="parallax"                  app:layout_collapseParallaxMultiplier="0.7" />              <android.support.v7.widget.Toolbar                  android:id="@+id/toolbar"                  android:layout_width="match_parent"                  android:layout_height="?attr/actionBarSize"                  app:layout_collapseMode="pin"                  app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />          </android.support.design.widget.CollapsingToolbarLayout>      </android.support.design.widget.AppBarLayout>      <LinearLayout          android:layout_width="match_parent"          android:layout_height="match_parent"          android:orientation="vertical"          app:layout_behavior="@string/appbar_scrolling_view_behavior">          <LinearLayout              android:layout_width="match_parent"              android:layout_height="wrap_content"              android:orientation="vertical"              android:padding="10dp">              <LinearLayout                  android:layout_width="match_parent"                  android:layout_height="wrap_content"                  android:orientation="horizontal">                  <TextView                      android:id="@+id/tv_title"                      android:layout_width="wrap_content"                      android:layout_height="wrap_content"                      android:textColor="#292929"                      android:textSize="18sp" />                  <TextView                      android:id="@+id/tv_rating"                      android:layout_width="wrap_content"                      android:layout_height="wrap_content"                      android:layout_marginLeft="5dp"                      android:layout_marginTop="2dp"                      android:textColor="#FF6347"                      android:textSize="14sp" />              </LinearLayout>              <TextView                  android:id="@+id/tv_msg"                  android:layout_width="wrap_content"                  android:layout_height="wrap_content"                  android:layout_marginTop="2dp"                  android:textColor="#575757"                  android:textSize="12sp" />          </LinearLayout>          <android.support.design.widget.TabLayout              android:id="@+id/sliding_tabs"              android:layout_width="match_parent"              android:layout_height="wrap_content"              app:tabGravity="fill"              app:tabMode="scrollable" />          <android.support.v4.view.ViewPager              android:id="@+id/viewpager"              android:layout_width="match_parent"              android:layout_height="match_parent" />      </LinearLayout>  </android.support.design.widget.CoordinatorLayout></code></pre>    <p>我们来分析一下这个布局文件:<br> 1.最外层的布局用的是CoordinatorLayout,因为这里面有很多的动画,CoordinatorLayout可以很好的去协调里面的动画。在android.support.design.widget.AppBarLayout下面的那个LinearLayout被标记了appbar_scrolling_view_behavior,这样一来AppBarLayout就能响应LinearLayout中的滚动事件。<br> 2.再来看看CollapsingToolbarLayout,其中contentScrim是设置其内容区的颜色,layout_scrollFlags取了scroll和exitUntilCollapsed两个值。<br> layout_scrollFlags的Flag包括:</p>    <ul>     <li><strong>scroll</strong>: 所有想滚动出屏幕的view都需要设置这个flag,没有设置这个flag的view将被固定在屏幕顶部。</li>     <li><strong>enterAlways</strong>: 这个flag让任意向下的滚动都会导致该view变为可见,当向上滑的时候Toolbar就隐藏,下滑的时候显示。</li>     <li><strong>enterAlwaysCollapsed</strong>: 顾名思义,这个flag定义的是何时进入(已经消失之后何时再次显示)。假设你定义了一个最小高度(minHeight)同时enterAlways也定义了,那么view将在到达这个最小高度的时候开始显示,并且从这个时候开始慢慢展开,当滚动到顶部的时候展开完。</li>     <li><strong>exitUntilCollapsed</strong>: 同样顾名思义,这个flag时定义何时退出,当你定义了一个minHeight,这个view将在滚动到达这个最小高度的时候消失。</li>    </ul>    <p>只看概览可能还是不会太清楚,注意一定要多实践,感兴趣的读者可以一个一个去试一试效果。</p>    <p>3.定位到ImageView,有这两个属性是我们平常用没看到的,说明我写在注释上了</p>    <pre>  <code class="language-xml">app:layout_collapseMode="parallax"//这个是配置当ImageView消失或者显示时候有一种视差滚动效果  app:layout_collapseParallaxMultiplier="0.7"//视差因子,越大视差特效越明显,最大为1</code></pre>    <p><br> 4.Toolbar中有一个app:layout_collapseMode="pin" 这个确保Toolbar在AppBarLayout折叠的时候仍然被固定在屏幕的顶部<br> 布局文件就到这,我们来看看Activity中的逻辑</p>    <pre>  <code class="language-xml">/<em>* </em> Created by _SOLID   <em> Date:2016/3/30 </em> Time:20:16   */  public class BookDetailActivity extends BaseActivity {      private String mUrl;      private Toolbar mToolbar;      private CollapsingToolbarLayout mCollapsingToolbarLayout;      private ImageView mIvBook;      private BookBean mBookBean;      private TextView mTvTitle;      private TextView mTvMsg;      private TextView mTvRating;      private ViewPager mViewPager;      private TabLayout mTabLayout;      @Override      protected void initView() {          //设置Toolbar          mToolbar = (Toolbar) findViewById(R.id.toolbar);          setSupportActionBar(mToolbar);          getSupportActionBar().setHomeButtonEnabled(true);//决定左上角的图标是否可以点击          getSupportActionBar().setDisplayHomeAsUpEnabled(true);//决定左上角图标的右侧是否有向左的小箭头          mToolbar.setNavigationOnClickListener(new View.OnClickListener() {              @Override              public void onClick(View view) {                  onBackPressed();              }          });          mCollapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar_layout);          mIvBook = (ImageView) findViewById(R.id.iv_book_image);          mTvTitle = (TextView) findViewById(R.id.tv_title);          mTvMsg = (TextView) findViewById(R.id.tv_msg);          mTvRating = (TextView) findViewById(R.id.tv_rating);          mViewPager = (ViewPager) findViewById(R.id.viewpager);          mTabLayout = (TabLayout) findViewById(R.id.sliding_tabs);          mTabLayout.addTab(mTabLayout.newTab().setText("作者信息"));          mTabLayout.addTab(mTabLayout.newTab().setText("章节"));          mTabLayout.addTab(mTabLayout.newTab().setText("书籍简介"));      }      @Override      protected int setLayoutResourseID() {          return R.layout.activity_book_detail;      }      @Override      protected void init() {          mUrl = getIntent().getStringExtra("url");      }      @Override      protected void initData() {          SolidHttpUtils.getInstance().loadString(mUrl, new SolidHttpUtils.HttpCallBack() {              @Override              public void onLoading() {              }              @Override              public void onSuccess(String result) {                  Gson gson = new Gson();                  mBookBean = gson.fromJson(result, BookBean.class);                  mCollapsingToolbarLayout.setTitle(mBookBean.getTitle());                  mTvTitle.setText(mBookBean.getTitle());                  mTvMsg.setText(mBookBean.getAuthor() + "/" + mBookBean.getPublisher() + "/" + mBookBean.getPubdate());                  mTvRating.setText(mBookBean.getRating().getAverage() + "分");                  SolidHttpUtils.getInstance().loadImage(mBookBean.getImages().getLarge(), mIvBook);                  BookInfoPageAdapter adapter = new BookInfoPageAdapter(BookDetailActivity.this, mBookBean, getSupportFragmentManager());                  mViewPager.setAdapter(adapter);                  mTabLayout.setupWithViewPager(mViewPager);              }              @Override              public void onError(Exception e) {              }          });      }  }</code></pre>    <p>其实并不难,这里只需注意一点,当Toolbar被CollapsingToolbarLayout包裹的时候,设置标题是设置CollapsingToolbarLayout的,而不是Toolbar。</p>    <p>好了终于写完了,差不多写了接近4个小时,好累的说,现在整个人都是晕晕的。</p>    <p>源码献上:<a href="/misc/goto?guid=4959671190769552700">MaterialDesignDemo</a></p>    <p>参考链接:<br> <a href="/misc/goto?guid=4959639492613852739">Android的材料设计兼容库(Design Support Library)</a><br> <a href="/misc/goto?guid=4959671201990689810">Material Design控件使用</a><br> <a href="/misc/goto?guid=4959671202167650538">Floating Action Button(翻译)</a><br> <a href="/misc/goto?guid=4958965465945004644">Material Design 中文版</a><br> <a href="http://blog.csdn.net/growth58/article/details/47972467?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io">Android Design Support Library概览 </a></p>    <h3>附(一些控件使用使用应注意的地方):</h3>    <p>1.在使用CardView的时候,一定要注意,当CardView的宽和高填充父容器的时候,CardView的margin最好要比cardElevation大,不然就看不到立体的效果。</p>    <p>2.我们知道ListView有一个onItemClick的事件,但是RecyclerView却没有,那么我们应该怎样去设置呢?其实很简单,关于RecyclerView设置item的点击事件,只需在创建ViewHolder的时候,给填充的View设置单击事件即可。</p>    <p>3.在使用android.support.design.widget.AppBarLayout的时候内容区最好使用android.support.v4.widget.NestedScrollView,之前我的内容区用的是ScrollView,在往上拉的时候AppBarLayout一直没有动画效果,折腾了几个小时都没找到原因。最后逼不得用Android Studio创建了一个他自带的关于AppBarLayout的模板项目,看到他用的是NestedScrollView作为内容区,我果断就把我的内容区换成了这个,立马就有动画效果了。</p>    <p>NestedScrollView官方的描述:</p>    <blockquote>     <p>NestedScrollView is just likeScrollView, but it supports acting as both a nested scrolling parent and child on both new and old versions of Android. Nested scrolling is enabled by default.</p>    </blockquote>    <p><strong>如果感觉还不错的就给个喜欢支持一下吧,有问题请留言,谢谢</strong></p>    <p>最后附一张MD的主题色解析图:</p>    <p><img src="https://simg.open-open.com/show/26453b098c10695f0a4c4b7482a9c3be.jpg" alt="Android Material Design 兼容库的使用详解 " width="690" height="401"></p>    <p>MD主题色解析.jpg</p>    <p><br>  </p>    <p>文/_SOLID(简书作者)<br> 来源:http://www.jianshu.com/p/1e6eed09d48b<br>  </p>