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

오늘은 카드뷰(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를 만들고 정보를 뿌려볼 것이다.