프로그래밍/Android

안드로이드 아름다운 카드뷰(Card View) 리스트 만들기 - (1)

Lou Park 2016. 4. 3. 10:11

오늘은 카드뷰(CardView)와 리사이클러뷰(RecyclerView)를 이용한

아름다운 리스트 만들기에 대한 강의를 진행 해 보려고 한다.

매 번 카드뷰를 만들 때마다 찾으려니 귀찮아서 한 번에 정리하는 것이다.

특히나 이번 강의 자료는 상용화 할 앱에 실제 적용될 디자인이고 하니 디자인에 문외한인 개발자 분들에게 많은 도움이 될 것같다.


build.gradle(Module :app) 파일

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

카드뷰 라이브러리를 사용하기 위해 dependencies에서 :cardview-v7, :recyclerview-v7 두 줄을 추가한다.

다음으로는 xml 구성을 시작해 볼 것이다.


fragment_notice.xml

<?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="match_parent"
android:padding="16dp"
>
<android.support.v7.widget.RecyclerView
android:layout_height="match_parent"
android:layout_width="match_parent"
android:id="@+id/rv"
>
</android.support.v7.widget.RecyclerView>
</LinearLayout>

나는 Fragment에서 리스트뷰를 만들 것이기 때문에 fragment_notice.xml 라는 파일에 다음과 같이 RecyclerView를 만들어 주었다.

activity_main.xml 에 다음 코드를 붙여도 된다. '리스트가 만들어 질 곳에' 만드는 것이다.


item_notice.xml

item_notice.xml 은 리스트뷰에 있는 카드 하나의 디자인을 할 수 있는 곳이다.

이름은 마음대로 지정해도 되지만, 나는 공지사항에 대한 내용을 담을 것이기 때문에 item_notice.xml 로 명명했다.

카드 하나의 디자인은 다음 그림과 같다.



왼쪽 상단에는 아이콘, 제목, 작성일과 유저가 카드를 클릭하도록 유도하는 버튼이 위치하고,

이미지가 들어가며, 이미지가 첨부되어있지 않을 경우에는 뷰를 숨긴다.

그 아래에는 내용이 간략하게 있고, 마지막 단에는 덧글 아이콘 및 덧글 수, 작성자에 대한 정보가 있다.

코드로 구현하면 대략 다음과 같다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<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:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:id="@+id/cv"
>

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

<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#eee">

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="55dp"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:background="#fff"
android:layout_marginBottom="1dp">

<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:id="@+id/imageView"
android:layout_centerVertical="true"
android:src="@drawable/ic_birthday" />

<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="@+id/imageView"
android:layout_toLeftOf="@+id/imageView2"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Medium Text"
android:id="@+id/tv_title"
android:textSize="16dp" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="Small Text"
android:id="@+id/tv_date"
android:textSize="13dp" />
</LinearLayout>

<ImageView
android:layout_width="15dp"
android:layout_height="18dp"
android:id="@+id/imageView2"
android:src="@drawable/ic_arrow"
android:layout_centerVertical="true"
android:layout_alignParentRight="true" />

</RelativeLayout>
</LinearLayout>

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/rl_image">

<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="@+id/iv_image" />
</RelativeLayout>

<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ddd">

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="16dp"
android:background="#fff"
android:layout_marginBottom="1dp">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Text"
android:id="@+id/tv_content" />
</RelativeLayout>
</LinearLayout>

<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ddd">

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="30dp"
android:background="#fff"
android:layout_marginBottom="1dp"
android:paddingLeft="16dp"
android:paddingRight="16dp">

<ImageView
android:layout_width="15dp"
android:layout_height="15dp"
android:id="@+id/imageView3"
android:layout_centerVertical="true"
android:src="@drawable/ic_lock" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="Small Text"
android:id="@+id/tv_count"
android:layout_toRightOf="@+id/imageView3"
android:layout_centerVertical="true"
android:layout_marginLeft="5dp" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="Small Text"
android:id="@+id/tv_writer"
android:layout_alignParentRight="true"
android:layout_centerVertical="true" />
</RelativeLayout>
</LinearLayout>

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

CardView 속에 있는 layout_marginBottom 속성은 카드와 카드 사이의 간격을 조절하기 위한 것이다.

그리고 위 예제코드에 나와있지는 않지만

card_view:cardCornerRadius="10dp"라고 적어주면 카드 모서리의 둥글기를 10dp 크기로 조절할 수 있다.


이제 대강의 레이아웃 정리는 끝났다.

다음편에서는 본격적으로 java를 이용해 Adapter를 만들고 정보를 뿌려볼 것이다.