Tworzenie dynamicznych list za pomocą RecyclerView Zawiera Android Jetpack.
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
. toViewGroup
, który zawiera widoki odpowiadający Twoim danym. To widok, więc dodajeszRecyclerView
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 rozszerzenieRecyclerView.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ącRecyclerView.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.
Wybierz wygląd listy lub siatki. Zwykle możesz jednego ze standardowych menedżerów układu z biblioteki RecyclerView.
Zaprojektuj, jak każdy element na liście wygląda i działa. Siedziba w tym projekcie, rozszerz klasę
ViewHolder
. Twoja wersja aplikacjiViewHolder
udostępnia wszystkie funkcje elementów listy. Twój widok to wokół elementuView
, a widokiem tym zarządzaRecyclerView
.Określ
Adapter
, który wiąże Twoje dane z widokamiViewHolder
.
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.
- Jeśli siatka jest rozmieszczona w pionie,
StaggeredGridLayoutManager
jest podobny doGridLayoutManager
, 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 elementViewHolder
. Metoda tworzy i inicjujeViewHolder
i powiązane z nimView
, ale nie wypełnia pola widoku danych zawartości – elementViewHolder
nie jest jeszcze powiązany z określonymi danymi.onBindViewHolder()
:RecyclerView
wywołuje tę metodę, aby powiązać elementViewHolder
z danymi. pobiera odpowiednie dane i używa ich do wypełnienia widoku do układu właściciela. Jeśli na przykładRecyclerView
wyświetla listę imion i nazwisk, metoda może znaleźć odpowiednią nazwę na liście i wypełnić widok widżetTextView
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.