侧滑菜单_android侧滑菜单 - CSDN
精华内容
参与话题
  • Android-侧滑菜单(三)

    千次阅读 2018-09-28 14:23:33
    新整理的仿QQ侧滑菜单实现的例子,使用android.support.v4.widget.DrawerLayout和android.support.design.widget.NavigationView实现的,下面先上两张效果图: 效果图也看到了,那么咱们废话不多说,直接上代码:...

    新整理的仿QQ侧滑菜单实现的例子,使用android.support.v4.widget.DrawerLayout和android.support.design.widget.NavigationView实现的,下面先上两张效果图:

    效果图也看到了,那么咱们废话不多说,直接上代码:

    注意:要在app的build.gradle里添加下面这句,不然可能会报错的

    compile 'com.android.support:design:25.2.0'

    首先是布局文件activity_slidetest.xml

    <?xml version="1.0" encoding="utf-8"?>
    <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/activity_na"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
    
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/colorPrimary"
                android:gravity="center_vertical"
                android:orientation="horizontal">
    
                <ImageView
                    android:id="@+id/main_menu"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="20dp"
                    android:src="@mipmap/ic_launcher_round" />
    
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="16dp"
                    android:layout_weight="1"
                    android:text="侧滑菜单"
                    android:textSize="20sp" />
    
                <ImageView
                    android:id="@+id/search"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="20dp"
                    android:src="@mipmap/ic_launcher" />
            </LinearLayout>
    
            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:text="主页"
                android:textSize="22sp" />
        </LinearLayout>
    
        <android.support.design.widget.NavigationView xmlns:app="http://schemas.android.com/apk/res-auto"
            android:id="@+id/nav"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="left"
            android:fitsSystemWindows="true"
            app:headerLayout="@layout/head"
            app:menu="@menu/new_menu">
    
        </android.support.design.widget.NavigationView>
    </android.support.v4.widget.DrawerLayout>

    因为侧滑菜单是隐藏在屏幕左侧的,所以在NavigationView里需要设置android:layout_gravity="left",NavigationView里还使用到了app:headerLayout="@layout/head"和app:menu="@menu/new_menu",那么下面我们就来创建这两个布局文件

    先来创建head.xml文件,直接在layout文件夹下创建即可,我这里只是简单的一个例子,为了方便里面随便放了两个控件,实际开发中药根据实际情况来布局:

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="vertical">
    
        <ImageView
            android:id="@+id/person"
            android:layout_width="72dp"
            android:layout_height="72dp"
            android:layout_marginTop="42dp"
            android:src="@mipmap/ic_launcher_round" />
    
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="24dp"
            android:text="时代新人"
            android:textSize="20sp" />
    
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="18dp"
            android:layout_marginTop="12dp"
            android:text="跟上时代的步伐,勇往直前"
            android:textSize="16sp" />
    </LinearLayout>

    再创建new_menu.xml文件,这个文件需要先在res下新建一个文件夹menu,然后再menu文件夹下创建new_menu.xml文件,这个xml文件名自己随意起名就可以:

    <?xml version="1.0" encoding="utf-8"?>
    <menu xmlns:android="http://schemas.android.com/apk/res/android">
        <group
            android:checkableBehavior="single">
            <item
                android:id="@+id/favorite"
                android:icon="@mipmap/ic_launcher"
                android:title="    会员"/>
            <item
                android:id="@+id/wallet"
                android:title="    钱包"
                android:icon="@mipmap/ic_launcher"/>
            <item
                android:id="@+id/photo"
                android:title="    相册"
                android:icon="@mipmap/ic_launcher"/>
            <item
                android:id="@+id/dress"
                android:title="    装扮"
                android:icon="@mipmap/ic_launcher"/>
            <item
                android:id="@+id/file"
                android:title="    文件"
                android:icon="@mipmap/ic_launcher" />
    
        </group>
    </menu>

    在这里我们看到有个group,有group的话就相当于把下面的item都放在了这个组里面,可以设置选中几项,相当于单选、多选,android:checkableBehavior="single"单选,如果不需要设置多选,可去掉group,直接写item即可,有多少项写多少项。

    最后我们再看下方法实现的类文件SlideTestActivity.java

    package com.junto.leftrightslideactivity.activity;
    
    import android.app.Activity;
    import android.os.Bundle;
    import android.support.annotation.NonNull;
    import android.support.annotation.Nullable;
    import android.support.design.widget.NavigationView;
    import android.support.v4.widget.DrawerLayout;
    import android.view.MenuItem;
    import android.view.View;
    import android.widget.ImageView;
    import android.widget.Toast;
    
    import com.junto.leftrightslideactivity.R;
    
    /**
     * Created by WangJinyong on 2018/9/27.
     */
    
    public class SlideTestActivity extends Activity {
    
        private DrawerLayout drawerLayout;
        private NavigationView navigationView;
        ImageView menu;
    
        @Override
        protected void onCreate(@Nullable Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_slidetest);
            initView();
        }
    
        private void initView(){
            drawerLayout = findViewById(R.id.activity_na);
            navigationView = findViewById(R.id.nav);
            menu = findViewById(R.id.main_menu);
            View headerView = navigationView.getHeaderView(0);//获取头布局
            menu.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    //点击菜单,跳出侧滑菜单
                    if (drawerLayout.isDrawerOpen(navigationView)){
                        drawerLayout.closeDrawer(navigationView);
                    }else{
                        drawerLayout.openDrawer(navigationView);
                    }
                }
            });
    
            navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
                @Override
                public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                    Toast.makeText(SlideTestActivity.this,item.getTitle().toString(),Toast.LENGTH_SHORT).show();
    //                drawerLayout.closeDrawer(navigationView);
                    return true;
                }
            });
        }
    }
    

    上面代码中我注释掉一行drawerLayout.closeDrawer(navigationView),这行的意思是侧滑菜单的item选中关掉侧滑菜单。到这里放QQ侧滑菜单就做好了,里面的细节内容还需要根据实际开发来完善,这种文章虽然已经太普通不过了,但是如果有遇到的朋友想看的还是希望能帮助有需要的朋友,写的不足之处还望大家多多指教。

    demo源码:https://download.csdn.net/download/u013184970/10690420

    上一篇文章:Android-屏幕左右侧滑(二)

    展开全文
  • 先看对比一下我们写的效果和别人的效果: activity的xml布局: <?xml version="1.0" encoding="utf-8"?> <androidx.drawerlayout.widget.DrawerLayout xmlns:android=...

    先看对比一下我们写的效果和别人的效果:

            

     

    activity的xml布局:

    <?xml version="1.0" encoding="utf-8"?>
    <androidx.drawerlayout.widget.DrawerLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tl="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/drawerLayout"
        tools:openDrawer="start"
        >
    
    <RelativeLayout
        android:id="@+id/main_right"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/white"
        android:fitsSystemWindows="true"
        android:orientation="vertical">
    
        <androidx.viewpager.widget.ViewPager
            android:id="@+id/view_pager"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    
        <com.flyco.tablayout.CommonTabLayout
            android:layout_alignParentBottom="true"
            android:id="@+id/tl_commen"
            android:layout_width="match_parent"
            android:layout_height="54dp"
            android:background="#ffffff"
            tl:tl_iconHeight="23dp"
            tl:tl_iconWidth="23dp"
            tl:tl_textSelectColor="@color/colorAccent"
            tl:tl_textUnselectColor="#66000000"
            tl:tl_textsize="13sp"
            app:tl_divider_color="@color/colorAccent"
            tl:tl_underline_height="1dp" />
    
    </RelativeLayout>
        <com.google.android.material.navigation.NavigationView
            android:id="@+id/main_left"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:fitsSystemWindows="true"
            app:headerLayout="@layout/nav_header_main"
            app:menu="@menu/bottom_nav_menu" />
    
    </androidx.drawerlayout.widget.DrawerLayout>

    1.根部局是DrawerLayout布局,必须设置openDrawer属性:

    tools:openDrawer="start"

    这个属性决定你的菜单是左边滑出还是右边

    2.侧滑菜单是NavigationView布局

    app:headerLayout="@layout/nav_header_main" 侧滑菜单的头部

    app:menu="@menu/bottom_nav_menu" 侧滑菜单项

     

    nav_header_main.xml:

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical" android:layout_width="match_parent"
        android:background="@mipmap/head_background"
        android:layout_height="200dp">
    <TextView
        android:id="@+id/name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
         android:layout_marginLeft="50dp"
        android:layout_marginRight="30dp"
        android:textSize="25dp"
        android:text="你的城市"
        android:textColor="@color/white"
        ></TextView>
        <ImageView
            android:layout_toRightOf="@+id/name"
            android:layout_centerVertical="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/ic_launcher"
            ></ImageView>
    </RelativeLayout>

    bottom_nav_menu:

    <?xml version="1.0" encoding="utf-8"?>
    <menu xmlns:android="http://schemas.android.com/apk/res/android">
    
        <item
            android:id="@+id/navigation_home"
            android:icon="@mipmap/msg"
            android:title="我的消息"
            />
        <item
            android:id="@+id/navigation_dashboard"
            android:icon="@mipmap/write"
            android:title="编辑信息" />
        setting
        <item
            android:id="@+id/navigation_notifications"
            android:icon="@mipmap/connext"
            android:title="联系客服" />
        <item
            android:id="@+id/navigation_system"
            android:icon="@mipmap/system"
            android:title="系统消息" />
        <item
            android:id="@+id/navigation_setting"
            android:icon="@mipmap/setting"
            android:title="设置" />
    
    </menu>
    

     准备完上面的部分我们的侧滑菜单基本完成了,运行得到如下效果:

    仔细观察你会发现,我们弹出侧滑菜单的时候,右边的内容是不动的,看起来是侧滑菜单覆盖住了而已。仔细对比文章开始的效果图,你会发现右侧的内容会跟着侧滑菜单向右移动。实现这种效果也不难,在java代码中设置监听就可以实现:

    //drawer滑动回调的方法
    drawer.setDrawerListener(new DrawerLayout.DrawerListener() {  
               @Override  
               public void onDrawerSlide(View drawerView, float slideOffset) {  
                   //获取屏幕的宽高  
                   WindowManager manager = (WindowManager) getSystemService(Context.WINDOW_SERVICE);  
                   Display display = manager.getDefaultDisplay();  
                   //设置右面的布局位置  根据左面菜单的right作为右面布局的left   左面的right+屏幕的宽度(或者right的宽度这里是相等的)为右面布局的right  
                   right.layout(left.getRight(), 0, left.getRight() + display.getWidth(), display.getHeight());  
               }  
               @Override  
               public void onDrawerOpened(View drawerView) {  
                     
               }  
               @Override  
               public void onDrawerClosed(View drawerView) {  
                     
               }  
               @Override  
               public void onDrawerStateChanged(int newState) {  
                     
               }  
           });  
    

    github:https://github.com/David-lvfujiang/TodayHeadlinesApplication.git

    展开全文
  • Android 高仿 QQ5.0 侧滑菜单效果 自定义控件来袭

    万次阅读 多人点赞 2014-09-15 09:19:36
    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/39257409,本文出自【张鸿洋的博客】上一篇博客带...的确,上一篇也承诺过,稍微修改上一篇的代码,实现QQ5.0侧滑菜单~~好了,下面就开始为大家展

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/39257409,本文出自【张鸿洋的博客】

    上一篇博客带大家实现了:Android 自定义控件打造史上最简单的侧滑菜单 ,有兄弟看了以后说,你这滑动菜单过时了呀~QQ5.0的效果还不错~~嗯,的确,上一篇也承诺过,稍微修改上一篇的代码,实现QQ5.0侧滑菜单~~好了,下面就开始为大家展示写一个类QQ的侧滑有多easy ~!

    1、原理分析

    首先对比一下我们上篇的实现距离QQ的效果还有多远:

    差距还是蛮大的

    区别1、QQ的内容区域会伴随菜单的出现而缩小

    区别2、QQ的侧滑菜单给人的感觉是隐藏在内容的后面,而不是拖出来的感觉

    区别3、QQ的侧滑菜单有一个缩放以及透明度的效果~


    那么我们如何能做到呢:

    对于区别1:这个好办,我们可以在滑动的时候,不断的改变内容区域的大小;如何改变呢?我们在菜单出现的整个过程中,不断记录菜单显示的宽度与其总宽度的比值,是个从0到1的过程,然后把0~1转化为1~0.7(假设内容区域缩小至0.7);不断去缩小内容区域;

    对于区别3:也比较好办,上面已经可以得到0到1的这个值了,那么缩放和透明度的动画就不在话下了;

    对于区别2:我们使用的HorizontalScrollView,然后水平放置了菜单和内容,如何让菜单可以隐藏到内容的后面呢?其实也比较简单,在菜单出现的过程中,不断设置菜单的x方向的偏移量;0的时候完全隐藏,0.3的时候,隐藏x方向偏移量为0.7个宽度,类推~~~


    好了,分析完毕,那么对于这些动画用什么实现最好呢?

    想都不用想,属性动画哈,如果你对属性动画不了解,可以参:Android 属性动画(Property Animation) 完全解析 (上)Android 属性动画(Property Animation) 完全解析 (下)

    2、实现


    1、初步的代码

    布局文件神马的,都和上一篇一模一样,这里就不重复贴代码了,不了解的,先看下上一篇;

    先看一下上一篇我们已经实现的完整代码:

    package com.example.zhy_slidingmenu;
    
    import android.content.Context;
    import android.content.res.TypedArray;
    import android.util.AttributeSet;
    import android.util.TypedValue;
    import android.view.MotionEvent;
    import android.view.ViewGroup;
    import android.widget.HorizontalScrollView;
    import android.widget.LinearLayout;
    
    import com.zhy.utils.ScreenUtils;
    
    public class SlidingMenu extends HorizontalScrollView
    {
    	/**
    	 * 屏幕宽度
    	 */
    	private int mScreenWidth;
    	/**
    	 * dp
    	 */
    	private int mMenuRightPadding;
    	/**
    	 * 菜单的宽度
    	 */
    	private int mMenuWidth;
    	private int mHalfMenuWidth;
    
    	private boolean isOpen;
    
    	private boolean once;
    
    	public SlidingMenu(Context context, AttributeSet attrs)
    	{
    		this(context, attrs, 0);
    
    	}
    
    	public SlidingMenu(Context context, AttributeSet attrs, int defStyle)
    	{
    		super(context, attrs, defStyle);
    		mScreenWidth = ScreenUtils.getScreenWidth(context);
    
    		TypedArray a = context.getTheme().obtainStyledAttributes(attrs,
    				R.styleable.SlidingMenu, defStyle, 0);
    		int n = a.getIndexCount();
    		for (int i = 0; i < n; i++)
    		{
    			int attr = a.getIndex(i);
    			switch (attr)
    			{
    			case R.styleable.SlidingMenu_rightPadding:
    				// 默认50
    				mMenuRightPadding = a.getDimensionPixelSize(attr,
    						(int) TypedValue.applyDimension(
    								TypedValue.COMPLEX_UNIT_DIP, 50f,
    								getResources().getDisplayMetrics()));// 默认为10DP
    				break;
    			}
    		}
    		a.recycle();
    	}
    
    	public SlidingMenu(Context context)
    	{
    		this(context, null, 0);
    	}
    
    	@Override
    	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
    	{
    		/**
    		 * 显示的设置一个宽度
    		 */
    		if (!once)
    		{
    			LinearLayout wrapper = (LinearLayout) getChildAt(0);
    			ViewGroup menu = (ViewGroup) wrapper.getChildAt(0);
    			ViewGroup content = (ViewGroup) wrapper.getChildAt(1);
    
    			mMenuWidth = mScreenWidth - mMenuRightPadding;
    			mHalfMenuWidth = mMenuWidth / 2;
    			menu.getLayoutParams().width = mMenuWidth;
    			content.getLayoutParams().width = mScreenWidth;
    
    		}
    		super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    
    	}
    
    	@Override
    	protected void onLayout(boolean changed, int l, int t, int r, int b)
    	{
    		super.onLayout(changed, l, t, r, b);
    		if (changed)
    		{
    			// 将菜单隐藏
    			this.scrollTo(mMenuWidth, 0);
    			once = true;
    		}
    	}
    
    	@Override
    	public boolean onTouchEvent(MotionEvent ev)
    	{
    		int action = ev.getAction();
    		switch (action)
    		{
    		// Up时,进行判断,如果显示区域大于菜单宽度一半则完全显示,否则隐藏
    		case MotionEvent.ACTION_UP:
    			int scrollX = getScrollX();
    			if (scrollX > mHalfMenuWidth)
    			{
    				this.smoothScrollTo(mMenuWidth, 0);
    				isOpen = false;
    			} else
    			{
    				this.smoothScrollTo(0, 0);
    				isOpen = true;
    			}
    			return true;
    		}
    		return super.onTouchEvent(ev);
    	}
    
    	/**
    	 * 打开菜单
    	 */
    	public void openMenu()
    	{
    		if (isOpen)
    			return;
    		this.smoothScrollTo(0, 0);
    		isOpen = true;
    	}
    
    	/**
    	 * 关闭菜单
    	 */
    	public void closeMenu()
    	{
    		if (isOpen)
    		{
    			this.smoothScrollTo(mMenuWidth, 0);
    			isOpen = false;
    		}
    	}
    
    	/**
    	 * 切换菜单状态
    	 */
    	public void toggle()
    	{
    		if (isOpen)
    		{
    			closeMenu();
    		} else
    		{
    			openMenu();
    		}
    	}
    	
    	
    
    }
    

    利用HorizontalScrollView,监听了ACTION_UP的事件,当用户抬起手指时,根据当前菜单显示的宽度值,判断是缩回还是完全展开;给用户提供了一个rightPadding属性,用于设置菜单离右屏幕的距离;以及对外提供了打开,关闭,切换的几个方法;具体的讲解看下上篇博客了;

    2、实现的思路

    现在我们开始解决那3个区别,已经选择了使用属性动画,现在决定动画效果应该加在哪儿?

    不用说,我用大腿想一想都应该是在ACTION_MOVE中,是的,ACTION_MOVE中的确可以,不断获取当前的getScrollX / mMenuWidth,不断改变菜单的透明度,缩放,X方向的偏移量;不断改变内容区域的宽度和高度;

    说一下,起初我也是在MOVE中这么做的,但是呢,出现两个问题:

    1、动画效果并不是很流畅,特别是菜单,有抖动的效果;

    2、用户抬起后,还需要在UP里面,继续未完成的动画,就是说,你的透明度、缩放神马的,当用户抬起以后就需要自动变化了;

    于是乎,我就开始换了个方向,既然是SrollView,肯定有一个ScrollChanged方法,功夫不负有心人,真心这么个方法:

    @Override
    	protected void onScrollChanged(int l, int t, int oldl, int oldt)
    	{
    		
    	}
    这个方法只要scrollChanged就会触发,l就是我们需要的scrollX,太赞了~~~

    3、动画比例的计算

    我们在onScrollChanged里面,拿到 l 也就是个getScrollX,即菜单已经显示的宽度值;

    float scale = l * 1.0f / mMenuWidth;

    与菜单的宽度做除法运算,在菜单隐藏到显示整个过程,会得到1.0~0.0这么个变化的区间;

    有了这个区间,就可以根据这个区间设置动画了;

    1、首先是内容区域的缩放比例计算:

    我们准备让在菜单出现的过程中,让内容区域从1.0~0.8进行变化~~

    那么怎么把1.0~0.0转化为1.0~0.8呢,其实很简单了:

    float rightScale = 0.8f + scale * 0.2f; (scale 从1到0 ),是不是哦了~

    接下来还有3个动画:

    2、菜单的缩放比例计算

    仔细观察了下QQ,菜单大概缩放变化是0.7~1.0

    float leftScale = 1 - 0.3f * scale;

    3、菜单的透明度比例:

    我们设置为0.6~1.0;即:0.6f + 0.4f * (1 - scale)

    4、菜单的x方向偏移量:

    看一下QQ,并非完全从被内容区域覆盖,还是有一点拖出的感觉,所以我们的偏移量这么设置:

    tranlateX = mMenuWidth * scale * 0.6f ;刚开始还是让它隐藏一点点~~~

    4、完整的实现

    说了这么多,其实到上一篇史上最简单的侧滑,到QQ5.0的效果的转变,只需要几行代码~~

    @Override
    	protected void onScrollChanged(int l, int t, int oldl, int oldt)
    	{
    		super.onScrollChanged(l, t, oldl, oldt);
    		float scale = l * 1.0f / mMenuWidth;
    		float leftScale = 1 - 0.3f * scale;
    		float rightScale = 0.8f + scale * 0.2f;
    		
    		ViewHelper.setScaleX(mMenu, leftScale);
    		ViewHelper.setScaleY(mMenu, leftScale);
    		ViewHelper.setAlpha(mMenu, 0.6f + 0.4f * (1 - scale));
    		ViewHelper.setTranslationX(mMenu, mMenuWidth * scale * 0.6f);
    
    		ViewHelper.setPivotX(mContent, 0);
    		ViewHelper.setPivotY(mContent, mContent.getHeight() / 2);
    		ViewHelper.setScaleX(mContent, rightScale);
    		ViewHelper.setScaleY(mContent, rightScale);
    
    	}

    就这么几行。这里属性动画用的nineoldandroids为了保持向下的兼容;主要就是设置了各种动画,上面都详细说了~~~
    然后,记得把我们的菜单和内容的布局,单独声明出来为我们的mMenu ,mContent ~没了,就改了这么几行~

    3、效果图

    是骡子是马,拉出来溜溜


    菜单栏需要ListView的拖动也是不会冲突了,上篇已经测试了;

    关于动画属性的范围:上面介绍的特别清楚,比如内容我们是最小显示0.8,你要是喜欢0.6,自己去修改一下;包括偏移量,透明度等范围;

    因为上一篇已经写了如何把属性抽取成自定义的属性;所以这里就没有抽取了,不然总觉得是在重复~


    嗯,最近还有写APP的侧滑,是这样的,就是菜单栏完全隐藏在内容区域下面,如果需要这样需求的:


    其实我还满喜欢这样效果的。

    实现呢,注释几行代码就实现了:

    @Override
    	protected void onScrollChanged(int l, int t, int oldl, int oldt)
    	{
    		super.onScrollChanged(l, t, oldl, oldt);
    		float scale = l * 1.0f / mMenuWidth;
    //		float leftScale = 1 - 0.3f * scale;
    //		float rightScale = 0.8f + scale * 0.2f;
    //		
    //		ViewHelper.setScaleX(mMenu, leftScale);
    //		ViewHelper.setScaleY(mMenu, leftScale);
    //		ViewHelper.setAlpha(mMenu, 0.6f + 0.4f * (1 - scale));
    		ViewHelper.setTranslationX(mMenu, mMenuWidth * scale );
    
    //		ViewHelper.setPivotX(mContent, 0);
    //		ViewHelper.setPivotY(mContent, mContent.getHeight() / 2);
    //		ViewHelper.setScaleX(mContent, rightScale);
    //		ViewHelper.setScaleY(mContent, rightScale);
    
    	}


    好了,虽说最终的实现看起来还是很简单的,看起来,嗯~~但是从无到有的这个过程还是不容易的~~各种尝试,我能说我连蹲坑都在滑QQ的菜单观察么~哈,见笑了;博客中也写出了过程中失败的尝试,希望能够更好的让大家在里面学到些有用的东西~~YEAH!! 就到这,没事就留个言~~~再不留言,我就来个源码请留下邮箱,嘿嘿,开个玩笑~




    源码点击下载






    展开全文
  • Android里的抽屉控件在Android2.0---Android2.3是最常见的,...实现侧滑的方法比较多,今天我们先讲第一种方法,那就是使用抽屉控件DrawerLayout来实现侧滑菜单,具体效果如下图: 标题1. 首先,我们来看一下布局...

    Android里的抽屉控件在Android2.0---Android2.3是最常见的,记得当时Android系统的桌面本身就自带一个抽屉控件,点击它则展开所有已安装的应用。直到Android4.0问世后比较流行的就是侧滑了,例如新浪新闻APP。实现侧滑的方法比较多,今天我们先讲第一种方法,那就是使用抽屉控件DrawerLayout来实现侧滑菜单,具体效果如下图:

    标题

    1. 首先,我们来看一下布局XML文件

    <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/drawerlayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <!-- 内容部分的布局 -->
    
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:orientation="vertical" >
    
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:background="?attr/colorPrimary" />
    
            <TextView
                android:textColor="#ffffff"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="#000000"
                android:text="内容" />
        </LinearLayout>
        <!-- 侧滑菜单左侧部分 -->
    
        <LinearLayout
            android:layout_width="200dp"
            android:layout_height="fill_parent"
            android:layout_gravity="start"
            android:orientation="vertical"
            android:paddingTop="50dp" >
    
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="列表项1" />
    
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="列表项2" />
    
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="列表项3" />
        </LinearLayout>
        <!-- 侧滑菜单右侧部分 -->
    
        <LinearLayout
            android:layout_width="200dp"
            android:layout_height="fill_parent"
            android:layout_gravity="end"
            android:background="#ff0000"
            android:orientation="vertical"
            android:paddingTop="50dp" >
    
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="item1" />
    
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="item2" />
    
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="item3" />
        </LinearLayout>
    
    </android.support.v4.widget.DrawerLayout>

    这个XML布局的根布局是DrawerLayout抽屉控件,子控件实质包含了两部分,第一部分是内容,第二部分是侧滑菜单的布局。

    我们先看这里的第一部分:内容布局,它是由一个包含一个TOOLBAR(Android标题栏)控件 与 一个TextView。再来看第二部分:这里有2个LinearLayout,其中第一个的属性 android:layout_gravity = "start",另一个android:layout_gravity="end",分别表示屏幕左边的侧滑菜单与屏幕右边的侧滑菜单。好了,通过分析我们这个Demo工程的界面有2个侧滑菜单与一个显示主体内容的页面。

    2.  MainActivity代码:

    主要加载1中的布局UI,并控制侧滑菜单与内容页面的缩放大小及位移等动画属性。 

    package com.anyikang.volunteer.sos.swipemenulist;
    
    import android.os.Bundle;
    import android.support.v4.widget.DrawerLayout;
    import android.support.v7.app.ActionBarDrawerToggle;
    import android.support.v7.app.AppCompatActivity;
    import android.support.v7.widget.Toolbar;
    import android.util.Log;
    import android.view.View;
    
    public class MainActivity extends AppCompatActivity {
        private Toolbar toolbar;
        private DrawerLayout drawerlayout;
        private String TAG = "MainActivity";
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            toolbar = (Toolbar)findViewById(R.id.toolbar);
          
           // gxw- setSupportActionBar(toolbar);
    
            drawerlayout = (DrawerLayout)findViewById(R.id.drawerlayout);
    
            ActionBarDrawerToggle drawerToggle = new ActionBarDrawerToggle(
                    this, drawerlayout, toolbar,
                    R.string.drawer_open, R.string.drawer_close);
            //同步drawerToggle按钮与侧滑菜单的打开(关闭)状态
            drawerToggle.syncState();
            //侧滑菜单与drawerToggle绑在一起,drawerToggle按钮点击打开(关闭)侧滑菜单
    //		drawerlayout.setDrawerListener(drawerToggle);
    
            drawerlayout.setDrawerListener(new DrawerLayout.DrawerListener() {
    
                @Override
                public void onDrawerStateChanged(int newState) {
                    // 打开关闭状态切换时调用
    
                }
    
                @Override
                public void onDrawerSlide(View drawerView, float slideOffset) {
                    // 滑动的过程中执行 slideOffset:0~1
                    View content = drawerlayout.getChildAt(0);
                    View menu = drawerView;
                    float scale = 1-slideOffset;//1~0
                    float leftScale = (float) (1-0.3*scale);
                    float rightScale = (float) (0.7f+0.3*scale);//0.7~1
                    menu.setScaleX(leftScale);//1~0.7
                    menu.setScaleY(leftScale);//1~0.7
    
                    content.setScaleX(rightScale);
                    content.setScaleY(rightScale);
                    content.setTranslationX(menu.getMeasuredWidth()*slideOffset);//0~width
                    Log.i(TAG,"slideOffset="+slideOffset+",leftScale="+leftScale+",rightScale="+rightScale);
    
                }
    
                @Override
                public void onDrawerOpened(View drawerView) {
                    // 打开了菜单
    
                }
    
                @Override
                public void onDrawerClosed(View drawerView) {
                    // 关闭了菜单
    
                }
            });
    
        }
    }
    

     我们主要来分析以下两段代码:

    第一段,

      ActionBarDrawerToggle drawerToggle = new ActionBarDrawerToggle(
                    this, drawerlayout, toolbar,
                    R.string.drawer_open, R.string.drawer_close);
            //同步状态
            drawerToggle.syncState();

    这段代码的作用是将TOOLBAR标题栏左上角的返回按钮(向导按钮)与 抽屉控件drawerlayout关联起来,(1)如果当前侧滑菜单已显示,那么当点击“向导按钮”时,将控制drawerlayout抽屉关闭,即达到了隐藏侧滑菜单的目的;(2)同理,当前侧滑菜单已隐藏,那么当点击“向导按钮”时,将控制drawerlayout抽屉打开,即达到了展示侧滑菜单的目的;然而,想要正确的实现上述(1)(2)动作,前提是需要调用drawToggle.syncState()将抽屉的状态(当前是打开还是关闭)与“向导按钮”的状态同步,即抽屉打开时,“向导按钮”状态也应该处于打开状态,这样才能实现再次点击“向导按钮”时抽屉控件应该表现关闭抽屉的动作。

     

    第二段,

     

         drawerlayout.setDrawerListener(new DrawerLayout.DrawerListener() {
    
                @Override
                public void onDrawerStateChanged(int newState) {
                    // 打开关闭状态切换时调用
    
                }
    
                @Override
                public void onDrawerSlide(View drawerView, float slideOffset) {
                    // 滑动过程中调用 slideOffset:0~1
                    View content = drawerlayout.getChildAt(0);
                    View menu = drawerView;
                    float scale = 1-slideOffset;//1~0
                    float leftScale = (float) (1-0.3*scale); //0.7~1
                    float rightScale = (float) (0.7f+0.3*scale);//1~0.7
                    menu.setScaleX(leftScale);//0.7~1
                    menu.setScaleY(leftScale);//0.7~1
    
                    content.setScaleX(rightScale); //1~0.7
                    content.setScaleY(rightScale); //1~0.7
                    content.setTranslationX(menu.getMeasuredWidth()*(slideOffset));//0~width
                    Log.i(TAG,"slideOffset="+slideOffset+",leftScale="+leftScale+",rightScale="+rightScale);
    
                }
    
                @Override
                public void onDrawerOpened(View drawerView) {
                    // 打开了侧滑菜单
    
                }
    
                @Override
                public void onDrawerClosed(View drawerView) {
                    // 关闭了侧滑菜单
    
                }
            });

             这里使用serDrawerListener来监听抽屉控件drawerlayout的动作行为,我们主要来看中间这个函数onDrawerSlide,它包含了一个参数slideOffset,这个参数代表了抽屉控件滑出的百分比(也就是侧滑菜单滑出的百分比),例如现在的左边侧滑菜单是隐藏的,然后我们滑动屏幕左边缘,侧滑菜单会跟着滑动出来,当我们观察到当slideOffset这个值为0.8时,侧滑菜单界面的80%已经展示出来,另外20%的界面仍隐藏在屏幕左侧以外。这说明slideOffset并不是侧滑菜单移动过的像素距离,而是移动过的像素距离dx 占 侧滑菜单整体宽度的一个百分比,它的值是由0-1,即0%-100%,简单的讲就是整个侧滑菜单宽度漏出来的百分比 。

            明白了slideOffset的含义后,我们来分析我们的代码,举个例子,当从屏幕左侧滑出菜单时,slideOffset从0变为1,这时scale的值由1变为0,leftScale的值由0.7变为1。menu.setScaleX, menu.setScaleY会使侧滑菜单的大小先缩放为原来的70%,然后逐渐扩大到原本的大小,即菜单完整展示出来,与此同时content.setTranslationX逐渐位移内容布局从0(内容布局的原来左边缘)到侧滑菜单的宽度,content.setScaleX,setScaleY会将内容布局逐渐缩放到原来的70%(由完整大小开始逐渐缩小到70%)。这样就实现了我们侧滑菜单时,菜单由小变大,内容布局由大变小并且随着侧滑菜单的滑出逐渐被推到屏幕的右半部分的效果。

      其余的几个监听函数,我相信大家看到函数名就明白了,在此不再赘述,最后按照惯例给出源码下载地址:

    https://download.csdn.net/download/gaoxiaoweiandy/10590696

     

     

    展开全文
  • 现在开发中,很多APP都在用侧滑菜单,这个很常见,也有很多第三方库,比如slidingmenu,谷歌官方的DrawerLayout等等。下面我就总结一下侧滑菜单实现的4种方式: 一、自定义ViewGroup ,处理其onTouch事件 二、...
  • 简单的侧滑菜单实现

    千次阅读 2016-08-29 14:44:34
    HorizontalScrollView中管理两个视图,一个视图为“菜单”,另一个为“正文”。初始时“菜单”部分在屏幕可视区域以外。当利用HorizontalScrollView的滑动机制进行水平滑动时,将隐藏在屏幕外的“菜单”部分“拖入...
  • 5分钟学会两种侧滑菜单

    千次阅读 2017-02-18 16:26:49
    侧滑菜单效果其实在应用上很是常见。其中大部分新闻客户端都使用了这种效果。使用起来也是又溜(6)又简单,并且经久以来,也被用户所熟悉。而本文提供两种方法来实现这样的一种抽屉效果。 通过studio创建module...
  • Android 自定义控件打造史上最简单的侧滑菜单

    万次阅读 多人点赞 2014-09-11 17:57:26
    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/39185641 ,本文出自【张鸿洋的博客】侧滑菜单在很多应用中都会见到,最近QQ5.0侧滑还玩了点花样~~对于侧滑菜单,一般大家都会自定义ViewGroup...
  • Android 打造史上最简单的侧滑菜单

    万次下载 热门讨论 2014-09-10 22:22:10
    代码来自博客实例,有问题请留言:http://blog.csdn.net/lmj623565791/article/details/39185641
  • 侧滑菜单

    2018-09-16 13:15:05
    第一步:添加依赖关系 打开app/build.gradle文件,...主布局用DrawerLayout作为外包装,里面包含主页面和侧滑菜单的页面 侧滑菜单用android.support.design.widget.NavigationView实现 主布局的布局代码 ...
  • Android 侧滑菜单的实现(NavigationView)

    万次阅读 多人点赞 2017-03-15 12:54:45
    很早之前就像写个android的侧滑菜单加入到项目中了,但是很多给的都是密密麻麻的代码,今天看到了简单快速的实现方法:通过NavigationView+DrawLayout来实现侧滑菜单的功能。Google I/O 2015 给大家带来了Android...
  • 动手打造史上最简单的 Recycleview 侧滑菜单

    万次阅读 热门讨论 2017-08-19 11:27:06
    Recycleview 侧滑菜单大多的实现思路是:通过自定义 Recycleview 或 Adapter 提供创建菜单方法,然后内部再关联到各个 item 改变其布局,从而使 item 具有侧滑功能,优点是使用简单,但是不够灵活,比如开始提到的三...
  • Android 超高仿 QQ5.0 侧滑菜单项目完整实例代码

    万次下载 热门讨论 2014-09-14 01:12:27
    代码为博客的实例代码,有问题请博客中留言:http://blog.csdn.net/lmj623565791/article/details/39185641
  • 支持启用或禁用侧滑菜单 支持菜单在条目的左边或者右边 支持滑动阻塞或非阻塞 支持点击了menu后是否自动关闭menu 支持menu打开和关闭的回调监听 可快速打开和关闭menu 【点我】更多详细使用说明请移步github 写之前...
  • 简单易用的侧滑菜单 github地址:https://github.com/wjTime 如觉得有帮助,还请帮忙start以鼓励,不足的地方也请给予指正,谢谢!
  • Android RecyclerView —— 实现侧滑菜单

    千次阅读 热门讨论 2019-04-01 17:05:48
    RecyclerView侧滑删除可以通过ItemTouchHelper来实现,但侧滑菜单栏没有原生的实现方式,我就尝试重写RecyclerView的onInterceptEvent和onTouchEvent方法来实现侧滑菜单,下面来讲下我的实现思路。文章底部有源码,...
  • Axure侧滑菜单

    2018-11-16 15:29:50
    效果实现教程地址:https://blog.csdn.net/qq_27884377/article/details/84138648
  • 标签:android 5.0 侧滑菜单 按钮过度动画 前阵子看到Android 5.0 的新的侧滑菜单按钮,其有打开和关闭两种状态,状态之间切换时也会有动画过度。 突发奇想的自己实现了一个。效果实现是引用了NineOldAndroids开源库...
  • 微信小程序侧滑菜单,全套代码。可自行下载进行查看,可进行扩展真实可用.
  • Android侧滑菜单实现

    2018-03-29 11:15:00
    一、所需控件:1、android.support.v4.widget.DrawerLayout2、android.support.design.widget.NavigationViewandroid.support.v4.widget.DrawerLayout//侧滑菜单主界面布局android.support.design.widget.Navigation...
1 2 3 4 5 ... 20
收藏数 11,955
精华内容 4,782
关键字:

侧滑菜单