[Android/안드로이드] Custom View ( 커스텀 뷰 ) 만드는 방법.

안녕하세요 돼지왕 왕돼지입니다.

오늘은 Custom View ( 커스텀 뷰 ) 를 만드는 방법에 대해 알아보겠습니다.

Custom View 를 만드는 방법.

 

 1. 기존 뷰 상속 후 확장 및 수정.

   슈퍼 클래스의 내용 거의 그대로 쓰고, 원하는 부분을 추가, 수정한다. (난이도 하)

 

 2. 단순한 기능 제공하는 기존 뷰들을 결합하여 복잡한 동작을 수행하는 뷰 그룹 정의

    (난이도 중)

 

 3. 기존의 존재하지 않는 완전히 새로운 뷰 생성. View 상속
   (난이도 상)

 

  

 

1. 기존 뷰 상속 후 확장 및 수정.

 

<java>
class SoundEditView extends EditText{

   SoundPool mPool = null;

   int mClick;

 

   public SoundEditView(Context context){

      super(context);

      init(context);

   }

 

   public SoundEditView(Context context, AttributeSet attrs){

      super(context, attrs);

      init(context);

   }

 

   public SoundEditView(Context context, AttributeSet attrs, int defStyle){

      super(context, attrs, defStyle);

      init(context);

   }

 

   void init(Context context){

      mPool = new SoundPool(1, AudioManager.STREAM_MUSIC, 0);

      mClick = mPool.load(context, R.raw.click, 1);

   }

 

   protected void onTextChanged(CharSequence Text, int start, int before, int after){

      // 에디트 생성될 때 빈 문자열로 초기화되며 여기가 불려지기 때문에

      // mPool의 null 체크 필수

      if (mPool != null){

         mPool.play(mClick, 1, 1, 0, 0, 1);

      }

   }

}

 

<layout>

<package.SoundEditView

     android:layout_width="fill_parent"

     android:layout_height="wrap_content"

     android:textSize="12pt"/>

cf) 사운드 파일의 위치는 res/raw

 

2. 단순한 기능 제공하는 기존 뷰들을 결합하여 복잡한 동작을 수행하는 뷰 그룹 정의

 

class NumEditWidget extends LinearLayout implements TextWatcher{

   EditText mEdit;

   TextView mText;

 

   public NumEditWidget(Context context){

      super(context);

      init();

   }

 

   public NumEditWidget(Context context, AttributeSet attrs){

      super(context, attrs);

      init();

   }

 

   void init(){

      setOrientation(LinearLayout.Vertical);

      mEdit = new EditText(getContext());

      mText = new TextView(getContext());

      mText.setText("Now Length : 0 Char");

     

      LinearLayout.LayoutParams param = new LinearLayout.LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT);

      addView(mEdit, param);

      addView(mText, param);

 

      mEdit.addTextChangedListener(this);

   }

 

   public void afterTextChanged(Editable s){}

   public void beforeTextChanged(CharSequence s, int start, int count, int after){}

 

   public void onTextChanged(CharSequence s, int start, int before, int count){

      mText.setText("Now Length : " + s.length() + " Char");

   }

}

 

// custom view 를 모두 코드로 처리하는 방법이 있지만, 아래와 같이 layout 을 xml 로 정의해서 사용하는 경우도 있습니다. 간편하긴 하지만 단점은 xml 도 함께 배포해야 한다는 점입니다. ( 사용자 입장에서 코드 적용이 쪼끔 까다롭죠? )
void init(){

   LayoutInflater inflater = (LayoutInflater)getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);

   inflater.inflate(R.layout.numeditewidget, this, true);

   ...

}

 
2012/02/17 - [프로그래밍 놀이터/안드로이드] - [Android/안드로이드] Custom Attribute 정의해서 사용하기.

 3. 기존의 존재하지 않는 완전히 새로운 뷰 생성. ( View 상속 )

onDraw(), onMeasure(), onLayout() 들을 재정의 해야 합니다.

2012/02/19 - [프로그래밍 놀이터/안드로이드] - [Android/안드로이드] CustomView 생성시 override 해야 할 function들

2012/02/28 - [프로그래밍 놀이터/안드로이드] - [Android/안드로이드] Rainbow progress bar ( custom view sample code )