Scrollview vertikal und horizontal in Android

Ich bin es wirklich leid, nach einer Lösung für vertikale und horizontale Bildlaufansichten zu suchen.

Ich habe gelesen, dass es im Framework keine Ansichten / Layouts gibt, die diese Funktion implementieren, aber ich brauche so etwas:

Ich muss ein Layout in einem anderen definieren, das untergeordnete Layout muss das vertikale / horizontale Scrollen zum Verschieben implementieren.

Anfangs wurde ein Code implementiert, der das Layout Pixel für Pixel verschob, aber ich denke, das ist nicht der richtige Weg. Ich habe es mit ScrollView und Horizontal ScrollView versucht, aber nichts funktioniert so, wie ich es möchte, da es nur vertikales oder horizontales Scrollen implementiert.

Canvas ist nicht meine Lösung, da ich Listener an untergeordnete Elemente anhängen muss.

Was kann ich tun?

Mischen Sie einige der obigen Vorschläge und erhalten Sie eine gute Lösung:

Benutzerdefinierte ScrollView:

package com.scrollable.view;

import android.content.Context;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.widget.ScrollView;

public class VScroll extends ScrollView {

    public VScroll(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    public VScroll(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public VScroll(Context context) {
        super(context);
    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        return false;
    }
}

Benutzerdefinierte HorizontalScrollView:

package com.scrollable.view;

import android.content.Context;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.widget.HorizontalScrollView;

public class HScroll extends HorizontalScrollView {

    public HScroll(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    public HScroll(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public HScroll(Context context) {
        super(context);
    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        return false;
    }
}

die ScrollableImageActivity:

package com.scrollable.view;

import android.app.Activity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.widget.HorizontalScrollView;
import android.widget.ScrollView;

public class ScrollableImageActivity extends Activity {

    private float mx, my;
    private float curX, curY;

    private ScrollView vScroll;
    private HorizontalScrollView hScroll;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        vScroll = (ScrollView) findViewById(R.id.vScroll);
        hScroll = (HorizontalScrollView) findViewById(R.id.hScroll);

    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        float curX, curY;

        switch (event.getAction()) {

            case MotionEvent.ACTION_DOWN:
                mx = event.getX();
                my = event.getY();
                break;
            case MotionEvent.ACTION_MOVE:
                curX = event.getX();
                curY = event.getY();
                vScroll.scrollBy((int) (mx - curX), (int) (my - curY));
                hScroll.scrollBy((int) (mx - curX), (int) (my - curY));
                mx = curX;
                my = curY;
                break;
            case MotionEvent.ACTION_UP:
                curX = event.getX();
                curY = event.getY();
                vScroll.scrollBy((int) (mx - curX), (int) (my - curY));
                hScroll.scrollBy((int) (mx - curX), (int) (my - curY));
                break;
        }

        return true;
    }

}

das Layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <com.scrollable.view.VScroll android:layout_height="fill_parent"
        android:layout_width="fill_parent" android:id="@+id/vScroll">
        <com.scrollable.view.HScroll android:id="@+id/hScroll"
            android:layout_width="fill_parent" android:layout_height="fill_parent">
            <ImageView android:layout_width="fill_parent" android:layout_height="fill_parent" android:src="@drawable/bg"></ImageView>
        </com.scrollable.view.HScroll>
    </com.scrollable.view.VScroll>

</LinearLayout>

Da dies das erste Suchergebnis in Google für "Android vertikal + horizontal ScrollView" zu sein scheint, dachte ich, ich sollte dies hier hinzufügen. Matt Clark hat eine benutzerdefinierte Ansicht erstellt, die auf der Android-Quelle basiert, und sie scheint perfekt zu funktionieren: Two Dimensional ScrollView

Beachten Sie, dass die Klasse auf dieser Seite einen Fehler beim Berechnen der horizontalen Breite der Ansicht aufweist. Ein Fix von Manuel Hilty ist in den Kommentaren:

Lösung: Ersetzen Sie die Anweisung in Zeile 808 durch Folgendes:

final int childWidthMeasureSpec = MeasureSpec.makeMeasureSpec(lp.leftMargin + lp.rightMargin, MeasureSpec.UNSPECIFIED);

Bearbeiten: Der Link funktioniert nicht mehr, aber hier ist ein Link zu einer alten Version des Blogposts .

Ich habe eine bessere Lösung gefunden.

XML: (design.xml)

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent">
  <FrameLayout android:layout_width="90px" android:layout_height="90px">
    <RelativeLayout android:id="@+id/container" android:layout_width="fill_parent" android:layout_height="fill_parent">        
    </RelativeLayout>
</FrameLayout>
</FrameLayout>

Java Code:

public class Example extends Activity {
  private RelativeLayout container;
  private int currentX;
  private int currentY;

  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.design);

    container = (RelativeLayout)findViewById(R.id.container);

    int top = 0;
    int left = 0;

    ImageView image1 = ...
    RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
    layoutParams.setMargins(left, top, 0, 0);               
    container.addView(image1, layoutParams);

    ImageView image2 = ...
    left+= 100;
    RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
    layoutParams.setMargins(left, top, 0, 0);               
    container.addView(image2, layoutParams);

    ImageView image3 = ...
    left= 0;
    top+= 100;
    RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
    layoutParams.setMargins(left, top, 0, 0);               
    container.addView(image3, layoutParams);

    ImageView image4 = ...
    left+= 100;     
    RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
    layoutParams.setMargins(left, top, 0, 0);               
    container.addView(image4, layoutParams);
  }     

  @Override 
  public boolean onTouchEvent(MotionEvent event) {
    switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN: {
            currentX = (int) event.getRawX();
            currentY = (int) event.getRawY();
            break;
        }

        case MotionEvent.ACTION_MOVE: {
            int x2 = (int) event.getRawX();
            int y2 = (int) event.getRawY();
            container.scrollBy(currentX - x2 , currentY - y2);
            currentX = x2;
            currentY = y2;
            break;
        }   
        case MotionEvent.ACTION_UP: {
            break;
        }
    }
      return true; 
  }
}

Das funktioniert !!!

Wenn Sie ein anderes Layout oder Steuerelement laden möchten, ist die Struktur dieselbe.

Ich benutze es und funktioniert gut:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView android:id="@+id/ScrollView02" 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content"
            xmlns:android="http://schemas.android.com/apk/res/android">
<HorizontalScrollView android:id="@+id/HorizontalScrollView01" 
                      android:layout_width="wrap_content" 
                      android:layout_height="wrap_content">
<ImageView android:id="@+id/ImageView01"
           android:src="@drawable/pic" 
           android:isScrollContainer="true" 
           android:layout_height="fill_parent" 
           android:layout_width="fill_parent" 
           android:adjustViewBounds="true">
</ImageView>
</HorizontalScrollView>
</ScrollView>

Der Quelllink ist hier: Android-Spa

Meine Lösung basiert auf der Antwort von Mahdi Hijazi , jedoch ohne benutzerdefinierte Ansichten:

Layout:

<HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/scrollHorizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <ScrollView 
        android:id="@+id/scrollVertical"
        android:layout_width="wrap_content"
        android:layout_height="match_parent" >

        <WateverViewYouWant/>

    </ScrollView>
</HorizontalScrollView>

Code (onCreate / onCreateView):

    final HorizontalScrollView hScroll = (HorizontalScrollView) value.findViewById(R.id.scrollHorizontal);
    final ScrollView vScroll = (ScrollView) value.findViewById(R.id.scrollVertical);
    vScroll.setOnTouchListener(new View.OnTouchListener() { //inner scroll listener         
        @Override
        public boolean onTouch(View v, MotionEvent event) {
            return false;
        }
    });
    hScroll.setOnTouchListener(new View.OnTouchListener() { //outer scroll listener         
        private float mx, my, curX, curY;
        private boolean started = false;

        @Override
        public boolean onTouch(View v, MotionEvent event) {
            curX = event.getX();
            curY = event.getY();
            int dx = (int) (mx - curX);
            int dy = (int) (my - curY);
            switch (event.getAction()) {
                case MotionEvent.ACTION_MOVE:
                    if (started) {
                        vScroll.scrollBy(0, dy);
                        hScroll.scrollBy(dx, 0);
                    } else {
                        started = true;
                    }
                    mx = curX;
                    my = curY;
                    break;
                case MotionEvent.ACTION_UP: 
                    vScroll.scrollBy(0, dy);
                    hScroll.scrollBy(dx, 0);
                    started = false;
                    break;
            }
            return true;
        }
    });

Sie können die Reihenfolge der Bildlaufansichten ändern. Ändern Sie einfach ihre Reihenfolge im Layout und im Code. Und natürlich setzen Sie anstelle von WateverViewYouWant das Layout / die Ansichten ein, mit denen Sie in beide Richtungen scrollen möchten.

Option 1: Sie können ein neues UI-Design entwickeln, das kein gleichzeitiges horizontales und vertikales Scrollen erfordert.

Option 2: Sie können den Quellcode für ScrollViewund erhalten HorizontalScrollView, erfahren, wie das Android-Kernteam diese implementiert hat, und Ihre eigene BiDirectionalScrollViewImplementierung erstellen .

Option 3: Sie können die Abhängigkeiten beseitigen, für die Sie das Widget-System verwenden müssen, und direkt auf die Leinwand zeichnen.

Option 4: Wenn Sie auf eine Open-Source-Anwendung stoßen, die das zu implementieren scheint, wonach Sie suchen, schauen Sie nach, wie sie es getan haben.

Versuche dies

<?xml version="1.0" encoding="utf-8"?>
<ScrollView android:id="@+id/Sview" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content"
        xmlns:android="http://schemas.android.com/apk/res/android">
<HorizontalScrollView 
   android:id="@+id/hview" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content">
<ImageView .......
 [here xml code for image]
</ImageView>
</HorizontalScrollView>
</ScrollView>

Da der Link "Zweidimensionale Bildlaufansicht" nicht mehr verfügbar ist, konnte ich ihn nicht erhalten und habe meine eigene Komponente erstellt. Es handhabt Schleudern und funktioniert richtig für mich. Die einzige Einschränkung besteht darin, dass wrap_content für diese Komponente möglicherweise nicht ordnungsgemäß funktioniert.

https://gist.github.com/androidseb/9902093

Ich habe eine Lösung für Ihr Problem. Sie können den ScrollView-Code überprüfen, der nur vertikales Scrollen verarbeitet, den horizontalen ignoriert und diesen ändert. Ich wollte eine Ansicht wie eine Webansicht, also modifizierte ich ScrollView und es funktionierte gut für mich. Dies entspricht jedoch möglicherweise nicht Ihren Anforderungen.

Lassen Sie mich wissen, auf welche Art von Benutzeroberfläche Sie abzielen.

Grüße,

Ravi Pandit

Wenn Sie mit dem Code spielen, können Sie eine HorizontalScrollView in eine ScrollView einfügen. Dadurch können Sie die beiden Bildlaufmethoden in derselben Ansicht haben.

Quelle : http://androiddevblog.blogspot.com/2009/12/creating-two-dimensions-scroll-view.html

Ich hoffe das könnte dir helfen.

Auf diese Weise habe ich versucht, dies zu beheben

Fügen Sie Ihr gesamtes XML-Layout ein

<android.support.v4.widget.NestedScrollView 

Ich habe dies in diesem Link erklärt. Vertical recyclerView und Horizontal recyclerview scrollen zusammen