可拖拽的悬浮控件是个比较常见的很简单的效果,主要知识点:
1.View的简单自定义,onDraw的重写等
2.View事件的简单应用
我们在这个可拖拽的View上加个黄色的线,简单操作下这个View的样子,另外,给这个拖拽View加上偏左吸左偏右吸右的效果。下面直接上代码:
public class CustomView extends android.support.v7.widget.AppCompatTextView {
private Paint paint;//画笔
private int lastX;//记录上一个X坐标
private int lastY;//记录上一个Y坐标
public CustomView(Context context) {
super(context);
initDraw();
}
public CustomView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
initDraw();
}
public CustomView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initDraw();
}
@Override
public boolean onTouchEvent(MotionEvent event) {
int x = (int) event.getX();
int y = (int) event.getY();
int rawX = (int) event.getRawX();
int rawY = (int) event.getRawY();
int offsetX = x - lastX;
int offsetY = y - lastY;
ViewGroup mViewGroup = (ViewGroup) getParent();
//取组件父集的宽高
int pWidth = mViewGroup.getWidth();
int pHeight = mViewGroup.getHeight();
//设置上下左右的坐标临界值
int left = getLeft() + offsetX;
left = left <= 0 ? 0 : left;
int top = getTop() + offsetY;
top = top <= 0 ? 0 : top;
int right = getRight() + offsetX;
right = right >= pWidth ? pWidth : right;
int bottom = getBottom() + offsetY;
bottom = bottom >= pHeight ? pHeight : bottom;
//设置上下左右的坐标为临界值时相关变量的值
if(top==0){
bottom =getHeight();
}
if(left==0){
right=getWidth();
}
if(right==pWidth){
left=pWidth-getWidth();
}
if(bottom==pHeight){
top=pHeight-getHeight();
}
//判断时间种类
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
lastX = x;
lastY = y;
break;
case MotionEvent.ACTION_MOVE:
layout(left, top, right, bottom);//移动式更新布局
break;
case MotionEvent.ACTION_UP:
//松开手时根据组件中间的位置,判断吸左吸右
if (rawX <= pWidth / 2) {
layout(0, top, getWidth(), bottom);
} else {
layout(pWidth - getWidth(), top, pWidth, bottom);
}
break;
}
return true;
}
/**
* 初始化画笔
* */
private void initDraw() {
paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setColor(Color.YELLOW);
paint.setStrokeWidth(1.5f);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int width = getWidth();
int height = getHeight();
//画布划线
canvas.drawLine(0, height / 2, width, height / 2, paint);
}
}
ok,把这个组件直接在布局中展示就行了,很简单。
demo git地址