仿京東篩選

• 簡(jiǎn)單介紹

這個(gè)demo寫(xiě)的是仿京東的側(cè)滑篩選頁(yè)面，點(diǎn)擊進(jìn)入篩選后進(jìn)入二級(jí)篩選，兩次側(cè)滑的篩選，還包括ListView+CheckBox滑動(dòng)沖突，ListView+ GridView顯示一行問(wèn)題解決，接口回調(diào)傳遞數(shù)據(jù)等

• 效果圖

這里寫(xiě)圖片描述

這里寫(xiě)圖片描述

這里寫(xiě)圖片描述

• 簡(jiǎn)單得代碼介紹

1.首頁(yè)側(cè)滑用的是安卓官方V4包中的DrawerLayout

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <FrameLayout
        android:id="@+id/main_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true">

        <TextView
            android:id="@+id/screenTv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center|top"
            android:layout_marginTop="200dp"
            android:text="仿京東篩選"
            android:textSize="20sp" />
    </FrameLayout>

    <LinearLayout
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="end"
        android:fitsSystemWindows="true"
        android:orientation="vertical" />

</android.support.v4.widget.DrawerLayout>

2.一級(jí)頁(yè)面是自定義的layout,作為DrawerLayout的側(cè)滑頁(yè)面添加進(jìn)去menuHeaderView = new RightSideslipLay(ScreeningActivity.this); navigationView.addView(menuHeaderView);
發(fā)現(xiàn)的一個(gè)小的技巧想要側(cè)滑不隨滑動(dòng)而滑動(dòng)，只能點(diǎn)擊才出現(xiàn)側(cè)滑的話，可以先鎖定
drawer.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED, Gravity.RIGHT);這樣就不一直跟著手勢(shì)側(cè)滑了

3.一級(jí)界面 ListVIew嵌套GridView，GridView得做自設(shè)配高度的自定義，不然只能顯示一行，具體參源碼AutoMeasureHeightGridView這個(gè)類

4.接下來(lái)是解析數(shù)據(jù)綁定數(shù)據(jù)了，還算比較簡(jiǎn)單。定義模型類，京東的篩選默認(rèn)每項(xiàng)顯示數(shù)據(jù)3個(gè)即一行。我現(xiàn)在默認(rèn)的是都是關(guān)閉的，只有第一項(xiàng)是打開(kāi)的，默認(rèn)顯現(xiàn)9個(gè)即3行，點(diǎn)擊查看更多就能進(jìn)入下一級(jí)頁(yè)面。參看圖二

5.二級(jí)頁(yè)面是一個(gè)PopupWindow，設(shè)置了PopupWindow的位置和動(dòng)畫(huà)達(dá)到，也能像一級(jí)界面也樣，右邊側(cè)滑出來(lái)，點(diǎn)擊側(cè)滑收回去的效果。`
/**
* 創(chuàng)建PopupWindow
*/
private PopupWindow mMenuPop;
public RightSideslipChildLay mDownMenu;

protected void initPopuptWindow(List<AttrList.Attr.Vals> mSelectData) {
    mDownMenu = new RightSideslipChildLay(getContext(), ValsData, mSelectData);
    if (mMenuPop == null) {
        mMenuPop = new PopupWindow(mDownMenu, LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.FILL_PARENT);
    }
    mMenuPop.setBackgroundDrawable(new BitmapDrawable());
    mMenuPop.setAnimationStyle(R.style.popupWindowAnimRight);
    mMenuPop.setFocusable(true);
    mMenuPop.showAtLocation(RightSideslipLay.this, Gravity.TOP, 100, UiUtils.getStatusBarHeight(mCtx));
    mMenuPop.setOnDismissListener(new PopupWindow.OnDismissListener() {

        @Override
        public void onDismiss() {
            dismissMenuPop();
        }
    });
}`

此頁(yè)面是一個(gè)ListView里包含CheckBox，對(duì)于CheckBox滑動(dòng)選中錯(cuò)位的問(wèn)題在這個(gè)demo中也有解決，此法一本萬(wàn)利?？梢韵螺ddemo來(lái)參考。大體思路是CheckBox選中的狀態(tài)對(duì)象的存在需要顯示的對(duì)象里，設(shè)置對(duì)象的一個(gè)屬性，記錄CheckBox選中的狀態(tài)。

6.對(duì)于頁(yè)面件數(shù)據(jù)的傳遞使用的接口回調(diào)。包括Adapter數(shù)據(jù)操作的傳出和一級(jí)頁(yè)面?zhèn)魅攵?jí)頁(yè)面，二級(jí)頁(yè)面在回傳給一級(jí)頁(yè)面顯示。一級(jí)頁(yè)面在傳出給主頁(yè)面（這個(gè)沒(méi)有寫(xiě))也可以用其他數(shù)據(jù)傳遞的方式，這只是方法之一。

7.本人也是小菜鳥(niǎo)一枚，第一次使用markdown寫(xiě)博文，有啥不妥的地方歡迎留言討論，項(xiàng)目下載地址：

http://download.csdn.net/detail/qq_15795335/9752495

原創(chuàng)博客，轉(zhuǎn)載說(shuō)明。記錄自己成長(zhǎng)的步伐！