48 votes

Android - le défilement horizontal de plusieurs éléments visibles

EDIT: Voir mon propre réponse pour la solution de facilité

IMPORTANT: Bounty est offert de manière claire de modifier ViewPager pour satisfaire le scénario décrit ci-dessous. S'il vous plaît ne pas offrir HorizontalScrollView - je besoin d'un Fragment du cycle de vie du scénario couvert

J'ai besoin de mettre en œuvre le défilement horizontal de l' Fragments-vues dans laquelle un élément est dans le centre et les éléments à droite/gauche sont partiellement ou entièrement visible. ViewPager est mal adapté pour la tâche puisqu'il est axé sur l'affichage d'un élément à chaque fois.

Pour le rendre plus facile à comprendre ci-dessous un croquis rapide dans lequel les articles 1, 5 et 6 sont en dehors de la zone visible. Et et souhaitez faire de cette consultables nombre configurable ainsi, par exemple, en mode portrait je ne montre que 2 (ou peut-être juste un).

Je ne suis pas d'essayer de s'adapter à dire 3 éléments sur l'écran, aussi longtemps que l'élément central est montré d'autres peuvent être recadrée. Sur le petit écran est OK pour avoir 1 point principal et de l'écran augmente la taille de multiples (recadrée est OK) les articles doivent être indiqués

Je comprends que cela ressemble à une galerie, mais encore les éléments ne sont pas de simples images, mais Fragments avec un défilement vertical liste dans chaque fragment

P. S. Trouvé cet article sur le blog de @Commonsware que la liste des 3 approches différentes. Pour mon besoin j'aime #3

enter image description here

24voto

Bostone Points 14208

Celui-ci a étonnamment facile de répondre, je ne suis même pas sûr pourquoi elle n'avait pas posté tout de suite. Tout ce que je devais faire pour obtenir exactement l'effet a été de remplacer PagerAdapter#getPageWidth méthode. Par défaut, il renvoie 1, mais si vous le réglez à 0,5, vous obtiendrez 2 pages de 0,33 vous donnera 3, etc. En fonction de la largeur du séparateur entre pager les éléments que vous aurez à légèrement diminuer la valeur.

Voir l'extrait de code suivant:

    @Override
    public float getPageWidth(final int position) {
        // this will have 3 pages in a single view
        return 0.32f;
    }

2voto

Bevor Points 1713

Une fois que j'ai écrit quelque chose de similaire en tant que modèle. Dans mon exemple, je peux faire défiler avec les boutons en haut et en bas et sur le côté. Vous pouvez modifier un peu pour répondre à vos besoins. Dans mon exemple j'ai 4 points de Vue disposés comme suit:

1 2
3 4

Il ressemble à ceci. Sur la photo, je l'défilement de la vue 1 vers la droite pour afficher 2:

Android View Scrolling

Le code se composent de ce document xml:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
      <LinearLayout
        android:layout_height="350sp"
        android:layout_width="320sp">
        <LinearLayout
            android:id="@+id/viewContainer"
            android:background="#CCCCCC"
            android:layout_width="640sp"
            android:layout_height="700sp">
        </LinearLayout>
     </LinearLayout>
      <TableLayout
            android:id="@+id/tableLayout"
            android:layout_width="320sp"
            android:layout_height="fill_parent"
            android:stretchColumns="1"
            android:gravity="bottom"
            android:layout_alignParentBottom="true">
            <TableRow
            android:background="#333333"
            android:gravity="bottom">       
            <Button
                android:id="@+id/btnUp"
                android:layout_width="60sp"
                android:layout_height="50sp"
                android:text="Lift U"
                />
            <Button
                android:layout_width="60sp"
                android:layout_height="50sp"
                android:visibility="invisible"
            />
            <Button
                android:layout_width="60sp"
                android:layout_height="50sp"
                android:visibility="invisible"
            />
            <Button
                android:id="@+id/btnScreenUp"
                android:layout_width="60sp"
                android:layout_height="50sp"
                android:layout_gravity="right"
                android:text="Scrn U"
                />
            </TableRow>
            <TableRow
              android:background="#444444"
              android:layout_gravity="right">
              <Button
                android:id="@+id/btnDown"
                android:layout_width="60sp"
                android:layout_height="50sp"
                android:text="Lift D"
                />
              <Button
                android:id="@+id/btnEnter"
                android:layout_width="60sp"
                android:layout_height="50sp"
                android:text="Enter"
                />
               <Button
                android:id="@+id/btnScreenLeft"
                android:layout_width="60sp"
                android:layout_height="50sp"
                android:layout_gravity="right"
                android:text="Scrn L"
                />
               <Button
                android:id="@+id/btnScreenDown"
                android:layout_width="60sp"
                android:layout_height="50sp"
                android:layout_gravity="right"
                android:text="Scrn D"
                />
               <Button
                android:id="@+id/btnScreenRight"
                android:layout_width="60sp"
                android:layout_height="50sp"
                android:layout_gravity="right"
                android:text="Scrn R"
                />
            </TableRow>
    </TableLayout>
</FrameLayout>

et ce code Java:

import android.app.Activity;
import android.os.Bundle;
import android.util.DisplayMetrics;
import android.view.Gravity;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.Window;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.TextView;

public class ViewSwitcherTest extends Activity {

    private TextView view1, view2, view3, view4;
    private Button btnUp, btnEnter, btnDown, btnScreenDown, btnScreenUp, btnScreenLeft, btnScreenRight;
    private LinearLayout viewContainer;
//  private TableLayout tableLayout;
    private LinearLayout.LayoutParams layoutParams;
    private DisplayMetrics metrics = new DisplayMetrics();
    private int top = 0, left = 0;
    private float density = 1.0f;
//  private ViewSwitcher switcher;

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        getWindowManager().getDefaultDisplay().getMetrics(metrics);
        density = metrics.density;
        setContentView(R.layout.main);
//      Buttons
        btnEnter = (Button)findViewById(R.id.btnEnter);
        btnUp = (Button)findViewById(R.id.btnUp);
        btnDown = (Button)findViewById(R.id.btnDown);
        btnScreenDown = (Button)findViewById(R.id.btnScreenDown);
        btnScreenUp = (Button)findViewById(R.id.btnScreenUp);
        btnScreenLeft = (Button)findViewById(R.id.btnScreenLeft);
        btnScreenRight = (Button)findViewById(R.id.btnScreenRight);
//      --------
//      tableLayout = (TableLayout)findViewById(R.id.tableLayout);
        view1 = new TextView(this);
        view1.setBackgroundResource(R.drawable.view1);
        view1.setHeight((int)(350*density));
        view1.setWidth((int)(320*density));
        view1.setGravity(Gravity.CENTER_VERTICAL|Gravity.CENTER_HORIZONTAL);
        layoutParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
        layoutParams.setMargins(left, top, 0, 0);   
        viewContainer = (LinearLayout)findViewById(R.id.viewContainer);
        viewContainer.addView(view1, layoutParams);
        //Add 2nd view
        view2 = new TextView(this);
        view2.setBackgroundResource(R.drawable.view2);
        view2.setHeight((int)(350*density));
        view2.setWidth((int)(320*density));
        view2.setGravity(Gravity.CENTER_VERTICAL|Gravity.CENTER_HORIZONTAL);
        layoutParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
        layoutParams.setMargins(left, top, 0, 0);
        viewContainer.addView(view2, layoutParams); 
        //Add 3rd view
        view3 = new TextView(this);
        view3.setBackgroundResource(R.drawable.view3);
        view3.setHeight((int)(350*density));
        view3.setWidth((int)(320*density));
        view3.setGravity(Gravity.CENTER_VERTICAL|Gravity.CENTER_HORIZONTAL);
        top += 350*density;
        left += 640*density*(-1);
        layoutParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
        layoutParams.setMargins(left, top, 0, 0);
        viewContainer.addView(view3, layoutParams);     
        //add 4th view
        view4 = new TextView(this);
        view4.setBackgroundResource(R.drawable.view4);
        view4.setHeight((int)(350*density));
        view4.setWidth((int)(320*density));
        view4.setGravity(Gravity.CENTER_VERTICAL|Gravity.CENTER_HORIZONTAL);
        top += 0;
        left += 640*density;
        layoutParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
        layoutParams.setMargins(left, top, 0, 0);
        viewContainer.addView(view4, layoutParams);     
        btnEnter.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                // Quit the application for now
                finish();
            }
        });
        btnScreenLeft.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                viewContainer.scrollBy(-10,0);
            }
        });
        btnScreenRight.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                viewContainer.scrollBy(10,0);
            }
        });
        btnScreenUp.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                viewContainer.scrollBy(0,-10);
            }
        });
        btnScreenDown.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                viewContainer.scrollBy(0,10);
            }
        });
//      view1.setOnKeyListener(new OnKeyListener() {            
//          @Override
//          public boolean onKey(View v, int keyCode, KeyEvent event) {
//              if (keyCode == KeyEvent.KEYCODE_DPAD_DOWN)
//                  viewContainer.scrollBy(0,10);
//              return true;
//          }
//      });
    }
}

Les gros chiffres sur tous les écrans sont noirs images d'arrière-plan avec les numéros peints sur elle. (Je n'ai pas poster ici parce que vous aurez probablement modifier le code de toute façon).

1voto

Joe Mitchell Points 13

Nous faisons quelque chose d'à peu près exactement comme vous le décrivez à l'aide d'un Gallery avec Fragments, et une galerie d'adaptateur d'extension de l' BaseAdapter. Je vous recommande d'aller avec une galerie pour atteindre votre objectif (nous utilisons également un ViewPager pour le point de vue où nous n'avons pas besoin de voir les autres fragments).

0voto

MrZander Points 1495

Je pense à deux voies, éventuellement, de le mettre en œuvre.

  1. Par un ViewSwitcher. Voici une excellente vidéo de YouTube montrant comment elle fonctionne, avec un onGestureListener. Cependant, je ne suis pas sûr si cela va fonctionner avec de multiples points de vue comme votre photo spectacles.

  2. Comme alternative, vous pouvez utiliser un HorizontalScrollView. Cependant, ce qui provoque souvent des questions si vous en avez un ScrollView à l'intérieur d'un autre, mais il peut être vaut la peine d'essayer!

Laissez-moi savoir comment ça se passe, Bonne chance!

0voto

sebataz Points 533

En plus de MrZander deuxième réponse jetez un oeil à ce http://stackoverflow.com/a/2655740/935075

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X