CoordinatorLayout的基本用法

CoordinatorLayout是MD中的一個專門用來做滾動特效的一個控件。繼承自ViewGroup,并且它被設計成一個top-level的根布局,它本身只是一個ViewGroup,實現(xiàn)了NestedScrollingParent接口。
這里額外需要注意的是:

  1. 由于CoordinatorLayout只實現(xiàn)了NestedScrollingParent,所以當CoordinatorLayout嵌套(作為一個子View)的時候會得不到你想要的效果,需要自己寫一個CoordinatorLayout去實現(xiàn)NestedScrollingChild接口。
  2. 沒有實現(xiàn)NestedScrollingChild接口的子View如:ListView,ScrollView在5.0以下版本跟CoordinatorLayout是配合不了的需要使用RecyclerView,NestedScrollView才行。

CoordinatorLayout這個控件很強大,能對其子元素實現(xiàn)多種不同的功能,一個常見的用法就是:給它的一個子元素A設置一個layout_scrollFlags的屬性,然后給另外一個子元素B設置一個layout_behavior=”@string/appbar_scrolling_view_behavior”的屬性,這個子元素B一般是一個可以滑動的控件,比如RecyclerView、NestedScrollView等,那么當子元素B滑動的時候,子元素A就會根據(jù)其layout_scrollFlags的屬性值而做出不同的改變,所以我們要為CollapsingToolbarLayout設置layout_scrollFlags屬性。

layout_scrollFlags有哪幾個屬性可以選擇:

  • scroll:所有想要滑動的控件都要設置這個標志位。如果不設置這個標志位,那么View會固定不動。
  • enterAlways:設置了該標志位后,若View已經(jīng)滑出屏幕,此時手指向下滑,View會立刻出現(xiàn),這是另一種使用場景。
  • enterAlwaysCollapsed:設置了minHeight,同時設置了該標志位的話,view會以最小高度進度屏幕,當滑動控件滑動到頂部的時候才會拓展為完整的高度。
  • exitUntilCollapsed:向上滑動時收縮當前View。但view可以被固定在頂部。

layout_collapseMode標志位進而產生不同的行為。其實這里也只有兩種標志位,分別是:

  • pin:有該標志位的View在頁面滾動的過程中會一直停留在頂部,比如Toolbar可以被固定在頂部

  • parallax:有該標志位的View表示能和頁面同時滾動。與該標志位相關聯(lián)的一個屬性是:layout_collapseParallaxMultiplier,該屬性是視差因子,表示該View與頁面的滾動速度存在差值,造成一種相對滾動的效果。

  • Snackbar+FAB的效果圖,如下:

Snackbar+FAB.gif
  1. 布局文件如下:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/main_content"
        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.v7.widget.RecyclerView
            android:id="@+id/rvToDoList"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
        </android.support.v7.widget.RecyclerView>

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|right"
            android:layout_margin="16dp"
            android:src="@mipmap/ic_launcher"
            app:layout_anchor="@id/rvToDoList"
            app:layout_anchorGravity="bottom|right|end"/>
    </android.support.design.widget.CoordinatorLayout>
</LinearLayout>

很簡單就是一個CoordinatorLayout里面包裹recyclerView和FloatingActionButton。
app:layout_anchor:意思是FAB浮動按鈕顯示在哪個布局區(qū)域。且設置當前錨點的位置
app:layout_anchorGravity:意思FAB浮動按鈕在這個布局區(qū)域的具體位置。兩個屬性共同作用才是的FAB 浮動按鈕也能折疊消失,出現(xiàn)。

  1. java代碼如下:
@Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_fab);
        CoordinatorLayout coordinatorLayout = (CoordinatorLayout) findViewById(R.id.main_content);
        FloatingActionButton floatingActionButton =(FloatingActionButton) findViewById(R.id.fab);
        final Snackbar snackbar = Snackbar.make(coordinatorLayout, "這里是Snackbar", Snackbar.LENGTH_LONG)
                .setAction("這里是Snackbar的action", new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        Toast.makeText(FabActivity.this, "你點擊了Snackbar", Toast.LENGTH_SHORT).show();
                    }
                })
                .addCallback(new BaseTransientBottomBar.BaseCallback<Snackbar>() {
                    @Override
                    public void onDismissed(Snackbar transientBottomBar, int event) {
                        super.onDismissed(transientBottomBar, event);
                        Toast.makeText(FabActivity.this, "Snackbar消失了", Toast.LENGTH_SHORT).show();
                    }

                    @Override
                    public void onShown(Snackbar transientBottomBar) {
                        super.onShown(transientBottomBar);
                        Toast.makeText(FabActivity.this, "Snackbar顯示了", Toast.LENGTH_SHORT).show();
                    }
                });
        floatingActionButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if(snackbar.isShown()){
                    snackbar.dismiss();
                }else{
                    snackbar.show();
                }
            }
        });

    }

這里一眼看上去,對于不知道Snackbar控件的人來說,感覺好復雜,看不懂。這里我簡單的說一下Snackbar。簡單的用的話,我們只用知道他與Toast類似,不管是用法,還是用途,都類似。不知道的童鞋,想了解的,可以跳轉沒時間解釋了,快使用Snackbar!——Android Snackbar花式使用指南。這篇文章說的很清楚。看完之后,回過頭來看這個,超級簡單。就是一個Snackbar的顯示,跟他的顯示,隱藏的回調。

  • Toolbar效果圖如下:


    toolbar.gif
  1. 布局文件如下:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <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/main_content"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <android.support.design.widget.AppBarLayout
            android:id="@+id/appbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            android:fitsSystemWindows="true">
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
        </android.support.design.widget.AppBarLayout>

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="end|bottom"
            android:layout_margin="15dp"/>

        <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"/>
    </android.support.design.widget.CoordinatorLayout>
</LinearLayout>

布局文件很簡單,就是CoordinatorLayout+AppBarLayout+RecyclerView,這里的FAB要不要無所謂。然后AppBarLayout里面包裹一個toolbar。對于AppBarLayout不了解的童鞋,可以去看一下玩轉AppBarLayout,更酷炫的頂部欄。這篇文章里面說的很清楚。至于,我這里的java代碼沒啥好貼的,就是給RecyclerView填充數(shù)據(jù),給toolbar設置標題。其他沒有啥了。

  • tablayout聯(lián)用的效果圖,如下:


    tablayout.gif
  1. 布局文件如下:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#FFF">

        <android.support.design.widget.AppBarLayout
            android:id="@+id/app_bar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#FFF">

            <LinearLayout
                android:id="@+id/ll"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">

                <ImageView
                    android:id="@+id/header"
                    android:layout_width="match_parent"
                    android:layout_height="260dp"
                    android:scaleType="centerCrop"
                    android:src="@mipmap/guide" />
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="50dp"
                    android:background="#00FFFFFF"
                    android:gravity="center"
                    android:textSize="16sp"
                    android:text="哈哈哈哈哈"/>
            </LinearLayout>

            <android.support.design.widget.TabLayout
                android:id="@+id/tab_layout"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:background="#FBDD9C"
                app:tabGravity="fill"
                app:tabIndicatorColor="#5f00"
                app:tabIndicatorHeight="4dp"
                app:tabMode="fixed"
                app:tabSelectedTextColor="#FFFFFF"
                app:tabTextColor="#FFFFFF" />
        </android.support.design.widget.AppBarLayout>
        <android.support.v7.widget.RecyclerView
            android:id="@+id/recyclerview_tablayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">
        </android.support.v7.widget.RecyclerView>
    </android.support.design.widget.CoordinatorLayout>
</LinearLayout>

布局文件很簡單,就是CoordinatorLayout+AppBarLayout+RecyclerView,跟上一個不同的是AppBarLayout里面包裹的內容不是Toolbar,而是一個LinearLayout+TabLayout,LinearLayout設置了:

app:layout_scrollFlags="scroll|exitUntilCollapsed"

至于java代碼,就是給RecyclerView、TabLayout填充數(shù)據(jù),其他沒有什么東西了。

  • CollapsingToolbarLayout連用的效果圖,如下
CollapsingToolbarLayout.gif

CollapsingToolbarLayout常見的xml屬性如下:

  • contentScrim:當Toolbar收縮到一定程度時的所展現(xiàn)的主體顏色。即Toolbar的顏色。
  • title:當titleEnable設置為true的時候,在toolbar展開的時候,顯示大標題,toolbar收縮時,顯示為toolbar上面的小標題。
  • scrimAnimationDuration:該屬性控制toolbar收縮時,顏色變化的動畫持續(xù)時間。即顏色變?yōu)閏ontentScrim所指定的顏色進行的動畫所需要的時間。
  • expandedTitleGravity:指定toolbar展開時,title所在的位置。類似的還有expandedTitleMargin、collapsedTitleGravity這些屬性。
  • collapsedTitleTextAppearance:指定toolbar收縮時,標題字體的樣式,類似的還有expandedTitleTextAppearance。
  1. 布局文件如下:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical">
    <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:background="@android:color/background_light"
        android:fitsSystemWindows="true">

        <android.support.design.widget.AppBarLayout
            android:id="@+id/appbarlayout"
            android:layout_width="match_parent"
            android:layout_height="300dp"
            android:fitsSystemWindows="true"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

            <android.support.design.widget.CollapsingToolbarLayout
                android:id="@+id/collapsinglayout"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                app:contentScrim="?attr/colorPrimary"
                app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">

                <ImageView
                    android:id="@+id/main.backdrop"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:adjustViewBounds="true"
                    android:fitsSystemWindows="true"
                    android:scaleType="centerCrop"
                    app:layout_collapseParallaxMultiplier="0.7"
                    android:src="@mipmap/guide"
                    app:layout_collapseMode="parallax"/>

                <android.support.v7.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="96dp"
                    android:minHeight="?attr/actionBarSize"
                    app:layout_collapseMode="pin"
                    android:gravity="top"
                    app:titleMarginTop="15dp"
                    app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
            </android.support.design.widget.CollapsingToolbarLayout>

            <android.support.design.widget.TabLayout
                android:id="@+id/tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:background="?attr/colorPrimary"
                app:tabIndicatorColor="@color/colorAccent"
                app:tabIndicatorHeight="4dp"
                app:tabSelectedTextColor="#000"
                app:tabTextColor="#fff"/>
        </android.support.design.widget.AppBarLayout>

        <android.support.v7.widget.RecyclerView
            android:id="@+id/recyclerview_collapsing"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">
        </android.support.v7.widget.RecyclerView>

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="end|bottom"
            android:layout_margin="15dp"/>

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

</LinearLayout>

布局文件很簡單,就是CoordinatorLayout包括AppBarLayout+RecyclerView+FAB。然后就是AppBarLayout包括CollapsingToolbarLayout+TabLayout。再就是CollapsingToolbarLayout包括ImageView+Toolbar。就是這樣。至于java代碼,就是給recyclerView、tablayout填充數(shù)據(jù),設置標題。
demo下載

  • 到此結束。
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容