Tworzenie dynamicznych list za pomocą RecyclerView Zawiera Android Jetpack.

Wypróbuj sposób tworzenia wiadomości
Jetpack Compose to zalecany zestaw narzędzi UI na Androida. Dowiedz się, jak korzystać z układów w funkcji Utwórz
Leniwe listy i siatki → .

RecyclerView ułatwia efektywne wyświetlanie dużych zbiorów danych. Ty dostarczasz dane i określić wygląd każdego elementu, a biblioteka RecyclerView dynamicznie tworzy elementy wtedy, gdy są potrzebne.

Jak wskazuje nazwa, element RecyclerView recyklinguje te pojedyncze elementy. Gdy element znika poza ekran, a element RecyclerView nie zniszczy jego widoku. Zamiast tego: Widok RecyclerView ponownie używa tego widoku w przypadku nowych elementów, które zostały przewinięte na ekranie. Funkcja RecyclerView zwiększa wydajność i czas reagowania aplikacji. zmniejsza zużycie energii.

Kluczowe klasy

Kilka zajęć musi ze sobą współpracować, by utworzyć dynamiczną listę.

  • RecyclerView. to ViewGroup, który zawiera widoki odpowiadający Twoim danym. To widok, więc dodajesz RecyclerView w taki sam sposób, w jaki dodajesz inne elementy interfejsu.

  • Każdy element na liście jest definiowany przez obiekt obiektu widoku. Kiedy jeśli zostanie utworzony właściciel widoku, nie są z nim powiązane żadne dane. Po obiekt widoku zostaje utworzony, RecyclerView wiąże go z jego danymi. Ty zdefiniuj posiadacza widoku przez rozszerzenie RecyclerView.ViewHolder

  • RecyclerView prosi o wyświetlenia i wiąże je z ich danymi. wywołując metody w adapcie. Określasz adapter, wydłużając RecyclerView.Adapter

  • Menedżer układu porządkuje poszczególne elementy na liście. Dostępne opcje użyj jednego z menedżerów układu dostępnych w bibliotece RecyclerView. określić własne. Menedżerowie układów są oparte na LayoutManager klasa abstrakcyjna.

Sposób, w jaki wszystkie elementy się ze sobą pokrywają, można zobaczyć w przykładowej aplikacji RecyclerView (Kotlin) lub przykładowa aplikacja RecyclerView (Java).

Etapy wdrażania elementu RecyclerView

Jeśli chcesz użyć obiektu RecyclerView, musisz wykonać kilka czynności. Zostały one szczegółowo wyjaśnione w kolejnych sekcjach.

  1. Wybierz wygląd listy lub siatki. Zwykle możesz jednego ze standardowych menedżerów układu z biblioteki RecyclerView.

  2. Zaprojektuj, jak każdy element na liście wygląda i działa. Siedziba w tym projekcie, rozszerz klasę ViewHolder. Twoja wersja aplikacji ViewHolder udostępnia wszystkie funkcje elementów listy. Twój widok to wokół elementu View, a widokiem tym zarządza RecyclerView.

  3. Określ Adapter, który wiąże Twoje dane z widokami ViewHolder.

Dostępne są też zaawansowane opcje dostosowywania , które pozwalają dostosować RecyclerView dokładnie do Twoich potrzeb.

Planowanie układu

Elementy w widoku RecyclerView są uporządkowane według LayoutManager zajęcia. Biblioteka RecyclerView udostępnia 3 menedżery układu, które obsługują najczęstsze sytuacje związane z układem:

  • LinearLayoutManager uporządkuje elementy na jednowymiarowej liście.
  • GridLayoutManager rozmieszcza elementy w dwuwymiarowej siatce:
      .
    • Jeśli siatka jest rozmieszczona w pionie, GridLayoutManager stara się, aby wszystkie elementy w każdym wierszu mają tę samą szerokość i wysokość, ale różne wiersze; mogą mieć różne wysokości.
    • Jeśli siatka jest rozmieszczona poziomo, GridLayoutManager próbuje ustawić wszystkie elementy w każdej kolumnie mają taką samą szerokość i wysokość, ale różne wartości kolumny mogą mieć różne szerokości.
  • StaggeredGridLayoutManager jest podobny do GridLayoutManager, ale nie wymaga, aby elementy w wiersz ma tę samą wysokość (w przypadku siatek pionowych) lub elementy w tej samej kolumnie mają taką samą szerokość (w przypadku poziomych siatek). Dzięki temu elementy w wierszu lub kolumnie mogą zakończyć się odsunięciem od siebie.

Musisz też zaprojektować układ poszczególnych elementów. Potrzebujemy tego podczas projektowania uchwytu widoku, jak opisano w następnej sekcji.

Wdrażanie adaptera i uchwytu widoku

Po określeniu układu musisz zaimplementować Adapter i ViewHolder Te 2 klasy współpracują ze sobą, aby określić sposób wyświetlenie. ViewHolder to otoka wokół elementu View, który zawiera dla pojedynczego elementu na liście. Adapter tworzy ViewHolder obiektów zgodnie z potrzebami, a także tworzy dane dla tych widoków. Procedura Powiązanie widoków z ich danymi jest nazywane wiązaniem.

Gdy definiujesz adapter, zastępujesz trzy kluczowe metody:

  • onCreateViewHolder(): RecyclerView wywołuje tę metodę za każdym razem, gdy musi utworzyć nowy element ViewHolder. Metoda tworzy i inicjuje ViewHolder i powiązane z nim View, ale nie wypełnia pola widoku danych zawartości – element ViewHolder nie jest jeszcze powiązany z określonymi danymi.

  • onBindViewHolder(): RecyclerView wywołuje tę metodę, aby powiązać element ViewHolder z danymi. pobiera odpowiednie dane i używa ich do wypełnienia widoku do układu właściciela. Jeśli na przykład RecyclerView wyświetla listę imion i nazwisk, metoda może znaleźć odpowiednią nazwę na liście i wypełnić widok widżet TextView właściciela.

  • getItemCount(): RecyclerView wywołuje tę metodę, aby uzyskać rozmiar zbioru danych. Przykład: w aplikacji do książki adresowej, może to być łączna liczba adresów. Funkcja RecyclerView korzysta z tego parametru, aby określić, kiedy nie ma więcej elementów, które można wyświetlenie.

Oto typowy przykład prostej adapter z zagnieżdżonym obiektem ViewHolder, który wyświetla listę danych. W tym przypadku RecyclerView wyświetla prostą listę elementów tekstowych. Adapter jest przekazywany do tablicy ciągów tekstowych zawierających tekst dla elementów ViewHolder.

Kotlin


class CustomAdapter(private val dataSet: Array<String>) :
        RecyclerView.Adapter<CustomAdapter.ViewHolder>() {

    /**
     * Provide a reference to the type of views that you are using
     * (custom ViewHolder)
     */
    class ViewHolder(view: View) : RecyclerView.ViewHolder(view) {
        val textView: TextView

        init {
            // Define click listener for the ViewHolder's View
            textView = view.findViewById(R.id.textView)
        }
    }

    // Create new views (invoked by the layout manager)
    override fun onCreateViewHolder(viewGroup: ViewGroup, viewType: Int): ViewHolder {
        // Create a new view, which defines the UI of the list item
        val view = LayoutInflater.from(viewGroup.context)
                .inflate(R.layout.text_row_item, viewGroup, false)

        return ViewHolder(view)
    }

    // Replace the contents of a view (invoked by the layout manager)
    override fun onBindViewHolder(viewHolder: ViewHolder, position: Int) {

        // Get element from your dataset at this position and replace the
        // contents of the view with that element
        viewHolder.textView.text = dataSet[position]
    }

    // Return the size of your dataset (invoked by the layout manager)
    override fun getItemCount() = dataSet.size

}

Java


public class CustomAdapter extends RecyclerView.Adapter<CustomAdapter.ViewHolder> {

    private String[] localDataSet;

    /**
     * Provide a reference to the type of views that you are using
     * (custom ViewHolder)
     */
    public static class ViewHolder extends RecyclerView.ViewHolder {
        private final TextView textView;

        public ViewHolder(View view) {
            super(view);
            // Define click listener for the ViewHolder's View

            textView = (TextView) view.findViewById(R.id.textView);
        }

        public TextView getTextView() {
            return textView;
        }
    }

    /**
     * Initialize the dataset of the Adapter
     *
     * @param dataSet String[] containing the data to populate views to be used
     * by RecyclerView
     */
    public CustomAdapter(String[] dataSet) {
        localDataSet = dataSet;
    }

    // Create new views (invoked by the layout manager)
    @Override
    public ViewHolder onCreateViewHolder(ViewGroup viewGroup, int viewType) {
        // Create a new view, which defines the UI of the list item
        View view = LayoutInflater.from(viewGroup.getContext())
                .inflate(R.layout.text_row_item, viewGroup, false);

        return new ViewHolder(view);
    }

    // Replace the contents of a view (invoked by the layout manager)
    @Override
    public void onBindViewHolder(ViewHolder viewHolder, final int position) {

        // Get element from your dataset at this position and replace the
        // contents of the view with that element
        viewHolder.getTextView().setText(localDataSet[position]);
    }

    // Return the size of your dataset (invoked by the layout manager)
    @Override
    public int getItemCount() {
        return localDataSet.length;
    }
}

Układ każdego elementu widoku jest jak zwykle zdefiniowany w pliku układu XML. W tym przypadku aplikacja ma plik text_row_item.xml podobny do tego:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="@dimen/list_item_height"
    android:layout_marginLeft="@dimen/margin_medium"
    android:layout_marginRight="@dimen/margin_medium"
    android:gravity="center_vertical">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/element_text"/>
</FrameLayout>

Dalsze kroki

Poniższy fragment kodu pokazuje, jak korzystać z narzędzia RecyclerView.

Kotlin


class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val dataset = arrayOf("January", "February", "March")
        val customAdapter = CustomAdapter(dataset)

        val recyclerView: RecyclerView = findViewById(R.id.recycler_view)
        recyclerView.layoutManager = LinearLayoutManager(this)
        recyclerView.adapter = customAdapter

    }

}

Java


RecyclerView recyclerView = findViewById(R.id.recycler_view);
recyclerView.layoutManager = new LinearLayoutManager(this)
recyclerView.setAdapter(customAdapter);

Biblioteka umożliwia też dostosowanie implementacji na wiele sposobów. Więcej Więcej informacji zawiera sekcja Advanced RecyclerView (Widok zaawansowanego RecyclerView) .

Dodatkowe materiały

Więcej informacji o testowaniu na Androidzie znajdziesz w tych materiałach.

Przykładowe aplikacje