안드로이드 프레임워크에서 제공되는 위젯들(TextView, EditText, Button 등)이나 레이아웃으로는 원하는 뷰를 만들기가 어려울 때가 있습니다. 그렇다고 포기하는 게 아니라 직접 뷰를 만들어 구현하는 건 어떨까요? 이번 글에서는 CustomView를 만드는 방법에 대해 알아보겠습니다.

 

CustomView를 만드는 기본적인 원리

  • 기존에 존재하는 View클래스를 상속합니다.
  • 시작하는 키워드가 'on'인 super 클래스 메서드를 오버라이드 합니다.
  • 새로 만든 커스텀 뷰를 사용합니다.

onDraw()

  • 개발자가 원하는 대로 구현할 수 있는 Canvas를 제공합니다. 
    • Canvas는 도화지라고 생각하면 이해가 조금 쉽습니다.
  • Canvas를 이용해 그리고 싶은 내용을 화면에 그리면 됩니다.

onMeasure()

  • 뷰와 뷰에 포함된 콘텐츠를 측정하여 측정된 Width와 Height을 결정합니다.
  • onMeasure()는 measure(int, int)에 의해 호출됩니다. 
    • measure() 메서드에서는 뷰의 사이즈를 측정하고 실제 측정된 사이즈가 수행되는 곳은 onMeasure()입니다.
  • onMeasure()를 오버라이드 하는 경우 setMeasuredDimension(int, int)를 호출해서 측정된 사이즈를 저장할 수 있도록 해야 합니다.

프레임워크가 호출하는 다른 View 메서드

생성

  • 생성자
    • 뷰가 런타임에 코드로부터 생성되는 경우
    • xml파일을 파싱하는 경우
  • onFinishInflate()
    • 뷰, 뷰그룹의 경우 자식 뷰들이 인플레이션이 다 끝나면 호출됩니다.

레이아웃

  • onMeasure(int, int)
    • 뷰, 자식뷰의 사이즈가 결정될 때 호출됩니다.
  • onLayout(boolean, int, int, int, int)
    • 뷰, 자식뷰의 위치가 결정될 때 호출됩니다.
  • onSizeChanged(int, int, int, int)
    • 뷰의 사이즈가 변경되었을 때 호출됩니다.

그리기

  • onDraw(Canvas)
    • 뷰가 가지고 있는 컨텐츠를 그릴 때 호출됩니다.

이벤트 처리

  • onKeyDown(int, KeyEvent)
    • 키 이벤트가 눌렸을 때 호출됩니다.
  • onKeyUp(int, KeyEvent)
    • 키가 눌린 게 떨어졌을 때 호출됩니다.
  • onTrackballEvent(MotionEvent)
    • 트랙볼 이벤트 발생 시 호출됩니다.
  • onTouchEvent(MotionEvent)
    • 터치 이벤트 발생 시 호출됩니다

포커스

  • onFocusChanged(boolean)
    • 포커스를 잃을 때 호출됩니다.
  • onWindowFocusChanged(boolean)
    • 윈도우가 포함하고 있는 뷰가 포커스를 얻거나 잃을 때 호출됩니다.

Attaching

  • onAttachedToWindow()
    • 윈도우에 뷰가 붙을 때 호출됩니다.
  • onDetachedFromWindow()
    • 윈도우로부터 뷰가 떨어질 때 호출됩니다.
  • onWindowVisibilityChanged(int)
    • 윈도우가 가지고 있는 뷰의 가시성이 변경될 때 호출됩니다.

Custom View에 대해서 조금 알아봤는데요. 그럼 직접 Cutstom View를 만들어 보겠습니다.

 

이번에 만들 Custom View는 LinedEditText입니다. LiendEditText는 밑줄이 있는 EditText입니다.

 

LinedEditText

 

위의 사진처럼 EditText에 각 줄마다 밑줄이 생기는 EditText입니다.

 

LinedEditText는 EditText를 상속하는 클래스를 만들면 되는 간단한 Custom View입니다.

 

추가적으로 작업한 것은 EditText의 크기에 비해 Cursor의 크기가 너무 커서 Cursor의 크기를 줄이기 위한 Drawable을 만들었습니다. EditText의 android:textCursorDrawable에 만든 Drawable을 적용해 Cursor를 수정할 수 있습니다.

 

EditText의 Default로 보여지는 밑줄은 android:background의 속성을 수정하여 없앨 수 있습니다.

 

Code

Reference

+ Recent posts