[안드로이드] RecyclerView를 이용한 CardView 만들기

support.v7.widget.CardView

 안드로이드 CardView 는 support.v7.widget 에 속한 라이브러리 입니다.

 리스트 뷰를 보여줄 때 카드 레이아웃을 사용한 형태를 많이 구현했습니다.

 하지만, 직접 그림자도 그려야 하고, 틀을 만들어야 하는 어려움이 존재했습니다.

 이를 해결하기 위해 SDK 21버전부터 CardView가 추가되었습니다.

 CardView는 FrameLayout 클래스를 확장한 형태입니다.

 둥근 모서리, 배경과 그림자가 추가된 FrameLayout 이라고 보시면 됩니다.

 그리고 CardView를 사용하는 가장 중요한 이유, 깔끔하고 이뻐서 !

일반적으로 CardView는 리스트 형태로 보여주기 때문에

뷰에 대해 재사용이 가능한 RecyclerView와 함께 사용됩니다.

위 그림의 경우, 하나의 RecyclerView 내부에 CardView가 들어가 있고, 

또 그 안에 RelativeLayout이 있으며 TextView와 ImageView가 들어있는 형태입니다.

CardView에서 주로 사용되는 속성은 다음과 같습니다.

Attributes	Description
cardElevation	그림자가 있는 카드를 생성
cardCornerRadius	레이아웃에 모서리 반지름 설정
cardBackgroundColor	카드의 배경색을 설정
contentPadding	자식 뷰 사이의 내부 간격을 조정

---

CardView 사용방법

CardView를 사용하기 위해서는 먼저 Gradle에 라이브러리를 추가해야 합니다.

dependencies {
    compile fileTree(include: ['*.jar'], dir: 'libs')
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:23.4.0'
    compile 'com.android.support:cardview-v7:23.4.0'
}

다음으로 레이아웃을 구성해야 합니다.

RecyclerView와 함께 사용하기 위해 CardView는 새로운 xml 파일에 정의해야 합니다.

activity_main에는 RecyclerView를 생성하고 item_cardview에 카드 뷰를 생성합니다.

<android.support.v7.widget.CardView
    android:id="@+id/cardview"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="5dp"
    card_view:cardCornerRadius="5dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/image"
            android:layout_width="match_parent"
            android:layout_height="210dp" />

        <TextView
            android:id="@+id/title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:text="test" />

    </LinearLayout>
</android.support.v7.widget.CardView>

그리고 RecyclerView에 대한 Adapter를 생성합니다.

ViewHolder 패턴을 적용하기 위해 ViewHolder 클래스도 생성해야 합니다.

public class RecyclerAdapter extends RecyclerView.Adapter<RecyclerAdapter.ViewHolder> {
    Context context;
    List<Item> items;
    int item_layout;

    public RecyclerAdapter(Context context, List<Item> items, int item_layout) {
        this.context = context;
        this.items = items;
        this.item_layout = item_layout;
    }

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

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        final Item item = items.get(position);
        Drawable drawable = ContextCompat.getDrawable(context, item.getImage());
        holder.image.setBackground(drawable);
        holder.title.setText(item.getTitle());
        holder.cardview.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(context, item.getTitle(), Toast.LENGTH_SHORT).show();
            }
        });
    }

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

    public class ViewHolder extends RecyclerView.ViewHolder {
        ImageView image;
        TextView title;
        CardView cardview;

        public ViewHolder(View itemView) {
            super(itemView);
            image = (ImageView) itemView.findViewById(R.id.image);
            title = (TextView) itemView.findViewById(R.id.title);
            cardview = (CardView) itemView.findViewById(R.id.cardview);
        }
    }
}

메인에서는 RecyclerView를 생성하고 RecycleAdapter에 넣어주는 작업만 하면 됩니다.

전체코드는 https://github.com/Swalloow/AndroidStudy/tree/master/MyCardView 에 있습니다.

공식문서 : https://developer.android.com/training/material/lists-cards.html

안드로이드 API : https://developer.android.com/reference/android/support/v7/widget/CardView.html