技术共享之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) {
        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 ，也可以直接留言（比较慢）