[2017.09.24] 17. Android 그림판(DrawPad) 프로젝트 [점 색, 두께 변경]

이번에는 이전 프로젝트(http://heepie.tistory.com/94)에 추가로 점의 색과 두께를 변경해 보자.

점의 색은 라디오 버튼을 통해 해당 색으로 변경하고

두께는 Seek bar를 통해 두께를 변경해보자.

문제점

문제점은 아래처럼 색이나 두께를 변경이 이전에 그려진 점들에게도 영향을 준다는 것이다. 

문제점의 원인은 그림과 같이 N개의 PosInfo 객체가 1개의 Paint 객체에 종속되어 있다는 것이다. 

그렇기 때문에 설정이 완료된 후 점을 그리게 될 때 마지막 설정값으로 그려지는 것이다.

해결방법

해결방법은 아래 그림과 같이 각각의 PosInfo 객체를 각각의 Paint 객체를 연결해 독립성을 부여하는 것이다.

소스 코드의 변화를 통해 독립성을 부여하는 과정을 살펴보자

소스 코드

- MainActivity

독립성 부여 전

독립성 부여 후

public class MainActivity extends AppCompatActivity { // ... @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initView(); initListener(); // Stage(FrameLayout) drawPad(CustomView) 추가 customView = new CustomView(this); stage.addView(drawPad); } private void initListener() { // 라디오 그룹 리스너 radioGroup.setOnCheckedChangeListener (new RadioGroup.OnCheckedChangeListener() { @Override public void onCheckedChanged (RadioGroup radioGroup, @IdRes int i) { switch (i) { case R.id.radioBlack: customView.setPaintColor(Color.BLACK); break; case R.id.radioCyan: customView.setPaintColor(Color.CYAN); break; case R.id.radioMagenta: customView.setPaintColor(Color.MAGENTA); break; case R.id.radioBlue: customView.setPaintColor(Color.BLUE); break; } } }); // seekbar 리스너 seekBar.setOnSeekBarChangeListener (new SeekBar.OnSeekBarChangeListener() { // ... @Override public void onStopTrackingTouch(SeekBar seekBar) { float r = (float)seekBar.getProgress() / 10; customView.setCircleRound(r); } }); } }

public class MainActivity extends AppCompatActivity { // ... private int color = Color.BLACK; private float r = 5f; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initView(); initListener(); // Stage(FrameLayout) drawPad(CustomView) 추가 customView = new CustomView(this); // 초기값 셋팅 customView.setPaintInfo(color, r); stage.addView(customView); } private void initListener() { // 라디오 그룹 리스너 radioGroup.setOnCheckedChangeListener (new RadioGroup.OnCheckedChangeListener() { @Override public void onCheckedChanged (RadioGroup radioGroup, @IdRes int i) { switch (i) { case R.id.radioBlack: // 색 갱신, 기존의 r 사용 color = Color.BLACK; break; // ... } customView.setPaintInfo(color, r); } }); // seekbar 리스너 seekBar.setOnSeekBarChangeListener (new SeekBar.OnSeekBarChangeListener() { // ... @Override public void onStopTrackingTouch(SeekBar seekBar) { Log.i("heepie", className + " " + r); r = (float)seekBar.getProgress() / 10; customView.setPaintInfo(color, r); } }); } // ... }

- CustomView

독립성 부여 전

독립성 부여 후

public class CustomView extends View { // ... public DrawPad(Context context) { super(context); // paint 클래스 선언 및 초기값 설정 paint = new Paint(); paint.setColor(Color.CYAN); paint.setStrokeWidth(5f); data = new ArrayList<>(); } public void setPaintColor(int color) { paint.setColor(color); } public void setCircleRound(float r) { this.r = r; } @Override protected void onDraw(Canvas canvas) { // 저장된 포인트 그리기 for (Pos p : data) { canvas.drawCircle(p.getX(), p.getY(), r, paint); } super.onDraw(canvas); } @Override public boolean onTouchEvent(MotionEvent event) { // 터치한 위치 값 추출 x = event.getX(); y = event.getY(); // Pos 클래스를 생성해 데이터 저장 후 // List에 추가 Pos pos = new Pos(x, y); data.add(pos); // 화면을 강제로 그리기 위해 호출하는 메소드 invalidate(); return true; } // ... }

public class CustomView extends View { // ... // 색이나 두께가 변할 때마다 독립적으로 Paint와 r를 설정 public void setPaintInfo(int color, float r) { paint = new Paint(); paint.setColor(color); this.r = r; } // ... @Override protected void onDraw(Canvas canvas) { for (PosInfo p : data) { // 포인트 별로 각각 설정에 맞게 Draw canvas.drawCircle(p.getX(), p.getY(), p.getR(), p.getPaint()); } super.onDraw(canvas); } @Override public boolean onTouchEvent(MotionEvent event) { // 터치한 위치 값 추출 x = event.getX(); y = event.getY(); // Pos 클래스를 생성해 데이터 저장 후 // List에 추가 PosInfo posInfo = new PosInfo(x, y); // 각각에 점에 paint와 r 설정 posInfo.setPaint(paint); posInfo.setR(r); data.add(posInfo); // 화면을 강제로 그리기 위해 호출하는 메소드 invalidate(); return true; } // ... }

- Pos Class

독립성 부여 전

독립성 부여 후

/** * X, Y 좌표만을 저장하는 Pos 클래스 */ class Pos { private float x, y; PosInfo(float x, float y) { this.x = x; this.y = y; } public float getX() { return x; } public float getY() { return y; } }

/** * X, Y 좌표, Paint, r을 저장하는 PosInfo 클래스 */ class PosInfo { private float x, y, r; private Paint paint; PosInfo(float x, float y) { this.x = x; this.y = y; } public float getX() { return x; } public float getY() { return y; } public void setPaint(Paint paint) { this.paint = paint; } public Paint getPaint() { return paint; } public float getR() { return r; } public void setR(float r) { this.r = r; } }

스크린 샷

#안드로이드 그림판 만들기 #안드로이드 Paint #안드로이드 Path #Custom view