Android新特性之筛选菜单

138 篇文章 0 订阅
栗子惯例,先上GIF

栗子.gif

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

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

用到的控件

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

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

  4. 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>

分析说明:

  1. 最外层是由一个CoordinatorLayout嵌套
  2. 内层是由AppBarLayoutFrameLayout组成
  3. AppBarLayout里的view是通过layout_scrollFlags来控制
  4. FrameLayout里的view是通过layout_behavior来控制的,只要设置其@string/appbar_scrolling_view_behavior属性就ok了
  5. FrameLayout里的布局是由RecyclerView和灰色透明的view,以及一组DropdownListView组成,这就是我选择这个筛选控件的原因,可以拆分出来独立的组件,而不是组合起来的一个新控件。

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


GitHub地址


总结:学会新控件的使用这是最基本的,然后可以深入研究一些炫酷的效果,炫酷ing
  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值