使用手势缩放 FrameLayout
Scaling FrameLayout using gestures
我正在尝试制作两个(或更多)可移动的 TextViews 并使用双指缩放使整个集合可缩放。我有从 FrameLayout 扩展的自定义布局:
public class BublinkyLayout extends FrameLayout {
private ScaleGestureDetector mScaleDetector;
private float mScaleFactor = 1.f;
private float scale = 1;
public BublinkyLayout(Context context) {
this(context, null, 0);
}
public BublinkyLayout(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public BublinkyLayout(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
setWillNotDraw(false);
mScaleDetector = new ScaleGestureDetector(context, new ScaleListener());
}
public void setScale(float scale) {
this.scale = scale;
invalidate();
}
public float getScale() {
return this.scale;
}
@Override
protected void onDraw(Canvas canvas) {
canvas.scale(scale, scale);
super.onDraw(canvas);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
mScaleDetector.onTouchEvent(event);
final int action = MotionEventCompat.getActionMasked(event);
switch (action) {
case MotionEvent.ACTION_MOVE:
RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) this.getLayoutParams();
this.setScale(mScaleFactor);
this.setLayoutParams(layoutParams);
this.invalidate();
break;
}
return true;
}
private class ScaleListener extends ScaleGestureDetector.SimpleOnScaleGestureListener {
@Override
public boolean onScale(ScaleGestureDetector detector) {
mScaleFactor *= detector.getScaleFactor();
mScaleFactor = Math.max(0.3f, Math.min(mScaleFactor, 1.5f));
invalidate();
return true;
}
}
}
但是当我使用 'pinch-to-zoom' 并缩小时,子 TextView 没有与它们对齐的 'touch zone'(我可以触摸它们并四处移动它们的区域)。看起来布局已按比例缩放,但面积仍然相同,这意味着我无法将它们从原始盒子中取出。
这是我用来移动 TextView 的 OnTouchListener:
public class BublinkaOnTouchListener implements View.OnTouchListener {
private int _xDelta;
private int _yDelta;
@Override
public boolean onTouch(View view, MotionEvent event) {
final int X = (int) event.getRawX();
final int Y = (int) event.getRawY();
switch (event.getAction() & MotionEvent.ACTION_MASK) {
case MotionEvent.ACTION_DOWN:
FrameLayout.LayoutParams lParams = (FrameLayout.LayoutParams) view.getLayoutParams();
_xDelta = X - lParams.leftMargin;
_yDelta = Y - lParams.topMargin;
break;
case MotionEvent.ACTION_UP:
break;
case MotionEvent.ACTION_POINTER_DOWN:
break;
case MotionEvent.ACTION_POINTER_UP:
break;
case MotionEvent.ACTION_MOVE:
FrameLayout.LayoutParams layoutParams = (FrameLayout.LayoutParams) view.getLayoutParams();
layoutParams.leftMargin = X - _xDelta;
layoutParams.topMargin = Y - _yDelta;
layoutParams.rightMargin = -250;
layoutParams.bottomMargin = -250;
view.setLayoutParams(layoutParams);
view.invalidate();
break;
}
return true;
}
}
感谢您的每一个回答。
PS:英语不是我的母语,如有错误请见谅:)
找到一个 answer 大部分解决了我的问题。
这不是我的最终解决方案,但确实有助于解决这个问题。
我正在尝试制作两个(或更多)可移动的 TextViews 并使用双指缩放使整个集合可缩放。我有从 FrameLayout 扩展的自定义布局:
public class BublinkyLayout extends FrameLayout {
private ScaleGestureDetector mScaleDetector;
private float mScaleFactor = 1.f;
private float scale = 1;
public BublinkyLayout(Context context) {
this(context, null, 0);
}
public BublinkyLayout(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public BublinkyLayout(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
setWillNotDraw(false);
mScaleDetector = new ScaleGestureDetector(context, new ScaleListener());
}
public void setScale(float scale) {
this.scale = scale;
invalidate();
}
public float getScale() {
return this.scale;
}
@Override
protected void onDraw(Canvas canvas) {
canvas.scale(scale, scale);
super.onDraw(canvas);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
mScaleDetector.onTouchEvent(event);
final int action = MotionEventCompat.getActionMasked(event);
switch (action) {
case MotionEvent.ACTION_MOVE:
RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) this.getLayoutParams();
this.setScale(mScaleFactor);
this.setLayoutParams(layoutParams);
this.invalidate();
break;
}
return true;
}
private class ScaleListener extends ScaleGestureDetector.SimpleOnScaleGestureListener {
@Override
public boolean onScale(ScaleGestureDetector detector) {
mScaleFactor *= detector.getScaleFactor();
mScaleFactor = Math.max(0.3f, Math.min(mScaleFactor, 1.5f));
invalidate();
return true;
}
}
}
但是当我使用 'pinch-to-zoom' 并缩小时,子 TextView 没有与它们对齐的 'touch zone'(我可以触摸它们并四处移动它们的区域)。看起来布局已按比例缩放,但面积仍然相同,这意味着我无法将它们从原始盒子中取出。
这是我用来移动 TextView 的 OnTouchListener:
public class BublinkaOnTouchListener implements View.OnTouchListener {
private int _xDelta;
private int _yDelta;
@Override
public boolean onTouch(View view, MotionEvent event) {
final int X = (int) event.getRawX();
final int Y = (int) event.getRawY();
switch (event.getAction() & MotionEvent.ACTION_MASK) {
case MotionEvent.ACTION_DOWN:
FrameLayout.LayoutParams lParams = (FrameLayout.LayoutParams) view.getLayoutParams();
_xDelta = X - lParams.leftMargin;
_yDelta = Y - lParams.topMargin;
break;
case MotionEvent.ACTION_UP:
break;
case MotionEvent.ACTION_POINTER_DOWN:
break;
case MotionEvent.ACTION_POINTER_UP:
break;
case MotionEvent.ACTION_MOVE:
FrameLayout.LayoutParams layoutParams = (FrameLayout.LayoutParams) view.getLayoutParams();
layoutParams.leftMargin = X - _xDelta;
layoutParams.topMargin = Y - _yDelta;
layoutParams.rightMargin = -250;
layoutParams.bottomMargin = -250;
view.setLayoutParams(layoutParams);
view.invalidate();
break;
}
return true;
}
}
感谢您的每一个回答。
PS:英语不是我的母语,如有错误请见谅:)
找到一个 answer 大部分解决了我的问题。
这不是我的最终解决方案,但确实有助于解决这个问题。