Android 高仿 QQ5.2 侧滑菜单效果及QQmini效果

参考了：Android的高仿QQ5.0侧滑菜单效果自定义控件来袭

然后自己撰写了QQ5.2效果，并且可以切换QQmini效果，个人话语不多，见谅！

本人已经开源到了TaoCode，可以使用SVN免费更新下载：
http://code.taobao.org/svn/imitateqqandqqmini/trunk
本人TaoCode首页

首先看下布局：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/ic_launcher" >

    <com.bluemor.reddotface.view.DragLayout
        android:id="@+id/dl"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <FrameLayout
            android:id="@+id/flBack"
            android:layout_width="match_parent"
            android:layout_height="match_parent" >

            <ListView
                android:id="@+id/lv"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:cacheColorHint="#00000000"
                android:divider="@null"
                android:scrollbarSize="0dp"
                android:scrollbars="@null" />
        </FrameLayout>

        <com.bluemor.reddotface.view.MyFrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#eeeeee" >

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent" >

                <RelativeLayout
                    android:id="@+id/rl_title"
                    android:layout_width="match_parent"
                    android:layout_height="55dp"
                    android:background="#3683C1" >

                    <ImageView
                        android:id="@+id/iv_icon"
                        android:layout_width="42dp"
                        android:layout_height="42dp"
                        android:layout_centerVertical="true"
                        android:layout_marginLeft="10dp"
                        android:scaleType="centerCrop"
                        android:src="@drawable/ic_launcher" />

                    <Button
                        android:id="@+id/btn"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_centerInParent="true"
                        android:text="@string/app_name"
                        android:textColor="#ffffff"
                        android:textSize="20sp" />
                </RelativeLayout>

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_below="@id/rl_title"
                    android:text="@string/text" />
            </RelativeLayout>
        </com.bluemor.reddotface.view.MyFrameLayout>
    </com.bluemor.reddotface.view.DragLayout>
</FrameLayout>

package com.bluemor.reddotface.view;

import android.content.Context;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.widget.FrameLayout;

import com.bluemor.reddotface.view.DragLayout.Status;

/**
* @author chenyingyou
* @see http://blog.csdn.net/chenlove1 */
public class MyFrameLayout extends FrameLayout {
private DragLayout dl;

public MyFrameLayout(Context context) {
super(context);
}

public MyFrameLayout(Context context, AttributeSet attrs) {
super(context, attrs);
}

public MyFrameLayout(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}

public void setDragLayout(DragLayout dl) {
this.dl = dl;
}

@Override
public boolean onInterceptTouchEvent(MotionEvent event) {
if (dl.getStatus() != Status.Close) {
return true;
}
return super.onInterceptTouchEvent(event);
}

@Override
public boolean onTouchEvent(MotionEvent event) {
if (dl.getStatus() != Status.Close) {
if (event.getAction() == MotionEvent.ACTION_UP) {
dl.close();
}
return true;
}
return super.onTouchEvent(event);
}

}

最后，父布局（后面的布局）：

package com.bluemor.reddotface.view;

import android.content.Context;
import android.support.v4.view.GestureDetectorCompat;
import android.support.v4.view.ViewCompat;
import android.support.v4.widget.ViewDragHelper;
import android.util.AttributeSet;
import android.view.GestureDetector.SimpleOnGestureListener;
import android.view.MotionEvent;
import android.view.View;
import android.widget.FrameLayout;
import android.widget.ImageView;

import com.bluemor.reddotface.R;
import com.nineoldandroids.view.ViewHelper;

/**
* @author chenyingyou
* @see http://blog.csdn.net/chenlove1 */
public class DragLayout extends FrameLayout {

private boolean isShowShadow = true;
private boolean isQQEffect = true;

private GestureDetectorCompat gestureDetector;// 拦截手势判断
private ViewDragHelper dragHelper;// 拦截后的手势监听
private DragListener dragListener;// 外界回调

private int rangeLeft;// 左边的拉开宽度
private int rangeRight;// 右边的拉开宽度
private final float ratioLeft = 0.5f;// 左边的拉开系数
private final float ratioRight = 0.25f;// 右边的拉开系数
private int width;// 宽度
private int height;// 高度
private int shifting;// shifting偏移量（正数为左边偏移量，负数为右边偏移量）

private ImageView ivshadow;
private FrameLayout flBackground;
private MyFrameLayout flMain;

private Status status = Status.Close;

public enum Status {
Drag, OpenLeft, OpenRight, Close
}

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

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

public DragLayout(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
gestureDetector = new GestureDetectorCompat(context,
new YScrollDetector());
dragHelper = ViewDragHelper.create(this, dragHelperCallback);
}

class YScrollDetector extends SimpleOnGestureListener {
@Override
public boolean onScroll(MotionEvent e1, MotionEvent e2, float dx,
float dy) {
return Math.abs(dy) <= Math.abs(dx);
}
}

// 拦截后的手势监听回调
private ViewDragHelper.Callback dragHelperCallback = new ViewDragHelper.Callback() {

@Override
public int clampViewPositionHorizontal(View child, int left, int dx) {
if (shifting + dx < rangeRight) {// 向左拉
return rangeRight;
} else if (shifting + dx > rangeLeft) {// 向右拉
return rangeLeft;
} else {
return left;
}
}

@Override
public boolean tryCaptureView(View child, int pointerId) {
return true;
}

@Override
public int getViewHorizontalDragRange(View child) {
return width;
}

@Override
// 当手势触发到抬起动作
public void onViewReleased(View releasedChild, float xvel, float yvel) {
super.onViewReleased(releasedChild, xvel, yvel);

if (shifting > 0) {
if (xvel > 0) {// 最后向右滑
openLeft();
} else if (xvel < 0) {// 最后向左滑
close();
} else if (releasedChild == flMain
&& shifting > rangeLeft * 0.3) {
openLeft();
} else if (releasedChild == flBackground
&& shifting > rangeLeft * 0.7) {
openLeft();
} else {
close();
}
} else {
if (xvel > 0) {
close();
} else if (xvel < 0) {
openRight();
} else if (releasedChild == flMain
&& shifting > rangeRight * 0.3) {
close();
} else if (releasedChild == flBackground
&& shifting > rangeRight * 0.7) {
close();
} else {
close();
}
}

}

@Override
// 当手势触发到了某个changedView回调这方法
public void onViewPositionChanged(View changedView, int left, int top,
int dx, int dy) {
if (changedView == flMain) {
shifting = left;
} else {
shifting = shifting + left;
}

if (shifting < rangeRight) {
shifting = rangeRight;
} else if (shifting > rangeLeft) {
shifting = rangeLeft;
}

if (isShowShadow) {
ivshadow.layout(shifting, 0, shifting + width, height);
}

if (changedView == flBackground) {
flMain.layout(shifting, 0, shifting + width, height);
flBackground.layout(0, 0, width, height);
}

dispatchDragEvent(shifting);
}
};

private void dispatchDragEvent(int shifting) {
float percent;
boolean isLeft;

if (shifting < 0) {
isLeft = false;
percent = shifting / (float) rangeRight;
} else {
isLeft = true;
percent = shifting / (float) rangeLeft;
}

if (dragListener != null) {
dragListener.onDrag(percent, isLeft);
Status lastStatus = status;
if (lastStatus != getStatus() && status == Status.Close) {
dragListener.onClose();
} else if (lastStatus != getStatus() && status == Status.OpenLeft) {
dragListener.openLeft();
} else if (lastStatus != getStatus() && status == Status.OpenRight) {
dragListener.openRight();
}
}

if (!isQQEffect) {
setBackgroundColor(evaluate(percent, 0x77777777, 0));
return;
}

float f1 = 1 - percent * 0.2f;
ViewHelper.setScaleX(flMain, f1);
ViewHelper.setScaleY(flMain, f1);

float translationX;
float ratioX = 1.8f;
if (isLeft) {
translationX = -flBackground.getWidth() / ratioX
+ flBackground.getWidth() / ratioX * percent;
} else {
translationX = flBackground.getWidth() / ratioX
- flBackground.getWidth() / ratioX * percent;
}
ViewHelper.setTranslationX(flBackground, translationX);
ViewHelper.setScaleX(flBackground, 0.5f + 0.5f * percent);
ViewHelper.setScaleY(flBackground, 0.5f + 0.5f * percent);
ViewHelper.setAlpha(flBackground, percent);
if (isShowShadow) {
ViewHelper.setScaleX(ivshadow, f1 * 1.8f * (1 - percent * 0.12f));
ViewHelper.setScaleY(ivshadow, f1 * 1.8f * (1 - percent * 0.12f));
}
setBackgroundColor(evaluate(percent, 0xDD000000, 0));

}

private static Integer evaluate(float fraction, Integer startValue,
Integer endValue) {
int startInt = 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))));
}

@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
return dragHelper.shouldInterceptTouchEvent(ev)
&& gestureDetector.onTouchEvent(ev);
}

@Override
public boolean onTouchEvent(MotionEvent e) {
try {
dragHelper.processTouchEvent(e);
} catch (Exception ex) {
ex.printStackTrace();
}
return false;
}

@Override
// 加载完成xml后，就会执行那个方法
protected void onFinishInflate() {
super.onFinishInflate();
if (isShowShadow) {
ivshadow = new ImageView(getContext());
ivshadow.setImageResource(R.drawable.shadow);
LayoutParams lp = new LayoutParams(LayoutParams.MATCH_PARENT,
LayoutParams.MATCH_PARENT);
addView(ivshadow, 1, lp);
}
flBackground = (FrameLayout) getChildAt(0);
flMain = (MyFrameLayout) getChildAt(isShowShadow ? 2 : 1);
flMain.setDragLayout(this);
flBackground.setClickable(true);
flMain.setClickable(true);
}

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
width = flBackground.getMeasuredWidth();
height = flBackground.getMeasuredHeight();
rangeLeft = (int) (width * ratioLeft);
rangeRight = -(int) (width * ratioRight);
}

@Override
public void computeScroll() {
if (dragHelper.continueSettling(true)) {
ViewCompat.postInvalidateOnAnimation(this);
}
}

public Status getStatus() {
if (shifting == 0) {
status = Status.Close;
} else if (shifting == rangeLeft) {
status = Status.OpenLeft;
} else if (shifting == rangeRight) {
status = Status.OpenRight;
} else {
status = Status.Drag;
}
return status;
}

public void openLeft() {
openLeft(true);
}

public void openLeft(boolean animate) {
if (animate) {
if (dragHelper.smoothSlideViewTo(flMain, rangeLeft, 0)) {
ViewCompat.postInvalidateOnAnimation(this);
}
} else {
flMain.layout(rangeLeft, 0, rangeLeft * 2, height);
dispatchDragEvent(rangeLeft);
}
}

public void openRight() {
openRight(true);
}

public void openRight(boolean animate) {
if (animate) {
if (dragHelper.smoothSlideViewTo(flMain, rangeRight, 0)) {
ViewCompat.postInvalidateOnAnimation(this);
}
} else {
flMain.layout(rangeRight, 0, rangeRight * 2, height);
dispatchDragEvent(rangeRight);
}
}

public void close() {
close(true);
}

public void close(boolean animate) {
if (animate) {
if (dragHelper.smoothSlideViewTo(flMain, 0, 0)) {
ViewCompat.postInvalidateOnAnimation(this);
}
} else {
flMain.layout(0, 0, width, height);
dispatchDragEvent(0);
}
}

/** 设置是否要QQ效果 */
public void setIsQQEffect(boolean isQQEffect) {
this.isQQEffect = isQQEffect;
if (!isQQEffect) {
ViewHelper.setTranslationX(flBackground, 0);
ViewHelper.setScaleX(flBackground, 1);
ViewHelper.setScaleY(flBackground, 1);
ViewHelper.setAlpha(flBackground, 1);
}
}

public boolean isQQEffect() {
return isQQEffect;
}

/** 不需要右边侧滑 */
public void setNotUsedRight() {
rangeRight = 0;
}

/** 不需要左边侧滑 */
public void setNotUsedLeft() {
rangeRight = 0;
}

public void setDragListener(DragListener dragListener) {
this.dragListener = dragListener;
}

}