잡동사니

GridLayoutManager와 함께 RecyclerView를 사용하는 간단한 Android Grid 예제 (예 : 이전 GridView)

카테고리 없음
2020. 8. 12. 00:01
반응형

질문

RecyclerView가 이전 ListView 및 GridView의 기능을 대체했음을 알고 있습니다. RecyclerView를 사용하여 최소한의 Grid 설정을 보여주는 매우 기본적인 예제를 찾고 있습니다. 긴 튜토리얼 스타일의 설명이 아니라 최소한의 예제일 뿐입니다. 이전 GridView를 모방 한 가장 간단한 Grid가 다음 기능으로 구성 될 것이라고 상상합니다.

  • 행당 여러 셀
  • 각 셀의 싱글뷰
  • 클릭 이벤트에 응답

 

답변1

Short answer

RecyclerView를 설정하여 목록을 만드는 에 이미 익숙한 사용자를 위해 a>, 좋은 소식은 Grid를 만드는 것이 거의 동일하다는 것입니다. RecyclerView 를 설정할 때 LinearLayoutManager대신 GridLayoutManager를 사용합니다.

recyclerView.setLayoutManager(new GridLayoutManager(this, numberOfColumns));

그보다 더 많은 도움이 필요하면 다음 예제를 확인하십시오.

Full example

다음은 아래 이미지와 같은 최소한의 예입니다.

여기에 이미지 설명 입력

빈 활동으로 시작하십시오. 다음 작업을 수행하여 RecyclerView Grid를 추가합니다. 각 섹션에 코드를 복사하여 붙여넣기만 하면 됩니다. 나중에 필요에 맞게 사용자 정의 할 수 있습니다.

  • Gradle에 종속성 추가
  • 활동 및 Grid 셀에 대한 xml 레이아웃 파일을 추가하십시오.
  • RecyclerView 어댑터 만들기
  • 활동에서 RecyclerView 초기화

Update Gradle dependencies

app gradle.build 파일에 다음 종속성이 있는지 확인합니다.

compile 'com.android.support:appcompat-v7:27.1.1'
compile 'com.android.support:recyclerview-v7:27.1.1'

버전 번호를 최신 으로 업데이트 할 수 있습니다.

Create activity layout

xml 레이아웃에 RecyclerView를 추가합니다.

activity_main.xml 

<?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/rvNumbers"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</RelativeLayout>

Create grid cell layout

RecyclerView Grid의 각 셀에는 하나의 TextView 만 있습니다. 새 레이아웃 리소스 파일을 만듭니다.

recyclerview_item.xml 

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

        <TextView
            android:id="@+id/info_text"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:background="@color/colorAccent"/>

</LinearLayout>

Create the adapter

RecyclerView에는 각 셀의 보기를 데이터로 채우려면 어댑터가 필요합니다. 새 Java 파일을 만듭니다.

MyRecyclerViewAdapter.java 

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

    private String[] mData;
    private LayoutInflater mInflater;
    private ItemClickListener mClickListener;

    // data is passed into the constructor
    MyRecyclerViewAdapter(Context context, String[] data) {
        this.mInflater = LayoutInflater.from(context);
        this.mData = data;
    }

    // inflates the cell layout from xml when needed
    @Override
    @NonNull 
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = mInflater.inflate(R.layout.recyclerview_item, parent, false);
        return new ViewHolder(view);
    }

    // binds the data to the TextView in each cell
    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
        holder.myTextView.setText(mData[position]);
    }

    // total number of cells
    @Override
    public int getItemCount() {
        return mData.length;
    }


    // stores and recycles views as they are scrolled off screen
    public class ViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener {
        TextView myTextView;

        ViewHolder(View itemView) {
            super(itemView);
            myTextView = itemView.findViewById(R.id.info_text);
            itemView.setOnClickListener(this);
        }

        @Override
        public void onClick(View view) {
            if (mClickListener != null) mClickListener.onItemClick(view, getAdapterPosition());
        }
    }

    // convenience method for getting data at click position
    String getItem(int id) {
        return mData[id];
    }

    // allows clicks events to be caught
    void setClickListener(ItemClickListener itemClickListener) {
        this.mClickListener = itemClickListener;
    }

    // parent activity will implement this method to respond to click events
    public interface ItemClickListener {
        void onItemClick(View view, int position);
    }
}

노트

  • 꼭 필요한 것은 아니지만 셀에서 클릭 이벤트를 수신하는 기능을 포함했습니다. 이것은 이전 GridView에서 사용 가능했으며, 일반적인 요구사항입니다. 이 코드가 필요하지 않은 경우 제거 할 수 있습니다.

Initialize RecyclerView in Activity

기본 Activity에 다음 코드를 추가하십시오.

MainActivity.java 

public class MainActivity extends AppCompatActivity implements MyRecyclerViewAdapter.ItemClickListener {

    MyRecyclerViewAdapter adapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // data to populate the RecyclerView with
        String[] data = {"1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48"};

        // set up the RecyclerView
        RecyclerView recyclerView = findViewById(R.id.rvNumbers);
        int numberOfColumns = 6;
        recyclerView.setLayoutManager(new GridLayoutManager(this, numberOfColumns));
        adapter = new MyRecyclerViewAdapter(this, data);
        adapter.setClickListener(this);
        recyclerView.setAdapter(adapter);
    }

    @Override
    public void onItemClick(View view, int position) {
        Log.i("TAG", "You clicked number " + adapter.getItem(position) + ", which is at cell position " + position);
    }
}

노트

  • 활동은 어댑터에서 정의한 ItemClickListener 를 구현합니다. 이를 통해 onItemClick 에서 셀 클릭 이벤트를 처리 할 수 있습니다.

Finished

그게 다야. 이제 프로젝트를 실행하고 상단의 이미지와 유사한 것을 얻을 수 있어야합니다.

Going on

둥근 모서리

자동 커스텀 컬럼

Further study



답변2

Suragch 의 답변 을 좋아하고 감사하지만, 다음과 같은 이유로 메모를 남기고 싶습니다. 리스너 메서드 onItemClick을 정의하고 노출하기 위해 Adapter (MyRecyclerViewAdapter)를 코딩하는 것이 최선의 방법이 아니라는 것을 알았습니다. class 캡슐화를 올바르게 사용하지 않습니다. 그래서 제 제안은 Adapter 가 Listening 작업 만 처리하도록하고 (그의 목적입니다!) Adapter 를 사용하는 Activity와 분리하는 것입니다 (MainActivity). 그래서 이것은 내가 Adapter class를 설정하는 방법입니다.

MyRecyclerViewAdapter.java 

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

    private String[] mData = new String[0];
    private LayoutInflater mInflater;

    // Data is passed into the constructor
    public MyRecyclerViewAdapter(Context context, String[] data) {
        this.mInflater = LayoutInflater.from(context);
        this.mData = data;
    }

    // Inflates the cell layout from xml when needed
    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = mInflater.inflate(R.layout.recyclerview_item, parent, false);
        ViewHolder viewHolder = new ViewHolder(view);
        return viewHolder;
    }

    // Binds the data to the textview in each cell
    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        String animal = mData[position];
        holder.myTextView.setText(animal);
    }

    // Total number of cells
    @Override
    public int getItemCount() {
        return mData.length;
    }

    // Stores and recycles views as they are scrolled off screen
    public class ViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener {
        public TextView myTextView;

        public ViewHolder(View itemView) {
            super(itemView);
            myTextView = (TextView) itemView.findViewById(R.id.info_text);
            itemView.setOnClickListener(this);
        }

        @Override
        public void onClick(View view) {
            onItemClick(view, getAdapterPosition());
        }
    }

    // Convenience method for getting data at click position
    public String getItem(int id) {
        return mData[id];
    }

    // Method that executes your code for the action received
    public void onItemClick(View view, int position) {
        Log.i("TAG", "You clicked number " + getItem(position).toString() + ", which is at cell position " + position);
    }
}

수신된 이벤트 / 액션에 대한 작업을 코딩하려는 위치인 MyRecyclerViewAdapter에 이제 정의된 onItemClick 메서드에 유의하십시오.

이 변환을 완료하기 위해 수행해야할 작은 변경 사항이 있습니다. Activity는 더 이상 MyRecyclerViewAdapter.ItemClickListener 를 구현할 필요가 없습니다. 어댑터 . 이것이 최종 수정입니다.

MainActivity.java 

public class MainActivity extends AppCompatActivity {

    MyRecyclerViewAdapter adapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // data to populate the RecyclerView with
        String[] data = {"1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48"};

        // set up the RecyclerView
        RecyclerView recyclerView = (RecyclerView) findViewById(R.id.rvNumbers);
        int numberOfColumns = 6;
        recyclerView.setLayoutManager(new GridLayoutManager(this, numberOfColumns));
        adapter = new MyRecyclerViewAdapter(this, data);
        adapter.setClickListener(this);
        recyclerView.setAdapter(adapter);
    }
}



답변3

당신의 recyclerview layoutmanager를 Gridlayout 모드로 설정해야합니다 .RecyclerView LayoutManager를 설정하려면 코드를 변경하십시오.

참고 : 원하는 열 수를 ### HELP ###으로 바꿉니다.

   recyclerView.setLayoutManager(new GridLayoutManager(getActivity(),###HELP###));



답변4

RecyclerView 초기화에서 설정

recyclerView.setLayoutManager(new GridLayoutManager(this, 4));



 

 

 

 

출처 : https://stackoverflow.com/questions/40587168/simple-android-grid-example-using-recyclerview-with-gridlayoutmanager-like-the

반응형
저작자표시

이 글을 공유합시다

facebook twitter googleplus kakaoTalk kakaostory naver band
댓글

티스토리툴바