栗子——Android新特性之筛选菜单

2017-01-14 10:46:03来源:http://www.jianshu.com/p/56a9787e3f2f作者:淡漠de人生人点击

如果喜欢栗子系列可以关注哦~各种栗子正在赶来中......



栗子配图(自己设计--栗子icon来自阿里图标库,背景图来自摄图网).png
栗子惯例,先上GIF

栗子GIF.gif

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


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


先来分析下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:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_scrollFlags="scroll">
<ImageView
android:layout_width="match_parent"
android:layout_height="150dp"
android:background="#3BBD79" />
</LinearLayout>
<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">
<com.anfq.DropDownMenuFloat.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" />
<com.anfq.DropDownMenuFloat.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">
<com.anfq.DropDownMenuFloat.view.DropdownListView
android:id="@+id/dropdownType"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" />
<com.anfq.DropDownMenuFloat.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来控制的,Flags的类型有4种
Scroll :向下滚动时,被指定了这个属性的View会被滚出屏幕范围直到完全不可见的位置
enterAlways :向上滚动时,这个View会随着滚动手势出现,直到恢复原来的位置.
enterAlwaysCollapsed: 当你的视图已经设置minHeight属性又使用此标志时,你的视图只能以最小高度进入,只有当滚动视图到达顶部时才扩大到完整高度
exitUntilCollapsed : 滚动退出屏幕,最后折叠在顶端

栗子中就用到了scroll和exitUntilCollapsed,实际上不设置exitUntilCollapsed是一样的,默认view是停留不被隐藏的




2. FrameLayout里的view是通过layout_behavior来控制的,只要设置其@string/appbar_scrolling_view_behavior属性就ok了


FrameLayout里的布局是由RecyclerView和灰色透明的view,以及一组DropdownListView组成,这就是我选择这个筛选控件的原因,可以拆分出来独立的组件,而不是组合起来一个新控件。



至于java代码就不分析了~都是用了筛选菜单的数据添加具体的可以看Demo代码,这里还用到了BaseRecyclerViewAdapterHelper轻松实现RecyclerView的数据绑定git地址

本栗子源码地址密码:h9or


总结:新的东西要学会使用这是最基本的,然后可以深入研究一些炫酷的效果,人是要往前看的,所以接受新东西带来的便利吧,炫酷ing



转载请注明出处,简书:淡漠de人生




最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台