Android新特性之筛选菜单

来源：互联网发布：考单片机的高级证书编辑：程序博客网时间：2024/06/05 23:05

栗子惯例，先上GIF

栗子.gif

首先感谢下提供筛选菜单Demo的作者，筛选菜单就是借用了他的地址

好了，现在来说下这个栗子了，在以往实现这种效果是很麻烦的，现在就不同了~自从新特性控件出来后，各种happy，可以轻松实现各种炫酷效果~

用到的控件

使用以下控件1，2，3需要在Gradle加入Support Design Library：

    compile 'com.android.support:design:25.0.1'

CoordinatorLayout
CoordinatorLayout通过协调子布局的形式，产生联动效果。通过设置子View的Behaviors来协调子View。
AppBarLayout
AppBarLayout中的一个属性android:fitsSystemWindows="true"，是为了调整系统窗口布局以适应布局。
AppBarLayout里面的View，是通过app:layout_scrollFlags属性来控制，其中有4种Flag的类型：
Scroll：向下滚动时,被指定了这个属性的View会被滚出屏幕范围直到完全不可见的位置。
enterAlways：向上滚动时,这个View会随着滚动手势出现,直到恢复原来的位置。
enterAlwaysCollapsed：当视图已经设置minHeight属性又使用此标志时，视图只能以最小高度进入，只有当滚动视图到达顶部时才扩大到完整高度。
exitUntilCollapsed：滚动退出屏幕，最后折叠在顶端。
CollapsingToolbarLayout
用来协调AppBarLayout来实现滚动隐藏ToolBar的效果。
Toolbar
Toolbar在v7包中，设置layout_collapseMode协调CollapsingToolbarLayout达到滑动视图的视觉差效果:
pin：固定模式，在折叠的时候最后固定在顶端。
parallax：视差模式，在折叠的时候会有个视差折叠的效果。

先来分析下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嵌套
内层是由AppBarLayout和FrameLayout组成
AppBarLayout里的view是通过layout_scrollFlags来控制
FrameLayout里的view是通过layout_behavior来控制的，只要设置其@string/appbar_scrolling_view_behavior属性就ok了
FrameLayout里的布局是由RecyclerView和灰色透明的view,以及一组DropdownListView组成，这就是我选择这个筛选控件的原因，可以拆分出来独立的组件，而不是组合起来的一个新控件。

JAVA代码中都是些简单的数据绑定，及一些设置，具体的可以看代码，有问题的话可以联系我~

GitHub地址

总结：学会新控件的使用这是最基本的，然后可以深入研究一些炫酷的效果，炫酷ing

0 0