開發中如果能恰當的使用material design的一些設計,不僅能讓你的APP更炫酷,最重要的是開發起來easy多了。這裏介紹下material design裏一個很重要的控件:CoordinatorLayout,以及配合其子view的一些用法。
我們在創建Activity的時候,有一個Activity模板叫Scrolling Activity,它實現的就是簡單的可摺疊工具欄,我們在創建Activity的時候選擇此模板,然後並不需要添加任何代碼,跑起來就是下圖的樣子,有沒有很漂亮。這個模板一般來說比較適用於App的詳情頁,比如商品詳情,個人詳情,視頻詳情之類的。
Scrolling Activity.gif
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="test.com.scrollactivity.ScrollingActivity">
<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar"
android:fitsSystemWindows="true"
android:layout_height="@dimen/app_bar_height"
android:layout_width="match_parent"
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/toolbar_layout"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
app:layout_collapseMode="pin"
app:popupTheme="@style/AppTheme.PopupOverlay" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include layout="@layout/content_scrolling" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/fab_margin"
app:layout_anchor="@id/app_bar"
app:layout_anchorGravity="bottom|end"
android:src="@android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>
這是上面佈局引用的NestedScrollView
<?xmlversion="1.0"encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:showIn="@layout/activity_scrolling"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="test.com.scrollactivity.ScrollingActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/text_margin"
android:text="@string/large_text" />
</android.support.v4.widget.NestedScrollView>
我們先對上面出現的這些佈局控件做個簡單的介紹吧,估計多數同學會覺得比較陌生。
CoordinatorLayout
CoordinatorLayout,音:靠迪內特雷奧特;意:協調者佈局。它是support.design包中的控件,所以使用的時候要導入compile 'com.android.support:design:23.3.0'包。簡單來說,CoordinatorLayout是用來協調其子view並以觸摸影響佈局的形式產生動畫效果的一個super-powered FrameLayout,其典型的子View包括:FloatingActionButton,SnackBar。注意:CoordinatorLayout是一個頂級父View。
AppBarLayout
AppBarLayout是一個實現了很多材料設計特性的垂直的LinearLayout,它能響應滑動事件。必須在它的子view上設置app:layout_scrollFlags屬性或者是在代碼中調用setScrollFlags()設置這個屬性。這個類的特性強烈依賴於它是否是一個CoordinatorLayout的直接子view,如果不是,那麼它的很多特性不能夠使用。AppBarLayout需要一個具有滑動屬性的兄弟節點view,並且在這個兄弟節點View中指定behavior屬性爲AppBarLayout.ScrollingViewBehavior的類實例,可以使用一個內置的string表示這個默認的實例@string/appbar_scrolling_view_behavior。
AppBarLayout的子佈局有5種滾動標識(上面代碼CollapsingToolbarLayout中配置的app:layout_scrollFlags屬性):
-
scroll:所有想滾動出屏幕的view都需要設置這個flag, 沒有設置這個flag的view將被固定在屏幕頂部。
-
enterAlways:這個flag讓任意向下的滾動都會導致該view變爲可見,啓用快速“返回模式”。
-
enterAlwaysCollapsed:假設你定義了一個最小高度(minHeight)同時enterAlways也定義了,那麼view將在到達這個最小高度的時候開始顯示,並且從這個時候開始慢慢展開,當滾動到頂部的時候展開完。
-
exitUntilCollapsed:當你定義了一個minHeight,此佈局將在滾動到達這個最小高度的時候摺疊。
-
snap:當一個滾動事件結束,如果視圖是部分可見的,那麼它將被滾動到收縮或展開。例如,如果視圖只有底部25%顯示,它將摺疊。相反,如果它的底部75%可見,那麼它將完全展開。
CollapsingToolbarLayout
CollapsingToolbarLayout作用是提供了一個可以摺疊的Toolbar,它繼承自FrameLayout,給它設置layout_scrollFlags,它可以控制包含在CollapsingToolbarLayout中的控件(如:ImageView、Toolbar)在響應layout_behavior事件時作出相應的scrollFlags滾動事件(移除屏幕或固定在屏幕頂端)。CollapsingToolbarLayout可以通過app:contentScrim設置摺疊時工具欄佈局的顏色,通過app:statusBarScrim設置摺疊時狀態欄的顏色。默認contentScrim是colorPrimary的色值,statusBarScrim是colorPrimaryDark的色值。
CollapsingToolbarLayout,音:克萊普辛。
CollapsingToolbarLayout的子佈局有3種摺疊模式(Toolbar中設置的app:layout_collapseMode)
-
off:默認屬性,佈局將正常顯示,無摺疊行爲。
-
pin:CollapsingToolbarLayout摺疊後,此佈局將固定在頂部。
-
parallax:CollapsingToolbarLayout摺疊時,此佈局也會有視差摺疊效果。
當CollapsingToolbarLayout的子佈局設置了parallax模式時,我們還可以通過app:layout_collapseParallaxMultiplier設置視差滾動因子,值爲:0~1。
NestedScrollView
在新版的support-v4兼容包裏面有一個NestedScrollView控件,這個控件其實和普通的ScrollView並沒有多大的區別,這個控件其實是Meterial Design中設計的一個控件,目的是跟MD中的其他控件兼容。應該說在MD中,RecyclerView代替了ListView,而NestedScrollView代替了ScrollView,他們兩個都可以用來跟ToolBar交互,實現上拉下滑中ToolBar的變化。在NestedScrollView的名字中其實就可以看出他的作用了,Nested是嵌套的意思,而ToolBar基本需要嵌套使用。
FloatingActionButton
FloatingActionButton就比較簡單了,就是一個漂亮的按鈕,其本質是一個ImageVeiw。有一點要注意,Meterial Design引入了海拔(或者說高度)的概念,就是所有的view都有了高度,他們像貼紙一樣,一層一層貼在手機屏幕上,而FloatingActionButton的海拔最高,它貼在所有view的最上面,沒有view能覆蓋它。
Behavior
Behavior是Android新出的Design庫裏新增的佈局概念。Behavior只有是CoordinatorLayout的直接子View纔有意義。只要將Behavior綁定到CoordinatorLayout的直接子元素上,就能對觸摸事件(touch events)、window insets、measurement、layout以及嵌套滾動(nested scrolling)等動作進行攔截。
Design Library的大多功能都是藉助Behavior的大量運用來實現的。當然,Behavior無法獨立完成工作,必須與實際調用的CoordinatorLayout子視圖相綁定。具體有三種方式:通過代碼綁定、在XML中綁定或者通過註釋實現自動綁定。上面NestedScrollView中app:layout_behavior="@string/appbar_scrolling_view_behavior"的Behavior是系統默認的,我們也可以根據自己的需求來自定義Behavior。
但實際的開發中,詳情頁NestedScrollView中不可能只簡單的包了一個TextView,那樣的話產品經理也太便宜你了,這麼大片的區域呢,怎麼着也要來個列表吧,一個不夠,給我放仨,可以左右切換。於是乎真正的詳情頁做出來可能是這個樣子的。那所以我們可能還要在上面的代碼基礎上做些修改,FloatingActionButton就不要了,NestedScrollView和RecyclerView一塊用據說是有問題的,但我這裏很明顯是需要一個Viewpager,然後裏面放幾個Fragment,Fragment裏放一個RecyclerView完事。Tab指示欄呢就用系統自帶的TabLayout,這個控件也在design包裏,最新的design包甚至還貼心的提供了TabLayout的子View:TabItem,開發真的是變得越來越easy了。
貼一下上圖的Layout
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.example.administrator.myapplication.MainActivity">
<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:collapsedTitleTextAppearance="@style/ToolBarTitleText"
app:contentScrim="#46a8ba"
app:expandedTitleMarginEnd="48dp"
app:expandedTitleMarginStart="48dp"
app:expandedTitleTextAppearance="@style/transparentText"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true">
<LinearLayout
android:id="@+id/login_layout"
android:layout_width="match_parent"
android:layout_height="240dp"
android:background="@mipmap/profile_bg"
android:orientation="vertical"
android:paddingBottom="10dp"
app:layout_collapseMode="pin"
app:layout_collapseParallaxMultiplier="0.7">
<de.hdodenhof.circleimageview.CircleImageView
android:id="@+id/head_img"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_marginTop="60dp"
android:layout_centerInParent="true"
android:layout_gravity="center"
android:src="@mipmap/ic_launcher"
app:border_color="@android:color/white"
app:border_width="2dp"
/>
<TextView
android:id="@+id/nick_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="end"
android:gravity="center"
android:maxLength="24"
android:text="Star"
android:layout_marginTop="10dp"
android:singleLine="true"
android:textColor="#ffffff"
android:textSize="14sp"/>
<TextView
android:id="@+id/sign"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:ellipsize="end"
android:gravity="center"
android:maxLength="70"
android:maxLines="2"
android:text="吹牛逼的都是年輕人"
android:textColor="#ffffff"
android:textSize="14sp"
android:visibility="visible"/>
</LinearLayout>
<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"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="@+id/toolbar_tab"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
android:background="#ffffff"
android:fillViewport="false"
app:layout_scrollFlags="scroll"
app:tabIndicatorColor="#0835f8"
app:tabIndicatorHeight="2.0dp"
app:tabSelectedTextColor="#0835f8"
app:tabTextColor="#ced0d3">
<android.support.design.widget.TabItem
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="A" />
<android.support.design.widget.TabItem
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="B" />
<android.support.design.widget.TabItem
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="C" />
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
需要代碼的自取:GitHub
https://github.com/stayinxing/CoordinatorLayout
有同學希望能加上下拉刷新,上拉加載,其實也是簡單的。我們還是用SwipeRefreshLayout吧。但我們現在面臨一個問題,這個SwipeRefreshLayout加在哪?我見過案例是把SwipeRefreshLayout做爲頂級View包在CoordinatorLayout的外面,我覺得這個做法還是很糟糕的,首先CoordinatorLayout推薦做爲頂級View使用,現在又在外面套了個刷新,不倫不類的;其次,如上面的案例就會出現一個SwipeRefreshLayout會對應三個子列表的刷新,處理起來還是麻煩。我們是不是可以把SwipeRefreshLayout套在ViewPager外面呢?也是可以的,但還是麻煩。我們就把下拉刷新這件事交給Fragment自己來做好了。
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.SwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/swipeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.RecyclerView
android:id="@+id/list_view"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</android.support.v4.widget.SwipeRefreshLayout>
完了效果就是醬嬸滴,至於上拉加載也是很easy了,後面有時間換個主題再談loadingmore!