SlidingMenu侧滑菜单的布局,点击头像滑出菜单

实现效果:点击头像或者从屏幕左边滑出侧滑菜单

导入依赖,

[html]  view plain  copy

1. compile 'com.facebook.fresco:fresco:0.14.1'  
2. compile 'com.jakewharton:butterknife:8.8.1'  
3. annotationProcessor 'com.jakewharton:butterknife-compiler:8.8.1'  

添加权限,(头像是请求网络的)

[html]  view plain  copy

1. <uses-permission android:name="android.permission.INTERNET"/>  

新建MyApplication,在清单文件中声明

[html]  view plain  copy

1. public class MyApplication extends Application {  
2.     @Override  
3.     public void onCreate() {  
4.         super.onCreate();  
5.         //初始化Fresco  
6.   
7.         Fresco.initialize(this);  
8.     }  
9. }  

[html]  view plain  copy

1. <application  
2.         android:name=".applica.MyApplication"  

用到的图片

sliding_touxiang     female            edit           messages       my_takecare     my_collection

                                       

search_friend       sliding_xiangyoua   directory         settings            night_colse

先放上侧滑菜单的布局 sliding_left.xml

[html]  view plain  copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     xmlns:fresco="http://schemas.android.com/apk/res-auto"  
4.     android:orientation="vertical"  
5.     android:background="#fff"  
6.     android:layout_width="match_parent"  
7.     android:layout_height="match_parent">  
8.   
9.     <LinearLayout  
10.         android:orientation="vertical"  
11.         android:background="#d2a0df"  
12.         android:layout_width="match_parent"  
13.         android:layout_height="0dp"  
14.         android:layout_weight="3">  
15.     <LinearLayout  
16.         android:layout_marginTop="60dp"  
17.         android:padding="20dp"  
18.         android:orientation="horizontal"  
19.         android:layout_width="match_parent"  
20.         android:layout_height="wrap_content">  
21.     <com.facebook.drawee.view.SimpleDraweeView  
22.         android:layout_gravity="center_vertical"  
23.         fresco:roundAsCircle="true"  
24.         android:id="@+id/my_image_view"  
25.         fresco:placeholderImage="@drawable/sliding_touxiang"  
26.         android:layout_width="80dp"  
27.         android:layout_height="80dp" />  
28.   
29.         <TextView  
30.             android:layout_marginLeft="20dp"  
31.             android:textSize="23sp"  
32.             android:layout_gravity="center_vertical"  
33.             android:text="椰汁奶茶"  
34.             android:layout_width="wrap_content"  
35.             android:layout_height="wrap_content" />  
36.   
37.         <ImageView  
38.             android:layout_marginLeft="70dp"  
39.             android:layout_gravity="center_vertical"  
40.             android:src="@drawable/female"  
41.             android:layout_width="30dp"  
42.             android:layout_height="30dp" />  
43.     </LinearLayout>  
44.         <TextView  
45.             android:layout_marginBottom="10dp"  
46.             android:textSize="19sp"  
47.             android:layout_marginLeft="20dp"  
48.             android:text="编辑个性签名"  
49.             android:layout_width="wrap_content"  
50.             android:layout_height="wrap_content" />  
51.     </LinearLayout>  
52.   
53.     <LinearLayout  
54.         android:layout_weight="5"  
55.         android:layout_width="match_parent"  
56.         android:layout_height="0dp"  
57.         android:background="#ffffff"  
58.         android:orientation="vertical"  
59.         android:paddingLeft="35dp">  
60.   
61.         <TextView  
62.             android:id="@+id/takecare"  
63.             android:layout_width="wrap_content"  
64.             android:layout_height="wrap_content"  
65.             android:layout_marginTop="30dp"  
66.             android:drawableLeft="@drawable/my_takecare"  
67.             android:drawableRight="@drawable/sliding_xiangyoua"  
68.             android:text="    我的关注                              "  
69.             android:textColor="#383838"  
70.             android:textSize="18sp" />  
71.   
72.         <TextView  
73.             android:id="@+id/collection"  
74.             android:layout_width="wrap_content"  
75.             android:layout_height="wrap_content"  
76.             android:layout_marginTop="30dp"  
77.             android:drawableLeft="@drawable/my_collection"  
78.             android:text="    我的收藏                              "  
79.             android:textColor="#383838"  
80.             android:textSize="18sp" />  
81.   
82.         <TextView  
83.             android:id="@+id/friend"  
84.             android:layout_width="wrap_content"  
85.             android:layout_height="wrap_content"  
86.             android:layout_marginTop="30dp"  
87.             android:drawableLeft="@drawable/search_friend"  
88.             android:text="    搜索好友                              "  
89.             android:textColor="#383838"  
90.             android:textSize="18sp" />  
91.   
92.         <TextView  
93.             android:id="@+id/messages"  
94.             android:layout_width="wrap_content"  
95.             android:layout_height="wrap_content"  
96.             android:layout_marginTop="30dp"  
97.             android:drawableLeft="@drawable/messages"  
98.             android:text="    消息通知                              "  
99.             android:textColor="#383838"  
100.             android:textSize="18sp" />  
101.     </LinearLayout>  
102.   
103.     <LinearLayout  
104.         android:gravity="center_vertical"  
105.         android:paddingLeft="30dp"  
106.         android:orientation="horizontal"  
107.         android:layout_width="match_parent"  
108.         android:layout_height="0dp"  
109.         android:layout_weight="1">  
110.   
111.         <TextView  
112.             android:id="@+id/night"  
113.             android:layout_width="wrap_content"  
114.             android:layout_height="wrap_content"  
115.             android:drawableLeft="@drawable/night_colse"  
116.             android:text="  夜间模式"  
117.             android:textColor="#383838"  
118.             android:textSize="18sp" />  
119.     </LinearLayout>  
120.     <RelativeLayout  
121.         android:layout_marginBottom="20dp"  
122.         android:layout_marginRight="50dp"  
123.         android:layout_marginLeft="50dp"  
124.         android:layout_width="match_parent"  
125.         android:layout_height="0dp"  
126.         android:layout_weight="1">  
127.   
128.         <TextView  
129.             android:layout_centerVertical="true"  
130.             android:id="@+id/my_directory"  
131.             android:layout_width="wrap_content"  
132.             android:layout_height="wrap_content"  
133.             android:drawableTop="@drawable/directory"  
134.             android:text="我的作品"  
135.             android:textColor="#383838"  
136.             android:textSize="18sp" />  
137.         <TextView  
138.             android:layout_centerVertical="true"  
139.             android:layout_alignParentRight="true"  
140.             android:gravity="center_horizontal"  
141.             android:id="@+id/settings"  
142.             android:layout_width="wrap_content"  
143.             android:layout_height="wrap_content"  
144.             android:drawableTop="@drawable/settings"  
145.             android:text="设置"  
146.             android:textColor="#383838"  
147.             android:textSize="18sp" />  
148.     </RelativeLayout>  
149. </LinearLayout>  

主页面的布局(上面的标题有一个头像,点击出现侧滑菜单)activity_main.xml

[html]  view plain  copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     xmlns:app="http://schemas.android.com/apk/res-auto"  
4.     xmlns:fresco="http://schemas.android.com/apk/res-auto"  
5.     xmlns:tools="http://schemas.android.com/tools"  
6.     android:layout_width="match_parent"  
7.     android:layout_height="match_parent"  
8.     tools:context="com.example.menglucywhh.myquarter.view.activity.MainActivity">  
9.   
10.   
11.     <RelativeLayout  
12.         android:background="#03A9F4"  
13.         android:padding="15dp"  
14.         android:layout_width="match_parent"  
15.         android:layout_height="wrap_content">  
16.   
17.         <com.facebook.drawee.view.SimpleDraweeView  
18.             android:layout_centerVertical="true"  
19.             android:layout_gravity="center_vertical"  
20.             fresco:roundAsCircle="true"  
21.             android:id="@+id/touxiang"  
22.             fresco:placeholderImage="@drawable/sliding_touxiang"  
23.             android:layout_width="55dp"  
24.             android:layout_height="55dp" />  
25.   
26.         <TextView  
27.             android:textStyle="bold"  
28.             android:textSize="23sp"  
29.             android:textColor="#fff"  
30.             android:layout_centerInParent="true"  
31.             android:text="推荐"  
32.             android:layout_width="wrap_content"  
33.             android:layout_height="wrap_content" />  
34.   
35.         <ImageView  
36.             android:id="@+id/edit"  
37.             android:layout_centerVertical="true"  
38.             android:layout_alignParentRight="true"  
39.             android:src="@drawable/edit"  
40.             android:layout_width="35dp"  
41.             android:layout_height="35dp" />  
42.     </RelativeLayout>  
43.   
44. </LinearLayout>  

MainActivity.java,前一篇博客已经讲述了怎么导入SlidingMenuMaster的Library,如果有不明白的 点击访问博客

[html]  view plain  copy

1. public class MainActivity extends AppCompatActivity {  
2.   
3.     @BindView(R.id.takecare)  
4.     TextView takecare;  
5.     @BindView(R.id.collection)  
6.     TextView collection;  
7.     @BindView(R.id.friend)  
8.     TextView friend;  
9.     @BindView(R.id.messages)  
10.     TextView messages;  
11.     @BindView(R.id.my_image_view)  
12.     SimpleDraweeView myImageView;  
13.     @BindView(R.id.night)  
14.     TextView night;  
15.     @BindView(R.id.my_directory)  
16.     TextView myDirectory;  
17.     @BindView(R.id.settings)  
18.     TextView settings;  
19.     @BindView(R.id.touxiang)  
20.     SimpleDraweeView touxiang;  
21.     @BindView(R.id.edit)  
22.     ImageView edit;  
23.     private SlidingMenu menu;  
24.   
25.   
26.     @Override  
27.     protected void onCreate(Bundle savedInstanceState) {  
28.         super.onCreate(savedInstanceState);  
29.         setContentView(R.layout.activity_main);  
30.   
31.         //new出SlidingMenu对象  
32.         menu = new SlidingMenu(this);  
33.         //设置侧滑的方向.左侧  
34.         menu.setMode(SlidingMenu.LEFT);  
35.         // 设置触摸屏幕的模式 (触摸最左边缘滑出)
36.         menu.setTouchModeAbove(SlidingMenu.TOUCHMODE_MARGIN);  
37.   
38.         // 设置滑动完剩余的宽度  
39.         menu.setBehindOffset(210);  
40.         // 设置渐入渐出效果的值  
41.         menu.setFadeDegree(0.35f);  
42.         //绑定  
43.         menu.attachToActivity(this, SlidingMenu.SLIDING_WINDOW);  
44.         //为侧滑菜单设置布局  
45.         menu.setMenu(R.layout.sliding_left);  
46.   
47.         ButterKnife.bind(this);  
48.         //设置侧滑页面的头像展示  
49.         Uri uri = Uri.parse("https://imgsa.baidu.com/forum/pic/item/3bc79f3df8dcd1000ac6c4fa798b4710b8122f96.jpg");  
50.         SimpleDraweeView imageTouXiang = (SimpleDraweeView) findViewById(R.id.my_image_view);  
51.         imageTouXiang.setImageURI(uri);  
52.   
53.   
54.         //侧滑页面底部我的作品图标  
55.         Drawable drawable_directory = getResources().getDrawable(R.drawable.directory);  
56.         drawable_directory.setBounds(0, 0, 70, 70);//40,40为宽高  
57.         myDirectory.setCompoundDrawables(null, drawable_directory, null, null);  
58.         //侧滑页面底部设置的图标  
59.         Drawable drawable_settings = getResources().getDrawable(R.drawable.settings);  
60.         drawable_settings.setBounds(0, 0, 70, 70);//40,40为宽高  
61.         settings.setCompoundDrawables(null, drawable_settings, null, null);  
62.         //设置夜间模式左面的月亮  
63.         Drawable drawable_night_colse = getResources().getDrawable(R.drawable.night_colse);  
64.         drawable_night_colse.setBounds(0, 0, 35, 35);//40,40为宽高  
65.         night.setCompoundDrawables(drawable_night_colse, null, null, null);  
66.         //设置文字右侧的图片  
67.         Drawable drawable_sliding_xiangyoua = getResources().getDrawable(R.drawable.sliding_xiangyoua);  
68.         drawable_sliding_xiangyoua.setBounds(0, 0, 33, 33);//40,40为宽高  
69.         //设置textview的drawableleft大小  
70.         Drawable drawable_my_takecare = getResources().getDrawable(R.drawable.my_takecare);  
71.         drawable_my_takecare.setBounds(0, 0, 40, 40);  
72.         takecare.setCompoundDrawables(drawable_my_takecare, null, drawable_sliding_xiangyoua, null);  
73.         Drawable drawable_my_collection = getResources().getDrawable(R.drawable.my_collection);  
74.         drawable_my_collection.setBounds(0, 0, 40, 40);  
75.         collection.setCompoundDrawables(drawable_my_collection, null, drawable_sliding_xiangyoua, null);  
76.         Drawable drawable_search_friend = getResources().getDrawable(R.drawable.search_friend);  
77.         drawable_search_friend.setBounds(0, 0, 40, 40);  
78.         friend.setCompoundDrawables(drawable_search_friend, null, drawable_sliding_xiangyoua, null);  
79.         Drawable drawable_messages = getResources().getDrawable(R.drawable.messages);  
80.         drawable_messages.setBounds(0, 0, 40, 40);  
81.         messages.setCompoundDrawables(drawable_messages, null, drawable_sliding_xiangyoua, null);  
82.           
83.     }  
84.   
85.     /**  
86.      * 点击事件  
87.      */  
88.     @OnClick({R.id.touxiang, R.id.edit})  
89.     public void onViewClicked(View view) {  
90.         switch (view.getId()) {  
91.             case R.id.touxiang:  
92.                 menu.showMenu();  
93.                 break;  
94.             case R.id.edit:  
95.                 break;  
96.         }  
97.     }  
98.   
99.   
100.   
101. }  

以上的代码既可以从屏幕滑出侧边菜单,也可以点击头像滑出侧边菜单,

如果想设置只点击头像才滑出侧滑菜单,而不可以从屏幕滑出,就只需要改一个屏幕滑动的模式

首先进入页面设置成 屏幕不可滑动

[html]  view plain  copy

1. // 设置触摸屏幕的模式  
2.         menu.setTouchModeAbove(SlidingMenu.TOUCHMODE_NONE);  

在头像的点击事件里面,先改成 屏幕可以滑动,展示完侧面菜单以后,再设置成屏幕不可滑动

[html]  view plain  copy

1. /**  
2.  * 点击事件  
3.  */  
4. @OnClick({R.id.touxiang, R.id.edit})  
5. public void onViewClicked(View view) {  
6.     switch (view.getId()) {  
7.         case R.id.touxiang:  
8.             //为侧滑菜单设置布局  
9.             menu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);//全屏滑出  
10.             menu.showMenu();  
11.             menu.setTouchModeAbove(SlidingMenu.TOUCHMODE_NONE);//不可以滑出,只可以点击  
12.             break;  
13.             }  
14. }