인터페이스 기초03 - 커스텀뷰(Custom View)

Custom View는 미리 만들어 놓은 뷰가 아닌 개발자가 직접 모양 및 기능 등을 정의하여 만든 뷰이다.

재사용이 가능하여 조립과 상속이 용이하다는 장점이 있다.

#실습

- 노란색 부분을 custom view로 만들고, random 함수로 x의 범위는 0~500, y의 범위는 0~800, r의 범위는 0~3으로 하여 CIRCLE DRAW 버튼 클릭 시 원을 출력하는앱 만들어보기

                    -초기 화면-                                             - CIRCLE 버튼 클릭 시-                                 - CIRCLE 버튼 재클릭 시-                                                                          

<activity_main.xml>

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/button"
        android:layout_width="368dp"
        android:layout_height="47dp"
        android:backgroundTint="#C3BDBD"
        android:onClick="onClick"
        android:text="CIRCLE DRAW"
        android:textColor="#000000"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.488"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.0"
        app:strokeColor="#171616" />

    <ddwucom.moblie.week05.assignment05_p16.MyCustomView
        android:id="@+id/myCustomView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button"
        app:layout_constraintVertical_bias="1.0" />

</androidx.constraintlayout.widget.ConstraintLayout>

 

1. backgroundTint 

android:backgroundTint="#C3BDBD"

버튼의 색깔을 바꾼다.

2. custom view 선언

<ddwucom.moblie.week05.assignment05_p16.MyCustomView
.
.
.

주 레이아웃에 사용할 custom view를 선언하여 배치한다.

반드시 Full Package를 포함한 클래스 명으로 기록한다.

---

<MyCustomView.java>

package ddwucom.moblie.week05.assignment05_p16;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;

import androidx.annotation.Nullable;

import java.util.Random;

public class MyCustomView extends View {

    int x, y ,r;

    public MyCustomView(Context context) {

        super(context);
    }

    public MyCustomView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    public MyCustomView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
    }

    public MyCustomView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    public void setCircleX(int x) { this.x = x; }

    public void setCircleY(int y) { this.y = y; }

    public int getCircleX() { return x; }

    public int getCircleY() { return y; }

    public void setCircleR(int r) { this.r = r; }

    public int getCircleR() { return r; }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawColor(Color.YELLOW);

        Paint pnt = new Paint();
        pnt.setColor(Color.CYAN);

        canvas.drawCircle(getCircleX(), getCircleY(), getCircleR(), pnt);
    }
}

MainActivity.java 파일이 있는 곳에 custom view를 만들어준다.

 

1. 기본 생성자 정의

public MyCustomView(Context context) {

    super(context);
}

public MyCustomView(Context context, @Nullable AttributeSet attrs) {
    super(context, attrs);
}

public MyCustomView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
    super(context, attrs, defStyleAttr, defStyleRes);
}

public MyCustomView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
}

alt + insert키 - Constructor로 이동하면 필요한 custom view에 필요한 기본 생성자가 나오는데 클릭하여 추가해준다.

 

2. 필요한 메소드 재정의

public void setCircleX(int x) { this.x = x; }

public void setCircleY(int y) { this.y = y; }

public int getCircleX() { return x; }

public int getCircleY() { return y; }

public void setCircleR(int r) { this.r = r; }

public int getCircleR() { return r; }

매개변수로 전달 받아 사용할 메소드들을 정의한다.

3. onDraw()

protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.drawColor(Color.YELLOW);

    Paint pnt = new Paint();
    pnt.setColor(Color.CYAN);
.
.
.

그림이 그려지는 영역이다.

canvas.drawColor(Color.YELLOW);

배경의 색깔을 지정해준다.

Paint pnt = new Paint();
pnt.setColor(Color.CYAN);

그림을 그리는 도구 역할로, 그려질 객체의 색을 지정해준다.

 

4. canvas.drawCircle()

canvas.drawCircle(getCircleX(), getCircleY(), getCircleR(), pnt);

캔버스에 지정한 위치와 도구와 기본 도형을 출력하는 메소드를 이용하여 원을 그린다.

기본 도형을 출력하는 메소드들을 다음과 같이 더 있다.

- drawPoint: 점 그리기

- drawLine: 선 그리기

- drawRec: 사각형 그리기

- drawText: 텍스트 그리기

---

<MainActivity.java>

package ddwucom.moblie.week05.assignment05_p16;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import java.util.Random;

public class MainActivity extends AppCompatActivity {

    MyCustomView myCustomView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        myCustomView = findViewById(R.id.myCustomView);
    }

    public void onClick(View view){
        Random random = new Random();
        int x = random.nextInt(500);
        int y = random.nextInt(800);
        int r = (random.nextInt(3)+1) * 100;

        switch (view.getId()) {
            case R.id.button:
                myCustomView.setCircleX(x);
                myCustomView.setCircleY(y);
                myCustomView.setCircleR(r);
                myCustomView.invalidate();
                break;
        }
    }

}

 

1. myCustomView.invalidate()

myCustomView.invalidate();

화면을 무효화 한 후 onDraw()가 호출되어 화면이 다시 그려진다.