DrawerLayout使用詳解

一.drawerLayout解釋

實現了側滑菜單效果的控件,可以說drawerLayout是因爲第三方控件如MenuDrawer等的出現之後,google借鑑而出現的產物。drawerLayout分爲側邊菜單和主內容區兩部分,側邊菜單可以根據手勢展開與隱藏(drawerLayout自身特性),主內容區的內容可以隨着菜單的點擊而變化(這需要使用者自己實現)

二.佈局

<android.support.v4.widget.DrawerLayout
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <!-- 內容區 -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:orientation="vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="20dp"
                android:text="內容區"
                android:textSize="20sp"/>

            <Button
                android:id="@+id/btn_open_left"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="打開左邊"/>

            <Button
                android:id="@+id/btn_open_right"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="打開右邊"/>

        </LinearLayout>

        <!-- 左邊菜單 -->
        <android.support.design.widget.NavigationView
            android:id="@+id/navigation_view"
            android:layout_width="260dp"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            app:headerLayout="@layout/drawer_header"
            app:menu="@menu/menu_drawer_left"/>

        <!-- 右邊菜單 -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="end"
            android:background="@color/black"
            android:gravity="center"
            android:orientation="vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="20dp"
                android:text="右邊菜單"
                android:textColor="@color/white"
                android:textSize="20sp"
                android:textStyle="bold"/>

            <Button
                android:id="@+id/btn_close_right"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="關閉"/>

        </LinearLayout>

    </android.support.v4.widget.DrawerLayout>
  • 外層是DrawerLayout,第一個子view是內容區,側滑內容緊跟其後。
  • 側滑內容可以有好幾個
  • android:layout_gravity="end" 標識從左邊還是右邊滑出

三.控件調用

GravityCompat.START方式更好

四.新增監聽

       //監聽
        mDrawerLayout.addDrawerListener(new DrawerLayout.DrawerListener() {
            @Override
            public void onDrawerSlide(@NonNull View view, float v) {
                Log.i("---", "滑動中");
            }

            @Override
            public void onDrawerOpened(@NonNull View view) {
                Log.i("---", "打開");
            }

            @Override
            public void onDrawerClosed(@NonNull View view) {
                Log.i("---", "關閉");
            }

            @Override
            public void onDrawerStateChanged(int i) {
                Log.i("---", "狀態改變");
            }
        });

或者

mDrawerToggle = new ActionBarDrawerToggle(
        this,                  /* host Activity */
        mDrawerLayout,         /* DrawerLayout object */
        R.drawable.ic_drawer,  /* nav drawer image to replace 'Up' caret */
        R.string.drawer_open,  /* "open drawer" description for accessibility */
        R.string.drawer_close  /* "close drawer" description for accessibility */
        ) {
    public void onDrawerClosed(View view) {
        getActionBar().setTitle(mTitle);
        invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
    }
    public void onDrawerOpened(View drawerView) {
        getActionBar().setTitle(mDrawerTitle);
        invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
    }
};
mDrawerLayout.setDrawerListener(mDrawerToggle);

五.新增滑動偏移效果

 ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
                this, drawerLayout, R.string.home_drawer_open, R.string.home_drawer_close) {
            @Override
            public void onDrawerSlide(View drawerView, float slideOffset) {
                //可以重新側滑方法,該方法實現側滑動畫,整個佈局移動效果
                //獲取mDrawerLayout中的第一個子佈局,也就是佈局中的RelativeLayout
                //獲取抽屜的view
                View mContent = drawerLayout.getChildAt(0);
                float scale = 1 - slideOffset;
                float endScale = 0.8f + scale * 0.2f;
                float startScale = 1 - 0.3f * scale;

                //設置左邊菜單滑動後的佔據屏幕大小
                drawerView.setScaleX(startScale);
                drawerView.setScaleY(startScale);
                //設置菜單透明度
                drawerView.setAlpha(0.6f + 0.4f * (1 - scale));

                //設置內容界面水平和垂直方向偏轉量
                //在滑動時內容界面的寬度爲 屏幕寬度減去菜單界面所佔寬度
                mContent.setTranslationX(drawerView.getMeasuredWidth() * (1 - scale));
                //設置內容界面操作無效(比如有button就會點擊無效)
                mContent.invalidate();
                //設置右邊菜單滑動後的佔據屏幕大小
                mContent.setScaleX(endScale);
                mContent.setScaleY(endScale);
            }
        };

        toggle.syncState();
        drawerLayout.addDrawerListener(toggle);

問題解決

解決DrawerLayout抽屜實現不能點擊後面的控件

 

 

 

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章