Android Meterial Design 之 CoordinatorLayout+AppBarLayout+Toolbar+NestedScrollView

1.簡(jiǎn)介 :

  • CoordinatorLayout 顧名思義 布局協(xié)調(diào)者, 有非常高的定制度,開發(fā)者可以根據(jù)不同的需求實(shí)現(xiàn)各式各樣的view的聯(lián)動(dòng)效果,其核心是behavior
  • AppBarLayout 一般用作用定制頂部欄,繼承自LinearLayout ,默認(rèn)為垂直布局,可根據(jù)手勢(shì)的滑動(dòng),其核心是 layout_scrollFlags 或者在代碼中調(diào)用 setScrollFlags()方法 來(lái)實(shí)現(xiàn)一些效果(需要跟CoordinatorLayout 使用)
  • Toolbar 替代ActionBar的新控件,使用比ActionBar更加方便 使用需要隱藏ActionBar;
  • NestedScrollView 繼承的是FrameLayout.當(dāng)ScrollView 需要嵌套時(shí) 用來(lái)替代ScrollView 的,相信大家都知道..ScrollView 嵌套時(shí)有多坑..ListView簡(jiǎn)直慘不忍睹! 它可以在嵌套當(dāng)中不與別的可滑動(dòng)視圖有沖突.

2.使用:

  • 需要將CoordinatorLayout 作為根布局來(lái)協(xié)調(diào)子view之間的聯(lián)動(dòng)
  • behavior
    <blockquote> 作為CoordinatorLayout 的核心,它承載了CoordinatorLayout 當(dāng)中的view的滑動(dòng)聯(lián)動(dòng)的調(diào)節(jié),CoordinatorLayout 布局和AppBarLayout 控件是沒(méi)有滑動(dòng)功能的,那么他們?cè)趺磳?shí)現(xiàn)辣么多的滑動(dòng)效果呢?所以就需要behavior的組織聯(lián)動(dòng),使可以滑動(dòng)的view與AppBarLayout綁定起來(lái),在可以滾動(dòng)的視圖滑動(dòng)時(shí),使AppBarLayout (不可滾動(dòng)視圖)做出相應(yīng)的處理, 實(shí)現(xiàn)滑動(dòng)效果,google默認(rèn)幫我們實(shí)現(xiàn)了聯(lián)動(dòng)效果 只需要在可滾動(dòng)視圖上加上下面代碼,即可聯(lián)動(dòng),behavior可以自定義(學(xué)習(xí)中,有成果會(huì)記錄下來(lái))
    app:layout_behavior="@string/appbar_scrolling_view_behavior
    </blockquote>
  • NestedScrollView :
    • 使用非常簡(jiǎn)單 如下代碼

<android.support.v4.widget.NestedScrollView
app:layout_behavior="@string/appbar_scrolling_view_behavior"
android:layout_width="match_parent"
android:layout_height="match_parent">

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


 - **AppBarLayout :** 
 <blockquote> AppBarLayout 的子View 通過(guò)ScrollFlags來(lái)執(zhí)行指定動(dòng)作,可以設(shè)置4種動(dòng)作 注: 默認(rèn)是不滾動(dòng),在什么位置就是什么位置,可以設(shè)置多種flag 使用 | 隔開</blockquote>
      <ul>
    <li>scroll</li>會(huì)根據(jù)滾動(dòng)而滾出屏幕,所有需要在滾動(dòng)時(shí)滾出屏幕的都需要設(shè)置
    <li>enterAlways</li>快速返回模式。 向上滾動(dòng) 設(shè)置次flag的view隱藏,向下滾動(dòng)view顯示
<li>enterAlwaysCollapsed</li>當(dāng)你的視圖已經(jīng)設(shè)置minHeight屬性又使用此標(biāo)志時(shí),當(dāng)view向下滑動(dòng)的時(shí)候會(huì)顯示最小的高度,只有當(dāng)滾動(dòng)視圖到達(dá)頂部時(shí)才顯示到view的完整高度。
<li>exitUntilCollapsed</li>在滾動(dòng)過(guò)程中,會(huì)先將view縮小到最小高度,在達(dá)到此view最小高度之前,整個(gè)視圖中的滑動(dòng)事件是不生效的,達(dá)到之后,才會(huì)滑動(dòng)視圖.
<ul>

<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/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="@+id/barLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<android.support.v7.widget.Toolbar
**app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed" **
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:background="?attr/colorPrimary" />
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>```

所以最終的布局是

<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/coordinatorLayout"  
  android:layout_width="match_parent"  
  android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout    
    android:id="@+id/barLayout"    
    android:layout_width="match_parent"  
    android:layout_height="wrap_content" 
     android:fitsSystemWindows="true"> 
   <android.support.v7.widget.Toolbar        
        app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"      
        android:id="@+id/toolbar"       
        android:layout_width="match_parent"       
        android:layout_height="?android:attr/actionBarSize"    
        android:background="?attr/colorPrimary"       />
</android.support.design.widget.AppBarLayout>   

       <android.support.v4.widget.NestedScrollView        
    app:layout_behavior="@string/appbar_scrolling_view_behavior"    
    android:layout_width="match_parent"        
    android:layout_height="match_parent">    
<!--內(nèi)容子布局-->    
      </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

3.總結(jié)
有了這些個(gè)控件,實(shí)現(xiàn)起很多好看的效果就顯得非常容易
本文只是說(shuō)一下普通用法,在我公司的app當(dāng)中我實(shí)現(xiàn)了很多不同的效果,用法有很多,實(shí)現(xiàn)的效果有非常多種,大家一起學(xué)習(xí),共同成長(zhǎng).

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,172評(píng)論 25 708
  • 內(nèi)容抽屜菜單ListViewWebViewSwitchButton按鈕點(diǎn)贊按鈕進(jìn)度條TabLayout圖標(biāo)下拉刷新...
    皇小弟閱讀 47,166評(píng)論 22 665
  • CoordinatorLayout與滾動(dòng)的處理 CoordinatorLayout實(shí)現(xiàn)了多種Material De...
    cxm11閱讀 6,819評(píng)論 1 15
  • 最新項(xiàng)目中用到了些Material效果,在此對(duì)自己的學(xué)習(xí)做個(gè)小結(jié)。 首先養(yǎng)成良好的學(xué)習(xí)習(xí)慣-----看源碼: Co...
    風(fēng)少俠閱讀 4,941評(píng)論 5 37
  • 誰(shuí)說(shuō)女子不如男(回憶)深圳 2017 2月18日 星期六 晴吃了早餐就去工廠,準(zhǔn)備買原材料做白乳膠。剛到工廠就有客...
    永不止步的菊閱讀 350評(píng)論 0 0

友情鏈接更多精彩內(nèi)容