QQ侧滑效果实现

最新推荐文章于 2021-05-01 19:46:20 发布

qq_30612889

最新推荐文章于 2021-05-01 19:46:20 发布

阅读量428

点赞数

文章标签：高仿 qq 侧滑

本文链接：https://blog.csdn.net/qq_30612889/article/details/48105609

版权

今天闲来无事，花了点时间研究了一下新版QQ界面侧滑效果，废话少说先上张效果图：

下面切入正题，由于没有找到图片资源，所以自己就偷了一个懒，使用截屏，搞了几张图片，大家就凑合看吧，哈哈；

1、布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:background="@drawable/background"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    <ImageView 
        android:layout_height="match_parent"
        android:layout_width="wrap_content"
        android:src="@drawable/main_menus"
        android:contentDescription="@string/action_settings"
        android:id="@+id/im_main_menus"
        android:scaleType="fitXY"
        />
	<ImageView 
	    android:scaleType="fitXY"
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:src="@drawable/main_content"
        android:contentDescription="@string/action_settings"
        android:id="@+id/im_main_content"
        />
</RelativeLayout>

2、关键代码

public boolean onTouch(View v, MotionEvent event) {
	int action = event.getAction();
	switch (action) {
		case MotionEvent.ACTION_DOWN:
			startX = (int) event.getRawX(); 
		break; 
		case MotionEvent.ACTION_MOVE:
			int x = (int) event.getRawX();
			int mx = x - startX;
			finalX = chatsCurrentLeft + mx;  
			if(finalX < 0){
				finalX = 0;
			}
			if(finalX > MAX_LEFT){
				finalX = MAX_LEFT;
			}
			int marginTop = MAX_MARGIN_TOP * finalX / MAX_LEFT;
			v.layout(finalX, marginTop, finalX + v.getWidth(), metrics.heightPixels - marginTop);
			
			int menuMarginTop = MAX_MARGIN_TOP - MAX_MARGIN_TOP * finalX / MAX_LEFT;
			int addRight = (MAX_LEFT - INIT_MENUS_RIGHT) * finalX / MAX_LEFT;
			menus.layout(0, menuMarginTop, INIT_MENUS_RIGHT +  addRight, metrics.heightPixels - menuMarginTop);
			animation = new AlphaAnimation(0, (float) (1.0 * finalX / MAX_LEFT));
			animation.setFillAfter(true);
			animation.setDuration(0);
			menus.startAnimation(animation);
		break;
		case MotionEvent.ACTION_UP: 
			chatsCurrentLeft = finalX;
		break;
	}
	return true;
}

简单说下实现的原理，设置内容控件触摸监听，动态设置内容控件和菜单控件的布局（layout方法），同时改变菜单控件的透明度，开始的时候透明度为0，完全打开时为1,；另外还要根据滑动的位置来计算控件的marginTop及高度，这样就实现了qq侧滑的效果，哈哈

源码下载