이미지뷰에 이미지를 넣지 않고 shape 으로 모양을 주는 방법은 많이들 알고 계실텐데요!
문제는 이미지를 넣었을 때 모양을 주는 것입니다...😭😭
이 녀석 때문에 저도 한참을 고민을 했던 때가 있었는데요...
그래서 오늘은!!
이미지뷰의 src 로 이미지가 들어갈 때, 코너를 둥글게 만드는 여러 가지 방법을
소개해보려고 합니다! 🤓
<de.hdodenhof.circleimageview.CircleImageView
android:layout_width="130dp"
android:layout_height="130dp"
app:civ_border_width="2dp"
android:src="@drawable/profile"
app:civ_border_color="@color/black"
/>
circleImageView 라이브러리 를 사용해서 테두리 색도 지정할 수 있답니다.
라이브러리에 의존하지 않고 안드로이드의 attribute 를 사용하고자 한다면,
//java
binding.ivUserImage.setClipToOutline(true);
//kotlin
binding.ivUserImage.clipToOutline = true
을 사용할 수 있습니다.
그런데 여기서 중요한 것은 맞추려고 하는 outline 을 imageView 의 background 로 지정해주어야 한다는 것입니다!
<ImageView
android:id="@+id/iv_user_image"
android:layout_width="85dp"
android:layout_height="85dp"
android:scaleType="centerCrop"
android:background="@drawable/background_profile"
/>
완전히 동그랗게 만드려면 아래와 같이 shape 만 지정하고 width 와 height 는 xml 에서 값을 주면 되겠죠?
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
</shape>
원이 아니라 모서리를 약간만 둥글게 하고 싶다면 Cardview 안에 imageView 를 넣고 radius 를 조절하면 됩니다.
그런데 cardView 는 그림자를 없앨 수가 없답니다.
<androidx.cardview.widget.CardView
android:id="@+id/cardview_member"
android:layout_width="64dp"
android:layout_height="64dp"
android:elevation="6dp"
app:cardCornerRadius="100dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="@+id/iv_member"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/background_member_orange"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.cardview.widget.CardView>
siyamed/android-shape-imageview 라이브러리입니다.
아래 코드는 이 글의 코드를 응용해서 왼쪽 코너만, 그리고 모든 코너에 radius 를 주는 코드를 구현해서 util 로 만든 것입니다!
//roundedCornerUtil.kt
fun roundLeft(iv: ImageView, curveRadius : Float) : ImageView {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
iv.outlineProvider = object : ViewOutlineProvider() {
@RequiresApi(Build.VERSION_CODES.LOLLIPOP)
override fun getOutline(view: View?, outline: Outline?) {
outline?.setRoundRect(0, 0, (view!!.width+curveRadius).toInt(), (view.height).toInt(), curveRadius)
}
}
iv.clipToOutline = true
}
return iv
}
fun roundAll(iv: ImageView, curveRadius : Float) : ImageView {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
iv.outlineProvider = object : ViewOutlineProvider() {
@RequiresApi(Build.VERSION_CODES.LOLLIPOP)
override fun getOutline(view: View?, outline: Outline?) {
outline?.setRoundRect(0, 0, view!!.width, view.height, curveRadius)
}
}
iv.clipToOutline = true
}
return iv
}
fun roundTop(iv: ImageView, curveRadius : Float) : ImageView {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
iv.outlineProvider = object : ViewOutlineProvider() {
@RequiresApi(Build.VERSION_CODES.LOLLIPOP)
override fun getOutline(view: View?, outline: Outline?) {
outline?.setRoundRect(0, 0, view!!.width, (view.height+curveRadius).toInt(), curveRadius)
}
}
iv.clipToOutline = true
}
return iv
}
사용은 아래와 같이 필요한 곳에서 부르면 됩니다.
roundAll(binding.ivStoreDetailImage, 10f)
그런데 아쉽게도 오른쪽만, 그리고 아래쪽만 코너를 주는 방법은 찾지 못 했습니다.
라이브러리를 사용하지 않고 직접 구현할 수 있는 방법을 찾게 된다면
추가해두록 하겠습니다!
혹시 이미 아시고 계신 분은 댓글로 지식을 나눔해주시면ㅎㅎ 감사하겠습니다.