AppBarLayout控件 & CoordinatorLayout 控件 詳解 -开发者知识库

AppBarLayout控件 & CoordinatorLayout 控件 詳解 -开发者知识库,第1张


先認識幾個英文單詞:

CoordinatorLayout 可協調的Layout—--Coordinator:協調者

CollapsingToolbarLayout :可折疊的ToolBar—–Collapsing :折疊

parallax : 視差

pin : 釘住

官方文檔: https://developer.android.com/reference/android/support/design/widget/AppBarLayout.html

參考鏈接; http://blog.csdn.net/caihongdao123/article/details/51654948

參考鏈接: http://blog.csdn.net/xyz_lmn/article/details/48055919

參考鏈接: http://www.jianshu.com/p/f418bf95db2d

先看效果圖:

AppBarLayout控件 & CoordinatorLayout 控件 詳解 -开发者知识库,這里寫圖片描述,第2张

下面是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:id="@ id/coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">


<android.support.design.widget.AppBarLayout
android:id="@ id/main.appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">


<android.support.design.widget.CollapsingToolbarLayout
android:id="@ id/main.collapsing"
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/main.backdrop"
android:layout_width="match_parent"
android:layout_height="200dp"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="@drawable/girl"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.1"
/>


<android.support.v7.widget.Toolbar
android:id="@ id/toolBar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
app:logo="@mipmap/ic_launcher"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:title="CoordinatorLayout" />

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

</android.support.design.widget.AppBarLayout>
<!--主頁面布局-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:scrollbars="none"
app:layout_behavior="@string/appbar_scrolling_view_behavior">


<android.support.design.widget.TabLayout
android:id="@ id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#30469b"
app:tabGravity="fill"
app:tabMode="fixed"
app:tabSelectedTextColor="#ff0000"
app:tabTextColor="#ffffff" />


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


<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:lineSpacingExtra="8dp"
android:padding="@dimen/activity_horizontal_margin"
android:text="@string/lorem"
android:textSize="20sp" />

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



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

java代碼很簡單

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);

TabLayout tabLayout = (TabLayout) findViewById(R.id.tabLayout);
tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));
tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));

}
}

使用到的控件詳解:

  • CoordinatorLayout 該控件也是Design包下的一個控件,然而這個控件可以被稱為Design包中最復雜、功能最強大的控件:CoordinatorLayout。為什么這樣說呢?原因是:它是組織它眾多子view之間互相協作的一個ViewGroup。
    CoordinatorLayout 的神奇之處就在於 Behavior 對象。怎么理解呢?CoordinatorLayout使得子view之間知道了彼此的存在,一個子view的變化可以通知到另一個子view,CoordinatorLayout 所做的事情就是當成一個通信的橋梁,連接不同的view,使用 Behavior 對象進行通信。
    比如:在CoordinatorLayout中使用AppBarLayout,如果AppBarLayout的子View(如ToolBar、TabLayout)標記了app:layout_scrollFlags滾動事件,那么在CoordinatorLayout布局里其它標記了app:layout_behavior的子View(LinearLayout、RecyclerView、NestedScrollView等)就能夠響應(如ToolBar、TabLayout)控件被標記的滾動事件。如

  • AppBarLayout 是繼承LinerLayout實現的一個ViewGroup容器組件,它是為了Material Design設計的App Bar,支持手勢滑動操作(需要跟CoordinatorLayout配合使用,下面會介紹如何配合CoordinatorLayout組件)。默認的AppBarLayout是垂直方向的,它的作用是把AppBarLayout包裹的內容都作為AppBar。

  • CollapsingToolbarLayout CollapsingToolbarLayout作用是提供了一個可以折疊的Toolbar,它繼承至FrameLayout,給它設置layout_scrollFlags,它可以控制包含在CollapsingToolbarLayout中的控件(如:ImageView、Toolbar)在響應layout_behavior事件時作出相應的scrollFlags滾動事件(移除屏幕或固定在屏幕頂端)。

1、在CollapsingToolbarLayout(可折疊的ToolBar)中:

參考官方API: https://developer.android.com/reference/android/support/design/widget/CollapsingToolbarLayout.html

我們設置了layout_scrollFlags:關於它的值我這里再說一下:

scroll 所有想滾動出屏幕的view都需要設置這個flag, 沒有設置這個flag的view將被固定在屏幕頂部.例如,TabLayout 沒有設置這個值,將會停留在屏幕頂部。CollapsingToolbarLayout 設置了 app:layout_scrollFlags="scroll|exitUntilCollapsed" 就會滾出屏幕

enterAlways 實現quick return效果, 當向下移動時,立即顯示View(比如Toolbar)。
設置這個flag時,向下的滾動都會導致該view變為可見,啟用快速“返回模式”。

exitUntilCollapsed 向上滾動時收縮View,但可以固定Toolbar一直在上面。

enterAlwaysCollapsed - 當你的View已經設置minHeight屬性又使用此標志時,你的View只能以最小高度進入,只有當滾動視圖到達頂部時才擴大到完整高度。

其中還設置了一些屬性,簡要說明一下:

contentScrim - 設置當完全CollapsingToolbarLayout折疊(收縮)后的背景顏色。

expandedTitleMarginStart - 設置擴張時候(還沒有收縮時)title向左填充的距離。

  • **為了ToolBar可以滾動,CoordinatorLayout里面,放一個帶有可滾動的View.如上的例子,NestedScrollView,即是可以滾動的View。CoordinatorLayout包含的子視圖中帶有滾動屬性的View需要設置app:layout_behavior屬性。例如,示例中 NestedScrollViewr 設置了此屬性。
    **

2、在ImageView控件中:

我們設置了:

layout_collapseMode (折疊模式) - 有兩個值:

pin - 設置為這個模式時,當CollapsingToolbarLayout完全收縮后,Toolbar還可以保留在屏幕上。

parallax - 設置為這個模式時,在內容滾動時,CollapsingToolbarLayout中的View(比如ImageView)也可以同時滾動,實現視差滾動效果,通常和layout_collapseParallaxMultiplier(設置視差因子)搭配使用。

layout_collapseParallaxMultiplier(視差因子) - 設置視差滾動因子,值為:0~1。

3、在Toolbar控件中:

我們設置了layout_collapseMode(折疊模式):為pin。

綜上分析:當設置了layout_behavior的控件響應起了CollapsingToolbarLayout中的layout_scrollFlags事件時,ImageView會有視差效果的向上滾動移除屏幕,當開始折疊時CollapsingToolbarLayout的背景色(也就是Toolbar的背景色)就會變為我們設置好的背景色,Toolbar也一直會固定在最頂端。

關於錨點 ancher

<?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:background="@android:color/background_light"
android:fitsSystemWindows="true"
>


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


<android.support.design.widget.CollapsingToolbarLayout
android:id="@ id/main.collapsing"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp"
>


<ImageView
android:id="@ id/main.backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
android:src="@drawable/material_flat"
app:layout_collapseMode="parallax"
/>


<android.support.v7.widget.Toolbar
android:id="@ id/main.toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin"
/>

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


<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="20sp"
android:lineSpacingExtra="8dp"
android:text="@string/lorem"
android:padding="@dimen/activity_horizontal_margin"
/>

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

<android.support.design.widget.FloatingActionButton
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_margin="@dimen/activity_horizontal_margin"
android:src="@drawable/ic_comment_24dp"
app:layout_anchor="@id/main.appbar"
app:layout_anchorGravity="bottom|right|end"
/>

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

效果圖

AppBarLayout控件 &amp; CoordinatorLayout 控件 詳解 -开发者知识库,這里寫圖片描述,第3张

所謂錨點 anchor ,就是綁定到一個 Layout 作為自己的父容器,個人理解,有錯請指正.

擴展閱讀:

TabLayout 遇到那些坑

分分鍾教你學會 ToolBar 的使用

最佳答案:

本文经用户投稿或网站收集转载,如有侵权请联系本站。

发表评论

0条回复