Le Tutoriel de Android ScrollView et HorizontalScrollView
View more Tutorials:
Dans Android, ScrollView est un type de Layout, c'est un conteneur (container) rectangulaire avec une barre de défilement verticale et peut contenir un autre composant plus grand que lui. Semblable à ScrollView, HorizontalScrollView est un conteneur avec une barre de défilement horizontale.


En général, ScrollView et HorizontalScrollView sont utiles, ils sont utilisés pour contenir un contenu volumineux (size) et les utilisateurs doivent utiliser des barres de défilement pour afficher le contenu complètement.
ScrollView et HorizontalScrollView ne peuvent contenir qu'un seul sous-composant directement, donc son sous-composant est généralement un autre conteneur qui peut contenir un ou plusieurs sous-composants.
Sur Android Studio, si vous faites glisser et déposez un ScrollView (ou HorizontalScrollView) dans l'interface, il sera automatiquement ajouté à un sous-composant, LinearLayout, vous pouvez supprimer ce sous-composant pour utiliser un autre sous-composant.

Vous ne devez pas utiliser ScrollView avec ListView ou GridView, car ces deux composants ont déjà leurs propres barres de défilement verticales.
Dans cet exemple, un LinearLayout vertical a de nombreux sous-composants, il a besoin d'un espace avec une hauteur assez grande, mais la taille de l'écran de l'appareil de l'utilisateur est limitée, il doit donc être placé dans un ScrollView.

Les étapes de conception d'interface pour l'application dans cet exemple:


Définissez l'ID, le texte des composants sur l'interface:

main_activity.xml
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <Button android:id="@+id/button_scrollUp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="16dp" android:layout_marginLeft="16dp" android:layout_marginTop="24dp" android:text="Scroll Up" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <Button android:id="@+id/button_scrollDown" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="19dp" android:layout_marginLeft="19dp" android:layout_marginTop="24dp" android:text="Scroll Down" app:layout_constraintStart_toEndOf="@+id/button_scrollUp" app:layout_constraintTop_toTopOf="parent" /> <ScrollView android:id="@+id/scrollView" android:layout_width="0dp" android:layout_height="229dp" android:layout_marginStart="16dp" android:layout_marginLeft="16dp" android:layout_marginTop="16dp" android:layout_marginEnd="16dp" android:layout_marginRight="16dp" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/button_scrollUp"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <Button android:id="@+id/button11" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Button" /> <Button android:id="@+id/button10" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Button" /> <Button android:id="@+id/button9" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Button" /> <Button android:id="@+id/button8" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Button" /> <Button android:id="@+id/button7" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Button" /> <Button android:id="@+id/button6" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Button" /> <Button android:id="@+id/button5" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Button" /> <Button android:id="@+id/button4" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Button" /> <Button android:id="@+id/button3" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Button" /> </LinearLayout> </ScrollView> </androidx.constraintlayout.widget.ConstraintLayout>
MainActivity.java
package com.example.scrollviewexample; import androidx.appcompat.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.widget.Button; import android.widget.ScrollView; public class MainActivity extends AppCompatActivity { private ScrollView scrollView; private Button buttonScrollUp; private Button buttonScrollDown; public static final int SCROLL_DELTA = 15; // Pixel. @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); this.scrollView = (ScrollView) this.findViewById(R.id.scrollView); this.buttonScrollUp = (Button) this.findViewById(R.id.button_scrollUp); this.buttonScrollDown = (Button) this.findViewById(R.id.button_scrollDown); this.buttonScrollUp.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { doScrollUp(); } }); this.buttonScrollDown.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { doScrollDown(); } }); } private void doScrollUp() { int x = this.scrollView.getScrollX(); int y = this.scrollView.getScrollY(); if(y - SCROLL_DELTA >= 0) { this.scrollView.scrollTo(x, y-SCROLL_DELTA); } } private void doScrollDown() { int maxAmount = scrollView.getMaxScrollAmount(); int x = this.scrollView.getScrollX(); int y = this.scrollView.getScrollY(); if(y + SCROLL_DELTA <= maxAmount) { this.scrollView.scrollTo(x, y + SCROLL_DELTA); } } }
Dans cet exemple, un LinearLayout horizontal a beaucoup de sous-composants, il a besoin d'un espace avec une largeur assez grande, mais la taille de l'écran de l'appareil de l'utilisateur est limitée, il doit donc être placé dans un HorizontalScrollView.

Conception d'interface:


Définissez l'ID, Text des composants sur l'interface:

activity_main.xml
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <Button android:id="@+id/button_scrollLeft" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="16dp" android:layout_marginLeft="16dp" android:layout_marginTop="24dp" android:text="Scroll Left" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <Button android:id="@+id/button_scrollRight" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="16dp" android:layout_marginLeft="16dp" android:layout_marginTop="24dp" android:text="Scroll Right" app:layout_constraintStart_toEndOf="@+id/button_scrollLeft" app:layout_constraintTop_toTopOf="parent" /> <HorizontalScrollView android:id="@+id/horizontalScrollView" android:layout_width="0dp" android:layout_height="128dp" android:layout_marginStart="16dp" android:layout_marginLeft="16dp" android:layout_marginTop="16dp" android:layout_marginEnd="16dp" android:layout_marginRight="16dp" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/button_scrollLeft"> <LinearLayout android:layout_width="wrap_content" android:layout_height="match_parent" android:orientation="horizontal"> <Button android:id="@+id/button9" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:text="Button" /> <Button android:id="@+id/button8" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:text="Button" /> <Button android:id="@+id/button7" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:text="Button" /> <Button android:id="@+id/button6" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:text="Button" /> <Button android:id="@+id/button5" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:text="Button" /> <Button android:id="@+id/button4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:text="Button" /> <Button android:id="@+id/button3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:text="Button" /> </LinearLayout> </HorizontalScrollView> </androidx.constraintlayout.widget.ConstraintLayout>
MainActivity.java
package com.example.horizontalscrollviewexample; import androidx.appcompat.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.widget.Button; import android.widget.HorizontalScrollView; public class MainActivity extends AppCompatActivity { private HorizontalScrollView horizontalScrollView; private Button buttonScrollLeft; private Button buttonScrollRight; public static final int SCROLL_DELTA = 15; // Pixel. @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); this.horizontalScrollView = (HorizontalScrollView) this.findViewById(R.id.horizontalScrollView); this.buttonScrollLeft = (Button) this.findViewById(R.id.button_scrollLeft); this.buttonScrollRight = (Button) this.findViewById(R.id.button_scrollRight); this.buttonScrollLeft.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { doScrollLeft(); } }); this.buttonScrollRight.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { doScrollRight(); } }); } private void doScrollLeft() { int x = this.horizontalScrollView.getScrollX(); int y = this.horizontalScrollView.getScrollY(); if(x - SCROLL_DELTA >= 0) { this.horizontalScrollView.scrollTo(x - SCROLL_DELTA, y); } } private void doScrollRight() { int maxAmount = horizontalScrollView.getMaxScrollAmount(); int x = this.horizontalScrollView.getScrollX(); int y = this.horizontalScrollView.getScrollY(); if(x + SCROLL_DELTA <= maxAmount) { this.horizontalScrollView.scrollTo(x + SCROLL_DELTA, y); } } }