1、前言
在开发APP中,大家基本都会用到筛选功能,而美团、房天下、淘宝等都会有一个下拉筛选功能,其实实现起来并不是很难,先上图看一看,样式可能不太好看,还请见谅。页面筛选时有动画效果。
2、思路总结和源码
(1)首先是一个xml页面,整体思路就是上方按钮正常布局,下方通过fragment写入两个listview,因为listview是浮动的,通过控制上层listview的弹出和回收来控制弹框。具体xml代码如下:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent">
<include layout="@layout/top"/>
<LinearLayout
android:id="@+id/ll_head_layout"
android:layout_width="match_parent"
android:layout_height="45dp"
android:background="@color/white"
android:gravity="center_vertical"
android:orientation="horizontal">
<LinearLayout
android:id="@+id/ll_category"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@drawable/ripple_item_clicked"
android:clickable="true"
android:gravity="center"
android:orientation="horizontal">
<TextView
android:id="@+id/tv_category_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/iv_image"
android:layout_centerHorizontal="true"
android:text="分类"
android:textColor="@color/gray_font"
android:textSize="13sp"/>
<ImageView
android:id="@+id/iv_category_arrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:src="@mipmap/home_down_arrow"/>
</LinearLayout>
<View
android:layout_width="1px"
android:layout_height="20dp"
android:background="@color/gray_font"/>
<LinearLayout
android:id="@+id/ll_sort"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@drawable/ripple_item_clicked"
android:clickable="true"
android:gravity="center"
android:orientation="horizontal">
<TextView
android:id="@+id/tv_sort_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/iv_image"
android:layout_centerHorizontal="true"
android:text="排序"
android:textColor="@color/gray_font"
android:textSize="13sp"/>
<ImageView
android:id="@+id/iv_sort_arrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:src="@mipmap/home_down_arrow"/>
</LinearLayout>
<View
android:layout_width="1px"
android:layout_height="20dp"
android:background="@color/gray_font"/>
<LinearLayout
android:id="@+id/ll_filter"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@drawable/ripple_item_clicked"
android:clickable="true"
android:gravity="center"
android:orientation="horizontal">
<TextView
android:id="@+id/tv_filter_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/iv_image"
android:layout_centerHorizontal="true"
android:text="筛选"
android:textColor="@color/gray_font"
android:textSize="13sp"/>
<ImageView
android:id="@+id/iv_filter_arrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:src="@mipmap/home_down_arrow"/>
</LinearLayout>
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1px"
android:background="@color/gray_font"/>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ListView
android:id="@+id/list_drop_data"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:divider="@color/white"
android:dividerHeight="0dp"
android:listSelector="#00000000"
android:background="@color/white"
android:paddingLeft="10dp">
</ListView>
<View
android:id="@+id/view_mask_bg"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:alpha="0.4"
android:visibility="gone"
android:background="@color/gray_font"/>
<LinearLayout
android:id="@+id/ll_content_list_view"
android:layout_width="match_parent"
android:layout_height="240dp"
android:orientation="horizontal">
<ListView
android:id="@+id/lv_left"
android:layout_width="90dp"
android:layout_height="match_parent"
android:background="@color/gray_font"
android:divider="@null"
android:dividerHeight="0dp"
android:scrollbars="none"
android:visibility="gone"/>
<ListView
android:id="@+id/lv_right"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white"
android:divider="@null"
android:dividerHeight="0dp"
android:scrollbars="none"
android:visibility="gone"/>
</LinearLayout>
</FrameLayout>
</LinearLayout>
(2)activity代码如下,主要是控制三个按钮的点击效果和弹出效果,并且来显示不同的内容。
class DropScreenActivity : BaseActivity() {
var listData=ArrayList<String>() //弹出内容数据列表
var isShowing : Boolean?=false //判断当前状态是否显示了下拉框
private var nowPosition = -1//记住下拉内容的是哪个位置点击的,-1表示空白
val POSITION_CATEGORY = 0 // 分类的位置
val POSITION_SORT = 1 // 排序的位置
val POSITION_FILTER = 2 // 筛选的位置
var index=0
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.main_drop_screen)
initView()
setTitle("下拉筛选",false,null)
registerBack()
}
fun initView(){
initData()
categoryInit()
OrderMethod()
secondButton()
blankViewMethod()
}
/*
* 初始化下方数据
* */
fun initData(){
getValues()
val adapter=DropScreenAdapter(this)
list_drop_data!!.adapter=adapter
adapter.refreshData(listData)
list_drop_data.onItemClickListener=object : AdapterView.OnItemClickListener{
override fun onItemClick(p0: AdapterView<*>?, p1: View?, p2: Int, p3: Long) {
nowPosition=-1
show(nowPosition)
showToastShort(listData[p2])
}
}
}
/*
* 分类筛选点击效果
* */
fun categoryInit(){
//分类筛选
ll_category!!.setOnClickListener({
//当前
show(POSITION_CATEGORY)
getValues()
val adapter=DropScreenAdapter(this)
lv_right!!.adapter=adapter
adapter.refreshData(listData)
lv_right!!.onItemClickListener=object : AdapterView.OnItemClickListener{
override fun onItemClick(p0: AdapterView<*>?, p1: View?, p2: Int, p3: Long) {
nowPosition=-1
show(nowPosition)
showToastShort(listData[p2])
}
}
})
}
/*
* 排序第二行的执行方法
* */
fun OrderMethod(){
ll_sort!!.setOnClickListener( {
show(POSITION_SORT)
getValues()
val adapter=DropScreenAdapter(this)
lv_right!!.adapter=adapter
adapter.refreshData(listData)
lv_right!!.onItemClickListener=object : AdapterView.OnItemClickListener{
override fun onItemClick(p0: AdapterView<*>?, p1: View?, p2: Int, p3: Long) {
showToastShort(listData[p2])
}
}
})
}
/*
* 第三行的执行方法
* */
fun secondButton(){
ll_filter!!.setOnClickListener( {
show(POSITION_FILTER)
getValues()
val adapter=DropScreenAdapter(this)
lv_right!!.adapter=adapter
adapter.refreshData(listData)
lv_right!!.onItemClickListener=object : AdapterView.OnItemClickListener{
override fun onItemClick(p0: AdapterView<*>?, p1: View?, p2: Int, p3: Long) {
showToastShort(listData[p2])
}
}
})
}
/*
* 点击空白执行的方法
* */
fun blankViewMethod(){
view_mask_bg!!.setOnClickListener(View.OnClickListener {
nowPosition=-1
show(nowPosition)
})
}
/*
* 判断是否弹出下拉框
* */
// 动画显示
fun show(position: Int) {
//当下拉页面没显示则显示页面
var endVal : Float= DensityUtil.dip2px(this,240f).toFloat()
if(!isShowing!!){
view_mask_bg.visibility=View.VISIBLE
var alphaAnimator = ObjectAnimator.ofFloat(ll_content_list_view,"translationY", -endVal,0f)
alphaAnimator.duration = 1000
alphaAnimator.start()
lv_right!!.visibility=View.VISIBLE
isShowing=true
nowPosition=position
//箭头动画效果
val animation = RotateAnimation(0f, 180f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f)
animation.duration = 1000
animation.fillAfter = true
iv_category_arrow.startAnimation(animation)
//当是空白或者是显示状态并且点击的和当前状态一致时则隐藏
}else if(isShowing!! &&(nowPosition==-1 || (nowPosition==position))){
view_mask_bg.visibility=View.GONE
nowPosition=-1
isShowing=false
val alphaAnimator = ObjectAnimator.ofFloat(ll_content_list_view,"translationY", 0f,-endVal)
alphaAnimator.duration = 1000
alphaAnimator.start()
val animation = RotateAnimation(180f, 360f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f)
animation.duration = 1000
animation.fillAfter = true
iv_category_arrow.startAnimation(animation)
//ObjectAnimator.ofFloat(llContentListView, "translationY", 0, -panelHeight).setDuration(200).start()
//即没显示也没有隐藏说明平移了点击另一个按钮
}else{
nowPosition=position
}
}
fun getValues(){
listData.clear()
++index
for(i in 0..20){
listData.add(index.toString()+"、您好、欢迎来到我的程序")
}
}
(3)OK,是不是实现起来其实挺简单的啊。