实现效果:点击头像或者从屏幕左边滑出侧滑菜单
导入依赖,
- 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"/>
- 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>
- <?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>
- 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;
- }
- }