基于谷歌官方DrawerLayout实现QQ样式边侧滑抽屉缩进缩出技术

快来打我* 2024-02-17 17:14 45阅读 0赞

**基于谷歌官方DrawerLayout实现QQ样式边侧滑抽屉缩进缩出技术**

在附录文章1中，已经在基于第三方的SlidingMenu实现了边侧滑抽屉缩进缩出的效果，接下来，本文针对Google官方边侧滑抽屉技术DrawerLayout，改造DrawerLayout，以实现QQ样式的边侧滑抽屉缩进缩出效果。  
关于DrawerLayout的具体实现，在附录文章2中有介绍。  
首先写一个DrawerLayout的布局：

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/ic_launcher" >
    
        <FrameLayout
            android:id="@+id/content_frame"
            android:layout_width="match_parent"
            android:layout_height="match_parent" >
    
            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center"
                android:background="#F44336"
                android:gravity="center"
                android:text="Zhang Phil"
                android:textSize="50sp" />
        </FrameLayout>
    
        <RelativeLayout
            android:layout_width="200dip"
            android:layout_height="match_parent"
            android:layout_gravity="left" >
    
            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginBottom="20dip"
                android:layout_marginRight="20dip"
                android:layout_marginTop="20dip"
                android:background="#42a5f5"
                android:gravity="center"
                android:text="左" />
        </RelativeLayout>
    
    </android.support.v4.widget.DrawerLayout>

MainActivity.java，注意MainActivity里面的核心关键处代码：

package zhangphil.drawerlayout;
    
    import com.nineoldandroids.view.ViewHelper;
    
    import android.app.Activity;
    import android.graphics.Color;
    import android.graphics.PorterDuff.Mode;
    import android.os.Bundle;
    import android.support.v4.widget.DrawerLayout;
    import android.support.v4.widget.DrawerLayout.DrawerListener;
    import android.view.View;
    import android.view.Window;
    
    public class MainActivity extends Activity {
    
    	private DrawerLayout mDrawerLayout;
    
    	@Override
    	protected void onCreate(Bundle savedInstanceState) {
    		super.onCreate(savedInstanceState);
    		requestWindowFeature(Window.FEATURE_NO_TITLE);
    		setContentView(R.layout.activity_main);
    
    		mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
    
    		// 故意设置透明，否则在滑动侧滑时候Android的DrawerLayout会在窗口默认显示渐变的灰黑过渡色。
    		// 此处屏蔽Android系统提供的默认渐变过渡灰黑
    		mDrawerLayout.setScrimColor(Color.TRANSPARENT);
    
    		// mDrawerLayout.setDrawerLockMode(Gravity.LEFT);
    
    		mDrawerLayout.addDrawerListener(new DrawerListener() {
    
    			@Override
    			public void onDrawerClosed(View v) {
    
    			}
    
    			@Override
    			public void onDrawerOpened(View v) {
    
    			}
    
    			@Override
    			public void onDrawerSlide(View drawerView, float slideOffset) {
    
    				// 主体窗口
    				View mainFrame = mDrawerLayout.getChildAt(0);
    
    				// 这个就是隐藏起来的边侧滑菜单栏
    				View leftMenu = drawerView;
    
    				addQQStyleSlide(mainFrame, leftMenu, slideOffset);
    			}
    
    			@Override
    			public void onDrawerStateChanged(int arg0) {
    
    			}
    		});
    
    	}
    
    	// 实现的核心代码
    	private void addQQStyleSlide(View mainFrame, View leftMenu, float slideOffset) {
    		float leftScale = 0.5f + 0.5f * slideOffset;
    		float rightScale = 1 - 0.2f * slideOffset;
    
    		ViewHelper.setScaleX(leftMenu, leftScale);
    		ViewHelper.setScaleY(leftMenu, leftScale);
    		ViewHelper.setAlpha(leftMenu, 0.5f + 0.5f * slideOffset);
    		ViewHelper.setTranslationX(mainFrame, leftMenu.getMeasuredWidth() * slideOffset);
    		ViewHelper.setPivotX(mainFrame, 0);
    		ViewHelper.setPivotY(mainFrame, mainFrame.getMeasuredHeight() / 2);
    		mainFrame.invalidate();
    		ViewHelper.setScaleX(mainFrame, rightScale);
    		ViewHelper.setScaleY(mainFrame, rightScale);
    
    		// 该处主要是为了使背景的颜色渐变过渡。
    		getWindow().getDecorView().getBackground().setColorFilter(evaluate(slideOffset, Color.BLACK, Color.TRANSPARENT),
    				Mode.SRC_OVER);
    	}
    
    	private Integer evaluate(float fraction, Object startValue, Integer endValue) {
    		int startInt = (Integer) startValue;
    		int startA = (startInt >> 24) & 0xff;
    		int startR = (startInt >> 16) & 0xff;
    		int startG = (startInt >> 8) & 0xff;
    		int startB = startInt & 0xff;
    		int endInt = (Integer) endValue;
    		int endA = (endInt >> 24) & 0xff;
    		int endR = (endInt >> 16) & 0xff;
    		int endG = (endInt >> 8) & 0xff;
    		int endB = endInt & 0xff;
    		return (int) ((startA + (int) (fraction * (endA - startA))) << 24)
    				| (int) ((startR + (int) (fraction * (endR - startR))) << 16)
    				| (int) ((startG + (int) (fraction * (endG - startG))) << 8)
    				| (int) ((startB + (int) (fraction * (endB - startB))));
    	}
    }

代码运行效果（初始化 -> 从左往右逐渐抽屉打开时候的缩进与缩出）：

初始化、静止状态

![Center][]

开始边侧滑，从左边逐渐打开抽屉

![Center 1][]

边侧滑结束，抽屉完全打开，此时已经静止

![Center 2][]

附录文章：  
1，《改进Android SlidingMenu实现QQ样式边侧滑抽屉技术》链接地址：[http://blog.csdn.net/zhangphil/article/details/51044699][http_blog.csdn.net_zhangphil_article_details_51044699]  
2，《基于Android官方DrawerLayout实现抽屉导航菜单》链接地址：[http://blog.csdn.net/zhangphil/article/details/48710453][http_blog.csdn.net_zhangphil_article_details_48710453]

[Center]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/3704ff5fa39a402cb62f8617edef2131.png
[Center 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/6b036588573c425a8ef6f7c79f4aa3ca.png
[Center 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/24ac8ea16679420c87955faf5f109a65.png
[http_blog.csdn.net_zhangphil_article_details_51044699]: http://blog.csdn.net/zhangphil/article/details/51044699
[http_blog.csdn.net_zhangphil_article_details_48710453]: http://blog.csdn.net/zhangphil/article/details/48710453