How to create ScrollView Android example

Trong Android scrollview là một loại bố trí đó là hữu ích để thêm một thanh cuộn dọc hoặc ngang về nội dung mà là lớn hơn so với kích thước thực tế của bố trí như LinearLayout, RelativeLayout, framelayout vv

Nói chung, Scrollview Android Horizontal rất hữu ích khi chúng ta có nội dung không phù hợp với màn hình bố trí ứng dụng android của chúng tôi. Các scrollview sẽ cho phép một cuộn đến nội dung được vượt bố trí màn hình và cho phép người dùng xem toàn bộ nội dung bằng cách di chuyển.

Các scrollview android có thể chứa chỉ có một con trực tiếp. Trong trường hợp, nếu chúng ta muốn thêm nhiều lượt xem trong vòng xem di chuyển, sau đó chúng ta cần phải bao gồm chúng trong một bố cục tiêu chuẩn như LinearLayout, RelativeLayout, framelayout vv

Để kích hoạt tính năng di chuyển cho các ứng dụng Android của chúng tôi, scrollview Android Example là lựa chọn tốt nhất nhưng chúng ta không nên sử dụng scrollview cùng với ListView hoặc GridView vì cả hai đều sẽ chăm sóc di chuyển dọc của riêng mình.

Trong android scrollview vertical  hỗ trợ di chuyển chỉ thẳng đứng. Trong trường hợp, nếu chúng ta muốn thực hiện cuộn ngang, sau đó chúng ta cần phải sử dụng phần Horizontal ScrollView.

Các scrollview android là có tính chất gọi là android: fillViewport, được sử dụng để xác định liệu scrollview nên duỗi nội dung của nó để điền vào khung nhìn hay không.

Bây giờ chúng ta sẽ thấy làm thế nào để sử dụng scrollview với LinearLayout để bật chế độ xem cuộn đến nội dung mà là lớn hơn so với cách bố trí màn hình trong ứng dụng android với các ví dụ.

Android scrollview example

Sau đây là ví dụ về phép di chuyển dọc về nội dung mà là lớn hơn so với màn hình bố trí sử dụng đối tượng scrollview android.
Tạo một ứng dụng android mới sử dụng Android studio và đưa tên như ScrollViewExample. Trong trường hợp nếu bạn không nhận thức được cách tạo ra một ứng dụng trong studio android kiểm tra bài viết này Android Hello World App.
Một khi chúng ta tạo ra một ứng dụng, tập tin activity_main.xml mở cửa từ \ res \ layout thư mục đường dẫn và viết mã như như hình dưới đây.
activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fillViewport="false">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView android:id="@+id/loginscrn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="80dp"
        android:text="ScrollView"
        android:textSize="25dp"
        android:textStyle="bold"
        android:layout_gravity="center"/>
    <TextView android:id="@+id/fstTxt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:text="Welcome to Tutlane"
        android:layout_gravity="center"/>
    <Button android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="60dp"
        android:text="Button One" />
    <Button android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="60dp"
        android:text="Button Two" />
    <Button android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="60dp"
        android:text="Button Three" />
    <Button android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="60dp"
        android:text="Button Four" />
    <Button android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="60dp"
        android:text="Button Five" />
    <Button android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="60dp"
        android:text="Button Six" />
    <Button android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="60dp"
        android:text="Button Seven" />
    <Button android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="60dp"
        android:text="Button Eight" />
    <Button android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="60dp"
        android:text="Button Nine" />
</LinearLayout>
</ScrollView>

Nếu bạn quan sát trên mã, chúng tôi sử dụng một scrollview trong Android để cho phép di chuyển cho LinearLayout bất cứ khi nào nội dung vượt quá màn hình bố trí.

Ví dụ  của Android ScrollView

Khi chúng ta chạy ví dụ trên trong trình giả lập Android, chúng ta sẽ nhận được kết quả như hiển thị bên dưới.

Nếu bạn quan sát kết quả trên, scrollview cung cấp một di chuyển dọc cho LinearLayout bất cứ khi nào nội dung vượt quá màn hình bố trí.

Như chúng ta đã thảo luận, scrollview with linearlayout in Android có thể cung cấp chỉ di chuyển dọc cho bố trí. Trong trường hợp, nếu chúng ta muốn cho phép cuộn ngang, sau đó chúng ta cần phải sử dụng Horizontal ScrollView trong ứng dụng của chúng tôi.

Chúng ta sẽ thấy làm thế nào để kích hoạt tính năng cuộn ngang về nội dung được vượt quá màn hình bố trí trong ứng dụng Android.

Android HorizontalScrollView Example

Bây giờ hãy mở tệp Activity_main.xml trong ứng dụng Android của bạn và viết mã như dưới đây.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fillViewport="true">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginTop="150dp">
    <Button android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button One" />
    <Button android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button Two" />
    <Button android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button Three" />
    <Button android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button Four" />
    <Button android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button Five" />
    <Button android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button Six" />
    <Button android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button Seven" />
    <Button android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button Eight" />
    <Button android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button Nine" />
</LinearLayout>
</HorizontalScrollView>

 Nếu bạn quan sát mã ở trên, chúng tôi đã sử dụng một màn hình ngang để cho phép cuộn ngang cho linearlayout bất cứ khi nào nội dung vượt quá màn hình bố cục.
Đầu ra của ví dụ Android Vertical ScrollView
Khi chúng ta chạy ví dụ trên trong trình giả lập Android, chúng ta sẽ nhận được kết quả như hiển thị bên dưới.

Nếu bạn quan sát kết quả trên, ngang ngang, cung cấp cuộn ngang cho linearlayout bất cứ khi nào nội dung vượt quá màn hình bố cục.
Đây là cách chúng tôi có thể cho phép cuộn đối với nội dung vượt quá màn hình bố cục bằng cách sử dụng đối tượng ScrollView và Vertical ScrollView dựa trên yêu cầu của chúng tôi.