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

最新推荐文章于 2018-08-28 14:37:29 发布

meng_c_

最新推荐文章于 2018-08-28 14:37:29 发布

阅读量1.1k

点赞数 1

本文链接：https://blog.csdn.net/thw_m/article/details/79110624

版权

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

导入依赖,

    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;
                }
    }

meng_c_

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
SlidingMenu侧滑菜单的布局,点击头像滑出菜单

实现效果:点击头像或者从屏幕左边滑出侧滑菜单导入依赖, compile 'com.facebook.fresco:fresco:0.14.1' compile 'com.jakewharton:butterknife:8.8.1' annotationProcessor 'com.jakewharton:butterknife-compiler:8.8.1'添
复制链接

扫一扫