Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> Android

วิธีวาง ListView ใน ScrollView โดยไม่ให้หดหุบใน Android

ภาพรวม

ตัวอย่างนี้แก้ปัญหา ListView ภายใน ScrollView ที่สูงหดเหี้ยม (Collapse) โดยคำนวณความสูงรวมของ ListView แล้วเซ็ต LayoutParams ให้ตรงกับความสูงเนื้อหา

ขั้นตอนที่ 1: สร้างโปรเจกต์ใหม่

สร้างโปรเจกต์ Android ใหม่ใน Android Studio

ขั้นตอนที่ 2: จัดทำ Layout (activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="19dp"
            android:text="Hello World" />
        <ListView
            android:id="@+id/listView"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" />
    </LinearLayout>
</ScrollView>

ปัญหา: ทำไม ListView ใน ScrollView ถึงหดหุบ?

  • ScrollView และ ListView ทั้งคู่มีการเลื่อน (Scroll) เอง
  • ListView ไม่รู้ความสูงที่ควรจะเป็นใน ScrollView
  • Android จะให้ ListView สูงแค่ 1 รายการ (หรือ 0) เท่านั้น

ขั้นตอนที่ 3: MainActivity.java

package com.example.sample;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.ListView;

public class MainActivity extends AppCompatActivity {
    private String[] listviewArray = {"ONE", "TWO", "THREE", "FOUR", "FIVE", 
        "SIX", "SEVEN", "EIGHT", "NINE", "TEN"};
    ListView myList;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        myList = findViewById(R.id.listView);
        myList.setAdapter(new ArrayAdapter<>(this, 
            android.R.layout.simple_list_item_1, listviewArray));
        Helper.getListViewSize(myList); // เรียกคำนวณความสูง
    }
}

ขั้นตอนที่ 4: Helper.java - คลาสคำนวณความสูง

package com.example.sample;
import android.util.Log;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ListAdapter;
import android.widget.ListView;

public class Helper {
    public static void getListViewSize(ListView myListView) {
        ListAdapter myListAdapter = myListView.getAdapter();
        if (myListAdapter == null) return;

        int totalHeight = 0;
        // วัดความสูงแต่ละรายการ
        for (int size = 0; size < myListAdapter.getCount(); size++) {
            View listItem = myListAdapter.getView(size, null, myListView);
            listItem.measure(0, 0); // วัดขนาด
            totalHeight += listItem.getMeasuredHeight();
        }

        // เพิ่มความสูง Divider
        ViewGroup.LayoutParams params = myListView.getLayoutParams();
        params.height = totalHeight + (myListView.getDividerHeight() * (myListAdapter.getCount() - 1));
        myListView.setLayoutParams(params);
        
        Log.i("height of listItem:", String.valueOf(totalHeight));
    }
}

วิธีแก้ปัญหาแบบสมัยใหม่ (แนะนำ)

1. ใช้ NestedScrollView + RecyclerView (แทน ListView)

<androidx.core.widget.NestedScrollView ...>
    <LinearLayout ...>
        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recyclerView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:nestedScrollingEnabled="false" />
    </LinearLayout>
</androidx.core.widget.NestedScrollView>

2. ใช้ ConstraintLayout + Guideline

จัด Layout ให้ ListView/RecyclerView มีขนาด wrap_content ใน ConstraintLayout

3. ใช้ ListView.setNestedScrollingEnabled(true) (API 21+)

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    listView.setNestedScrollingEnabled(true);
}

การทดสอบ

รันแอป ScrollView จะเลื่อนได้ครบ 10 รายการ ไม่หดหุบเหลือ 1 รายการ