Android

[안드로이드] 원형 이미지뷰 만들기 / CircleImageView

유정주 2021. 7. 28. 00:05
반응형

앱을 개발하다 보면 원형의 이미지뷰 CircleImageView를 표시해야할 때가 있습니다.

이것을 직접 구현하려면 여간 까다로운 일이 아닙니다.

그래서 오늘은 원형 이미지뷰 CircleImageView 라이브러리 하나를 소개해드리겠습니다.

 

라이브러리 Git

https://github.com/hdodenhof/CircleImageView

 

GitHub - hdodenhof/CircleImageView: A circular ImageView for Android

A circular ImageView for Android. Contribute to hdodenhof/CircleImageView development by creating an account on GitHub.

github.com

 

Android API reference

https://developer.android.com/reference/android/widget/ImageView

 

ImageView  |  Android 개발자  |  Android Developers

 

developer.android.com


CircleImageView는 ImageView를 확장한 라이브러리이기 때문에 기본 사용법은 ImageView와 동일합니다.

 

1. build.gradle dependencies 추가

implementation 'de.hdodenhof:circleimageview:3.1.0' //Circle ImageView

CircleImageView를 사용하기 위해서는 build.gradle 파일의 dependencies에 위 코드를 추가해야 합니다.

 

2. XML 추가

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/circle_iv"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:layout_gravity="center"
        android:background="@android:color/transparent"
        app:civ_border_overlay="true"
        app:civ_border_width="5dp"
        app:civ_border_color="#000000"
        android:src="@drawable/test_img"
        />

</LinearLayout>

civ_border_overlay : CircleImageView의 테두리가 이미지와 겹칠 것인지 설정합니다. true면 이미지와 겹치게 테두리를 그리고 false면 이미지 바깥쪽에 테두리를 그립니다. default는 false입니다.

civ_border_width : CircleImageView의 테두리 굵기입니다.

civ_border_color : CircleImageView의 테두리 색상입니다.

src : 원하는 이미지 resource 파일

 

CircleImageView에 5dp의 검은색 테두리를 그려주겠습니다.

 

 


완성

 

가운데 원형 이미지뷰 CircleImageView가 그려진 것을 볼 수 있습니다!

감사합니다. 


아직은 초보 개발자입니다.

더 효율적인 코드 훈수 환영합니다!

공감 댓글 부탁드립니다.

반응형