MyCloud

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

Programming/Android

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

Swalloow 2016. 7. 2. 06:20



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



Comments