Android 高大上的側滑菜單DrawerLayout,解決了不能全屏滑動的問題
阿新 • • 發佈:2017-09-06
ces 部分 int 項目 菜單 nsh ger res pil
DrawerLayout預覽
DrawerLayout初效果.gif
DrawerLayout預覽
DrawerLayout主要功能就是 實現側滑菜單效果的功能,並且可以通過增加一些設置來實現高大上的效果,那麽就請看動態圖:
註意左上角那個圖標,有木有很好玩,哈哈...
接下來就介紹如何實現這一功能
1. 在項目對應的build.gradle中添加依賴
dependencies { ...//其他代碼 compile ‘com.android.support:appcompat-v7:24.0.0‘ compile ‘com.android.support:design:24.0.0‘ ...//其他代碼 }
2. 添加ToolBar,創建toolbar.xml文件
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="wrap_content" android:layout_height="wrap_content"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:clipToPadding="true" android:fitsSystemWindows="true" android:layout_width="match_parent" android:layout_height="wrap_content" app:title="資訊" app:titleTextColor="#fff"> </android.support.v7.widget.Toolbar> </RelativeLayout>
3. 在main.xml中添加DrawerLayout
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <!-- 添加ToolBar --> <include layout="@layout/toolbar"/> <!--添加DrawerLayout--> <android.support.v4.widget.DrawerLayout android:id="@+id/drawerlayout" android:layout_width="match_parent" android:layout_height="match_parent"> <!-- 一般第一個位置的代表 主內容 --> <FrameLayout android:id="@+id/main" android:layout_width="match_parent" android:layout_height="match_parent"> </FrameLayout> <!-- 左側菜單(設置layout_gravity 為left) --> <RelativeLayout android:id="@+id/left" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_gravity="left"> </RelativeLayout> <!-- 右側菜單(設置layout_gravity 為right) --> <RelativeLayout android:id="@+id/right" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_gravity="right"> </RelativeLayout> </android.support.v4.widget.DrawerLayout> </LinearLayout>
DrawerLayout一般分為三個部分 主內容,左側菜單,右側菜單
每個部分的內容自行設置,我是采用Fragment方式設置內容,這裏僅供參考
//新建Fragment,具體內容我就不詳細說了 fragmentMain = new FragmentMain(); //添加內容,比較簡單的 getSupportFragmentManager().beginTransaction().replace(R.id.main, fragmentMain).commit();
到此為止已經初步實現了側滑菜單的功能,來看一下效果
DrawerLayout初效果.gif
然後,就是給側滑按鈕添加效果了
1. 在此之前要進行view的初始化
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawerlayout); toolbar = (Toolbar) this.findViewById(R.id.toolbar); setSupportActionBar(toolbar);
2. 通過ActionBarDrawerToggle來完成效果,操作很簡單
mToggle = new ActionBarDrawerToggle(HomeActivity.this, mDrawerLayout, toolbar, R.string.open, R.string.close); mToggle.syncState(); mDrawerLayout.addDrawerListener(mToggle);
這樣就結束了
最後就是解決DrawerLayout不能全屏滑動的問題
private void setDrawerLeftEdgeSize (Activity activity, DrawerLayout drawerLayout, float displayWidthPercentage) { if (activity == null || drawerLayout == null) return; try { // 找到 ViewDragHelper 並設置 Accessible 為true Field leftDraggerField = drawerLayout.getClass().getDeclaredField("mLeftDragger");//Right leftDraggerField.setAccessible(true); ViewDragHelper leftDragger = (ViewDragHelper) leftDraggerField.get(drawerLayout); // 找到 edgeSizeField 並設置 Accessible 為true Field edgeSizeField = leftDragger.getClass().getDeclaredField("mEdgeSize"); edgeSizeField.setAccessible(true); int edgeSize = edgeSizeField.getInt(leftDragger); // 設置新的邊緣大小 Point displaySize = new Point(); activity.getWindowManager().getDefaultDisplay().getSize(displaySize); edgeSizeField.setInt(leftDragger, Math.max(edgeSize, (int) (displaySize.x * displayWidthPercentage))); } catch (NoSuchFieldException e) { } catch (IllegalArgumentException e) { } catch (IllegalAccessException e) { } }
直接調用這個方法即可!最後一個參數 傳 1,即可實現全屏滑動。如果你想讓右側菜單也是全屏,只要將對應的 "mLeftDragger" 改為 "mRightDragger"。
Android 高大上的側滑菜單DrawerLayout,解決了不能全屏滑動的問題