[안드로이드] Custom CardView 만들기

Custom CardView

CardView는 롤리팝 버전부터 추가되었으며, 많이 활용되는 뷰 컴포넌트입니다.

UI를 구성하다보면 복잡한 구조를 재사용해야 할 때가 있는데,

이때 커스텀 뷰를 활용하면 쉽게 해결할 수 있으며, 코드의 분리를 통해 가독성도 높일 수 있습니다.

아래의 코드는 이전의 카드뷰 포스팅 예제와 이어지는 코드입니다.

참고 : http://swalloow.tistory.com/72

1.

먼저 커스텀 카드뷰의 레이아웃을 만들어야 합니다.

* CardView 자체가 FrameLayout을 상속받은 ViewGroup이므로 LinearLayout 아래에 정의할 필요가 없습니다.

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/cardview"
    android:layout_height="wrap_content"
    android:layout_margin="5dp"
    android:layout_width="match_parent"
    card_view:cardCornerRadius="5dp">


    <LinearLayout
        android:id="@+id/layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/image"
            android:layout_width="355dp"
            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>

 

2.

이제 카드뷰를 대신할 커스텀 자바 클래스를 생성합니다.

커스텀 카드뷰는 xml에 정의되어 있는 뷰 컴포넌트들을 하나로 묶은 뷰 그룹이라고 이해하시면 됩니다.

MyCardView는 CardView를 상속받으며 다음과 같은 생성자를 만들어 줍니다.

이벤트 처리를 원한다면 UserActionListener도 만들어 주어야 합니다.

public class MyCardView extends CardView {
    CardView cardView;
    LinearLayout linearLayout;
    ImageView imageView;
    TextView textView;

    private UserActionListener mUserActionListener;

    public interface UserActionListener {
        public void onImageClicked();

        public void onTextClicked();
    }

    public MyCardView(Context context) {
        super(context);
        init(context, null, 0);
    }

    public MyCardView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context, attrs, 0);
    }

    public MyCardView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context, attrs, defStyleAttr);
    }

    public void setUserActionListener(UserActionListener l) {
        this.mUserActionListener = l;
    }

}

3.

그리고 초기화할 init() 메서드를 만들어야합니다.

init() 메서드의 역할은 레이아웃 인플레이터를 통해 xml 파일을 연결시켜주며,

View.OnClickListener를 설정하여 이벤트 감지를 할 수 있게 도와줍니다.

public void init(Context context, AttributeSet attrs, int defStyleAttr) {
    // Initialization
    String infService = Context.LAYOUT_INFLATER_SERVICE;
    LayoutInflater li = (LayoutInflater) getContext().getSystemService(infService);
    View v = li.inflate(R.layout.item_cardview, this, true);

    cardView = (CardView) findViewById(R.id.cardview);
    linearLayout = (LinearLayout) findViewById(R.id.layout);
    imageView = (ImageView) findViewById(R.id.image);
    textView = (TextView) findViewById(R.id.title);

    cardView.setOnClickListener(mOnClickListener);
    imageView.setOnClickListener(mOnClickListener);
    textView.setOnClickListener(mOnClickListener);
}

4.

다음과 같이 데이터를 넣어줄 메서드를 만들고,

public void setData(Item item) {
    Glide.with(getContext()).load(item.getImage()).into(imageView);
    textView.setText(item.getTitle());
}

위에서 설정했던 리스너를 정의해 줍니다.

View.OnClickListener mOnClickListener = new View.OnClickListener(){

    @Override
    public void onClick(View v) {
        if(mUserActionListener == null) {
            return;
        }

        if(v == imageView) {
            mUserActionListener.onImageClicked();
        }else if(v == textView) {
            mUserActionListener.onTextClicked();
        }
    }
};

5.

이제 RecyclerAdapter 에서 ViewHolder에 모든 뷰 컴포넌트를 갈아 끼우는 것이 아니라 

MyCardView만 교체하도록 수정하면 됩니다.

public class ViewHolder extends RecyclerView.ViewHolder {
    MyCardView cardView;

    public ViewHolder(View card) {
        super(card);
        cardView = (MyCardView)card;
    }
}

전체 프로젝트 코드는 아래의 GitHub 주소에서 받으실 수 있습니다.

https://github.com/Swalloow/AndroidStudy/tree/master/CustomCardView

참고 레퍼런스 : https://developer.android.com/guide/topics/ui/custom-components.html?hl=ko