实现效果:点击头像或者从屏幕左边滑出侧滑菜单
导入依赖,
compile 'com.facebook.fresco:fresco:0.14.1'
compile 'com.jakewharton:butterknife:8.8.1'
annotationProcessor 'com.jakewharton:butterknife-compiler:8.8.1'
添加权限,(头像是请求网络的)
<uses-permission android:name="android.permission.INTERNET"/>
新建MyApplication,在清单文件中声明
public class MyApplication extends Application {
@Override
public void onCreate() {
super.onCreate();
//初始化Fresco
Fresco.initialize(this);
}
}
<application
android:name=".applica.MyApplication"
用到的图片
sliding_touxiang female edit messages my_takecare my_collection
search_friend sliding_xiangyoua directory settings night_colse
先放上侧滑菜单的布局 sliding_left.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:fresco="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:background="#fff"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="vertical"
android:background="#d2a0df"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="3">
<LinearLayout
android:layout_marginTop="60dp"
android:padding="20dp"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.facebook.drawee.view.SimpleDraweeView
android:layout_gravity="center_vertical"
fresco:roundAsCircle="true"
android:id="@+id/my_image_view"
fresco:placeholderImage="@drawable/sliding_touxiang"
android:layout_width="80dp"
android:layout_height="80dp" />
<TextView
android:layout_marginLeft="20dp"
android:textSize="23sp"
android:layout_gravity="center_vertical"
android:text="椰汁奶茶"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<ImageView
android:layout_marginLeft="70dp"
android:layout_gravity="center_vertical"
android:src="@drawable/female"
android:layout_width="30dp"
android:layout_height="30dp" />
</LinearLayout>
<TextView
android:layout_marginBottom="10dp"
android:textSize="19sp"
android:layout_marginLeft="20dp"
android:text="编辑个性签名"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:layout_weight="5"
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#ffffff"
android:orientation="vertical"
android:paddingLeft="35dp">
<TextView
android:id="@+id/takecare"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:drawableLeft="@drawable/my_takecare"
android:drawableRight="@drawable/sliding_xiangyoua"
android:text=" 我的关注 "
android:textColor="#383838"
android:textSize="18sp" />
<TextView
android:id="@+id/collection"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:drawableLeft="@drawable/my_collection"
android:text=" 我的收藏 "
android:textColor="#383838"
android:textSize="18sp" />
<TextView
android:id="@+id/friend"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:drawableLeft="@drawable/search_friend"
android:text=" 搜索好友 "
android:textColor="#383838"
android:textSize="18sp" />
<TextView
android:id="@+id/messages"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:drawableLeft="@drawable/messages"
android:text=" 消息通知 "
android:textColor="#383838"
android:textSize="18sp" />
</LinearLayout>
<LinearLayout
android:gravity="center_vertical"
android:paddingLeft="30dp"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<TextView
android:id="@+id/night"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableLeft="@drawable/night_colse"
android:text=" 夜间模式"
android:textColor="#383838"
android:textSize="18sp" />
</LinearLayout>
<RelativeLayout
android:layout_marginBottom="20dp"
android:layout_marginRight="50dp"
android:layout_marginLeft="50dp"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<TextView
android:layout_centerVertical="true"
android:id="@+id/my_directory"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableTop="@drawable/directory"
android:text="我的作品"
android:textColor="#383838"
android:textSize="18sp" />
<TextView
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:gravity="center_horizontal"
android:id="@+id/settings"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableTop="@drawable/settings"
android:text="设置"
android:textColor="#383838"
android:textSize="18sp" />
</RelativeLayout>
</LinearLayout>
主页面的布局(上面的标题有一个头像,点击出现侧滑菜单)activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:fresco="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.menglucywhh.myquarter.view.activity.MainActivity">
<RelativeLayout
android:background="#03A9F4"
android:padding="15dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.facebook.drawee.view.SimpleDraweeView
android:layout_centerVertical="true"
android:layout_gravity="center_vertical"
fresco:roundAsCircle="true"
android:id="@+id/touxiang"
fresco:placeholderImage="@drawable/sliding_touxiang"
android:layout_width="55dp"
android:layout_height="55dp" />
<TextView
android:textStyle="bold"
android:textSize="23sp"
android:textColor="#fff"
android:layout_centerInParent="true"
android:text="推荐"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<ImageView
android:id="@+id/edit"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:src="@drawable/edit"
android:layout_width="35dp"
android:layout_height="35dp" />
</RelativeLayout>
</LinearLayout>
MainActivity.java,前一篇博客已经讲述了怎么导入SlidingMenuMaster的Library,如果有不明白的
点击访问博客
public class MainActivity extends AppCompatActivity {
@BindView(R.id.takecare)
TextView takecare;
@BindView(R.id.collection)
TextView collection;
@BindView(R.id.friend)
TextView friend;
@BindView(R.id.messages)
TextView messages;
@BindView(R.id.my_image_view)
SimpleDraweeView myImageView;
@BindView(R.id.night)
TextView night;
@BindView(R.id.my_directory)
TextView myDirectory;
@BindView(R.id.settings)
TextView settings;
@BindView(R.id.touxiang)
SimpleDraweeView touxiang;
@BindView(R.id.edit)
ImageView edit;
private SlidingMenu menu;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//new出SlidingMenu对象
menu = new SlidingMenu(this);
//设置侧滑的方向.左侧
menu.setMode(SlidingMenu.LEFT);
// 设置触摸屏幕的模式
menu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);
// 设置滑动完剩余的宽度
menu.setBehindOffset(210);
// 设置渐入渐出效果的值
menu.setFadeDegree(0.35f);
//绑定
menu.attachToActivity(this, SlidingMenu.SLIDING_WINDOW);
//为侧滑菜单设置布局
menu.setMenu(R.layout.sliding_left);
ButterKnife.bind(this);
//设置侧滑页面的头像展示
Uri uri = Uri.parse("https://imgsa.baidu.com/forum/pic/item/3bc79f3df8dcd1000ac6c4fa798b4710b8122f96.jpg");
SimpleDraweeView imageTouXiang = (SimpleDraweeView) findViewById(R.id.my_image_view);
imageTouXiang.setImageURI(uri);
//侧滑页面底部我的作品图标
Drawable drawable_directory = getResources().getDrawable(R.drawable.directory);
drawable_directory.setBounds(0, 0, 70, 70);//40,40为宽高
myDirectory.setCompoundDrawables(null, drawable_directory, null, null);
//侧滑页面底部设置的图标
Drawable drawable_settings = getResources().getDrawable(R.drawable.settings);
drawable_settings.setBounds(0, 0, 70, 70);//40,40为宽高
settings.setCompoundDrawables(null, drawable_settings, null, null);
//设置夜间模式左面的月亮
Drawable drawable_night_colse = getResources().getDrawable(R.drawable.night_colse);
drawable_night_colse.setBounds(0, 0, 35, 35);//40,40为宽高
night.setCompoundDrawables(drawable_night_colse, null, null, null);
//设置文字右侧的图片
Drawable drawable_sliding_xiangyoua = getResources().getDrawable(R.drawable.sliding_xiangyoua);
drawable_sliding_xiangyoua.setBounds(0, 0, 33, 33);//40,40为宽高
//设置textview的drawableleft大小
Drawable drawable_my_takecare = getResources().getDrawable(R.drawable.my_takecare);
drawable_my_takecare.setBounds(0, 0, 40, 40);
takecare.setCompoundDrawables(drawable_my_takecare, null, drawable_sliding_xiangyoua, null);
Drawable drawable_my_collection = getResources().getDrawable(R.drawable.my_collection);
drawable_my_collection.setBounds(0, 0, 40, 40);
collection.setCompoundDrawables(drawable_my_collection, null, drawable_sliding_xiangyoua, null);
Drawable drawable_search_friend = getResources().getDrawable(R.drawable.search_friend);
drawable_search_friend.setBounds(0, 0, 40, 40);
friend.setCompoundDrawables(drawable_search_friend, null, drawable_sliding_xiangyoua, null);
Drawable drawable_messages = getResources().getDrawable(R.drawable.messages);
drawable_messages.setBounds(0, 0, 40, 40);
messages.setCompoundDrawables(drawable_messages, null, drawable_sliding_xiangyoua, null);
}
/**
* 点击事件
*/
@OnClick({R.id.touxiang, R.id.edit})
public void onViewClicked(View view) {
switch (view.getId()) {
case R.id.touxiang:
menu.showMenu();
break;
case R.id.edit:
break;
}
}
}
以上的代码既可以从屏幕滑出侧边菜单,也可以点击头像滑出侧边菜单,
如果想设置只点击头像才滑出侧滑菜单,而不可以从屏幕滑出,就只需要改一个屏幕滑动的模式
首先进入页面设置成 屏幕不可滑动
// 设置触摸屏幕的模式
menu.setTouchModeAbove(SlidingMenu.TOUCHMODE_NONE);
在头像的点击事件里面,先改成 屏幕可以滑动,展示完侧面菜单以后,再设置成屏幕不可滑动
/**
* 点击事件
*/
@OnClick({R.id.touxiang, R.id.edit})
public void onViewClicked(View view) {
switch (view.getId()) {
case R.id.touxiang:
//为侧滑菜单设置布局
menu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);//全屏滑出
menu.showMenu();
menu.setTouchModeAbove(SlidingMenu.TOUCHMODE_NONE);//不可以滑出,只可以点击
break;
}
}