1. Custom Widget 2 UNIT 27 로봇 SW 콘텐츠 교육원 조용수

2. 학습 목표 Custom Widget –Canvas 를 이용하여 Custom Widget 을 만든다. 2

3. Custom View 의 기본 구조 : 생성자 3 public class ControllerView extends View { // 소스에서 직접 생성한 경우 호출되는 생성자 public ControllerView(Context context) { super(context); // TODO Auto-generated constructor stub } // 리소스 XML 에서 생성하게 될 경우 호출되는 생성자 public ControllerView(Context context, AttributeSet attrs) { super(context, attrs); // TODO Auto-generated constructor stub } // 리소스 XML 에서 생성하게 될 경우 호출되는 생성자, Default Style 파라메타 추가 public ControllerView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); // TODO Auto-generated constructor stub }

4. Custom View 의 기본 구조 : 크기설정 4 int heightSize = 0; int widthSize = 0; @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { // TODO Auto-generated method stub int heightMode = MeasureSpec.getMode(heightMeasureSpec); switch(heightMode) { case MeasureSpec.UNSPECIFIED: // mode 가 셋팅되지 않은 크기가 넘어올때 or Fixed Size heightSize = heightMeasureSpec; break; case MeasureSpec.AT_MOST: // wrap_content ( 뷰 내부의 크기에 따라 크기가 달라짐 ) heightSize = 300; break; case MeasureSpec.EXACTLY: // fill_parent, match_parent ( 외부에서 이미 크기가 지정 ) heightSize = MeasureSpec.getSize(heightMeasureSpec); break; } int widthMode = MeasureSpec.getMode(widthMeasureSpec); switch(widthMode) { case MeasureSpec.UNSPECIFIED: // mode 가 셋팅되지 않은 크기가 넘어올때 widthSize = widthMeasureSpec; break; case MeasureSpec.AT_MOST widthSize = 300; break; case MeasureSpec.EXACTLY: widthSize = MeasureSpec.getSize(widthMeasureSpec); break; } setMeasuredDimension(widthSize, heightSize); }

5. Custom View 의 기본 구조 : 터치 5 @Override public boolean onTouchEvent(MotionEvent event) { // TODO Auto-generated method stub switch(event.getAction()) { case MotionEvent.ACTION_UP: invalidate(); break; case MotionEvent.ACTION_DOWN: invalidate(); break; case MotionEvent.ACTION_MOVE: invalidate(); break; } return true; }

6. onDraw 6 PointF pTouchPoint ; PointF pOldTouchPoint ; @Override protected void onDraw(Canvas canvas) { // TODO Auto-generated method stub final Paint pCenter = new Paint(); pCenter.setColor(Color.YELLOW); canvas.drawColor(Color.BLACK); canvas.drawLine(0, heightSize/2, widthSize, heightSize/2, pCenter); canvas.drawLine(widthSize/2, 0, widthSize/2, heightSize, pCenter); if(pTouchPoint.x > 0 && pTouchPoint.y > 0) { canvas.drawCircle(pTouchPoint.x, pTouchPoint.y, 200, pCenter); }

7. 좌표 처리 7 @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { … pTouchPoint = new PointF(widthSize/2, heightSize/2); pOldTouchPoint = new PointF(widthSize/2, heightSize/2); setMeasuredDimension(widthSize, heightSize); } private final int TOUCH_OFFSET = 10; @Override public boolean onTouchEvent(MotionEvent event) { // TODO Auto-generated method stub switch(event.getAction()) { case MotionEvent.ACTION_UP: pOldTouchPoint.x = pTouchPoint.x = widthSize/2; pOldTouchPoint.y = pTouchPoint.y = heightSize/2; invalidate(); break;

8. 좌표 처리 8 case MotionEvent.ACTION_DOWN: pTouchPoint.x = event.getX(); pTouchPoint.y = event.getY(); pOldTouchPoint.x = pTouchPoint.x; pOldTouchPoint.y = pTouchPoint.y; invalidate(); break; case MotionEvent.ACTION_MOVE: pTouchPoint.x = event.getX(); pTouchPoint.y = event.getY(); if(Math.abs(pTouchPoint.x - pOldTouchPoint.x) > TOUCH_OFFSET || Math.abs(pTouchPoint.y - pOldTouchPoint.y) > TOUCH_OFFSET ) { pOldTouchPoint.x = pTouchPoint.x; pOldTouchPoint.y = pTouchPoint.y; } invalidate(); break; } return true; }

9. 좌표 처리 9 case MotionEvent.ACTION_DOWN: pTouchPoint.x = event.getX(); pTouchPoint.y = event.getY(); pOldTouchPoint.x = pTouchPoint.x; pOldTouchPoint.y = pTouchPoint.y; invalidate(); break; case MotionEvent.ACTION_MOVE: pTouchPoint.x = event.getX(); pTouchPoint.y = event.getY(); if(Math.abs(pTouchPoint.x - pOldTouchPoint.x) > TOUCH_OFFSET || Math.abs(pTouchPoint.y - pOldTouchPoint.y) > TOUCH_OFFSET ) { pOldTouchPoint.x = pTouchPoint.x; pOldTouchPoint.y = pTouchPoint.y; } invalidate(); break; } return true; }

10. onDraw 에 반영 10 PointF pTouchPoint ; PointF pOldTouchPoint ; @Override protected void onDraw(Canvas canvas) { // TODO Auto-generated method stub final Paint pCenter = new Paint(); pCenter.setColor(Color.YELLOW); canvas.drawColor(Color.BLACK); canvas.drawLine(0, heightSize/2, widthSize, heightSize/2, pCenter); canvas.drawLine(widthSize/2, 0, widthSize/2, heightSize, pCenter); if(pTouchPoint.x > 0 && pTouchPoint.y > 0) { canvas.drawCircle(pTouchPoint.x, pTouchPoint.y, 200, pCenter); }

11. 좌표 데이터 전송 11 public interface ControllerCallBack { public void ChangeControllerPosition(int xOffset, int yOffset); } public class MainActivity extends RobotActivity implements ControllerCallBack{ ControllerView controllerView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); controllerView = (ControllerView)findViewById(R.id.conroller); controllerView.setCallback(this); }

12. 좌표 데이터 전송 12 public class ControllerView extends View { ControllerCallBack callback = null; … public ControllerCallBack getCallback() { return callback; } public void setCallback(ControllerCallBack callback) { this.callback = callback; }

13. 좌표 데이터 전송 13 @Override public boolean onTouchEvent(MotionEvent event) { // TODO Auto-generated method stub switch(event.getAction()) { case MotionEvent.ACTION_UP: … callback.ChangeControllerPosition(0, 0); invalidate(); break; case MotionEvent.ACTION_DOWN: … invalidate(); break; case MotionEvent.ACTION_MOVE: … int xOffset = (int)(widthSize/2 - pTouchPoint.x); int yOffset = (int)(heightSize/2 - pTouchPoint.y); callback.ChangeControllerPosition(xOffset, yOffset); } invalidate(); break; } return true; }

14. 좌표 데이터 처리 14 @Override public void ChangeControllerPosition(int xOffset, int yOffset) { // TODO Auto-generated method stub Log.d("MainActivity", "ChangeControlerPosition x:" + xOffset + " y:" + yOffset); int rSpeed = 0; int fSpeed = 0; if(Math.abs(xOffset/10) > 10) { rSpeed = (int)(xOffset/10); } // Front Speed if(Math.abs(yOffset/10) > 10) { fSpeed = (int)(yOffset/10); } leftWheel.write(fSpeed + rSpeed); rightWheel.write(fSpeed - rSpeed); }

15. 테스트 15