栗子配圖.png
栗子慣例，先上GIF
栗子.gif
好了，現(xiàn)在來說下這個栗子了，在以往實現(xiàn)這種效果是很麻煩的，現(xiàn)在就不同了，自從新特性控件出來后，各種happy，可以輕松實現(xiàn)各種炫酷效果！
使用到的控件
使用前需要在Gradle加入Support Design Library：
compile 'com.android.support:design:25.0.1'
CoordinatorLayout
CoordinatorLayout通過協(xié)調(diào)子布局的形式，產(chǎn)生聯(lián)動效果。通過設(shè)置子View的Behaviors來協(xié)調(diào)子View。
AppBarLayout
AppBarLayout中的一個屬性android:fitsSystemWindows="true"，是為了調(diào)整系統(tǒng)窗口布局以適應(yīng)布局。
AppBarLayout里面的View，是通過app:layout_scrollFlags屬性來控制，其中有4種Flag的類型：
-
Scroll：向下滾動時,被指定了這個屬性的View會被滾出屏幕范圍直到完全不可見的位置。 -
enterAlways：向上滾動時,這個View會隨著滾動手勢出現(xiàn),直到恢復原來的位置。 -
enterAlwaysCollapsed： 當視圖已經(jīng)設(shè)置minHeight屬性又使用此標志時，視圖只能以最小高度進入，只有當滾動視圖到達頂部時才擴大到完整高度。 -
exitUntilCollapsed： 滾動退出屏幕，最后折疊在頂端。
CollapsingToolbarLayout
用來協(xié)調(diào)AppBarLayout來實現(xiàn)滾動隱藏ToolBar的效果。
Toolbar
Toolbar在v7包中，設(shè)置layout_collapseMode協(xié)調(diào)CollapsingToolbarLayout達到滑動視圖的視覺差效果：
-
pin：固定模式，在折疊的時候最后固定在頂端。 -
parallax：視差模式，在折疊的時候會有個視差折疊的效果。
main.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:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsingToolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:navigationIcon="@drawable/back"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="centerInside"
app:layout_collapseMode="parallax"
android:fitsSystemWindows="true"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="180dp"
android:background="@drawable/image" />
</LinearLayout>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:titleTextColor="#ffffff"
app:theme="@style/ToolbarTheme"
android:gravity="center_vertical"
android:background="#00ffffff"
app:navigationIcon="@drawable/back"
app:layout_collapseMode="pin"
app:popupTheme="@style/AppTheme.PopupOverlay" />
</android.support.design.widget.CollapsingToolbarLayout>
<LinearLayout
app:layout_scrollFlags="exitUntilCollapsed"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="@color/white"
android:gravity="center">
<fj.hoverdropdownmenu.demo.view.DropdownButton
android:id="@+id/chooseType"
android:layout_width="0px"
android:layout_height="match_parent"
android:layout_weight="1" />
<View
android:layout_width="0.5dp"
android:layout_height="18dp"
android:background="#dddddd" />
<fj.hoverdropdownmenu.demo.view.DropdownButton
android:id="@+id/chooseLanguage"
android:layout_width="0px"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:background="@color/divide" />
</LinearLayout>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<android.support.v7.widget.RecyclerView
android:id="@+id/mRecyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<View
android:id="@+id/mask"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#80000000" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="200dp"
android:orientation="vertical">
<fj.hoverdropdownmenu.demo.view.DropdownListView
android:id="@+id/dropdownType"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" />
<fj.hoverdropdownmenu.demo.view.DropdownListView
android:id="@+id/dropdownLanguage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" />
</LinearLayout>
</FrameLayout>
</android.support.design.widget.CoordinatorLayout>
分析說明：
- 最外層是由一個
CoordinatorLayout嵌套 - 內(nèi)層是由
AppBarLayout和FrameLayout組成 -
AppBarLayout里的view是通過layout_scrollFlags來控制 -
FrameLayout里的view是通過layout_behavior來控制的，只要設(shè)置其@string/appbar_scrolling_view_behavior屬性就ok了 -
FrameLayout里的布局是由RecyclerView和灰色透明的view,以及一組DropdownListView組成，這就是我選擇這個篩選控件的原因，可以拆分出來獨立的組件，而不是組合起來的一個新控件。
JAVA代碼中都是些簡單的數(shù)據(jù)綁定，及一些設(shè)置，具體的可以看代碼，有問題的話可以聯(lián)系我~
總結(jié)
學會新控件的使用這是最基本的，然后實現(xiàn)一些炫酷的效果~
參考如下，感謝作者：
參考：過濾功能的下拉菜單FilterDropDownMenu
源碼地址
https://github.com/FJ917/FJHoverDropDownMenuDemo
有用的話，請給個star支持下，謝謝~
未經(jīng)本人允許禁止轉(zhuǎn)載，違者必究
