Scrollview vertical et horizontal sous Android

Je suis vraiment fatigué de chercher une solution pour Scrollview vertical et horizontal.

J'ai lu qu'il n'y a pas de vues / mises en page dans le cadre qui implémentent cette fonctionnalité, mais j'ai besoin de quelque chose comme ceci:

J'ai besoin de définir une mise en page dans l'autre, la mise en page enfant doit implémenter un défilement vertical / horizontal pour le déplacement.

Initialement implémenté un code qui déplaçait la mise en page pixel par pixel, mais je pense que ce n'est pas la bonne façon. Je l'ai essayé avec ScrollView et Horizontal ScrollView mais rien ne fonctionne comme je le souhaite, car il n'implémente que le défilement vertical ou horizontal.

Canvas n'est pas ma solution car j'ai besoin d'attacher des écouteurs à certains éléments enfants.

Que puis-je faire?

En mélangeant certaines des suggestions ci-dessus, nous avons pu obtenir une bonne solution:

ScrollView personnalisé:

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

HorizontalScrollView personnalisé:

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

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

}

la disposition:

<?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>

Comme cela semble être le premier résultat de recherche dans Google pour "Android vertical + horizontal ScrollView", j'ai pensé que je devrais ajouter ceci ici. Matt Clark a construit une vue personnalisée basée sur la source Android, et cela semble fonctionner parfaitement: Two Dimensional ScrollView

Attention, la classe de cette page a un bug de calcul de la largeur horizontale de la vue. Un correctif de Manuel Hilty est dans les commentaires:

Solution: remplacez l'instruction à la ligne 808 par ce qui suit:

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

Edit: Le lien ne fonctionne plus mais voici un lien vers une ancienne version du blog .

J'ai trouvé une meilleure solution.

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>

Code Java:

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

Cela fonctionne !!!

Si vous souhaitez charger une autre disposition ou un autre contrôle, la structure est la même.

Je l'utilise et fonctionne très bien:

<?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>

Le lien source est ici: Android-spa

Ma solution basée sur la réponse de Mahdi Hijazi , mais sans vues personnalisées:

Disposition:

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

Vous pouvez modifier l'ordre des vues de défilement. Changez simplement leur ordre dans la mise en page et dans le code. Et évidemment au lieu de WateverViewYouWant vous mettez la mise en page / vues que vous souhaitez faire défiler dans les deux sens.

Option n ° 1: vous pouvez proposer une nouvelle conception d'interface utilisateur qui ne nécessite pas de défilement horizontal et vertical simultané.

Option n ° 2: vous pouvez obtenir le code source vers ScrollViewet HorizontalScrollView, découvrir comment l'équipe Android principale les a implémentés et créer votre propre BiDirectionalScrollViewimplémentation.

Option 3: vous pouvez vous débarrasser des dépendances qui vous obligent à utiliser le système de widgets et dessiner directement sur le canevas.

Option n ° 4: Si vous tombez sur une application open source qui semble implémenter ce que vous cherchez, regardez comment ils l'ont fait.

Essaye ça

<?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>

puisque le lien Two Dimensional Scrollview est mort, je n'ai pas pu l'obtenir, j'ai donc créé mon propre composant. Il gère le flinging et fonctionne correctement pour moi. La seule restriction est que wrap_content peut ne pas fonctionner correctement pour ce composant.

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

J'ai une solution à votre problème. Vous pouvez vérifier le code ScrollView, il gère uniquement le défilement vertical et ignore l'horizontale et le modifie. Je voulais une vue comme une vue Web, donc ScrollView modifié et cela a bien fonctionné pour moi. Mais cela peut ne pas répondre à vos besoins.

Faites-moi savoir quel type d'interface utilisateur vous ciblez.

Cordialement,

Ravi Pandit

En jouant avec le code, vous pouvez placer un HorizontalScrollView dans un ScrollView. Ainsi, vous pouvez avoir les deux méthodes de défilement dans la même vue.

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

J'espère que cela pourra vous aider.

utiliser de cette façon j'ai essayé ceci je l'ai réparé

Mettez toute votre mise en page XML à l'intérieur

<android.support.v4.widget.NestedScrollView 

J'ai expliqué cela dans ce lien recycler vertical et vue de recyclage horizontale défilant ensemble