Android 多條件篩選簡單實現(xiàn)

最近要實現(xiàn)一個多條件篩選，類似這個效果：

Demo
Demo

如何實現(xiàn)

1.首先想到用PopupWindow實現(xiàn)，但不夠理想，麻煩的地方在于：上圖紅色框的區(qū)域！這部分應該是一開始就顯示了的，彈出PopupWindow后，我們就沒法再操作這部分了，除非在PopupWindow上實現(xiàn)一個一模一樣的view，但這樣就有兩個一樣的view，當其中一個改變時，另一個可能需要同步改變。太麻煩，于是，放棄這個方向。
2.網(wǎng)上這方面的封裝庫都是頁面view和篩選view合并在一起封裝的，不能說不好，但感覺這樣靈活性就低了，能不能將篩選條件的view當做一個控件來實現(xiàn)呢？我希望的實現(xiàn)效果如下：

<xxx.xxx.xxx.CustomLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <!-- 第一個布局是頂部layout ,可以是一個view,也可以是一個ViewGroup-->
        <TextView
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:text="點擊彈出條件篩選框"
           
            />
        <!-- 第二個布局是篩選條件的layout,可以是一個view,也可以是一個ViewGroup -->
        <TextView
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:text="具體篩選條件的布局"
            />

    </xxx.xxx.xxx.CustomLayout>

只需要在對應的位置，寫上所需的布局，就能實現(xiàn)彈出效果。最終效果如下：


效果圖
效果圖

實現(xiàn)過程

1.自定義一個layout:DropDownMenu

public class DropDownMenu extends RelativeLayout {

    //頂部的view
    private View viewTop;
    //篩選條件的view
    private View viewMenu;
    //遮蓋層的view
    private View viewMask;

    private Context mContext;
    //判斷當前狀態(tài)
    private boolean mIsOpen = false;

    public DropDownMenu(Context context) {
        this(context,null);
    }

    public DropDownMenu(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs,0);
    }

    public DropDownMenu(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this.mContext = context;
        initView();
    }

    private void initView(){
        //添加一個遮蓋層
        addMaskView();
        //檢查是否滿足要求
        checkLayout();
    }

    /**
     * 檢查是否滿足條件（需要view繪制完成才能檢查）
     */
    private void checkLayout(){
        post(new Runnable() {
            @Override public void run() {
                //檢查父布局是否滿足要求
                checkParentLayout();
                //檢查子view的數(shù)量
                checkChildCount();
                viewTop = getChildAt(1);
                viewMenu = getChildAt(2);
                //默認是隱藏的
                viewMenu.setVisibility(GONE);
            }
        });
    }

    /**
     * 檢查DropDownMenu所在的容器布局，如果是LinearLayout,拋出錯誤
     */
    private void checkParentLayout(){
        ViewGroup viewGroup = (ViewGroup) this.getParent();
        if(!(viewGroup instanceof FrameLayout)){
            throw new RuntimeException("ParentView must is FrameLayout ");
        }
    }

    /**
     * 檢查子view的數(shù)量，最多只有三個（有一個是遮蓋層）
     */
    private void checkChildCount(){
        if(this.getChildCount()!=3){
            throw new RuntimeException("Only two child view support!");
        }
    }
    /**
     * 添加一層遮蓋層(只有在展開情況下，才會顯示遮蓋層)
     */
    private void addMaskView(){
        if(viewMask!=null){
            return;
        }
        viewMask = new View(mContext);
        RelativeLayout.LayoutParams params = new LayoutParams(LayoutParams.MATCH_PARENT,
            ViewGroup.LayoutParams.MATCH_PARENT);
        viewMask.setLayoutParams(params);
        //灰黑色透明背景
        viewMask.setBackgroundColor(0x60434444);
        //添加view
        addView(viewMask);
        //默認是隱藏的
        viewMask.setVisibility(GONE);
    }

}

在布局初始化的時候，檢查自定義layout（DropDownMenu）的所在的父容器是否是FrameLayout。這里不能是LinearLayout,因為DropDownMenu是可以展開收縮的，高度是不確定的，如果父布局是LinearLayout,當DropDownMenu發(fā)生變化時，LinearLayout下的其它view也會隨著變化。
在布局初始化時，添加了一個遮罩層viewMask，那么按照繪制的流程，viewMask最先被繪制，然后是viewTop,最后才是viewMenu。現(xiàn)在布局已經(jīng)準備完成，一個是遮罩層viewMask,用于提供半透明的view,另外兩個分別是viewTop和viewMenu,在使用時再具體的實現(xiàn)的布局。

添加動畫

展開動畫

/**
     * 展開動畫
     */
    private void openAnimation(){
        //設置展開的基準位置,從頂部開始展開(默認是中心位置展開收縮)
        viewMenu.setPivotY(0);
        ObjectAnimator scaleY = ObjectAnimator.ofFloat(viewMenu,"scaleY",0f,1f);
        scaleY.setDuration(300);
        viewMenu.setVisibility(View.VISIBLE);
        scaleY.addListener(new Animator.AnimatorListener() {
            @Override public void onAnimationStart(Animator animation) {
            }

            @Override public void onAnimationEnd(Animator animation) {
                if(viewMask!=null){
                    viewMask.setVisibility(View.VISIBLE);
                }
            }

            @Override public void onAnimationCancel(Animator animation) {

            }

            @Override public void onAnimationRepeat(Animator animation) {

            }
        });
        scaleY.start();
    }

關閉動畫

/**
     * 收縮動畫
     */
    private void closeAnimation(){
        viewMenu.setPivotY(0);
        ObjectAnimator scaleY = ObjectAnimator.ofFloat(viewMenu,"scaleY",1f,0f);
        scaleY.setDuration(300);
        scaleY.addListener(new Animator.AnimatorListener() {
            @Override public void onAnimationStart(Animator animation) {

            }

            @Override public void onAnimationEnd(Animator animation) {
                viewMenu.setVisibility(View.GONE);
                if(viewMask!=null){
                    viewMask.setVisibility(View.GONE);
                }
            }

            @Override public void onAnimationCancel(Animator animation) {

            }

            @Override public void onAnimationRepeat(Animator animation) {

            }
        });
        scaleY.start();
    }

給篩選view彈出添加動畫，這里使用的是縮放動畫，也可以考慮使用位移動畫。
到這里基本已完成自定義layout了，完整代碼。

如何使用

在布局中：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.dropdownmenu.MainActivity"
    >

    <com.example.dropdownmenu.DropDownMenu
        android:orientation="vertical"
        android:id="@+id/dropDownMenu"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <!-- 第一個布局是頂部layout -->
        <TextView
            android:id="@+id/view_top"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:background="@color/colorAccent"
            android:text="點擊彈出條件篩選框"
            android:gravity="center"
            android:textColor="@android:color/white"
            />
        <!-- 第二個布局是篩選條件的layout -->
        <TextView
            android:id="@+id/view_menu"
            android:layout_below="@+id/view_top"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:background="@color/colorPrimaryDark"
            android:text="具體篩選條件的布局"
            android:gravity="center"
            android:textColor="@android:color/white"
            />

    </com.example.dropdownmenu.DropDownMenu>

</FrameLayout>

注意這里父布局使用FrameLayout.
在activity中：

public class MainActivity extends AppCompatActivity {

    private DropDownMenu dropDownMenu;

    @Override protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        dropDownMenu = (DropDownMenu)findViewById(R.id.dropDownMenu);
        TextView textView = (TextView) findViewById(R.id.view_top);
        textView.setOnClickListener(new View.OnClickListener() {
            @Override public void onClick(View v) {
                if(!dropDownMenu.isOpen()){
                    dropDownMenu.open();
                }
            }
        });
    }
}
最后編輯于 ：
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,366評論 25贊 708
  • ￥開啟￥ 【iAPP實現(xiàn)進入界面執(zhí)行逐一顯】 〖2017-08-25 15:22:14〗 《//首先開一個線程，因...
    小菜c閱讀 7,391評論 0贊 17
  • 發(fā)現(xiàn) 關注 消息 iOS 第三方庫、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 15,760評論 4贊 61
  • 內(nèi)容抽屜菜單ListViewWebViewSwitchButton按鈕點贊按鈕進度條TabLayout圖標下拉刷新...
    皇小弟閱讀 47,186評論 22贊 665
  • 不是故意選擇這個時間段開通簡書，而是巧合。2017年愚人節(jié)這一天下午四點開始了我的簡書，鍛煉一下我的文字。 ...
    cocoyu閱讀 237評論 0贊 0

友情鏈接更多精彩內(nèi)容