一、项目概要
1.1 项目效果如图：
1.2 需要使用到的技术
ViewDragHelper: 要实现和QQ5.0侧滑的特效，需要借助谷歌在2013年I/O大会上发布的ViewDragHelper类，提供这个类目的就是为了解决拖拽滑动问题
1.3 侧滑菜单的实现方式
1. SlidingMenu 第三方库
2. DrawerLayout v4包中的类
3. 自定义控件
1.4 一些回调方法
- tryCaptureView： 用来决定是否可以拖动
- clampViewPositionHorizontal: 用来设置子控件将要显示的位置 [限制子控件拖动的范围]
- getViewHorizontalDragRange：返回水平方向拖动的最大范围,返回大于0的值才可以拖动
- onViewPositionChanged： 位置改变时调用 [关联菜单与主界面的滑动，监听拖动状态，伴随动画]
- onViewReleased: 拖动结束后，松开手时调用 [平滑地打开或关闭侧滑菜单]
二、项目实现
2.1 创建DragLayout
public class DragLayout extends FrameLayout {
public DragLayout(Context context) {
super(context);
}
public DragLayout(Context context, AttributeSet attrs) {
super(context, attrs);
}
}2.2 创建侧滑面板布局
<com.xiaowu.draglayout.view.DragLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/drag_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/bg" > <!-- 侧滑菜单布局 --> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:background="#33ff0000" /> <!-- 主界面布局 --> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:background="#3300ff00" /> </com.xiaowu.draglayout.view.DragLayout>
2.3 DragLayout的主程序代码，下面代码中有详细的讲解，我就不多分步骤实现了
package com.xiaowu.draglayout.view;
import android.content.Context;
import android.graphics.Color;
import android.graphics.PorterDuff;
import android.graphics.drawable.Drawable;
import android.support.v4.view.ViewCompat;
import android.support.v4.widget.ViewDragHelper;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.widget.FrameLayout;
/**
* Created by ${VINCENT} on 2016/11/8.
*/
public class DragLayout extends FrameLayout {
private ViewDragHelper mViewDragHelper;
private View mMenuView;
private View mMainView;
private int mRange;
private int mWidth;
private int mHeight;
public DragLayout(Context context) {
super(context);
init();
}
public DragLayout(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
/** 填充完成后调用此方法 */
@Override
protected void onFinishInflate() {
super.onFinishInflate();
// 健壮性判断
if (getChildCount() < 2) {
throw new IllegalStateException("DrawLayout至少要有两个子控件");
}
mMenuView = getChildAt(0);
mMainView = getChildAt(1);
}
// step1：创建ViewDragHelper对象
private void init() {
float sensitivity = 1.0f; //值越大，灵敏度越高
mViewDragHelper = ViewDragHelper.create(this, sensitivity, mCallBack);
}
// step2：由ViewDragHelper决定是否拦截事件
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
return mViewDragHelper.shouldInterceptTouchEvent(ev);
}
// step3：把触摸事件交给ViewDragHelper处理
@Override
public boolean onTouchEvent(MotionEvent event) {
mViewDragHelper.processTouchEvent(event);
return true; //让mViewDragHelper持续接收到触摸事件
}
// step4：处理ViewDragHelper的Callback方法
ViewDragHelper.Callback mCallBack = new ViewDragHelper.Callback() {
// (1)捕获子控件，返回true表示子控件可以拖动
@Override
public boolean tryCaptureView(View child, int pointerId) {
return true;
}
// (2)子控件显示的方向(horizontal, vertical)
// left: 被拖动控件的将要显示的位置
// dx: 位置的偏移量 = left - 当前的left
@Override
public int clampViewPositionHorizontal(View child, int left, int dx) {
if (child == mMainView) {
left = reviseLeft(left);
}
return left;
}
// (3)返回水平方向拖动的最大范围mRange,内部会根据返回值计算动画执行的时间
@Override
public int getViewHorizontalDragRange(View child) {
return mRange;
}
// (4)位置发生改变的回调
@Override
public void onViewPositionChanged(View changedView, int left, int top, int dx, int dy) {
// (a) 关联子控件的滑动
if (changedView == mMenuView) {
// 侧拉菜单界面不变时
mMenuView.layout(0, 0, mWidth, mHeight);
// 主菜单界面的新位置
int newLeft = mMenuView.getLeft() + dx;
newLeft = reviseLeft(newLeft);
mMainView.layout(newLeft, 0, mWidth + newLeft, mHeight);
}
// (b) 事件的监听(打开，拖动，关闭)
listenDragStatus();
// (c) 事件伴随的动画
animateChildren();
}
// (5) 拖动结束时回调的方法
// xvel:释放时的回调速度，在这里向右为正
@Override
public void onViewReleased(View releasedChild, float xvel, float yvel) {
if (xvel > 0) {
open();
} else if (xvel == 0 && mMainView.getLeft() > mRange / 2) {
open();
} else {
close();
}
}
};
//============================动画的定义=====================================
/** 估值器：变化值 = 开始值 + (结束值 - 开始值) * 百分比 */
public float evaluate(float start, float end, float percent) {
return start + (end - start) * percent;
}
protected void animateChildren() {
float percent = ((float) mMainView.getLeft()) / mRange;
// 1.主界面的缩放
mMainView.setScaleX(evaluate(1f, 0.8f, percent));
mMainView.setScaleY(evaluate(1f, 0.8f, percent));
// 2.侧拉菜单的缩放
mMenuView.setTranslationX((int) evaluate(-mRange, 0, percent)); // 平移
mMenuView.setScaleX(evaluate(0.5f, 1.0f, percent));
mMenuView.setScaleY(evaluate(0.5f, 1.0f, percent));
mMenuView.setAlpha(evaluate(0.5f, 1.0f, percent));
// 3.背景图片：亮度的变化
Drawable background = getBackground();
if (background != null) {
// 过渡的颜色
int color = (int)evaluate2(percent, Color.BLACK, Color.TRANSPARENT);
background.setColorFilter(color, PorterDuff.Mode.SRC_OVER);
}
}
/** 处理颜色渐变的兼容性问题 */
public Object evaluate2(float fraction, Object startValue, Object endValue) {
int startInt = (Integer) 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 ((startA + (int)(fraction * (endA - startA))) << 24) |
((startR + (int)(fraction * (endR - startR))) << 16) |
((startG + (int)(fraction * (endG - startG))) << 8) |
((startB + (int)(fraction * (endB - startB))));
}
//============================状态的监听begin================================
/** 事件的监听 */
protected void listenDragStatus() {
int left = mMainView.getLeft();
if (left == 0) {
mCurrentStatus = DragStatus.CLOSE;
} else if (left == mRange) {
mCurrentStatus = DragStatus.OPEN;
} else {
mCurrentStatus = DragStatus.DRAGGING;
}
//当事件发生时，调用监听器中的方法
if (mOnDragListener != null) {
if (mCurrentStatus == DragStatus.OPEN) {
mOnDragListener.onOpen();
} else if (mCurrentStatus == DragStatus.CLOSE) {
mOnDragListener.onClose();
} else {
float percent = ((float) mMainView.getLeft()) / mRange;
mOnDragListener.onDragging(percent);
}
}
}
/** 状态的定义 */
public enum DragStatus {
OPEN, CLOSE, DRAGGING
}
/** 当前的状态 */
private DragStatus mCurrentStatus = DragStatus.CLOSE;
public DragStatus getCurrentStatus() {
return mCurrentStatus;
}
/** 定义接口 */
public interface OnDragListener {
void onOpen();
void onClose();
void onDragging(float percent);
}
private OnDragListener mOnDragListener;
/** 提供设置监听器的set方法 */
public void setOnDragListener(OnDragListener onDragListener) {
this.mOnDragListener = onDragListener;
}
//============================状态的监听end================================
@Override
public void computeScroll() {
super.computeScroll();
// 若如果没有移动到正确的位置，需要刷新
if (mViewDragHelper.continueSettling(true)) {
ViewCompat.postInvalidateOnAnimation(this);
}
}
/** 限定主界面的滑动范围 */
protected int reviseLeft(int left) {
if (left < 0) {
left = 0;
} else if (left > mRange) {
left = mRange;
}
return left;
}
/** 控件尺寸发生改变时，回调该方法 */
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
// 获取DrawLayout的宽高
mWidth = getMeasuredWidth();
mHeight = getMeasuredHeight();
// 拖拽的比例
mRange = (int) (mWidth * 0.6f);
}
/** 打开侧拉菜单 */
protected void open() {
mViewDragHelper.smoothSlideViewTo(mMainView, mRange, 0);
// 刷新界面
ViewCompat.postInvalidateOnAnimation(this);
}
/** 关闭侧拉菜单 */
protected void close() {
mViewDragHelper.smoothSlideViewTo(mMainView, 0, 0);
// 刷新界面
ViewCompat.postInvalidateOnAnimation(this);
}
/** 侧滑菜单是否打开 */
public boolean isOpen() {
return mCurrentStatus == DragStatus.OPEN;
}
}2.4 创建MyLinearLayout.java文件，处理侧拉与主菜单的冲突事件
package com.xiaowu.draglayout.view;
import android.content.Context;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.widget.LinearLayout;
/**
* Created by ${VINCENT} on 2016/11/9.
*/
public class MyLinearLayout extends LinearLayout {
private DragLayout mDragLayout;
public MyLinearLayout(Context context) {
super(context);
}
public MyLinearLayout(Context context, AttributeSet attrs) {
super(context, attrs);
}
/** 根据它的打开状态决定是否要拦截事件 */
public void setDragLayout(DragLayout dragLayout) {
this.mDragLayout = dragLayout;
}
/** 如果侧滑菜单打开了，禁止主菜单的列表滑动 */
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
if (mDragLayout.isOpen()) {
return true;
}
return super.onInterceptTouchEvent(ev);
}
/** 如果侧滑菜单打开了，消费主菜单的触摸事件，禁止通过滑动主菜单使侧拉菜单的列表滑动 */
@Override
public boolean onTouchEvent(MotionEvent event) {
if (mDragLayout.isOpen()) {
return true;
}
return super.onTouchEvent(event);
}
} 2.5 接下来是MainActivity的代码实现
package com.xiaowu.draglayout;
import android.graphics.Color;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.TextView;
import android.widget.Toast;
import com.xiaowu.draglayout.view.DragLayout;
import com.xiaowu.draglayout.view.MyLinearLayout;
public class MainActivity extends AppCompatActivity {
private ImageView mIvHeader;
private MyLinearLayout mMyLinearLayout;
private DragLayout mDragLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
mIvHeader = (ImageView) findViewById(R.id.iv_header);
initDragLayout();
mMyLinearLayout = (MyLinearLayout) findViewById(R.id.my_ll);
// 根据打开的状态决定是否拦截事件
mMyLinearLayout.setDragLayout(mDragLayout);
initListView();
}
private void initListView() {
ListView lvMenu = (ListView) findViewById(R.id.lv_menu);
ListView lvMain = (ListView) findViewById(R.id.lv_main);
lvMenu.setAdapter(new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1,
Constant.MENUS){
@Override
public View getView(int position, View convertView, ViewGroup parent) {
TextView view = (TextView) super.getView(position, convertView, parent);
view.setTextSize(dp2px(16));
view.setTextColor(Color.WHITE);
return view;
}
});
lvMain.setAdapter(new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1,
Constant.LIST_DATAS));
}
private void initDragLayout() {
mDragLayout = (DragLayout) findViewById(R.id.drag_layout);
mDragLayout.setOnDragListener(new DragLayout.OnDragListener() {
@Override
public void onOpen() {
showToast("打开");
}
@Override
public void onClose() {
showToast("关闭");
}
@Override
public void onDragging(float percent) {
mIvHeader.setAlpha(1 - percent );
}
});
}
/** toast使用单例模式，可以随状态刷新 */
private Toast mToast;
public void showToast(String msg) {
if (mToast == null) {
mToast = Toast.makeText(this, msg, Toast.LENGTH_LONG);
}
mToast.setText(msg);
mToast.show();
}
public int dp2px(int dp) {
float density = this.getResources().getDisplayMetrics().density;
return (int) (dp * density + 0.5f);
}
}2.6 布局文件的最终完善
<com.xiaowu.draglayout.view.DragLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/drag_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/bg"> <!-- 侧拉菜单界面 --> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:gravity="center_vertical" android:padding="15dp" > <ImageView android:layout_width="40dp" android:layout_height="40dp" android:background="@drawable/head"/> <ListView android:id="@+id/lv_menu" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginTop="10dp" /> </LinearLayout> <!-- 主菜单界面 --> <com.xiaowu.draglayout.view.MyLinearLayout android:id="@+id/my_ll" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:gravity="center" android:background="#fff"> <RelativeLayout android:layout_width="match_parent" android:layout_height="45dp" android:background="#18B4ED" > <ImageView android:id="@+id/iv_header" android:layout_width="40dp" android:layout_height="40dp" android:layout_centerVertical="true" android:layout_marginLeft="10dp" android:background="@drawable/head" /> </RelativeLayout> <ListView android:id="@+id/lv_main" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="1" /> </com.xiaowu.draglayout.view.MyLinearLayout> </com.xiaowu.draglayout.view.DragLayout>
2.7 Constant静态类可以自己定义，不过我还是善良的贴了出来
package com.xiaowu.draglayout;
public class Constant {
/** 菜单列表数据 */
public static final String[] MENUS = new String[] {
"纸杯蛋糕[Cupcake]",
"甜甜圈[Donut]",
"闪电泡芙[Eclair]",
"冻酸奶[Froyo]",
"姜饼[Gingerbread]",
"蜂巢[Honeycomb]",
"冰淇淋三明治[Ice Cream Sandwich]",
"果冻豆[Jelly Bean]",
"奇巧[KitKat]",
"棒棒糖[Lollipop]",
"姜饼[Gingerbread]",
"蜂巢[Honeycomb]",
"冰淇淋三明治[Ice Cream Sandwich]",
"果冻豆[Jelly Bean]",
"奇巧[KitKat]",
"棒棒糖[Lollipop]",
"棉花糖[Marshmallow]"
};
/** 列表数据1 */
public static final String[] LIST_DATAS = {
"API1--1.0 [没有开发代号]",
"API2--1.1 Petit Four",
"API3--1.5 Cupcake",
"API4--1.6 Donut",
"API5--2.0 Eclair",
"API6--2.0.1 Eclair",
"API7--2.1 Eclair",
"API8--2.2 - 2.2.3 Froyo",
"API9--2.3 - 2.3.2 Gingerbread",
"API10--2.3.3-2.3.7 Gingerbread",
"API11--3.0 Honeycomb",
"API12--3.1 Honeycomb",
"API13--3.2 Honeycomb",
"API14--4.0 - 4.0.2 Ice Cream Sandwich",
"API15--4.0.3 - 4.0.4 Ice Cream Sandwich",
"API16--4.1 Jelly Bean",
"API17--4.2 Jelly Bean",
"API18--4.3 Jelly Bean",
"API19--4.4 KitKat",
"API20--4.4W",
"API21--5.0 Lollipop",
"API22--5.1 Lollipop",
"API23--6.0 Marshmallow"
};
}三、一些可以借鉴的东西
*比如使用Toast的时候可以采用单例模式，使得Toast可以随时改变，而不会产生停顿延迟的问题（顶部效果图）
/** toast使用单例模式，可以随状态刷新 */
private Toast mToast;
public void showToast(String msg) {
if (mToast == null) {
mToast = Toast.makeText(this, msg, Toast.LENGTH_LONG);
}
mToast.setText(msg);
mToast.show();
}四、提供给博友我的源代码
**下载链接：
http://pan.baidu.com/s/1o8k4cZo 密码：m0fl