Hướng dẫn và ví dụ Android ScrollView và HorizontalScrollView

ScrollView và HorizontalScrollView
Ví dụ ScrollView
Ví dụ HorizontalScrollView

1. ScrollView và HorizontalScrollView

Trong Android, ScrollView là một kiểu Layout, nó là một bộ chứa (container) hình chữ nhật có thanh cuộn thẳng đứng và có thể chứa một thành phần khác có kích thước lớn hơn nó. Tương tự với ScrollView, HorizontalScrollView là một bộ chứa với thanh cuộn nằm ngang.

Nói chung, ScrollView và HorizontalScrollView rất có ích, nó dùng để chứa một nội dung có kích thước (size) lớn, và người dùng cần phải sử dụng thanh cuộn để có thể xem nội dung một cách hoàn chỉnh.

ScrollView và HorizontalScrollView chỉ có thể chứa một thành phần con trực tiếp, vì vậy thành phần con của nó thường là một bộ chứa (container) khác để có thể chứa một hoặc nhiều thành phần con.

Trên Android Studio nếu bạn kéo thả một ScrollView (Hoặc HorizontalScrollView) vào giao diện nó sẽ tự động được thêm vào một thành phần con là LinearLayout, bạn có thể xóa thành phần con này để sử dụng một thành phần con khác.

Bạn không nên sử dụng ScrollView với ListView hoặc GridView, bởi vì cả hai thành phần này đều đã sẵn có thanh cuộn thẳng đứng của riêng nó.

2. Ví dụ ScrollView

Trong ví dụ này, một LinearLayout thẳng đứng có rất nhiều thành phần con, nó cần một không gian với chiều cao đủ lớn, tuy nhiên kích thước màn hình thiết bị của người dùng có hạn, vì vậy nó cần được đặt trong một ScrollView.

Các bước thiết kế giao diện của ứng dụng trong ví dụ này:

Sét đặt ID, Text cho các thành phần trên giao diện:

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

3. Ví dụ HorizontalScrollView

Trong ví dụ này, một LinearLayout nằm ngang có rất nhiều thành phần con, nó cần một không gian với chiều rộng đủ lớn, tuy nhiên kích thước màn hình thiết bị của người dùng có hạn, vì vậy nó cần được đặt trong một HorizontalScrollView.

Thiết kế giao diện:

Sét đặt ID, Text cho các thành phần trên giao diện:

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

Các hướng dẫn lập trình Android

Các hướng dẫn lập trình Flutter

Hướng dẫn và ví dụ Android ScrollView và HorizontalScrollView

1. ScrollView và HorizontalScrollView

2. Ví dụ ScrollView

3. Ví dụ HorizontalScrollView

Các hướng dẫn lập trình Android

Các hướng dẫn lập trình Android

Các bài viết mới nhất