Android => RecyclerView i LayoutManagers

GridLayoutManager z dynamiczną liczbą rozpiętości

Podczas tworzenia widoku recyklera za pomocą menedżera układu gridlayout musisz określić liczbę rozpiętości w konstruktorze. Liczba rozpiętości odnosi się do liczby kolumn. Jest to dość niezręczne i nie uwzględnia większych rozmiarów ekranu ani orientacji ekranu. Jednym z podejść jest tworzenie wielu układów dla różnych rozmiarów ekranu. Kolejne bardziej dynamiczne podejście można zobaczyć poniżej.

Najpierw tworzymy niestandardową klasę RecyclerView w następujący sposób:

public class AutofitRecyclerView extends RecyclerView {
    private GridLayoutManager manager;
    private int columnWidth = -1;

    public AutofitRecyclerView(Context context) {
        super(context);
        init(context, null);
    }

    public AutofitRecyclerView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context, attrs);
    }

    public AutofitRecyclerView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init(context, attrs);
    }

    private void init(Context context, AttributeSet attrs) {
        if (attrs != null) {
            int[] attrsArray = {
                    android.R.attr.columnWidth
            };
            TypedArray array = context.obtainStyledAttributes(attrs, attrsArray);
            columnWidth = array.getDimensionPixelSize(0, -1);
            array.recycle();
        }

        manager = new GridLayoutManager(getContext(), 1);
        setLayoutManager(manager);
    }

    @Override
    protected void onMeasure(int widthSpec, int heightSpec) {
        super.onMeasure(widthSpec, heightSpec);
        if (columnWidth > 0) {
            int spanCount = Math.max(1, getMeasuredWidth() / columnWidth);
            manager.setSpanCount(spanCount);
        }
    }
}

Ta klasa określa, ile kolumn może zmieścić się w widoku recyklera. Aby go użyć, musisz umieścić go w pliku layout.xml w następujący sposób:

<?xml version="1.0" encoding="utf-8"?>
<com.path.to.your.class.autofitRecyclerView.AutofitRecyclerView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/auto_fit_recycler_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:columnWidth="200dp"
    android:clipToPadding="false"
    />

Zauważ, że używamy atrybutu columnWidth. Recykler będzie potrzebował go do ustalenia, ile kolumn zmieści się w dostępnej przestrzeni.

W swojej aktywności / fragmencie po prostu otrzymujesz odniesienie do widoku recylerów i ustawiasz do niego adapter (oraz wszelkie dekoracje lub animacje przedmiotów, które chcesz dodać). NIE NALEŻY USTAWIAĆ MENEDŻERA UKŁADÓW

RecyclerView recyclerView = (RecyclerView) findViewById(R.id.auto_fit_recycler_view);
recyclerView.setAdapter(new MyAdapter());

(gdzie MyAdapter to klasa adaptera)

Masz teraz widok recyklera, który dostosuje spancount (tj. Kolumny) do rozmiaru ekranu. Na koniec warto wyśrodkować kolumny w widoku recyclingler (domyślnie są one wyrównane do układu_start). Możesz to zrobić, modyfikując nieco klasę AutofitRecyclerView. Zacznij od utworzenia wewnętrznej klasy w widoku recyklera. Będzie to klasa, która rozszerza się z GridLayoutManager. Doda to wystarczającą ilość dopełnienia po lewej i prawej stronie, aby wyśrodkować rzędy:

public class AutofitRecyclerView extends RecyclerView {

    // etc see above

    private class CenteredGridLayoutManager extends GridLayoutManager {

        public CenteredGridLayoutManager(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
            super(context, attrs, defStyleAttr, defStyleRes);
        }

        public CenteredGridLayoutManager(Context context, int spanCount) {
            super(context, spanCount);
        }

        public CenteredGridLayoutManager(Context context, int spanCount, int orientation, boolean reverseLayout) {
            super(context, spanCount, orientation, reverseLayout);
        }

        @Override
        public int getPaddingLeft() {
            final int totalItemWidth = columnWidth * getSpanCount();
            if (totalItemWidth >= AutofitRecyclerView.this.getMeasuredWidth()) {
                return super.getPaddingLeft(); // do nothing
            } else {
                return Math.round((AutofitRecyclerView.this.getMeasuredWidth() / (1f + getSpanCount())) - (totalItemWidth / (1f + getSpanCount())));
            }
        }

        @Override
        public int getPaddingRight() {
            return getPaddingLeft();
        }
    }
}

Następnie, gdy ustawisz LayoutManager w AutofitRecyclerView, użyj CenteredGridLayoutManager w następujący sposób:

private void init(Context context, AttributeSet attrs) {
    if (attrs != null) {
        int[] attrsArray = {
                android.R.attr.columnWidth
        };
        TypedArray array = context.obtainStyledAttributes(attrs, attrsArray);
        columnWidth = array.getDimensionPixelSize(0, -1);
        array.recycle();
    }

    manager = new CenteredGridLayoutManager(getContext(), 1);
    setLayoutManager(manager);
}

I to wszystko! Masz dynamiczny podgląd, recykling oparty na gridlayoutmanager.

Źródła:

Dodawanie widoku nagłówka do widoku recyklera za pomocą menedżera gridlayout

Aby dodać nagłówek do widoku recyklera za pomocą gridlayout, najpierw adapter musi zostać poinformowany, że widok nagłówka jest pierwszą pozycją, a nie standardową komórką używaną dla zawartości. Następnie menedżer układu musi zostać poinformowany, że pierwsza pozycja powinna mieć rozpiętość równą * rozpiętości całej listy. *

Weź zwykłą klasę RecyclerView.Adapter i skonfiguruj ją w następujący sposób:

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

    private static final int ITEM_VIEW_TYPE_HEADER = 0;
    private static final int ITEM_VIEW_TYPE_ITEM = 1;

    private List<YourModel> mModelList;

    public HeaderAdapter (List<YourModel> modelList) {
        mModelList = modelList;
    }

    public boolean isHeader(int position) {
        return position == 0;
    }

    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        LayoutInflater inflater = LayoutInflater.from(parent.getContext());

        if (viewType == ITEM_VIEW_TYPE_HEADER) {
            View headerView = inflater.inflate(R.layout.header, parent, false);
            return new HeaderHolder(headerView);
        }

        View cellView = inflater.inflate(R.layout.gridcell, parent, false);
        return new ModelHolder(cellView);
    }

    @Override
    public int getItemViewType(int position) {
        return isHeader(position) ? ITEM_VIEW_TYPE_HEADER : ITEM_VIEW_TYPE_ITEM;
    }

    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder h, int position) {
        if (isHeader(position)) {
            return;
        }

        final YourModel model = mModelList.get(position -1 ); // Subtract 1 for header

        ModelHolder holder = (ModelHolder) h;
        // populate your holder with data from your model as usual
    }

    @Override
    public int getItemCount() {
        return _categories.size() + 1; // add one for the header
    }
}

Następnie w aktywności / fragmencie:

final HeaderAdapter adapter = new HeaderAdapter (mModelList);
final GridLayoutManager manager = new GridLayoutManager(); 
manager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
    @Override
    public int getSpanSize(int position) {
        return adapter.isHeader(position) ? manager.getSpanCount() : 1;
    }
});
mRecyclerView.setLayoutManager(manager);
mRecyclerView.setAdapter(adapter);

Można zastosować to samo podejście, dodając stopkę obok lub zamiast nagłówka.

Źródło: blog Chiu-Ki Chan's Square Island

Prosta lista z LinearLayoutManager

W tym przykładzie dodano listę miejsc z obrazem i nazwą przy użyciu ArrayList niestandardowych obiektów Place jako zestawu danych.

Układ aktywności

Układ działania / fragmentu lub miejsca, w którym używany jest RecyclerView, musi zawierać tylko RecyclerView. Nie jest wymagany ScrollView ani określony układ.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/my_recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</RelativeLayout>

Zdefiniuj model danych

Możesz użyć dowolnej klasy lub pierwotnego typu danych jako modelu, takiego jak int , String , float[] lub CustomObject . RecyclerView odwoła się do List tych obiektów / prymitywów.

Gdy element listy odnosi się do różnych typów danych, takich jak tekst, liczby, obrazy (jak w tym przykładzie z miejscami), często dobrym pomysłem jest użycie niestandardowego obiektu.

public class Place {
    // these fields will be shown in a list item
    private Bitmap image;
    private String name;

    // typical constructor
    public Place(Bitmap image, String name) {
        this.image = image;
        this.name = name;
    }

    // getters
    public Bitmap getImage() {
        return image;
    }
    public String getName() {
        return name;
    } 
}

Układ elementu listy

Musisz określić plik układu XML, który będzie używany dla każdego elementu listy. W tym przykładzie ImageView jest używany dla obrazu, a TextView dla nazwy. LinearLayout ustawia ImageView po lewej stronie, a TextView prawej stronie obrazu.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:orientation="horizontal"
    android:padding="8dp">

    <ImageView
        android:id="@+id/image"
        android:layout_width="36dp"
        android:layout_height="36dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp" />

    <TextView
        android:id="@+id/name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

Utwórz adapter RecyclerView i ViewHolder

Następnie musisz odziedziczyć RecyclerView.Adapter i RecyclerView.ViewHolder . Zwykła struktura klas to:

public class PlaceListAdapter extends RecyclerView.Adapter<PlaceListAdapter.ViewHolder> {
    // ...

    public class ViewHolder extends RecyclerView.ViewHolder {
        // ...
    }
}

Najpierw wdrażamy ViewHolder . Dziedziczy tylko domyślnego konstruktora i zapisuje potrzebne widoki w niektórych polach:

public class ViewHolder extends RecyclerView.ViewHolder {
    private ImageView imageView;
    private TextView nameView;

    public ViewHolder(View itemView) {
        super(itemView);

        imageView = (ImageView) itemView.findViewById(R.id.image);
        nameView = (TextView) itemView.findViewById(R.id.name);
    }
}

Konstruktor adaptera ustawia używany zestaw danych:

public class PlaceListAdapter extends RecyclerView.Adapter<PlaceListAdapter.ViewHolder> {
    private List<Place> mPlaces;

    public PlaceListAdapter(List<Place> contacts) {
        mPlaces = contacts;
    }

    // ...
}

Aby użyć naszego niestandardowego układu elementu listy, zastępujemy metodę onCreateViewHolder(...) . W tym przykładzie plik układu nosi nazwę place_list_item.xml .

public class PlaceListAdapter extends RecyclerView.Adapter<PlaceListAdapter.ViewHolder> {
    // ...

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(
                R.layout.place_list_item,
                parent,
                false
        );
        return new ViewHolder(view);
    }

    // ...
}

W onBindViewHolder(...) tak naprawdę ustawiamy zawartość widoków. ViewHolder używany model, znajdując go na List w danej pozycji, a następnie ustawiamy obraz i nazwę w ViewHolder .

public class PlaceListAdapter extends RecyclerView.Adapter<PlaceListAdapter.ViewHolder> {
    // ...

    @Override
    public void onBindViewHolder(PlaceListAdapter.ViewHolder viewHolder, int position) {
        Place place = mPlaces.get(position);

        viewHolder.nameView.setText(place.getName());
        viewHolder.imageView.setImageBitmap(place.getImage());
    }

    // ...
}

Musimy również wdrożyć getItemCount() , która po prostu wraca List rozmiar „s.

public class PlaceListAdapter extends RecyclerView.Adapter<PlaceListAdapter.ViewHolder> {
    // ...

    @Override
    public int getItemCount() {
        return mPlaces.size();
    }

    // ...
}

(Generuj losowe dane)

W tym przykładzie wygenerujemy losowe miejsca.

@Override
protected void onCreate(Bundle savedInstanceState) {
    // ...

    List<Place> places = randomPlaces(5);

    // ...
}

private List<Place> randomPlaces(int amount) {
    List<Place> places = new ArrayList<>();
    for (int i = 0; i < amount; i++) {
        places.add(new Place(
                BitmapFactory.decodeResource(getResources(), Math.random() > 0.5 ?
                        R.drawable.ic_account_grey600_36dp :
                        R.drawable.ic_android_grey600_36dp
                ),
                "Place #" + (int) (Math.random() * 1000)
        ));
    }
    return places;
}

Połącz RecyclerView z PlaceListAdapter i zestawem danych

Połączenie RecyclerView z adapterem jest bardzo łatwe. Musisz ustawić LinearLayoutManager jako menedżera układu, aby uzyskać układ listy.

@Override
protected void onCreate(Bundle savedInstanceState) {
    // ...

    RecyclerView recyclerView = (RecyclerView) findViewById(R.id.my_recycler_view);
    recyclerView.setAdapter(new PlaceListAdapter(places));
    recyclerView.setLayoutManager(new LinearLayoutManager(this));
}

Gotowy!

StaggeredGridLayoutManager

Utwórz RecyclerView w pliku XML układu:

<android.support.v7.widget.RecyclerView
            android:id="@+id/recycleView"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

Utwórz klasę Model do przechowywania danych:

     public class PintrestItem {
     String url;
     public PintrestItem(String url,String name){
         this.url=url;
         this.name=name;
     }
     public String getUrl() {
         return url;
     }
 
    public String getName(){
        return name;
    }
     String name;
 }

Utwórz plik układu do przechowywania elementów RecyclerView:

<ImageView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:adjustViewBounds="true"
    android:scaleType="centerCrop"
    android:id="@+id/imageView"/>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:id="@+id/name"
        android:layout_gravity="center"
        android:textColor="@android:color/white"/>

Utwórz klasę adaptera dla RecyclerView:

 public class PintrestAdapter extends  RecyclerView.Adapter<PintrestAdapter.PintrestViewHolder>{
    private ArrayList<PintrestItem>images;
    Picasso picasso;
    Context context;
    public PintrestAdapter(ArrayList<PintrestItem>images,Context context){
        this.images=images;
        picasso=Picasso.with(context);
        this.context=context;

    }

    @Override
    public PintrestViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view= LayoutInflater.from(parent.getContext()).inflate(R.layout.pintrest_layout_item,parent,false);
        return new PintrestViewHolder(view);
    }

    @Override
    public void onBindViewHolder(PintrestViewHolder holder, int position) {
          picasso.load(images.get(position).getUrl()).into(holder.imageView);
          holder.tv.setText(images.get(position).getName());
    }

    @Override
    public int getItemCount() {
        return images.size();
    }

    public class PintrestViewHolder extends RecyclerView.ViewHolder{
        ImageView imageView;
        TextView tv;
        public PintrestViewHolder(View itemView) {
            super(itemView);
            imageView=(ImageView)itemView.findViewById(R.id.imageView);
            tv=(TextView)itemView.findViewById(R.id.name);
            
        }
    }
}

Utwórz instancję RecyclerView w swojej aktywności lub fragmencie:

RecyclerView recyclerView = (RecyclerView)findViewById(R.id.recyclerView);
//Create the instance of StaggeredGridLayoutManager with 2 rows i.e the span count and provide the orientation
StaggeredGridLayoutManager layoutManager=new new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL);
recyclerView.setLayoutManager(layoutManager);
// Create Dummy Data and Add to your List<PintrestItem>
List<PintrestItem>items=new ArrayList<PintrestItem>
items.add(new PintrestItem("url of image you want to show","imagename"));
items.add(new PintrestItem("url of image you want to show","imagename"));
items.add(new PintrestItem("url of image you want to show","imagename"));
recyclerView.setAdapter(new PintrestAdapter(items,getContext() );

Nie zapomnij dodać zależności Picassa do pliku build.gradle:

compile 'com.squareup.picasso:picasso:2.5.2'

Modified text is an extract of the original Stack Overflow Documentation

Licencjonowany na podstawie CC BY-SA 3.0

Nie związany z Stack Overflow

Android
RecyclerView i LayoutManagers

Szukaj…