Vista de desplazamiento horizontal en Android

ScrollView es una parte muy esencial del desarrollo de aplicaciones de Android y se puede ver en casi todas las aplicaciones. Una de las áreas más populares donde se puede ver su implementación es en la barra de historias en la parte superior de Instagram. En este artículo, aprenderemos cómo podemos implementar un ScrollView horizontal en Android.

HorizontalScrollView

Horizontal ScrollView es un FrameLayout, que se utiliza para proporcionar la propiedad de desplazamiento horizontal del elemento Ver secundario. ChildView en sí mismo puede ser un administrador de diseño como el diseño lineal. La clase TextView se ocupa de su propio desplazamiento, pero se puede colocar dentro de un HorizontalScrollView para crear diseños de interfaz de usuario más complejos.

Nota: HorizontalScrollView solo proporciona desplazamiento horizontal, para el desplazamiento vertical se puede utilizar ScrollView

Implementación paso a paso

Paso 1: crea un nuevo proyecto en Android Studio

Para crear un nuevo proyecto en Android Project solo consulte este artículo sobre Cómo crear un nuevo proyecto en Android Studio . El código se puede implementar tanto en Java como en el lenguaje de programación Kotlin para Android.

Paso 2: trabajar con el archivo activity_main.xml

Vaya a la aplicación > res > diseño > actividad_principal.xml y agregue el siguiente código a ese archivo. A continuación se muestra el código para el archivo  activity_main.xml .

XML

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    tools:context=".MainActivity">
  
    <!-- syntax for HorizontalScrollView -->
    <HorizontalScrollView
        android:id="@+id/horizontalScrollView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginStart="1dp"
        android:layout_marginTop="1dp"
        android:layout_marginEnd="1dp"
        android:layout_marginBottom="1dp"
        android:foregroundGravity="center_vertical">
  
        <!-- child view -->
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:foregroundGravity="center"
            android:gravity="center"
            android:orientation="horizontal">
  
            <!-- LinearLayout children -->
            <TextView
                android:id="@+id/textView3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:padding="15dp"
                android:text="GEEKS"
                android:textColor="#0F9D58"
                android:textSize="70sp" />
  
            <TextView
                android:id="@+id/textView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:padding="15dp"
                android:text="FOR"
                android:textColor="#0F9D58"
                android:textSize="70sp" />
  
            <TextView
                android:id="@+id/textView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:padding="15dp"
                android:text="GEEKS"
                android:textColor="#0F9D58"
                android:textSize="70sp" />
  
        </LinearLayout>
    </HorizontalScrollView>
</LinearLayout>

Dado que no hay cambios en el archivo MainActivity de Java/Kotlin, solo proporcionamos el código del archivo XML.

Producción:

Publicación traducida automáticamente

Artículo escrito por rishabh105179 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *