Android一起學Ui(1)----(摺疊佈局)

不知道大家有沒有健忘的習慣啊,總是寫完之後再過一段時間就忘記了自己寫的代碼了,每次需要寫的時候還要重新再看一次,或者在去查詢一下相關的屬性以及方法.

近期感覺這種情況比較明顯,總是忘記很多方法和屬性,久而久之每次寫代碼都會覺得特別累,也會開始懷疑自己是不是腦子不好使了,有點挫敗感有木有….

所以打算記錄一系列關於Android Ui 佈局方面的筆記,一方面方便自己查詢使用,另一方面方便學習記錄.

今天第一篇就寫一個關於摺疊佈局的文章吧,內容不涉及太多的原理介紹,只是簡單羅列使用方式方法,從代碼和效果中體會控件的使用以及場景,秉承能簡單可使用的原則.

先上效果圖:

整體佈局爲:

<android.support.design.widget.CoordinatorLayout >

    <android.support.design.widget.AppBarLayout>

        <android.support.design.widget.CollapsingToolbarLayout>
            <ImageView/>
            <android.support.v7.widget.Toolbar />

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

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

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

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

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

代碼如下:

//Coordinator(協調者)繼承自Framelayout 1,作爲頂層佈局 2, 調度協調子佈局
// 根據behavior 行爲屬性,比如NestedScrollView 指定爲依賴AppBar,那麼就會處理關於AppBar根據
// NestedScrollView的行爲,而使AppBar進行相應的動作(這裏可以不深究,文後給出相應的文章將的會更透徹)

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/coordinator"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

//AppBarLayout 繼承自LinearLayout 加入了材料設計概念 
//根據其他滾動的View的變化,對其內部的view做一些動態的處理
//比如SrollView向上滑動,我們讓ToolBar也跟着滑動.
//通過指定app:layout_scrollFlags 屬性,來使內部的子view做出相應的動作

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBar"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:fitsSystemWindows="true">

//對ToolBar進行再次包裝,主要實現摺疊的效果
// app:contentScrim 當收縮到最小高度時 顯示的顏色 一般爲toolBar 的顏色
//app:layout_collapseMode 子View的視圖摺疊模式
// parallax : 視差效果
// pin : 達到最小高度時 固定不動
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/coolapsing"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

//layout_scrollFlags: 屬性中 
// scroll : 跟隨滾動,比如跟隨Scrollview 的滾動做出相同的滾動
// enterAlways : 直接滾動出全部,不論Scrollview滾動多少距離
// exitUntilCollapsed : Scrollview 向上滾動時,先滾動自己到最小高度,停留後,Scrollview繼續向上
// enterAlwaysCollapsed: 跟隨滾動到最小高度,當Scrollview向下滾動到頂部時,再繼續跟隨滾動到自身的最大值
//這個屬性主要是設置給AppBar的.

            <ImageView
                android:id="@+id/imageView"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                android:src="@drawable/splash0"
                app:layout_collapseMode="parallax" />
//ToolBar 用來替換AnctionBar,所以我們先要隱藏掉ActionBar

            <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>

//NestedScrollView 繼承Framelayout 實現效果與Scrollview一樣,內部處理了對於AppBar的依賴
// 需要指定 app:layout_behavior="@string/appbar_scrolling_view_behavior"屬性,纔會對AppBar產生影響.必須指定.
    <android.support.v4.widget.NestedScrollView
        android:id="@+id/nestedScroll"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <include layout="@layout/commot_cardview" />

            <include layout="@layout/commot_cardview" />

            <include layout="@layout/commot_cardview" />

            <include layout="@layout/commot_cardview" />

            <include layout="@layout/commot_cardview" />

            <include layout="@layout/commot_cardview" />
        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>

// 浮動的Button 
// 這裏設置了一個錨點 layout_anchor,來指定Buttton所在控件的範圍
// layout_anchorGravity : 指定Button 具體的位置
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fabtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:clickable="true"
        android:src="@drawable/ic_done_white_24dp"
        android:layout_margin="16dp"
        app:elevation="5dp"
        app:layout_anchor="@+id/appBar"
        app:layout_anchorGravity="end|right|bottom" />

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

那麼通過以上的佈局就可以直接實現摺疊的效果了,其實很多原理的知識,會很雜亂無章,也會經常性的忘記,那麼可以通過一些列子加深這樣的印象,當一個控件你明白了其中的屬性,以及使用場景和方法時,再去探究其內部的原理或源碼的時候,我覺得會事半功倍.

對於以上內容的一點補充:

使用材料設計中的控件的時候 我們需要在build.gradle 下引入,相關的庫

 compile 'com.android.support:appcompat-v7:25.3.0'
 compile 'com.android.support:design:25.3.0'

fitsSystemWindows 屬性爲true時,ContentView會忽略actionbar,title,底部按鍵的空間後剩餘的可用區域.所以圖片會向上移動 佔據狀態欄.

如果狀態欄要使用圖片延伸作爲背景 需要在values-v21 styles 主題中指定
<item name="android:statusBarColor">@android:color/transparent</item>

源碼地址:AndroidUiDemo

學習參考文章如下:

玩轉AppBarLayout，更酷炫的頂部欄

android CoordinatorLayout使用

關於ToolBar的使用:

Android 5.x Theme 與 ToolBar 實戰

關於CoordinatorLayout的使用以及如何自定義依賴效果

CoordinatorLayout的使用如此簡單