[안드로이드] RecyclerView 예제

---

이 글은 PC 버전 TISTORY에 최적화 되어있습니다.

서론

 저번 장에서 ListView와 비교하여 RecyclerView에 대하여 알아보았습니다. 이번 장에서는 실제로 RecyclerView를 어떻게 사용할지 예제를 통해서 알아보도록 하겠습니다. 아래와 같이 Linear, Grid, StaggeredGird 형태의 레이아웃으로 유연하게 쉽게 변형할 수 있고, ViewHolder 패턴을 강제함으로서 성능 향상을 이룰 수 있으며, 간단하게 Animation을 사용할 수 있는 RecycleView + CardView 예제를 설명하도록 하겠습니다. 

라이브러리 추가

File - Project Structure - Dependecies 에서 + 버튼을 눌러 RecycleView와 CardView를 추가해줍니다.

v7 widget 라이브러리가 꼭 필요하므로 생략하시면 안됩니다.

레이아웃 구성

[activity_main.xml]

<relativelayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.example.hhj.recyclerview.MainActivity">

    <android.support.v7.widget.recyclerview android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/recycler_view" android:scrollbars="vertical">

    </android.support.v7.widget.recyclerview>

</relativelayout>

메인 액티비티에 RecyclerView를 넣어줍니다.

[item_cardview.xml]

<relativelayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="wrap_content">

    

    <android.support.v7.widget.cardview android:layout_width="wrap_content" android:layout_height="wrap_content" app:cardcornerradius="10dp" app:cardelevation="10dp" app:cardusecompatpadding="true">

        <linearlayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical">

            <imageview android:layout_width="wrap_content" android:scaletype="centerCrop" android:layout_height="wrap_content" android:id="@+id/image">

            <textview android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/imagetitle" android:gravity="center" android:textappearance="?android:attr/textAppearanceListItemSmall" android:minheight="?android:attr/listPreferredItemHeightSmall">

        </textview></imageview></linearlayout>

    </android.support.v7.widget.cardview>

</relativelayout>

위에서 작성한 RecycleView에 들어갈 Item Layout을 작성해야합니다. 필자는 그림과 제목을 넣었지만 원하는 형태로 넣어주셔도 됩니다.

Activity 구성

[Item.java]

public class Item {

    int image;
    String imagetitle;

    public int getImage() {
        return image;
    }

    public String getImagetitle() {
        return imagetitle;
    }

    public Item(int image, String imagetitle)
    {
        this.image=image;
        this.imagetitle=imagetitle;
    }

}

화면을 만들었으니 화면에 출력할 데이터를 담을 객체를 생성합니다. 이미지와 제목으로 이루어진 앨범을 만드려고 합니다.

[MainActivity.java]

public class MainActivity extends AppCompatActivity {

    Context mContext;

    RecyclerView recyclerView;
    RecyclerView.Adapter Adapter;
    RecyclerView.LayoutManager layoutManager;

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

        mContext = getApplicationContext();

        recyclerView = (RecyclerView) findViewById(R.id.recycler_view);
        recyclerView.setHasFixedSize(true);


        // Item 리스트에 아이템 객체 넣기
        ArrayList items = new ArrayList<>();

        items.add(new Item(R.drawable.a, "미키마우스"));
        items.add(new Item(R.drawable.b, "인어공주"));
        items.add(new Item(R.drawable.c, "디즈니공주"));
        items.add(new Item(R.drawable.d, "토이스토리"));
        items.add(new Item(R.drawable.e, "니모를 찾아서"));

        // StaggeredGrid 레이아웃을 사용한다
        layoutManager = new StaggeredGridLayoutManager(2,StaggeredGridLayoutManager.VERTICAL);
        //layoutManager = new LinearLayoutManager(this);
        //layoutManager = new GridLayoutManager(this,3);

        // 지정된 레이아웃매니저를 RecyclerView에 Set 해주어야한다.
        recyclerView.setLayoutManager(layoutManager);

        Adapter = new MyAdpater(items,mContext);
        recyclerView.setAdapter(Adapter);

    }

    class MyAdpater extends RecyclerView.Adapter
    {
        private Context context;
        private ArrayList mItems;

        // Allows to remember the last item shown on screen
        private int lastPosition = -1;

        public MyAdpater(ArrayList items, Context mContext)
        {
            mItems = items;
            context = mContext;
        }

        // 필수로 Generate 되어야 하는 메소드 1 : 새로운 뷰 생성
        @Override
        public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {

            // 새로운 뷰를 만든다
            View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_cardview,parent,false);
            ViewHolder holder = new ViewHolder(v);
            return holder;
        }

        // 필수로 Generate 되어야 하는 메소드 2 : ListView의 getView 부분을 담당하는 메소드
        @Override
        public void onBindViewHolder(ViewHolder holder, int position) {

            holder.imageView.setImageResource(mItems.get(position).image);
            holder.textView.setText(mItems.get(position).imagetitle);

            setAnimation(holder.imageView, position);
        }

        // // 필수로 Generate 되어야 하는 메소드 3
        @Override
        public int getItemCount() {
            return mItems.size();
        }

        public class ViewHolder  extends RecyclerView.ViewHolder {

            public ImageView imageView;
            public TextView textView;

            public ViewHolder(View view) {
                super(view);
                imageView = (ImageView) view.findViewById(R.id.image);
                textView = (TextView) view.findViewById(R.id.imagetitle);
            }
        }

        private void setAnimation(View viewToAnimate, int position)
        {
            // 새로 보여지는 뷰라면 애니메이션을 해줍니다
            if (position > lastPosition)
            {
                Animation animation = AnimationUtils.loadAnimation(context, android.R.anim.slide_in_left);
                viewToAnimate.startAnimation(animation);
                lastPosition = position;
            }
        }

    }
}

ViewHolder를 작성하고, 레이아웃 생성 후 holder에 저장, 데이터를 출력 하는 3가지의 부분으로 이루어져 있습니다.

코드 내의 주석문을 보시면 이해하기 편하실 것 입니다.

layoutManager를 생성할 때 Linear(Vertical), Linear(Horizontal), grid, StaggeredGrid인지 선택할 수 있으므로

사용자가 유연하게 리스트의 레이아웃을 조절할 수 있습니다.

뷰홀더 패턴을 강제하고 있으므로 ListView에 비해 향상된 성능의 리스트를 사용할 수 있습니다.

Animation 사용하기

Item_cardView.xml에 textAppearance와 minHeight를 넣어줍니다.

어댑터 클래스 내에 setAnimation 메소드를 위와 같이 작성해줍니다.

onBindViewHolder 메소드에서 setAnimation을 해주게되면 

스크롤을 내려 새로운 뷰가 bind 될 때 Item이 왼쪽에서 오른쪽으로 나타나는 애니메이션이 진행됩니다.

참고사이트

1.  StaggeredGridLayoutManager 를 사용한 RecyclerView
2.  Expandable RecyclerView 
3.  ItemAnimator 사용법