Kotlin - 원형 이미지뷰 만들 수 있게, 그래들에 추가하기

dependencies {

    implementation("androidx.core:core-ktx:1.9.0")
    implementation("androidx.appcompat:appcompat:1.6.1")
    implementation("com.google.android.material:material:1.9.0")
    implementation("androidx.constraintlayout:constraintlayout:2.1.4")
    testImplementation("junit:junit:4.13.2")
    androidTestImplementation("androidx.test.ext:junit:1.1.5")
    androidTestImplementation("androidx.test.espresso:espresso-core:3.5.1")
    implementation ("de.hdodenhof:circleimageview:3.1.0") //Circle ImageView
}

빌드 아래에보면 이런게 있는데, 

 

implementation ("de.hdodenhof:circleimageview:3.1.0") //Circle ImageView

 

이부분을 추가하면 원형 이미지를 만들 수 있다.

 

---

그래들 추가 후 ,

사용방법 ! 

1. XML 레이아웃에 추가

먼저, XML 레이아웃 파일에 원형 이미지 뷰를 추가합니다.

 

 

XML예시

<de.hdodenhof.circleimageview.CircleImageView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/profile_image"
android:layout_width="96dp"
android:layout_height="96dp"
android:src="@drawable/profile"
app:civ_border_width="2dp"
app:civ_border_color="#FF000000"/>

 

▼ 옵션 설명 

• civ_border_width:
  • 이 속성은 원형 이미지 뷰 주변의 테두리 너비를 설정합니다.
  • dp (밀도 독립적 픽셀) 단위를 사용하여 값을 지정하면 원하는 너비로 테두리를 설정할 수 있습니다.
  • 예: app:civ_border_width="2dp"는 테두리의 너비를 2dp로 설정합니다.
• civ_border_color:
  • 이 속성은 원형 이미지 뷰의 테두리 색상을 설정합니다.
  • 색상을 지정하는 방법은 다양하며, 일반적으로 HEX 코드를 사용합니다.
  • 예: app:civ_border_color="#FF000000"는 테두리의 색상을 검은색으로 설정합니다.

 

 

▼ 그 외 다른 옵션 

1. civ_circle_background_color: 원형 이미지 뒷 배경의 색상을 지정합니다.
   • 예: app:civ_circle_background_color="#ffffff"는 배경색을 흰색으로 설정합니다.
2. civ_fill_color: 이미지가 뷰를 전부 채우지 않을 경우, 남는 부분의 색상을 지정합니다.
   • 예: app:civ_fill_color="#ff0000"는 빈 공간의 색상을 빨간색으로 설정합니다.
3. civ_border_overlay: 이 속성이 true로 설정되면, 테두리 색상이 원형 이미지 위에 오버레이로 표시됩니다. 기본적으로는 false로 설정되어 있어, 테두리는 이미지 아래에 표시됩니다.
   • 예: app:civ_border_overlay="true"
4. civ_disable_border: 이 속성을 사용하면 테두리를 비활성화 할 수 있습니다.
   • 예: app:civ_disable_border="true"

 

---

XML 외의 사용법

 

1. 코드에서 활용

코드에서는 다른 일반적인 ImageView와 같이 CircleImageView를 사용할 수 있습니다.

 

val imageView: CircleImageView = findViewById(R.id.profile_image)
imageView.setImageResource(R.drawable.profile)

 

 

 

기타 사용법

테두리 색상 및 너비 설정: XML에서 했던 것처럼 코드에서도 테두리의 색상과 너비를 설정할 수 있습니다.

 

imageView.setBorderColor(Color.RED)
imageView.setBorderWidth(5)

 

 

원형 마스크 사용: 원형 마스크를 사용하면 원형 이미지 뷰의 내용만 표시되고 배경은 숨겨집니다. 이것은 배경이 이미지뷰의 경계를 넘어서는 것을 막는데 유용합니다.

imageView.isCircleBackgroundColorSet(true)
imageView.setCircleBackgroundColor(Color.WHITE)

 

 

이 라이브러리는 원형 이미지뷰를 간단하게 구현하고자 할 때 굉장히 유용합니다. 수동으로 매번 비트맵을 원형으로 만들 필요 없이 이 라이브러리를 사용하면 쉽게 원하는 결과를 얻을 수 있습니다.