[英]Pinch Zoom and Pan
I have an activity with LinearLayout as its main Layout. 我有一个将LinearLayout作为其主要布局的活动。 In that layout, there is a button that adds a View (R.layout.motor_block) to the main layout (R.id.layout): 在该布局中,有一个按钮可将视图(R.layout.motor_block)添加到主布局(R.id.layout):
LayoutInflater inflater =
(LayoutInflater)this.getSystemService( Context.LAYOUT_INFLATER_SERVICE );
View iv = inflater.inflate( R.layout.motor_block, null );
RelativeLayout rl = (RelativeLayout) findViewById(R.id.layout);
rl.addView(iv);
This works fine, but when I add more Views, the screen gets filled up with them so I need a way to "extend" the size by adding pan so I can go through all the views. 这可以正常工作,但是当我添加更多视图时,屏幕会被它们填满,因此我需要一种通过添加平移来“扩展”尺寸的方法,以便可以浏览所有视图。 I also want to add zoom. 我也想添加缩放。
I tried to use a WebView: 我尝试使用WebView:
RelativeLayout rl = (RelativeLayout) findViewById(R.id.layout);
WebView wv = (WebView) findViewById(R.id.webView1);
wv.getSettings().setSupportZoom(true);
wv.getSettings().setBuiltInZoomControls(true);
wv.getSettings().setUseWideViewPort(true);
wv.getSettings().setLoadWithOverviewMode(true);
wv.getSettings().setDisplayZoomControls(false);
wv.getSettings().setDefaultZoom(WebSettings.ZoomDensity.FAR);
wv.addView(iv);
The Views get added to it, and pan works. 视图被添加到其中,并且平移工作。 The problem is that when I zoom, the webView zooms the background, and the Views don't change size. 问题是,当我缩放时,webView会缩放背景,而View不会改变大小。
I also tried some custom views but they didn't support views with child views. 我也尝试了一些自定义视图,但是它们不支持带有子视图的视图。
What is the best way to accomplish this? 做到这一点的最佳方法是什么?
Just an example. 只是一个例子。 Use setTranslationX/Y and setScaleX/Y on the main container view. 在主容器视图上使用setTranslationX / Y和setScaleX / Y。 Its children will scale and translate with it. 它的子项将缩放并随之翻译。
public class MainActivity extends Activity {
private RelativeLayout mainLayout;
private ScaleGestureDetector scaleGestureDetector;
private float scale = 1;
private PointF touchPoint;
private PointF pan;
private boolean isScaling;
private boolean endScalingNextUp;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mainLayout = (RelativeLayout) findViewById(id.main_layout);
scaleGestureDetector = new ScaleGestureDetector(this, new ExampleScaleGestureListener());
Button b = ((Button) findViewById(id.btn_reset));
b.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
reset();
}
});
reset();
}
@Override
public boolean onTouchEvent(MotionEvent event) {
scaleGestureDetector.onTouchEvent(event);
if (scale != 1 && !isScaling) {
float x = event.getRawX();
float y = event.getRawY();
if (event.getAction() == MotionEvent.ACTION_DOWN) {
touchPoint = new PointF(x, y);
} else if (event.getAction() == MotionEvent.ACTION_MOVE && touchPoint != null) {
pan.x = x - touchPoint.x;
pan.y = y - touchPoint.y;
panView();
}
}
if (isScaling && endScalingNextUp) {
if (event.getAction() == MotionEvent.ACTION_POINTER_UP) {
endScalingNextUp = false;
isScaling = false;
}
}
return true;
}
private void setPivot(float focusX, float focusY) {
mainLayout.setPivotX(focusX);
mainLayout.setPivotY(focusY);
}
private void scaleView() {
mainLayout.setScaleX(scale);
mainLayout.setScaleY(scale);
}
private void panView() {
mainLayout.setTranslationX(pan.x);
mainLayout.setTranslationY(pan.y);
}
private void reset() {
setPivot(0, 0);
scale = 1;
scaleView();
pan = new PointF(0, 0);
panView();
isScaling = false;
}
private class ExampleScaleGestureListener implements OnScaleGestureListener {
private static final float SCALE_SPEED = .02f;
@Override
public void onScaleEnd(ScaleGestureDetector detector) {
endScalingNextUp = true;
}
@Override
public boolean onScaleBegin(ScaleGestureDetector detector) {
float focusX = detector.getFocusX();
float focusY = detector.getFocusY();
setPivot(focusX, focusY);
isScaling = true;
endScalingNextUp = false;
return true;
}
@Override
public boolean onScale(ScaleGestureDetector detector) {
isScaling = true;
endScalingNextUp = false;
if (detector.getScaleFactor() < 1) {
scale -= SCALE_SPEED;
} else if (detector.getScaleFactor() > 1) {
scale += SCALE_SPEED;
}
scaleView();
return true;
}
}
}
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:id="@+id/main_layout"
tools:context=".MainActivity" >
<TextView
android:id="@+id/tv"
android:layout_centerInParent="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hello_world" />
<ImageView
android:id="@+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@+id/tv"
android:layout_marginBottom="69dp"
android:layout_marginRight="29dp"
android:layout_toLeftOf="@+id/tv"
android:src="@drawable/ic_launcher" />
<Button
android:id="@+id/btn_reset"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/tv"
android:layout_centerHorizontal="true"
android:layout_marginTop="22dp"
android:text="Reset" />
</RelativeLayout>
The most easy way is to add all these views in a ScrollView. 最简单的方法是将所有这些视图添加到ScrollView中。 You can then add the ScrollView into a HorizontalScrollView to have scroll in both direction. 然后,您可以将ScrollView添加到HorizontalScrollView中以实现双向滚动。 Have a Gesture for pinch and zoom gestures and call listeners for them. 使用手势进行捏合和缩放手势,并为其调用侦听器。 For zoom you can increase the size of each view via running a loop or probably use ScaleGestureDetector. 对于缩放,可以通过运行循环来增加每个视图的大小,或者可以使用ScaleGestureDetector。
This method is a little choppy, but works. 这种方法有点断断续续,但是有效。 Check the following answer for more info - Implementing Pan and Zoom 检查以下答案以获取更多信息- 实现平移和缩放
Update:- 更新:-
Here're some more SO answers - 这里还有更多的答案-
How to implement zoom effect for image view in android? 如何在Android中实现图像视图的缩放效果?
android pinch zoom Android捏缩放
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.