CardView에 모서리가 둥근 ImageView를 꽉채우는 방법과 CardView에 모서리가 둥근 ImageView와 TextView를 함께 추가하는 방법을 소개합니다.
RecyclerView의 아이템으로 사용하면 UI가 깔끔해지집니다.
먼저 CardView에 모서리가 둥근 ImageView(RoundedImageView)를 꽉차게 보이도록 하는 방법입니다.
CardView 태그 안에 RoundedImageView를 넣고 꽉차게 하기 위해서 RoundedImageView의 android:layout_width 속성과 android:layout_height 속성을 match_parent로 합니다.
그러면 CardView 내부에 꽉차보입니다.
CardView의 모서리를 둥글게 만들기 위해서 card_view:cardCornerRadius 속성에 둥근 정도를 20dp로 줍니다.
CardView 내부에 있는 RoundedImageView도 모서리가 둥글게되야 보기에 자연스럽기 때문에 app:riv_corner_radius 속성을 20dp로 줍니다. 두 값이 일치해야 합니다.
RoundedImageView의 android:scaleType 속성값을 centerCrop로 주어서 이미지가 꽉차게 보이도록 합니다. 이미지 중앙을 기준으로 일부 이미지가 보이게 됩니다.
android:src 속성에 보여줄 이미지를 직접 지정해주거나 자바코드에서 지정해주세요.
<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_margin="20dp"
android:layout_width="match_parent"
android:layout_height="200dp"
card_view:cardCornerRadius="20dp"
card_view:cardUseCompatPadding="true">
<com.makeramen.roundedimageview.RoundedImageView
android:id="@+id/imageview_main_image1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
app:riv_corner_radius="20dp"
android:src="@drawable/image"
app:riv_border_color="#333333"
app:riv_mutate_background="true"
app:riv_oval="false" />
</android.support.v7.widget.CardView> |
CardView에 RoundedImageView와 TextView를 함께 보이도록 하는 방법입니다.
RoundedImageView의 윗부분은 CradView와 일치하도록 둥글게 만들고, RoundedImageView의 아래부분은 라운드 처리를 하지 않았습니다.
아래쪽에 텍스트가 들어가기 때문에 이렇게 하는게 자연스럽습니다.
CardView에는 하나 이상의 UI 컴포넌트를 넣을 수 없기 때문에 CardView에 LinearLayout를 추가하고 LinearLayout 내부에 RoundedImageView와 TextView를 배치합니다.
RoundedImageView와 TextView의 높이는 android:layout_weight 속성을 사용하여 일정 비율을 유지하도록 합니다.
RoundedImageView의 상단 모서리만 둥글게 보이도록 app:riv_corner_radius_top_left 속성과 app:riv_corner_radius_top_right 속성에 둥근 정도 값을 줍니다.
<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_margin="20dp"
android:layout_width="match_parent"
android:layout_height="200dp"
card_view:cardCornerRadius="20dp"
card_view:cardUseCompatPadding="true">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<com.makeramen.roundedimageview.RoundedImageView
android:id="@+id/imageview_main_image2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.8"
android:scaleType="centerCrop"
app:riv_corner_radius_top_left="20dp"
app:riv_corner_radius_top_right="20dp"
android:src="@drawable/image"
app:riv_border_color="#333333"
app:riv_mutate_background="true"
app:riv_oval="false" />
<TextView
android:layout_margin="20dp"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.2"
android:text="RoundedImageView + CardView 예제" />
</LinearLayout>
</android.support.v7.widget.CardView> |
예제는 다음처럼 테스트 할 수 있습니다.
1. build.gradle에 com.android.support:cardview-v7과 com.makeramen:roundedimageview를 추가합니다.
dependencies {
implementation fileTree(dir: 'libs', include: ['*.jar'])
implementation 'com.android.support:appcompat-v7:28.0.0'
implementation 'com.android.support.constraint:constraint-layout:1.1.3'
implementation 'com.android.support:cardview-v7:28.0.0'
implementation 'com.makeramen:roundedimageview:2.3.0'
testImplementation 'junit:junit:4.12'
androidTestImplementation 'com.android.support.test:runner:1.0.2'
androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
} |
2. 레이아웃을 다음처럼 작성합니다.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center"
tools:context=".MainActivity">
<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_margin="20dp"
android:layout_width="match_parent"
android:layout_height="200dp"
card_view:cardCornerRadius="20dp"
card_view:cardUseCompatPadding="true">
<com.makeramen.roundedimageview.RoundedImageView
android:id="@+id/imageview_main_image1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
app:riv_corner_radius="20dp"
android:src="@drawable/image"
app:riv_border_color="#333333"
app:riv_mutate_background="true"
app:riv_oval="false" />
</android.support.v7.widget.CardView>
<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_margin="20dp"
android:layout_width="match_parent"
android:layout_height="200dp"
card_view:cardCornerRadius="20dp"
card_view:cardUseCompatPadding="true">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<com.makeramen.roundedimageview.RoundedImageView
android:id="@+id/imageview_main_image2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.8"
android:scaleType="centerCrop"
app:riv_corner_radius_top_left="20dp"
app:riv_corner_radius_top_right="20dp"
android:src="@drawable/image"
app:riv_border_color="#333333"
app:riv_mutate_background="true"
app:riv_oval="false" />
<TextView
android:layout_margin="20dp"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.2"
android:text="RoundedImageView + CardView 예제" />
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout> |
최초 작성 2019. 3. 2
