[Kotlin/Android] Fragment Activity에서 Image Cropper와 CircleImageView 사용하기

안드로이드에서 이미지를 정사각형으로 자르는 라이브러리 도구를 불러와 사용하는 법 그리고 원형 이미지 XML컴퍼넌트에 불러온 이미지를 적용하는 법에 대해 설명합니다.

How to use ImageCropper and CircleImageView in android with kotlin.

 

 

 

0. 사용된 라이브러리 소개

https://github.com/ArthurHub/Android-Image-Cropper

ArthurHub/Android-Image-Cropper

https://github.com/hdodenhof/CircleImageView

hdodenhof/CircleImageView

https://github.com/square/picasso

square/picasso

 

 

 

 

 

 

1. build.gradle:app에 dependencies 추가

implementation 'de.hdodenhof:circleimageview:3.1.0' //원형 이미지 XML 컴퍼넌트
implementation 'com.theartofdev.edmodo:android-image-cropper:2.7.+' //이미지 자르기 라이브러리
implementation 'com.squareup.picasso:picasso:2.71828' //이미지 다운로드 및 캐싱 라이브러리

 

 

 

 

 

2. Fragment XML에 CircleImageView 생성

아래는 예시 디자인이다. 이미지 뷰와 그 우측하단의 버튼만 사용할 것이다. ''프래그먼트''가 될 XML뷰이다.

원형 이미지 뷰 라이브러리 컴퍼넌트와 ImageCropper를 실행시키는 버튼을 정의한다. 아이디 외 속성은 직접 만들어주길 바란다. 이 글을 참고할땐 아래의 컴퍼넌트 Id값을 주시하며 흐름에 따라가길! 

 

fragment_image_set.xml

<de.hdodenhof.circleimageview.CircleImageView
  android:id="@+id/init_profileimg_view"/>
  
<com.google.android.material.floatingactionbutton.FloatingActionButton
  android:id="@+id/init_profileimg_reset_btn"/>

 

 

 

3. 프래그먼트가 종속될 부모XML의 Activity 코틀린 파일 작성 

//import 생략

class ProfileInitActivity : AppCompatActivity() {
    companion object{
        lateinit var ProfileInitContext: Context
    }
    
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(/*생략*/)
        /*현재 실습에 필요한 코드만 최소한으로 작성했으니 
        프래그먼트 지정과 같은 부분은 직접 작성해주셔야 합니다*/
        ProfileInitContext = this
    }
    
    override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
        super.onActivityResult(requestCode, resultCode, data)
        if(requestCode == CropImage.CROP_IMAGE_ACTIVITY_REQUEST_CODE && resultCode == RESULT_OK && data != null){
            var result = CropImage.getActivityResult(data) //result.uri
            profileImageView.setImageURI(result.uri) //XML의 이미지뷰 컴퍼넌트에 이미지 지정
            //profileImageView 변수는 fragment의 Activity.kt파일에 선언될 전역변수
        }
    }
}

 

 

 

 

 

4. Fragment의 Activity kotlin 파일 작성

//import 생략

class FragInitImage: Fragment() {

    companion object{ //전역변수
        lateinit var profileImageView: CircleImageView //가장 중요한 이미지 뷰 컴퍼넌트!!
        lateinit var resetImageButton: FloatingActionButton
    }
    lateinit var nicknameView: TextView

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        val view = inflater.inflate(R.layout.fragment_image_set, container, false) //setContentPane

        profileImageView = view.findViewById(R.id.init_profileimg_view) //CircleImageView
        resetImageButton = view.findViewById(R.id.init_profileimg_reset_btn) //이미지 리셋 버튼

        resetImageButton.setOnClickListener{
        	//라이브러리의 이미지 자르기용 액티비티 호출
            CropImage.activity().setAspectRatio(1, 1).start(ProfileInitContext as Activity)
            //이때 ProfileInitContext는 위에 만든 프래그먼트가 종속될 일반 XML파일의 Context를 담은 전역변수
            //이미지 크롭 완료 후 ProfileInitActivity.onAcitivtyResult 실행
        }

        return view
    }

}

이때 ImageCropper 처리 후의 코드(onActivityResult)가 FragInitImage.kt가 아닌 ProfileInitActivity.kt에서 이뤄지는 이유는, AppCompatActivity 형식의 파라미터를 넘겨주어야 하기 때문이다. Fragment()타입의 FragInitImage 클래스에서 반환받을 수 없음.

그렇기 때문에 ProfileInitActivity.kt에서 Activity형식을 뽑기 위해 Context를 해당 클래스에서 전역변수로 선언한 후, FragInitImage.kt에서 import해와 Activity로 형변환해 사용했다.

Cropper라이브러리의 응답결과를 onActivityResult메서드에서 받을때는 CircleImageView컴퍼넌트를 담은 전역변수 profileImageView를 import해 불러온 이미지Uri를 곧장 지정했다.

 

 

 

---

 

안되거나 궁금한건 댓글 남겨주세요🦝