Android開發實戰之擁有Material Design風格的折疊布局

關於折疊布局，也許你並不陌生，最新版的陌陌，或者一些其他的社交APP都有一個折疊布局。折疊布局，讓我們的APP更加具有交互性，同時也更加美觀，先來展示一下效果圖：

這是我個人做的一個APP主界面，可以看到，在滑動的時候，大標題隨着拉動變為小標題，同時移動位置，並且有一張圖片，隨滑動淡出屏幕。如果你了解過Material Design，那么這個看似復雜的效果就很容易實現，都是用到這個desigon依賴庫中的組件屬性而完成的.

首先加入依賴庫：

 compile 'com.android.support:design:23.3.0'
 compile 'com.android.support:recyclerview-v7:23.3.0'

最好也要把recyclerview的依賴添加一下，不要問我為什么，經驗之談。

然后是布局：

<android.support.design.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/cdl_content"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    >
  <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:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/ctl_title"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        app:contentScrim="?attr/colorPrimary">
      <ImageView
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:background="@drawable/titile_bg2"
          app:layout_collapseMode="parallax"
          app:layout_collapseParallaxMultiplier="0.7"
          />
      <android.support.v7.widget.Toolbar
          android:layout_width="match_parent"
          android:layout_height="?attr/actionBarSize"
          android:id="@+id/tl_title"
          app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
          app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
          app:layout_collapseMode="pin"
          >
      </android.support.v7.widget.Toolbar>

    </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"
      >
    <com.yakir.view.ScoreGridView
        android:layout_marginTop="20dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:numColumns="3"
        android:cacheColorHint="#00000000"
        android:gravity="center_vertical"
        android:horizontalSpacing="10dp"
        android:verticalSpacing="10dp"
        android:id="@+id/gv_menu"></com.yakir.view.ScoreGridView>

  </android.support.v4.widget.NestedScrollView>


</android.support.design.widget.CoordinatorLayout>

接着是邏輯代碼：

        setSupportActionBar(toolBarTitle);
        ctl_title.setCollapsedTitleGravity(Gravity.CENTER);
        ctl_title.setExpandedTitleGravity(Gravity.CENTER);
        ctl_title.setTitle("手機安全衛士");
        ctl_title.setExpandedTitleColor(Color.WHITE);
        ctl_title.setCollapsedTitleTextColor(Color.WHITE);

 谷歌在5.0之后就推薦使用toolbar代替actionbar,toolbar更具拓展性。這個依賴庫一個很重要的控件是：CoordinatorLayout，協調布局。

 這是一個將這些布局聯動起來的重要布局。接下來再說說折疊布局：CollapsingToolbarLayout，它的：Expanded拉出，Collapsed關上，可以設置一些相關屬性。

最重要的是設置： app:layout_scrollFlags="scroll|exitUntilCollapsed"這樣它才能隨滑動而滾動。

在toolbar中設置：app:layout_collapseMode="pin"，使它不隨滑動而退出屏幕。在AppbarLayout中設置顯示折疊的高度。還可以在包裹的ImageView中設置滑動聯動效果： app:layout_collapseMode="parallax" app:layout_collapseParallaxMultiplier="0.7"。

其實，實現也不是特別的復雜，只要理解了這幾個新空間的用途，很容易就可以做到自己想要的酷炫效果。好了，如果你有什么疑問歡迎下方留言交流。希望對你有所幫助。