帶你實現開發者頭條（二） 實現左滑菜單

　　今天開始模仿開發者頭條的側滑菜單，是本系列第二篇文章，相信大家已經看到很多app使用這種側滑。今天我來教大家用Android自帶DrawerLayout控件實現。

　　DrawerLayout是SupportLibrary包中實現了側滑菜單效果的控件，可以說DrawerLayout是因為第三方控件如MenuDrawer等的出現之後，google借鑒而出現的產物。DrawerLayout分為側邊菜單和主內容區兩部分，側邊菜單可以根據手勢展開與隱藏（DrawerLayout自身特性），主內容區的內容可以隨著菜單的點擊而變化（這需要使用者自己實現）。

　　一、先上效果圖：

　　二、代碼實現

　　1.drawerLayout其實是一個布局控件，跟LinearLayout等控件是一種東西，但是drawerLayout帶有滑動的功能。只要按照drawerLayout的規定布局方式寫完布局，就能有側滑的效果。我這邊把側滑菜單的內容放一個布局文件了。

1. <android.support.v4.widget.DrawerLayout   
2.     xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:id="@+id/drawer_layout"  
4.     android:layout_width="match_parent"  
5.     android:layout_height="match_parent" >  
6.   
7.     <RelativeLayout  
8.         android:layout_width="match_parent"  
9.         android:layout_height="match_parent"  
10.         android:clipToPadding="true"  
11.         android:fitsSystemWindows="true" >  
12.   
13.         <include  
14.             android:id="@+id/rl_title"  
15.             layout="@layout/layout_main_title" />  
16.   
17.         <!-- The main content view -->  
18.   
19.         <FrameLayout  
20.             android:id="@+id/content_frame"  
21.             android:layout_width="match_parent"  
22.             android:layout_height="match_parent"  
23.             android:layout_below="@+id/rl_title"  
24.             android:background="@color/white_normal" >  
25.         </FrameLayout>  
26.     </RelativeLayout>  
27.   
28.     <!-- The navigation view -->  
29.     <FrameLayout  
30.         android:id="@+id/left_drawer"  
31.         android:layout_width="280dp"  
32.         android:layout_height="match_parent"  
33.         android:layout_gravity="start" >  
34.         <!--   左側菜單 -->  
35.         <include layout="@layout/layout_main_left" />  
36.     </FrameLayout>  
37. </android.support.v4.widget.DrawerLayout>  

　　注意事項

　　主內容區的布局代碼要放在側滑菜單布局的前面,這可以幫助DrawerLayout判斷誰是側滑菜單，誰是主內容區

　　側滑菜單的部分的布局（這裡是ListView）可以設置layout_gravity屬性，他表示側滑菜單是在左邊還是右邊。

　　2.MainActivity.java 繼承FragmentActivity

　　1).設置內容Fragment，設置狀態欄

　　2).處理左側點擊事件,在點擊事件中設置選中背景，關閉左邊側滑菜單。

1. public class MainActivity extends FragmentActivity{  
2.     private DrawerLayout mDrawerLayout;  
3.     private RelativeLayout rlHome, rlGift, rlShare;  
4.     private int currentSelectItem = R.id.rl_home;// 默認首頁  
5.     private ContentFragment contentFragment;  
6.   
7.     @Override  
8.     protected void onCreate(Bundle savedInstanceState) {  
9.         super.onCreate(savedInstanceState);  
10.         setContentView(R.layout.activity_main);  
11.   
12.         mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);  
13.   
14.         findViewById(R.id.iv_menu).setOnClickListener(clickListener);  
15.   
16.         initLeftMenu();//初始化左邊菜單  
17.   
18.         contentFragment=new ContentFragment();  
19.         getSupportFragmentManager().beginTransaction().add(R.id.content_frame,contentFragment).commit();    
20.   
21.         setWindowStatus();  
22.     }  
23.   
24.     private void initLeftMenu() {  
25.         rlHome = (RelativeLayout) findViewById(R.id.rl_home);  
26.         rlGift = (RelativeLayout) findViewById(R.id.rl_gift);  
27.         rlShare = (RelativeLayout) findViewById(R.id.rl_share);  
28.   
29.         rlHome.setOnClickListener(onLeftMenuClickListener);  
30.         rlGift.setOnClickListener(onLeftMenuClickListener);  
31.         rlShare.setOnClickListener(onLeftMenuClickListener);  
32.   
33.         rlHome.setSelected(true);  
34.     }  
35.   
36.     private OnClickListener onLeftMenuClickListener = new OnClickListener() {  
37.         @Override  
38.         public void onClick(View v) {  
39.             if (currentSelectItem != v.getId()) {//防止重復點擊  
40.                 currentSelectItem=v.getId();  
41.                 noItemSelect();  
42.   
43.                 switch (v.getId()) {  
44.                 case R.id.rl_home:  
45.                     rlHome.setSelected(true);  
46.                     contentFragment.setContent("這是首頁");  
47.                     break;  
48.                 case R.id.rl_gift:  
49.                     rlGift.setSelected(true);  
50.                     contentFragment.setContent("這是禮物兌換");  
51.                     break;  
52.                 case R.id.rl_share:  
53.                     rlShare.setSelected(true);  
54.                     contentFragment.setContent("這是我的分享");  
55.                     break;  
56.                 }  
57.   
58.                 mDrawerLayout.closeDrawer(Gravity.LEFT);  
59.             }  
60.         }  
61.     };  
62.   
63.     private void noItemSelect(){  
64.         rlHome.setSelected(false);  
65.         rlGift.setSelected(false);  
66.         rlShare.setSelected(false);  
67.     }  
68.   
69.     private OnClickListener clickListener = new OnClickListener() {  
70.         @Override  
71.         public void onClick(View v) {  
72.             switch (v.getId()) {  
73.             case R.id.iv_menu:// 打開左邊抽屜  
74.                 mDrawerLayout.openDrawer(Gravity.LEFT);  
75.                 break;  
76.             }  
77.         }  
78.     };  
79.   
80.     // 設置狀態欄  
81.     private void setWindowStatus() {  
82.         if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {  
83.             // 透明狀態欄  
84.             getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);  
85.             // 透明導航欄  
86.             getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);  
87.             // 設置狀態欄顏色  
88.             getWindow().setBackgroundDrawableResource(R.color.main_color);  
89.         }  
90.     }  
91. }  

　　3.左側菜單item選中背景的布局文件 selector_left_menu_item.xml。

1. <?xml version="1.0" encoding="utf-8"?>  
2. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
3.     <item android:drawable="@color/menu_left_item_select" android:state_selected="true"/>  
4.     <item android:drawable="@color/white_normal"/>  
5. </selector>  

　　4.ContentFragment 顯示內容的Fragment 這裡我加了一個設置內容的方法，就是用來點擊左側切換顯示用的。

1. public class ContentFragment extends Fragment{  
2.     private TextView tvContent;  
3.   
4.     @Override  
5.     public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState){  
6.         View rootView=LayoutInflater.from(getActivity()).inflate(R.layout.fragment_content, null);  
7.         tvContent=(TextView) rootView.findViewById(R.id.tv_content);  
8.         return rootView;  
9.     }  
10.   
11.     public void setContent(String content){  
12.         tvContent.setText(content);  
13.     }  
14. }  

　　5.drawerLayout與Fragment是什麼關系？

　　我們看到很多使用drawerLayout的代碼中都同時使用了Fragment，這會造成誤解，以為使用drawerLayout必須用到Fragment，其實這是錯誤的，使用Fragment是因為在側滑菜單被點擊的時候，主內容區如果內容比較復雜，用Fragment去填充會更容易，如果你的主內容區只是一個簡單的字符串，只想在不同菜單點擊的時候更新一下字符串的內容，我覺得沒必要用Fragment。我這邊用Fragment所做的就是更新字符串內容這麼簡單。

　　三、源碼下載

　　點擊下載源碼

　　四、相關文章:

　　帶你實現開發者頭條(一) 啟動頁實現