Question:
It seems to me that it is necessary to implement a rather simple task, but I have not been able to find a solution that would suit me for several days. The bottom line is this. There are 4 pictures to be scrolled together. The main picture (in the lower right corner) should scroll in all directions (x, y and diagonally). The picture above it should scroll horizontally along with it. The picture to the left of it – along with it vertically. Well, the picture in the upper left is just a picture that shouldn't scroll. Below are 2 solutions that I considered, but could not implement them in a way that would suit me. Option 1
Place ImageView in ScrollView and bind their movement in setOnTouchListener:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
//просто картинка
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/imageView8"
android:src="@drawable/corner8509"
android:contentDescription="@string/ugolokravn1" />
<ScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/scrollVertical2"
android:layout_below="@+id/imageView8"
android:scrollbars="none"
android:fadingEdge="none">
//картинка слева
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/imageView7"
android:src="@drawable/left8509"
android:contentDescription="@string/ugolokravn2" />
</ScrollView>
<HorizontalScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/scrollHorizontal2"
android:layout_alignParentTop="true"
android:layout_toRightOf="@+id/imageView8"
android:layout_toEndOf="@+id/imageView8"
android:scrollbars="none"
android:fadingEdge="none">
//картинка сверху
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/imageView6"
android:src="@drawable/top8509"
android:contentDescription="@string/ugolokravn3" />
</HorizontalScrollView>
<com.pavel.sortament.VScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id = "@+id/scrollVertical1"
android:layout_below="@+id/scrollHorizontal2"
android:layout_toRightOf="@+id/scrollVertical2"
android:layout_toEndOf="@+id/scrollVertical2"
android:scrollbars="none"
android:fadingEdge="none">
<HorizontalScrollView
android:id = "@+id/scrollHorizontal1"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:scrollbars="none"
android:fadingEdge="none">
//основная картинка
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/image1"
android:src="@drawable/content8509"
android:contentDescription="@string/ugolokravn4" />
</HorizontalScrollView>
</com.pavel.sortament.VScrollView>
</RelativeLayout>
public class Gost8509 extends Activity implements View.OnTouchListener {
HorizontalScrollView hScroll1, hScroll2;
VScrollView vScroll1;
ScrollView vScroll2;
float mx, my, curX, curY;
private boolean started = false;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.gost8509);
hScroll1 = (HorizontalScrollView) findViewById(R.id.scrollHorizontal1);
hScroll1.setOnTouchListener(this);
hScroll2 = (HorizontalScrollView) findViewById(R.id.scrollHorizontal2);
hScroll2.setOnTouchListener(this);
vScroll1 = (VScrollView) findViewById(R.id.scrollVertical1);
vScroll1.setOnTouchListener(this);
vScroll2 = (ScrollView) findViewById(R.id.scrollVertical2);
vScroll2.setOnTouchListener(this);
vScroll1.sv = hScroll1;
}
@Override
public boolean onTouch(View v, MotionEvent event) {
curX = event.getX();
curY = event.getY();
int x = (int) (mx - curX);
int y = (int) (my - curY);
switch (event.getAction()) {
case MotionEvent.ACTION_MOVE:
if (started) {
vScroll1.scrollBy(0, y);
vScroll2.scrollBy(0, y);
hScroll1.scrollBy(x, 0);
hScroll2.scrollBy(x, 0);
} else {
started = true;
}
mx = curX;
my = curY;
break;
case MotionEvent.ACTION_UP:
vScroll1.scrollBy(0, y);
vScroll2.scrollBy(0, y);
hScroll1.scrollBy(x, 0);
hScroll2.scrollBy(x, 0);
started = false;
break;
}
return true;
}
}
With this method, the "throw" stops working for me (which is natural) and the main catch is that if the main picture is very large, then it stops being displayed in the emulator.
2 way to Arrange all pictures in WebView:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/imageView1"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:contentDescription="@string/app_name"
android:src="@drawable/corner8509"/>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentLeft="true"
android:id="@+id/linearLayout"
android:layout_alignTop="@+id/linearLayout2"
android:layout_toLeftOf="@+id/linearLayout2">
<WebView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/webView3" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_toRightOf="@+id/imageView1"
android:layout_below="@+id/imageView1"
android:id="@+id/linearLayout2">
<WebView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/webView4" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignBottom="@+id/imageView1"
android:layout_toRightOf="@+id/imageView1">
<WebView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/webView2" />
</LinearLayout>
</RelativeLayout>
In this case, all the pictures are displayed without problems, but if you link them in the same way as in the first version, then the picture crawls beyond the boundaries of the screen when scrolling) and again, naturally, the "throw" does not work.
And now the question) How to implement the first method so that large pictures are displayed on the device and the cast works?
or
How to implement the second method so that the throw would work and the picture in the WebView would not "run away"?
or
Maybe there is some more rational and logical way to implement what I need?
Thanks in advance for all the answers and for your understanding!
Answer:
Found some solution. Maybe not very beautiful, but it helped me, maybe someone will come in handy:
relLayout.getViewTreeObserver().addOnScrollChangedListener(new ViewTreeObserver.OnScrollChangedListener() {
@Override
public void onScrollChanged() {
if (webview1.isFocused()) {
webview3.setScrollX(webview1.getScrollX());
}
if (webview2.isFocused()) {
webview3.setScrollY(webview2.getScrollY());
}
if (webview3.isFocused()) {
webview1.setScrollX(webview3.getScrollX());
webview2.setScrollY(webview3.getScrollY());
}
}
});
Thus, it turns out that the scrolls of all 3 WebViews are interconnected.