前言
最近项目里要做一个下拉式筛选菜单的效果,有点像爱奇艺的筛选菜单。这种效果在很多app中也可以看到,并不稀奇。于是我在百度上找啊找,看有没有现成的代码直接down下来用。找了一圈下来,结果不是效果不行,就是得要花软妹币才能下载源码。得,不找了,还是自己写一个吧。先看看效果图(抱歉,开启模拟器后电脑卡成狗,所以录制的gif图片也一卡一卡的):
效果图就是这样,非常简单。原来想过用PopupWindow实现,早在之前的项目里就有过同样的需求,结果发现PopupWindow并不好实现(原因自己可以去摸索),在当时作为菜菜鸟的我也没有想过用自定义控件,结果在经过项目经理同意下,用PopupWindow的一个类似的效果替代了。如今再遇这种需求,当然要破除魔咒,发誓把这个简单效果写出来。
制定布局
在集成为自定义控件之前,用常规方法,通过在xml文件里将该布局布好
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:id="@+id/top_bar"
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="@color/colorAccent"
android:gravity="center_vertical|right">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:onClick="onClick"
android:text="点击控制" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="@color/colorPrimary"
android:gravity="center"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/app_name"
android:textColor="#ffffff"/>
</LinearLayout>
</LinearLayout>
</RelativeLayout>
对应效果图是这样的:
上图中上面红色部分和下面蓝色部分是一体的,所以我们要将它们的父布局作为一个自定义控件,以便对这两部分进行操控。思考再三,我将它们的父布局命名为DropdownLayout,并让它继承LinearLayout。下面,按照自定义控件一般步骤来实现我们的核心代码。
设置自定义控件属性
这里只设置下蓝色部分显示隐藏速度dropSpeed
<declare-styleable name="DropdownLayout">
<attr name="dropSpeed" format="integer"/>
</declare-styleable>
获取自定义属性
public DropdownLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
this.setOrientation(VERTICAL);
TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.DropdownLayout);
mDropSpeed = array.getInteger(R.styleable.DropdownLayout_dropSpeed,300);
array.recycle();
}
重写onMeasure()
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
if (null != this.getChildAt(1) && this.getChildAt(1) instanceof ViewGroup){
ViewGroup rootDropView = (ViewGroup) this.getChildAt(1);
int childCount = rootDropView.getChildCount();
if (childCount>0){
mDropView = rootDropView.getChildAt(0);
mDropHeight = mDropView.getMeasuredHeight();
Log.i(TAG,"onMeasure dropHeight:"+mDropHeight);
mDropView.setY(-mDropHeight);//一般第一次进入页面,这部分是隐藏的
}
}
}
设置按钮点击控制其显示隐藏方法,供使用者调用,这里利用可以利用属性动画
public void toggle(){
if (isOpen){
ObjectAnimator translationY = ObjectAnimator.ofFloat(mDropView, "translationY", 0, -mDropHeight);
translationY.setDuration(mDropSpeed);
translationY.start();
isOpen = false;
}else{
ObjectAnimator translationY = ObjectAnimator.ofFloat(mDropView, "translationY", -mDropHeight, 0);
translationY.setDuration(mDropSpeed);
translationY.start();
isOpen = true;
}
}
完成上面步骤,我们改写下我们的布局文件,将DropdownLayout引入我们的布局:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:zhusp="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.zhusp.androiddemo.views.DropdownLayout
android:id="@+id/dropdown_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
zhusp:dropSpeed="300">
<LinearLayout
android:id="@+id/top_bar"
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="@color/colorAccent"
android:gravity="center_vertical|right">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:onClick="onClick"
android:text="点击控制" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="@color/colorPrimary"
android:gravity="center"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/app_name"
android:textColor="#ffffff"/>
</LinearLayout>
</LinearLayout>
</com.zhusp.androiddemo.views.DropdownLayout>
</RelativeLayout>
最后编写我们的Activity文件,也非常简单:
package com.zhusp.androiddemo.activity.selfwidget;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import com.zhusp.androiddemo.R;
import com.zhusp.androiddemo.views.DropdownLayout;
public class DropdownViewActivity extends AppCompatActivity {
private DropdownLayout mDropdownView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_top_slide_menu);
mDropdownView = (DropdownLayout) findViewById(R.id.dropdown_layout);
}
public void onClick(View v){
mDropdownView.toggle();
}
}
OK,这样就可以运行了,是不是超级简单呢。
最后附上源码链接:源码链接