Android => RecyclerView 및 LayoutManager

동적 범위 카운트가있는 GridLayoutManager

gridlayout 레이아웃 관리자로 recyclerview를 만들 때 생성자에서 스팬 수를 지정해야합니다. 스팬 수는 열의 수를 나타냅니다. 이것은 상당히 clunky이며 큰 화면 크기 또는 화면 방향을 고려하지 않습니다. 한 가지 방법은 다양한 화면 크기에 대해 여러 레이아웃을 만드는 것입니다. 아래에서 더 동적 인 접근 방식을 볼 수 있습니다.

먼저 다음과 같이 사용자 지정 RecyclerView 클래스를 만듭니다.

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);
        }
    }
}

이 클래스는 recyclerview에 들어갈 수있는 컬럼의 수를 결정합니다. 이를 사용하려면 다음과 같이 layout.xml에 배치해야합니다.

<?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"
    />

우리는 columnWidth 속성을 사용합니다. recyclerview는 얼마나 많은 컬럼이 사용 가능한 공간에 들어갈지를 결정하기 위해 그것을 필요로 할 것입니다.

액티비티 / 프래그먼트에서 recylerview에 대한 참조를 얻고 어댑터 (및 추가하려는 아이템 장식 또는 애니메이션)를 설정합니다. 레이아웃 관리자를 설정하지 마십시오.

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

(여기서 MyAdapter는 어댑터 클래스 임)

이제 화면 크기에 맞게 스팬 카운트 (즉, 열)를 조정하는 recyclerview가 생겼습니다. 마지막으로 column을 recyclerview에 센터링 할 수도 있습니다 (기본적으로 layout_start에 정렬됩니다). AutofitRecyclerView 클래스를 조금 수정하면됩니다. 먼저 recyclerview에 내부 클래스를 작성하십시오. 이것은 GridLayoutManager에서 확장되는 클래스입니다. 행을 가운데 맞추기 위해 왼쪽과 오른쪽에 충분한 여백을 추가합니다.

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();
        }
    }
}

그런 다음 AutofitRecyclerView에서 LayoutManager를 설정하면 다음과 같이 CenteredGridLayoutManager를 사용합니다.

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);
}

그리고 그게 다야! 동적 인 작업 공간, centerlined gridlayoutmanager 기반의 recyclerview가 있습니다.

출처 :

Gridlayout 관리자를 사용하여 recyclerview에 헤더보기 추가

gridlayout이있는 recyclerview에 헤더를 추가하려면 먼저 어댑터가 내용에 사용 된 표준 셀 대신 헤더보기가 첫 번째 위치라는 것을 알려야합니다. 다음으로 레이아웃 관리자는 첫 번째 위치가 전체 목록의 스팬 수와 동일한 스팬을 가져야한다고 알려야합니다. *

일반 RecyclerView.Adapter 클래스를 가져 와서 다음과 같이 구성합니다.

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
    }
}

그런 다음 활동 / 단편 :

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);

동일한 접근법을 사용하여 머리글에 추가하거나 헤더 대신에 꼬리말을 추가 할 수 있습니다.

출처 : Chiu-Ki Chan의 스퀘어 아일랜드 블로그

LinearLayoutManager를 사용한 간단한 목록

이 예제에서는 사용자 정의 Place 객체의 ArrayList 를 데이터 세트로 사용하여 이미지와 이름이있는 작업 영역 목록을 추가합니다.

활동 레이아웃

activity / fragment 또는 RecyclerView가 사용되는 레이아웃은 RecyclerView를 포함해야합니다. ScrollView 또는 특정 레이아웃이 필요하지 않습니다.

<?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>

데이터 모델 정의

int , String , float[] 또는 CustomObject 와 같은 모든 클래스 또는 원시 데이터 유형을 모델로 사용할 수 있습니다. RecyclerView는이 객체 / 프리미티브의 List 을 참조합니다.

목록 항목이 텍스트, 숫자, 이미지와 같은 다른 데이터 유형 (예 : 작업 공간)을 참조 할 때 사용자 정의 오브젝트를 사용하는 것이 좋습니다.

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;
    } 
}

목록 항목 레이아웃

각 목록 항목에 사용할 xml 레이아웃 파일을 지정해야합니다. 이 예에서는 ImageView 가 사용되고 이름에는 TextView 가 사용됩니다. LinearLayout 은 ImageView 를 왼쪽에, TextView 오른쪽에 이미지를 배치합니다.

<?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>

RecyclerView 어댑터 및 ViewHolder 만들기

다음으로 상속해야 RecyclerView.Adapter 과 RecyclerView.ViewHolder . 일반적인 클래스 구조는 다음과 같습니다.

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

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

먼저 ViewHolder 구현합니다. 기본 생성자 만 상속하고 필요한 뷰를 일부 필드에 저장합니다.

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);
    }
}

어댑터의 생성자는 사용 된 데이터 집합을 설정합니다.

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

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

    // ...
}

사용자 지정 목록 항목 레이아웃을 사용하려면 onCreateViewHolder(...) 메서드를 재정의합니다. 이 예제에서 레이아웃 파일은 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);
    }

    // ...
}

onBindViewHolder(...) 에서 뷰의 내용을 실제로 설정했습니다. 지정된 위치에서 List 에서 찾고 사용 된 모델을 얻은 다음 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());
    }

    // ...
}

또한 List 의 크기를 반환하는 getItemCount() 를 구현해야합니다.

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

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

    // ...
}

(무작위 데이터 생성)

이 예에서는 임의의 장소를 생성합니다.

@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;
}

RecyclerView를 PlaceListAdapter 및 데이터 세트와 연결하십시오.

RecyclerView 를 어댑터와 연결하는 것은 매우 쉽습니다. 목록 레이아웃을 구현하려면 레이아웃 관리자로 LinearLayoutManager 를 설정해야합니다.

@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));
}

끝난!

StaggeredGridLayoutManager

레이아웃 xml 파일에 RecyclerView를 만듭니다.

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

데이터 보관을위한 Model 클래스를 만듭니다.

     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;
 }

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"/>

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);
            
        }
    }
}

작업 또는 조각에서 RecyclerView를 인스턴스화합니다.

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() );

build.gradle 파일에 Picasso 종속성을 추가하는 것을 잊지 마세요.

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

Modified text is an extract of the original Stack Overflow Documentation

아래 라이선스 CC BY-SA 3.0

와 제휴하지 않음 Stack Overflow

Android
RecyclerView 및 LayoutManager

수색…