本文已授权微信公众号：鸿洋（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 setWidthAndHeight(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;
}
}
| name | format | description |
|---|---|---|
| bigIconSrc | reference | 大图标资源 |
| smallIconSrc | reference | 小图标资源 |
| iconWidth | dimension | 图标宽度 |
| iconHeight | dimension | 图标高度 |
| range | float | 可拖动范围 |
PS：一些手机上没有效果应该是setupView()方法中之前用的是mView.getWidth()和mView.getMeasuredHeight()，应该改为mView.getMeasuredWidth和mView.getMeasuredHeight()，感谢gitkanglei的指出。关于两者的区别可参考：
http://blog.csdn.net/dmk877/article/details/49734869/
| name | format | description |
|---|---|---|
| bigIconSrc | reference | 大图标资源 |
| smallIconSrc | reference | 小图标资源 |
| iconWidth | dimension | 图标宽度 |
| iconHeight | dimension | 图标高度 |
| range | float | 可拖动范围 |
如果有其他的实现方式，或者代码中有什么不合理的地方，欢迎交流~
源码地址：https://github.com/XingdongYu/QQNaviView欢迎star，rua~
