模仿手机QQ底部导航栏Icon拖拽效果

本文已授权微信公众号：鸿洋（hongyangAndroid）原创首发。

之前玩手机QQ时发现下面的图标竟然可以拖拽，发现还蛮好玩的。于是自己也模仿着写了一个。
先上个效果图吧



实现的方式有很多，我说一下我的思路：我的思路比较简单，无非就是上下两层图片可拖动的范围和速度不一样呗（大图标拖动范围和速度小于小图标拖动范围和速度）。
备注（以第一个消息图标为例）：大图标指的是外面的气泡图标，小图标指的是气泡里面的眼睛和嘴巴图标。切图时将一张整体图片切成了这两个图标。具体可下载Demo参考里面的图片资源。

自定义属性

<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="QQNaviView">
<attr name="bigIconSrc" format="reference"/>
<attr name="smallIconSrc" format="reference"/>
<attr name="iconWidth" format="dimension"/>
<attr name="iconHeight" format="dimension"/>
<attr name="range" format="float"/>
</declare-styleable>
</resources>
其中range为可拖动的范围（其实是倍数），默认值是1，不宜设置过大。

主要的拖动代码

    @Override
public boolean onTouchEvent(MotionEvent event) {
float x = event.getX();
float y = event.getY();
switch (event.getAction()){
case MotionEvent.ACTION_DOWN:
lastX = x;
lastY = y;
break;
case MotionEvent.ACTION_MOVE:
float deltaX = x - lastX;
float deltaY = y - lastY;

moveEvent(mBigIcon, deltaX, deltaY, mSmallRadius);
//因为可拖动大半径是小半径的1.5倍， 因此这里x,y也相应乘1.5
moveEvent(mSmallIcon, 1.5f * deltaX, 1.5f * deltaY, mBigRadius);
break;
case MotionEvent.ACTION_UP:
//抬起时复位
mBigIcon.setX(0);
mBigIcon.setY(0);
mSmallIcon.setX(0);
mSmallIcon.setY(0);
break;
}
return super.onTouchEvent(event);
}

这里先得到X轴拖动的距离deltaX和Y轴拖动的距离deltaY，大图标对应小半径，小图标对应大半径。然后看moveEvent方法：
private void moveEvent(View view, float deltaX, float deltaY, float radius){

//先计算拖动距离
float distance = getDistance(deltaX, deltaY);

//拖动的方位角，atan2出来的角度是带正负号的
double degree = Math.atan2(deltaY, deltaX);

//如果大于临界半径就不能再往外拖了
if (distance > radius){
view.setX(view.getLeft() + (float) (radius * Math.cos(degree)));
view.setY(view.getTop() + (float) (radius * Math.sin(degree)));
}else {
view.setX(view.getLeft() + deltaX);
view.setY(view.getTop() + deltaY);
}

}方法很简单，注释结合这张图就一目了然了，主要是注意在抬起时图标复位就好了。

简单看一下初始化

由于图标下面一般会带文字，因此直接继承了LinearLayout，并且默认设置成了垂直排列。
public QQNaviView(@NonNull Context context, @Nullable AttributeSet attrs, @AttrRes int defStyleAttr) {
super(context, attrs, defStyleAttr);

mContext = context;

TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.QQNaviView, defStyleAttr, 0);
mBigIconSrc = ta.getResourceId(R.styleable.QQNaviView_bigIconSrc, R.drawable.big);
mSmallIconSrc = ta.getResourceId(R.styleable.QQNaviView_smallIconSrc, R.drawable.small);
mIconWidth = ta.getDimension(R.styleable.QQNaviView_iconWidth, dp2px(context, 60));
mIconHeight = ta.getDimension(R.styleable.QQNaviView_iconHeight, dp2px(context, 60));
mRange = ta.getFloat(R.styleable.QQNaviView_range, 1);
ta.recycle();

//默认垂直排列
setOrientation(LinearLayout.VERTICAL);

init(context);
}

在init方法中进行了布局文件的绑定，并且让该view水平居中。
private void init(Context context) {
mView = inflate(context, R.layout.view_icon, null);
mBigIcon = (ImageView) mView.findViewById(R.id.iv_big);
mSmallIcon = (ImageView) mView.findViewById(R.id.iv_small);

mBigIcon.setImageResource(mBigIconSrc);
mSmallIcon.setImageResource(mSmallIconSrc);

setWidthAndHeight(mBigIcon);
setWidthAndHeight(mSmallIcon);

LayoutParams lp = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
lp.gravity = Gravity.CENTER_HORIZONTAL;
mView.setLayoutParams(lp);
addView(mView);
}这里值得注意的是onMeasure方法。由于图标可以往外拖动，所以要给ImageView一个默认的padding，不然拖动时最外面部分会消失。    @Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        setupView();

        final int w = resolveSize(getMeasuredWidth(), widthMeasureSpec);
        final int h = resolveSize(getMeasuredHeight(), heightMeasureSpec);

        setMeasuredDimension(w, h);
}

/**
* 确定view以及拖动相关参数
*/
private void setupView() {

//根据view的宽高确定可拖动半径的大小，这里要用getMeasuredWidth和getMeasuredHeight
mSmallRadius = 0.1f * Math.min(mView.getMeasuredWidth(), mView.getMeasuredHeight()) * mRange;
mBigRadius = 1.5f * mSmallRadius;

//设置imageview的padding，不然拖动时图片边缘部分会消失
int padding = (int) mBigRadius;
mBigIcon.setPadding(padding, padding, padding, padding);
mSmallIcon.setPadding(padding, padding, padding, padding);
}然后就没啥好说了，直接看源码吧。

源码：public class QQNaviView extends LinearLayout {

private static final String TAG = "QQNaviView";

private Context mContext;

/* 主view */
private View mView;

/* 外层icon/拖动幅度较小icon */
private ImageView mBigIcon;

/* 里层icon/拖动幅度较大icon */
private ImageView mSmallIcon;

/* 外层icon资源 */
private int mBigIconSrc;

/* 里面icon资源 */
private int mSmallIconSrc;

/* icon宽度 */
private float mIconWidth;

/* icon高度 */
private float mIconHeight;

/* 拖动幅度较大半径 */
private float mBigRadius;

/* 拖动幅度小半径 */
private float mSmallRadius;

/* 拖动范围 可调 */
private float mRange;

private float lastX;

private float lastY;

public QQNaviView(@NonNull Context context) {
this(context, null);
}

public QQNaviView(@NonNull Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}

public QQNaviView(@NonNull Context context, @Nullable AttributeSet attrs, @AttrRes int defStyleAttr) {
super(context, attrs, defStyleAttr);

mContext = context;

TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.QQNaviView, defStyleAttr, 0);
mBigIconSrc = ta.getResourceId(R.styleable.QQNaviView_bigIconSrc, R.drawable.big);
mSmallIconSrc = ta.getResourceId(R.styleable.QQNaviView_smallIconSrc, R.drawable.small);
mIconWidth = ta.getDimension(R.styleable.QQNaviView_iconWidth, dp2px(context, 60));
mIconHeight = ta.getDimension(R.styleable.QQNaviView_iconHeight, dp2px(context, 60));
mRange = ta.getFloat(R.styleable.QQNaviView_range, 1);
ta.recycle();

//默认垂直排列
setOrientation(LinearLayout.VERTICAL);

init(context);
}

private void init(Context context) {
mView = inflate(context, R.layout.view_icon, null);
mBigIcon = (ImageView) mView.findViewById(R.id.iv_big);
mSmallIcon = (ImageView) mView.findViewById(R.id.iv_small);

mBigIcon.setImageResource(mBigIconSrc);
mSmallIcon.setImageResource(mSmallIconSrc);

setWidthAndHeight(mBigIcon);
setWidthAndHeight(mSmallIcon);

LayoutParams lp = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
lp.gravity = Gravity.CENTER_HORIZONTAL;
mView.setLayoutParams(lp);
addView(mView);
}

/**
* 设置icon宽高
* @param view
*/
private void setWidthAndHei
ba2d
ght(View view){
FrameLayout.LayoutParams lp = (FrameLayout.LayoutParams) view.getLayoutParams();
lp.width = (int) mIconWidth;
lp.height = (int) mIconHeight;
view.setLayoutParams(lp);
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);

setupView();

final int w = resolveSize(getMeasuredWidth(), widthMeasureSpec);
final int h = resolveSize(getMeasuredHeight(), heightMeasureSpec);

setMeasuredDimension(w, h);
}

/**
* 确定view以及拖动相关参数
*/
private void setupView() {
//根据view的宽高确定可拖动半径的大小
mSmallRadius = 0.1f * Math.min(mView.getMeasuredWidth(), mView.getMeasuredHeight()) * mRange;
mBigRadius = 1.5f * mSmallRadius;
//设置imageview的padding，不然拖动时图片边缘部分会消失
int padding = (int) mBigRadius;
mBigIcon.setPadding(padding, padding, padding, padding);
mSmallIcon.setPadding(padding, padding, padding, padding);
}

@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
int childLeft;
int childTop = 0;
for (int i = 0; i < getChildCount(); i ++){
final View child = getChildAt(i);
LayoutParams lp = (LayoutParams) child.getLayoutParams();
if (child.getVisibility() != GONE){
final int childWidth = child.getMeasuredWidth();
final int childHeight = child.getMeasuredHeight();
//水平居中显示
childLeft = (getWidth() - childWidth) / 2;
//当前子view的top
childTop += lp.topMargin;
child.layout(childLeft, childTop, childLeft + childWidth, childTop + childHeight);
//下一个view的top是当前子view的top + height + bottomMargin
childTop += childHeight + lp.bottomMargin;
}
}
}

@Override
public boolean onTouchEvent(MotionEvent event) {
float x = event.getX();
float y = event.getY();
switch (event.getAction()){
case MotionEvent.ACTION_DOWN:
lastX = x;
lastY = y;
break;
case MotionEvent.ACTION_MOVE:
float deltaX = x - lastX;
float deltaY = y - lastY;

moveEvent(mBigIcon, deltaX, deltaY, mSmallRadius);
//因为可拖动大半径是小半径的1.5倍， 因此这里x,y也相应乘1.5
moveEvent(mSmallIcon, 1.5f * deltaX, 1.5f * deltaY, mBigRadius);
break;
case MotionEvent.ACTION_UP:
//抬起时复位
mBigIcon.setX(0);
mBigIcon.setY(0);
mSmallIcon.setX(0);
mSmallIcon.setY(0);
break;
}
return super.onTouchEvent(event);
}

/**
* 拖动事件
* @param view
* @param deltaX
* @param deltaY
* @param radius
*/
private void moveEvent(View view, float deltaX, float deltaY, float radius){

//先计算拖动距离
float distance = getDistance(deltaX, deltaY);

//拖动的方位角，atan2出来的角度是带正负号的
double degree = Math.atan2(deltaY, deltaX);

//如果大于临界半径就不能再往外拖了
if (distance > radius){
view.setX(view.getLeft() + (float) (radius * Math.cos(degree)));
view.setY(view.getTop() + (float) (radius * Math.sin(degree)));
}else {
view.setX(view.getLeft() + deltaX);
view.setY(view.getTop() + deltaY);
}

}

private int dp2px(Context context, float dpVal) {
return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
dpVal, context.getResources().getDisplayMetrics());
}

private float getDistance(float x, float y){
return (float) Math.sqrt(x * x + y * y);
}

public void setBigIcon(int res){
mBigIcon.setImageResource(res);
}

public void setSmallIcon(int res){
mSmallIcon.setImageResource(res);
}

public void setIconWidthAndHeight(float width, float height){
mIconWidth = dp2px(mContext, width);
mIconHeight = dp2px(mContext, height);
setWidthAndHeight(mBigIcon);
setWidthAndHeight(mSmallIcon);
}

public void setRange(float range){
mRange = range;
}

}

PS：一些手机上没有效果应该是setupView()方法中之前用的是mView.getWidth()和mView.getMeasuredHeight()，应该改为mView.getMeasuredWidth和mView.getMeasuredHeight()，感谢gitkanglei的指出。关于两者的区别可参考：http://blog.csdn.net/dmk877/article/details/49734869/

属性	说明
bigIconSrc	大图标资源
smallIconSrc	小图标资源
iconWidth	图标宽度
iconHeight	图标高度
range	可拖动范围

如果有其他的实现方式，或者代码中有什么不合理的地方，欢迎交流~
源码地址：https://github.com/XingdongYu/QQNaviView 欢迎star，rua~