[6팀] 코틀린 안드로이드 기초 강의 33-34 커스텀 뷰, 커스텀 위젯

Custom View

TextView, ImageView와 같이 기본적으로 제공되는 View이외에 View를 Custom하여 사용할 수 있도록 하는 기능.

 

CustomView도 마찬가지로 View binding은 기본적으로 해 주어야 한다.

이번 강의에서는 Custom View 예시를 위해 Viewclass 자체를 Customizing 하고 ondraw 함수 안에서 직접 테스팅을 진행할 것이다.

 

MainActivity와 같은 폴더에 CustomView 코틀린 파일을 하나 생성한다.

CustomView.kt

Canvas를 파라미터로 가지고 있는 onDraw 메소드를 상속 받자.

onDraw 메서드 정의

Paint객체는 위와 같이 그림 뿐 아니라 텍스트도 출력이 가능하다. 텍스트를 출력하기 위해선, coler, size, 를 우선적으로 선언해주어야 한다.

canvas는 Text를 출력하기 위해 x, y 좌표 및 paint 지정이 필요하다.

 

다시 Activity.xml로 돌아와 이번엔 Framelayout을 사용하여 custom view 삽입을 위해 AddView를 사용하기 위해 미리 가져다 놓는다.

 

이후 다시 MainActivity로 돌아와 binding설정 후 Framelayout에 addView를 통해 CustomView를 삽입한다.

MainActivity

여기까지 완료 되었으면 에뮬레이터를 실행해보자. 그럼 이러한 결과가 나올것이다.

아니 왜?

그렇다. Text를 아까 CustomView로 다시 돌아가보면, 우리는 텍스트의 위치를 (0,0)으로 선언했다.

하지만, Text는 Text의 왼쪽 아래가 좌표계이기 때문에 (0,0)이 가장 왼쪽 아래가 되어 Text가 이렇게 겹쳐 보이게 된다.

그래서 y좌표를 100으로 수정후 다시 실행하면

정상적인 결과를 얻게 된다!

이번엔 그림도 한번 그려보자...

이렇게 원을 그려보자. 

Style을 통해 그리고 싶은 원에 색을 채우거나 경계만 그리는 등..여러가지 설정을 할 수 있다.

마찬가지로 drawCircle()을 통해 좌표, 크기, paint를 전달해야 한다.

그러면 이렇게 그려진다..!

사각형도 마찬가지로..!

스타일, 폭, 색깔, 좌표를 설정해주면..

이렇게 생성된다..!

 

Custom Widget

기존의 없던 widget을 개발자가 custom하여 자신만의 widget을 만들 수 있다!!

 

이번 강의를 통해 아래의 Textview에서 입력한 날짜를 자동으로 년,월,일을 구분해주는 widget을 만들것이다.

우선 res폴더의 values에 attrs.xml 파일을 추가하고 아래의 내용을 추가하자

app.res.values.attrs

attrs.xml

CustomText로 정의 후, 날짜를 구분하기 위해 속성을 delimeter로 정의하고 format역시 정의 해 준다.

그 후 CustomText 코틀린 파일을 만들어 CustomText의 속성을 상속 받아 원하는 대로 customizing한다.

속성을 상속받아 원하는 대로 지정한 다음 속성을 추가해준다.

이후 에뮬레이터를 실행하면

이러한 결과가 나온다!