Download presentation
Presentation is loading. Please wait.
1
CIS 470 Mobile App Development
Lecture 22 Wenbing Zhao Department of Electrical Engineering and Computer Science Cleveland State University 9/10/2019 CIS 470: Mobile App Development
2
CIS 470: Mobile App Development
Outline Basic Painting with Views 9/10/2019 CIS 470: Mobile App Development
3
CIS 470: Mobile App Development
Basic Painting with Views Build a custom view that allows the user to paint on the screen by pressing down their finger This will illustrate how to build custom components, how to draw shapes and paths on a view and also how to handle user touch interactions 9/10/2019 CIS 470: Mobile App Development
4
CIS 470: Mobile App Development
Main Activity Layout <RelativeLayout xmlns:android=" xmlns:tools=" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" > <com.wenbing.simplepaint.SimpleDrawingView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentLeft="true" android:layout_alignParentRight="true" android:layout_alignParentTop="true" /> </RelativeLayout> 9/10/2019 CIS 470: Mobile App Development
5
CIS 470: Mobile App Development
MainActivity import android.support.v7.app.AppCompatActivity; import android.os.Bundle; public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); } } 9/10/2019 CIS 470: Mobile App Development
6
CIS 470: Mobile App Development
Creating Custom View Create a new project and name it SimplePaint Add a new Java class named SimpleDrawingView public class SimpleDrawingView extends View { // setup initial color private final int paintColor = Color.BLACK; // defines paint and canvas private Paint drawPaint; public SimpleDrawingView(Context context, AttributeSet attrs) { super(context, attrs); setFocusable(true); setFocusableInTouchMode(true); setupPaint(); } // Setup paint with color and stroke styles private void setupPaint() { drawPaint = new Paint(); drawPaint.setColor(paintColor); drawPaint.setAntiAlias(true); drawPaint.setStrokeWidth(5); drawPaint.setStyle(Paint.Style.STROKE); drawPaint.setStrokeJoin(Paint.Join.ROUND); drawPaint.setStrokeCap(Paint.Cap.ROUND); // Let's draw three circles @Override protected void onDraw(Canvas canvas) { canvas.drawCircle(50, 50, 20, drawPaint); drawPaint.setColor(Color.GREEN); canvas.drawCircle(50, 150, 20, drawPaint); drawPaint.setColor(Color.BLUE); canvas.drawCircle(50, 250, 20, drawPaint); } 9/10/2019 CIS 470: Mobile App Development
7
CIS 470: Mobile App Development
Handling Touch Interactions private List<Point> circlePoints; public SimpleDrawingView(Context context, AttributeSet attrs) { super(context, attrs); setupPaint(); // same as before circlePoints = new ArrayList<Point>(); } // Draw each circle onto the view @Override protected void onDraw(Canvas canvas) { for (Point p : circlePoints) { canvas.drawCircle(p.x, p.y, 5, drawPaint); // Append new circle each time user presses on screen public boolean onTouchEvent(MotionEvent event) { float touchX = event.getX(); float touchY = event.getY(); circlePoints.add(new Point(Math.round(touchX), Math.round(touchY))); // indicate view should be redrawn postInvalidate(); return true; private void setupPaint() { // same as before drawPaint.setStyle(Paint.Style.FILL); // change to fill // ... Suppose now we wanted to draw a circle every time the user touches down on the drawing view. This would require us to keep track of an array of points for our circles and then append a point for each onTouch event triggered 9/10/2019 CIS 470: Mobile App Development
8
CIS 470: Mobile App Development
Handling Touch Interactions 9/10/2019 CIS 470: Mobile App Development
9
CIS 470: Mobile App Development
Drawing with Paths We can improve our drawing application by removing the list of circles and instead drawing with paths The Path class is ideal for allowing the user to draw on screen A path can contain many lines, contours and even other shapes Next, let's append points to the path as the user touches the screen. When the user presses down, let's start a path and then when they drag let's connect the points together To do this, we need modify the onTouchEvent to append these points to our Path object 9/10/2019 CIS 470: Mobile App Development
10
CIS 470: Mobile App Development
private Path path = new Path(); // Get x and y and append them to the path public boolean onTouchEvent(MotionEvent event) { float pointX = event.getX(); float pointY = event.getY(); // Checks for the event that occurs switch (event.getAction()) { case MotionEvent.ACTION_DOWN: // Starts a new line in the path path.moveTo(pointX, pointY); break; case MotionEvent.ACTION_MOVE: // Draws line between last point and this point path.lineTo(pointX, pointY); default: return false; } postInvalidate(); // Indicate view should be redrawn return true; // Indicate we've consumed the touch // Draws the path created during the touch events @Override protected void onDraw(Canvas canvas) { canvas.drawPath(path, drawPaint); private void setupPaint() { // same as before drawPaint.setStyle(Paint.Style.STROKE); // change back to stroke // ... Drawing with Paths 9/10/2019 CIS 470: Mobile App Development
11
CIS 470: Mobile App Development
Homework #23 Add a toggle button at the top of the main layout to change the way the drawing is done: (1) using circle, (2) using path 9/10/2019 CIS 470: Mobile App Development
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.