[Android实例] 仿Win8磁铁效果，能够拖动改变Merto位置

该篇文章从eoeAndroid搬迁过来的，原文地址：[Android实例] 仿Win8磁铁效果，能够拖动改变Merto位置

最近公司一个同事让我做一个仿win8的效果，希望能够在固定的界面布局下进行拖动改变各个模块的位置，同时根据菜单内容数量不同展示相对应的Merto数量，就这样，我做了个Demo，可能有些粗糙，但是初步的功能都满足了，现在就把它贡献给大家，代码中不太规范的地方敬请见谅

由于有不同的模块，每个模块展示出图标和文字内容，所以我自定义一个MertoItemView进行绘制图标和文字

主要的绘制代码为：

@SuppressLint("DrawAllocation")
@Override
protected void onDraw(Canvas canvas) {
// TODO Auto-generated method stub
super.onDraw(canvas);
int width = getWidth();
int height = getHeight();
TextPaint textPaint = new TextPaint();
textPaint.setColor(textColor);
textPaint.setTextSize(textSize);
textPaint.setTypeface(Typeface.DEFAULT_BOLD);
textPaint.setAntiAlias(true);
StaticLayout layout = null;
layout = new StaticLayout(text, textPaint, width - 10,
Alignment.ALIGN_CENTER, 1.0F, 0.0F, true);
if (icon != null) {
Paint paint = new Paint();
float iconWidth = 0;
float iconHeight = 0;
if (width > height - layout.getHeight()) {
iconHeight = (height - layout.getHeight() - 5) / 2;
iconWidth = iconHeight;
} else {
iconWidth = width / 2;
iconHeight = iconWidth;
}
float iconX = (width - iconWidth) / 2;
float iconY = (height - layout.getHeight() - iconHeight) / 2;
Rect iconRect = new Rect((int) iconX, (int) iconY,
(int) (iconX + iconWidth), (int) (iconY + iconHeight));
canvas.translate(0, 0);
canvas.drawBitmap(((BitmapDrawable) icon).getBitmap(), null,
iconRect, paint);
paint.reset();
}
canvas.translate((width - layout.getWidth()) / 2,
height - layout.getHeight() - 10);
layout.draw(canvas);
textPaint.reset();
}

自定义监听事件：

public interface OnMertoItemViewListener {

public void onClick(MertoItemView v);

public boolean onMove(MertoItemView v, MotionEvent e1, MotionEvent e2);

public void onLongClick(MertoItemView v);

public void onUp(MertoItemView v);

}

在activity中，我做的拖动原理是，底层的布局为FrameLayout，将固定的13个MertoItemView列举在FrameLayout布局中，当点击某个MertoItemView时，将该MertoItemView隐藏，然后new一个MertoItemView放入到FrameLayout中的相同位置上，然后计算拖动的坐标位置进行移动新new的MertoItemView，在代码中进行计算当前拖动到的位置，将当前为的MertoItemView内容赋值给点击的那个MertoItemView，然后隐藏当前的MertoItemView，显示点击的那个MertoItemView，具体的不太好描述，在这里把主要的代码粘贴出来：

private OnMertoItemViewListener onMertoItemViewListener = new OnMertoItemViewListener() {

@Override
public void onClick(MertoItemView v) {
// TODO Auto-generated method stub
Toast.makeText(MertoActivity.this,
mertoBeans.get((Integer) v.getTag()).getName(),
Toast.LENGTH_SHORT).show();
}

@Override
public boolean onMove(MertoItemView v, MotionEvent e1, MotionEvent e2) {
// TODO Auto-generated method stub
if (!isMove) {
return false;
}
int[] moveLocation = new int[2];
v.getLocationOnScreen(moveLocation);
if (moveView == null) {
tag = (Integer) v.getTag();
startBeans = new ArrayList<MertoBean>(mertoBeans);
moveView = new MertoItemView(MertoActivity.this);
moveView.setIcon(v.getIcon());
moveView.setText(v.getText());
moveView.setTextColor(v.getTextColor());
moveView.setTextSize(v.getTextSize());
FrameLayout.LayoutParams moveParams = new FrameLayout.LayoutParams(
v.getWidth(), v.getHeight());
moveParams.setMargins((int) (e1.getRawX() - e1.getX()),
(int) (e1.getRawY() - e1.getY()), 0, 0);
moveParams.gravity = Gravity.TOP | Gravity.LEFT;
moveView.setLayoutParams(moveParams);
moveView.setBackgroundDrawable(v.getBackground());
mertoContent.addView(moveView);
moveView.getBackground().setAlpha(200);
}
setParams(
(int) (e1.getRawX() - e1.getX() + e2.getRawX() - e1
.getRawX()),
(int) (e1.getRawY() - e1.getY() + e2.getRawY() - e1
.getRawY()) - addBt.getHeight() - 40);
changeData((int) e2.getRawX(), (int) e2.getRawY());
return true;
}

@Override
public void onLongClick(MertoItemView v) {
// TODO Auto-generated method stub
vibrator.vibrate(100);
isMove = true;
}

@Override
public void onUp(MertoItemView v) {
// TODO Auto-generated method stub
v.setVisibility(View.VISIBLE);
if (isMove) {
mertoContent.removeView(moveView);
moveView = null;
positionView.setVisibility(View.VISIBLE);
tag = -1;
moveTag = -1;
setView();
isMove = false;
}
}
};

private void setParams(int left, int top) {
FrameLayout.LayoutParams moveParams = (LayoutParams) moveView
.getLayoutParams();
moveParams.setMargins(left, top, 0, 0);
moveView.setLayoutParams(moveParams);
}

private void changeData(int x, int y) {
if (positionView != null) {
positionView.setVisibility(View.VISIBLE);
}
changeTag(x, y);
if (tag != -1 && moveTag != -1) {
mertoBeans = new ArrayList<MertoBean>(startBeans);
if (mertoBeans.size() < 5) {
MertoBean mertoBean = new MertoBean(mertoBeans.get(tag));
mertoBeans.set(tag, mertoBeans.get(moveTag));
mertoBeans.set(moveTag, mertoBean);
} else {
MertoBean mertoBean = new MertoBean(mertoBeans.get(tag - 1));
mertoBeans.set(tag - 1, mertoBeans.get(moveTag - 1));
mertoBeans.set(moveTag - 1, mertoBean);
}
setView();
positionView.setVisibility(View.INVISIBLE);
}
}

private void changeTag(int x, int y) {
moveTag = -1;
for (int i = 0; i < mertoItemViews.size(); i++) {
int[] location = new int[2];
mertoItemViews.get(i).getLocationOnScreen(location);
if (x > location[0]
&& x < location[0] + mertoItemViews.get(i).getWidth()
&& y > location[1]
&& y < location[1] + mertoItemViews.get(i).getHeight()
&& mertoItemViews.get(i).getVisibility() == View.VISIBLE) {
moveTag = i;
positionView = mertoItemViews.get(i);
return;
} else {
moveTag = tag;
positionView = mertoItemViews.get(tag);
}
}
}

还有一点代码就不在这儿一一粘贴上去了，至此，奉上gif图片和Demo



下载地址：项目代码