技术共享之QQ侧滑

技术共享之QQ侧滑

通过自定义容器 实现QQ侧滑模仿了QQ 侧滑的功能。主要原理是自定义容器 继承HorizontalAScrollView 或者 LinearLayout，对menu 和主页面进行测量、重绘，以及相应的事件处理，还包括一些属性动画 ,先上效果图



第一步 activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<com.liang.boke.QQSliding.SliddingMenu
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="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:background="@drawable/menu_bg"
>

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal">

<include layout="@layout/qq_menu"/>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/qq"/>
</LinearLayout>
</com.liang.boke.QQSliding.SliddingMenu>

其中的qq_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center">

<RelativeLayout
android:layout_marginTop="10sp"
android:layout_width="match_parent"
android:layout_height="70dp"
android:background="#11000000">
<TextView
android:paddingLeft="15px"
android:drawableLeft="@drawable/img_1"
android:textSize="25sp"
android:textColor="#fff"
android:drawablePadding="20sp"
android:gravity="center_vertical"
android:layout_width="match_parent"
android:text="QQ邮箱"
android:layout_height="match_parent" />
</RelativeLayout>

<RelativeLayout
android:layout_marginTop="10sp"
android:layout_width="match_parent"
android:layout_height="70dp"
android:background="#11000000">
<TextView
android:paddingLeft="15px"
android:drawableLeft="@drawable/img_2"
android:textSize="25sp"
android:textColor="#fff"
android:drawablePadding="20sp"
android:gravity="center_vertical"
android:layout_width="match_parent"
android:text="QQ相册"
android:layout_height="match_parent" />
</RelativeLayout>
<RelativeLayout
android:layout_marginTop="10sp"
android:layout_width="match_parent"
android:layout_height="70dp"
android:background="#11000000">
<TextView
android:paddingLeft="15px"
android:drawableLeft="@drawable/img_3"
android:textSize="25sp"
android:textColor="#fff"
android:drawablePadding="20sp"
android:gravity="center_vertical"
android:layout_width="match_parent"
android:text="QQ空间"
android:layout_height="match_parent" />
</RelativeLayout>
<RelativeLayout
android:layout_marginTop="10sp"
android:layout_width="match_parent"
android:layout_height="70dp"
android:background="#11000000">
<TextView
android:paddingLeft="15px"
android:drawableLeft="@drawable/img_4"
android:textSize="25sp"
android:textColor="#fff"
android:drawablePadding="20sp"
android:gravity="center_vertical"
android:layout_width="match_parent"
android:text="QQ位置"
android:layout_height="match_parent" />
</RelativeLayout>
</LinearLayout>
</RelativeLayout>

第二步 新建类SliddingMenu 继承HorizontaScrollview

package com.liang.boke.QQSliding;

import android.content.Context;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.view.WindowManager;
import android.widget.HorizontalScrollView;
import android.widget.LinearLayout;

/**
* Created by 梁想想 on 2017/12/5.
*/

public class SliddingMenu extends HorizontalScrollView{

private   int mScreenWidth; //屏幕的宽度
private int mRightPadding = 150 ;     //右边距
private ViewGroup mMenu;
private ViewGroup mMain;
private int mMenuWidth;

public SliddingMenu(Context context) {
this(context,null);
}

public SliddingMenu(Context context, AttributeSet attrs) {
this(context, attrs,0);
}

public SliddingMenu(Context context, AttributeSet attrs, int defStyleAttr) {

af41
super(context, attrs, defStyleAttr);
//第一步 获取屏幕的宽度
WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);  //拿到window 管理器
DisplayMetrics outMetrics = new DisplayMetrics();
wm.getDefaultDisplay().getMetrics(outMetrics);
mScreenWidth = outMetrics.widthPixels;
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
// 第二步 得到 menu  和 主页面 的视图
LinearLayout wrapper = (LinearLayout) getChildAt(0); //得到子容器
//得到了 menu 菜单
mMenu = (ViewGroup) wrapper.getChildAt(0);
//得到了 主页面
mMain = (ViewGroup) wrapper.getChildAt(1);

//第三步 设置 menu 和 主页面 的宽度 （menu 默认 与 右边有一定的距离）
mMenuWidth = mScreenWidth - mRightPadding;   //计算menu 的宽度 = 屏幕的宽度 - 右边距
mMenu.getLayoutParams().width = mMenuWidth;
mMain.getLayoutParams().width = mScreenWidth ;  //主页面的宽度就是 屏幕的宽度

super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}

@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
//第四步 回弹动作
if(changed)
{
this.scrollTo(mMenuWidth,0);
}

super.onLayout(changed, l, t, r, b);
}

float downX ;
@Override
public boolean onTouchEvent(MotionEvent ev) {

switch (ev.getAction())
{
case MotionEvent.ACTION_DOWN :
//记录按下去的横坐标
downX =  ev.getX() ;
break;
case MotionEvent.ACTION_UP :
float dx = ev.getX() - downX ; // 计算 滑动的差距
if( dx < mScreenWidth / 3 )
{// 如果滑动距离小于屏幕的三分之一 回弹
this.smoothScrollTo(mMenuWidth,0);
}
else
{
this.smoothScrollTo(0,0);
}
return true ;

default: break;

}

return super.onTouchEvent(ev);
}

@Override
protected void onScrollChanged(int l, int t, int oldl, int oldt) {
//第五步 做动画
//计算滑动的百分比因子
float factor = (float) l / mMenuWidth ;
// 1. 平移动画
float leftTranslate = (float) (mMenuWidth * factor * 0.6);
mMenu.setTranslationX(leftTranslate);

//2.缩放动画
float leftScale = (float) (1 - factor * 0.4);
mMenu.setScaleX(leftScale);
mMenu.setScaleY(leftScale);

float rightScale = (float) (0.8 + 0.2 * factor);
mMain.setScaleX(rightScale);
mMain.setScaleY(rightScale);

//3.透明动画
float alpha = (float) (1 - 0.2 * factor);
mMenu.setAlpha(alpha);
super.onScrollChanged(l, t, oldl, oldt);
}
}

源代码已经上传 如需下载请点击QQ侧滑 有问题可以加我 Q 1915528523 ，也可以直接留言（比较慢）