Android 둥근모서리 이미지 뷰 만들기 (Android rounded corners image view)

사각형의 이미지의 모서리를 둥글게 만들어 주는 ImageView 만들기

모바일 애플리케이션들을 사용하다보면 위에있는 사진처럼 이미지의 모서리가 둥근 버튼이나 이미지들을 많이 보게됩니다.

하지만 실제 앱을 개발하는 입장에서는 모서리가 둥근 ImageView를 제공해주는게 가장 편하지만 실제 ImageView에서는 모서리를 둥글게 만들어주는 옵션은 없습니다.(있으면 알려주세요..ㅠ) 그래서 모서리가 둥근 ImageView를 만들기 위해 기존의 ImageView를 커스터마이징 한 클래스를 만들어 사용해야 합니다.

RoundedImageView.kt

class RoundedImageView : ImageView {
    private val roundRect = RectF()
    private val maskPaint = Paint()
    private val zonePaint = Paint()
    private var rectRadius = 7f
 
 
    constructor(context: Context?) : super(context) {
        initView()
    }
 
    constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs) {
        initView()
    }
 
    constructor(context: Context?, attrs: AttributeSet?, defStyleAttr: Int) : super(context, attrs, defStyleAttr) {
        initView()
    }
 
    private fun initView() {
        maskPaint.isAntiAlias = true
        maskPaint.xfermode = PorterDuffXfermode(PorterDuff.Mode.SRC_IN)
        zonePaint.isAntiAlias = true
        zonePaint.color = Color.WHITE
        val density = resources.displayMetrics.density
        rectRadius *= density
    }
 
    fun setRectRadius(radius: Float) {
        rectRadius = radius
        invalidate()
    }
 
    override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
        super.onLayout(changed, left, top, right, bottom)
        roundRect.set(0f, 0f, width.toFloat() - rectRadius, height.toFloat() - rectRadius)
    }
 
    override fun draw(canvas: Canvas?) {
        canvas?.saveLayer(roundRect, zonePaint, Canvas.ALL_SAVE_FLAG)
        canvas?.drawRoundRect(roundRect, rectRadius, rectRadius, zonePaint)
        canvas?.saveLayer(roundRect, maskPaint, Canvas.ALL_SAVE_FLAG)
        super.draw(canvas)
        canvas?.restore()
    }
}

기존의 이미지에 모서리가 둥근 마스크 이미지를 씌우는 방식의 커스터마이징을 하여 이미지의 모서리부분이 둥글게 잘리도록 수정합니다.

위의 클래스에서는 디폴트 radius값을 7로 설정하여 모두 7 radius값을 가진 둥근 사각형 이미지가 보이지만. setRectRadius를 사용해 radius값을 변경할 수 있습니다.