[Android] 커스텀 뷰, xml에서 호출시키기

커스텀 뷰에 대한 설명은 깡샘의 안드로이드 프로그래밍이 보다 잘 설명되어있음..

커스텀 뷰란

안드로이드에서 기본적으로 제공하는 TextView, ImageView, ListView 등 이외의 뷰를 이용해서 화면 구성을 하려고 할 때 사용자가 직접 만드는 뷰

• 기본 작성 방법

1. API에서 제공하는 뷰를 그대로 이용하면서 약간 변형시킨 뷰
2. 여러 뷰를 합쳐서 한번에 출력위한 뷰
3. 기존 API에 전혀 존재하지 않는 뷰

나는 Paint 객체를 이용해서 Coloring을 하는 View를 생성하고자 했음.
Fragement에 View를 그려서 거기서 컬러링 구현하는게 목적

커스텀 뷰 생성 목적에 따라서 extends를 TextView, ViewGroup, View를 할 수있는데 나의 경우 extends View를 했음

생성자

커스텀 뷰 작성 시 생성자 부분에 주의
작성된 커스텀 뷰를 액티비티에서 이용하려면 자바 코드로 뷰를 직접 생성하거나 레이아웃 xml에 등록해야하는데, 직접 자바 코드로 생성해 이용한다면 생성자는 하나만 정의해도 되지만, 레이아웃 xml 파일에 등록해 다른 뷰와 함께 화면 구성시에는 생성자 3개 모두 정의해야함.

생성자 부분

public ColorOnPicView(Context context) {
        super(context);
    }
    public ColorOnPicView(Context context, AttributeSet attrs){
        super(context,attrs);

    }
    public ColorOnPicView(Context context, AttributeSet attrs, int defStyleAttr){
        super(context, attrs, defStyleAttr);
    }

뷰는 화면에 무언가를 출력하는게 목적임. 화면에 출력을 위해서는 onDraw()함수가 작성되어야 함!
이 함수는 뷰가 화면에 출력될 때 자동 호출되고, 이 함수에서 그린 내용이 뷰 영역에 출력된다.

나는 색칠을 하는 뷰이기 때문에 onDraw()에 다음과 같이 작성

@Override
    protected void onDraw(Canvas canvas) {
        paint.setColor(Color.GREEN);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(50);
        paint.setAlpha(30);     //투명도
        canvas.drawPath(path,paint);
    }

그리고 추가로 onTouchEvent()에 터치이벤트 작성

   @Override
    public boolean onTouchEvent(MotionEvent event) {

        //return super.onTouchEvent(event);
        x = (int) event.getX();
        y = (int) event.getY();

        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                path.moveTo(x, y);
                break;
            case MotionEvent.ACTION_MOVE:
                x = (int) event.getX();
                y = (int) event.getY();

                path.lineTo(x, y);
                break;
        }
        invalidate();

        return true;
    }

레이아웃 xml에서 호출

만든 커스텀 뷰를 이제 xml에서 호출을 시켜야함.
xml에서 <com.example. 뭐뭐뭐로 직접 불러주기

<com.example.ae_android.ui.coloring.ColorOnPicView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />

만일 뷰에 배경사진을 넣고 싶다면 호출한 xml코드에서
android:background="" 로 속성을 넣어주면 된다.