RecyclerView

스크롤 위젯 RecyclerView 사용하기

RecyclerView.Adapter 계속 구현하기

어댑터의 두 메서드를 통해 뷰를 저장하고 위젯에 값을 할당할 수 있습니다.

public ViewHolder onCreateViewHolder

public void onBindViewHolderCode language: PHP (php)

package com.foxdevelop.www.recyclerviewtest;

import android.annotation.SuppressLint;
import android.support.annotation.NonNull;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import java.util.List;

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

    private List<Book> books;

    // RecyclerView.ViewHolder를 상속받는 내부 정적 클래스 정의
    static class ViewHolder extends RecyclerView.ViewHolder
    {
        ImageView imageUI;
        TextView textViewUI;

        public  ViewHolder(View view)
        {
            super(view);
            this.imageUI = (ImageView)view.findViewById(R.id.image_view);
            this.textViewUI = (TextView)view.findViewById(R.id.text_view);
        }
    }

    public BookAdapter(List<Book> books)
    {
        this.books = books;
    }

    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.book_list,parent,false);
        ViewHolder viewHolder = new ViewHolder(view); // recycler 뷰 항목을 우리의 ViewHolder에 전달
        return viewHolder;
    }

    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
        Book book = books.get(position); // 현재 책 가져오기
        holder.textViewUI.setText(book.getName()); // 두 위젯에 각각 값 할당
        holder.imageUI.setImageResource(book.getImageId());
    }

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

}Code language: JavaScript (javascript)

<?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">
    <ImageView
        android:id="@+id/image_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />

    <TextView
        android:id="@+id/text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="12dp"
        android:layout_gravity="center"
        />
</LinearLayout>Code language: HTML, XML (xml)

RecyclerView 가로 스크롤 레이아웃

RecyclerView에서 가로 스크롤 구현은 매우 간단합니다

ListView로는 불가능한 일입니다.

먼저 book_list 레이아웃을 수정합니다.

book_list 레이아웃 수정

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="100dp"
    android:layout_height="wrap_content">
    <ImageView
        android:id="@+id/image_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        />

    <TextView
        android:id="@+id/text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="12dp"
        android:layout_gravity="center_horizontal"
        />
</LinearLayout>Code language: HTML, XML (xml)

LinearLayoutManager 방향 설정

public class MainActivity extends AppCompatActivity {
    private List<Book> courses = new ArrayList<Book>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
         ………………
        linearLayoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);
        recyclerView.setLayoutManager(linearLayoutManager);
         ……………..
    }Code language: PHP (php)

RecyclerView 폭포수(Staggered) 레이아웃

RecyclerView는 레이아웃을 레이아웃 매니저에 위임하므로 다양한 레이아웃을 쉽게 구현할 수 있습니다.

가로 정렬 외에도 RecyclerView는 다음을 지원합니다:

GridLayoutManager를 이용한 그리드 레이아웃

StaggeredGridLayoutManager를 이용한 폭포수 레이아웃

폭포수 레이아웃 설정 – book_list 뷰 수정

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="5dp"
    >
    <ImageView
        android:id="@+id/image_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="left"
        android:layout_marginTop="10dp"
        />

    <TextView
        android:id="@+id/text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_gravity="left"
        />
</LinearLayout>Code language: HTML, XML (xml)

RecyclerView에 폭포수 레이아웃 적용하기

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    LoadBooks();
    RecyclerView recyclerView = (RecyclerView)findViewById(R.id.testrecy);
    StaggeredGridLayoutManager sg = new StaggeredGridLayoutManager(3,StaggeredGridLayoutManager.VERTICAL);
    recyclerView.setLayoutManager(sg);
    BookAdapter bookAdapter = new BookAdapter(courses); // 어댑터 초기화 시 데이터 소스를 전달
    recyclerView.setAdapter(bookAdapter);
}Code language: JavaScript (javascript)

RecyclerView 그리드 테이블 레이아웃

테이블 정렬과 폭포수 정렬의 차이점은 테이블에서는 각 셀의 너비와 높이가 동일하다는 것입니다

반면 폭포수 레이아웃에서는 항목의 높이가 다를 수 있습니다

수정은 매우 간단합니다

GridLayoutManager layoutManager = new GridLayoutManager(this,3);
recyclerView.setLayoutManager(layoutManager);Code language: JavaScript (javascript)

RecyclerView