Custom View는 미리 만들어 놓은 뷰가 아닌 개발자가 직접 모양 및 기능 등을 정의하여 만든 뷰이다.
재사용이 가능하여 조립과 상속이 용이하다는 장점이 있다.
#실습
- 노란색 부분을 custom view로 만들고, random 함수로 x의 범위는 0~500, y의 범위는 0~800, r의 범위는 0~3으로 하여 CIRCLE DRAW 버튼 클릭 시 원을 출력하는앱 만들어보기
<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()가 호출되어 화면이 다시 그려진다.
'📱Application > Android' 카테고리의 다른 글
사용자 인터페이스03 - 대화상자(Dialog) (0) | 2022.05.29 |
---|---|
사용자 인터페이스02 - 어댑터뷰(Adapter View) (0) | 2022.05.27 |
사용자 인터페이스01 - 메뉴(Menu) (0) | 2022.05.27 |
인터페이스 기초02 - 레이아웃(Layout) (0) | 2022.04.25 |
인터페이스 기초 01 - 뷰(View) (1) | 2022.04.24 |