Android笔记之自定义View—超简易下拉式抽屉控件

前言

最近项目里要做一个下拉式筛选菜单的效果，有点像爱奇艺的筛选菜单。这种效果在很多app中也可以看到，并不稀奇。于是我在百度上找啊找，看有没有现成的代码直接down下来用。找了一圈下来，结果不是效果不行，就是得要花软妹币才能下载源码。得，不找了，还是自己写一个吧。先看看效果图（抱歉，开启模拟器后电脑卡成狗，所以录制的gif图片也一卡一卡的）：

效果图就是这样，非常简单。原来想过用PopupWindow实现，早在之前的项目里就有过同样的需求，结果发现PopupWindow并不好实现（原因自己可以去摸索），在当时作为菜菜鸟的我也没有想过用自定义控件，结果在经过项目经理同意下，用PopupWindow的一个类似的效果替代了。如今再遇这种需求，当然要破除魔咒，发誓把这个简单效果写出来。

制定布局

在集成为自定义控件之前，用常规方法，通过在xml文件里将该布局布好

对应效果图是这样的：

上图中上面红色部分和下面蓝色部分是一体的，所以我们要将它们的父布局作为一个自定义控件，以便对这两部分进行操控。思考再三，我将它们的父布局命名为DropdownLayout，并让它继承LinearLayout。下面，按照自定义控件一般步骤来实现我们的核心代码。

设置自定义控件属性

这里只设置下蓝色部分显示隐藏速度dropSpeed

获取自定义属性

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引入我们的布局：

最后编写我们的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，这样就可以运行了，是不是超级简单呢。

最后附上源码链接：源码链接