8

Нужно реализовать, как мне кажется, довольно простую задачу, однако решения, которое меня бы устраивало я не могу найти уже несколько дней. Суть такова. Есть 4 картинки которые должны скролиться вместе. Основная картинка (в нижнем правом углу) должна скролиться во всех направлениях (x, y и по диагонали). Картинка сверху от нее должна скролиться вместе с ней по горизонтали. Картинка слева от нее - вместе с ней по вертикали. Ну и картинка в левом верхнем - просто картинка, которая скролиться не должна. Ниже приведу 2 варианта решения которые я рассматривал, но не смог их реализовать так, что бы меня это устраивало. 1 вариант

Разместить ImageView в ScrollView и связать их перемещение в 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;
    }
}

При этом способе у меня перестает работать "бросок" (что естественно) и основная загвоздка в том, что если основная картинка очень больших размеров, то она перестает отображаться в эмуляторе.

2 способ Расположить все картинки в 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>

В этом случае все картинки отображаются без проблем, но если их связать таким образом как в первом варианте, то картинка при скролле уползает за границы экрана) и опять естественно не работает "бросок".

А теперь вопрос ) Как реализовать первый способ, что бы большие картинки отображались на устройстве и работал бросок?

или

Как реализовать второй способ, что бы работал бросок и картинка в WebView не "убегала"?

или

Может есть какой-то более рациональный и логичный способ реализовать то, что мне нужно?

Заранее спасибо за все ответы и за понимание!

5
  • Вы часом не imageCrop изобретаете?) Commented 29 янв 2016 в 7:26
  • Возможно)) я новичек сейчас разберусь сначала, что такое imageCrop что бы сказать да или нет))
    – f1n
    Commented 29 янв 2016 в 7:48
  • Может быть подскажете как он применяется или ссылку кинете на информацию, если не сложно.
    – f1n
    Commented 29 янв 2016 в 7:50
  • я пользуюсь вот этим github.com/ArthurHub/Android-Image-Cropper Commented 29 янв 2016 в 9:17
  • Спасибо ,но это не то, мне не нужно обрезать картинку, мне нужно, что бы несколько картинок скроллились одновременно((
    – f1n
    Commented 30 янв 2016 в 13:03

1 ответ 1

5

Нашел кое-какое решение. Может не очень красивое, но мне помогло, может кому пригодится:

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

Таким образом получается, что прокрутки всех 3-х WebView связаны между собой.

Сайт временно доступен в режиме «только для чтения», и публикация новых ответов невозможна.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками .