w00d3nl3g w00d3nl3g - 17 days ago 6
Android Question

Scaling FrameLayout using gestures

I am trying to make two(or more) movable TextViews and make the whole set scalable using pinch-to-zoom. I have custom layout extending from 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;
}
}
}


But when I use the 'pinch-to-zoom' and zoom out, the child TextViews don't have the 'touch zone' (the zone where I can touch them and move them around) alligned with them. It looks like the layout is scaled, but the area is still the same, meaning I cant get them out of the original box.

Here is OnTouchListener I use to move the TextViews around:

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;
}
}


Thanks for every answer.

PS: English is not my native language so sorry for mistakes :)

Answer

Found an answer that mostly solves my issue.

It is not my final solution but it really helps solve this problem.