技术共享之QQ侧滑

来源：互联网发布：linux多开terminator 编辑：程序博客网时间：2024/06/07 00:05

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

阅读全文

1 0