Без темы
<<  Base4Web Basic Principles of Licensing and Copyright Laws  >>
Basic 2D Graphics in Android
Basic 2D Graphics in Android
Android Graphics Programming
Android Graphics Programming
Drawing on a Canvas
Drawing on a Canvas
Canvas and Paint
Canvas and Paint
Let's Create a New Project
Let's Create a New Project
Creating Your Own View Class
Creating Your Own View Class
Create a DrawableView class
Create a DrawableView class
Still in the DrawableView class
Still in the DrawableView class
Modify main
Modify main
Detecting User Interaction and Touch Events
Detecting User Interaction and Touch Events
Detecting Touch Events
Detecting Touch Events
Modifying the DrawableView
Modifying the DrawableView
DrawableView class
DrawableView class
Modify onDraw as follows
Modify onDraw as follows
Add an onTouchEvent method
Add an onTouchEvent method
Helpful Hint: Debugging
Helpful Hint: Debugging
Coming up after lunch
Coming up after lunch

Презентация на тему: «Basic 2D Graphics in Android». Автор: . Файл: «Basic 2D Graphics in Android.ppt». Размер zip-архива: 240 КБ.

Basic 2D Graphics in Android

содержание презентации «Basic 2D Graphics in Android.ppt»
СлайдТекст
1 Basic 2D Graphics in Android

Basic 2D Graphics in Android

2 Android Graphics Programming

Android Graphics Programming

There are many ways to do graphics programming in Android 2D vs. 3D static vs. dynamic Many of them require a lot of knowledge of the underlying graphics libraries We will look at the very simplest form of 2D graphics

3 Drawing on a Canvas

Drawing on a Canvas

Visible elements in an Android UI are called Views Each View has an associated Canvas When the View is shown, its onDraw method is automatically called by Android It uses the Canvas to render the different things it wants to display We can create our own View with our own onDraw method to display basic objects using the Canvas

4 Canvas and Paint

Canvas and Paint

Canvas has methods for drawing Arcs, Bitmaps, Circles, Lines, Ovals, Paths, Rectangles, etc. Also methods to rotate, scale, skew, translate Paint has methods for setting the alpha, color, shade, stroke, etc.

5 Let's Create a New Project

Let's Create a New Project

In Eclipse, go to File ? New ? Project Then select “Android Project” Name the project “FunWithDrawing” Specify the package as “edu.upenn.cs4hs” Name the Activity class “FunWithDrawingActivity” Next, create your own custom View class

6 Creating Your Own View Class

Creating Your Own View Class

Create a new Java class that extends View Implement the necessary constructors Implement the onDraw method and use the Canvas parameter to draw using a Paint object Add your View to the application's Layout

7 Create a DrawableView class

Create a DrawableView class

1 package edu.upenn.cs4hs; 2 3 public class DrawableView extends View { 4 5 // Second, you must implement these constructors!! 6 public DrawableView(Context c) { 7 super(c); 8 } 9 public DrawableView(Context c, AttributeSet a) { 10 super(c, a); 11 } 12 ... continued on next slide ...

8 Still in the DrawableView class

Still in the DrawableView class

.. 13 // Third, implement the onDraw method. 14 // This method is called when the View is displayed 15 protected void onDraw(Canvas canvas) { 16 17 // this is the “paintbrush” 18 Paint paint = new Paint(); 19 // set the color 20 paint.setColor(Color.RED); 21 22 // draw Rectangle with corners at (40, 20) and (90, 80) 23 canvas.drawRect(40, 20, 90, 80, paint); 24 25 // change the color 26 paint.setColor(Color.BLUE); 27 // set a shadow 28 paint.setShadowLayer(10, 10, 10, Color.GREEN); 29 30 // create a “bounding rectangle” 31 RectF rect = new RectF(150, 150, 280, 280); 32 // draw an oval in the bounding rectangle 33 canvas.drawOval(rect, paint); 34 } 35 36 } // end of DrawableView class

9 Modify main

Modify main

xml as follows

1 <?xml version="1.0" encoding="utf-8"?> 2 3 <edu.upenn.cs4hs.DrawableView 4 xmlns:android="http://schemas.android.com/apk/res/android" 5 android:layout_width="fill_parent" 6 android:layout_height="wrap_content" 7 /> 8

10 Detecting User Interaction and Touch Events

Detecting User Interaction and Touch Events

11 Detecting Touch Events

Detecting Touch Events

When the user touches/clicks on the View, Android invokes the View's onTouchEvent method A MotionEvent object is automatically generated and is passed to the method From the MotionEvent, you can determine: the type of Action (down, up/release, move) where the event occurred (x/y coordinate) the time at which the event occurred

12 Modifying the DrawableView

Modifying the DrawableView

In your DrawableView class, modify onDraw so that the color of the rectangle is randomized Then add an onTouchEvent method that looks for an “up” action and calls this.invalidate if the touch is within the bounds of the rectangle

13 DrawableView class

DrawableView class

1 package edu.upenn.cs4hs; 2 3 public class DrawableView extends View { 4 5 // these constructors shouldn't change 6 public DrawableView(Context c) { 7 super(c); 8 } 9 public DrawableView(Context c, AttributeSet a) { 10 super(c, a); 11 } 12

14 Modify onDraw as follows

Modify onDraw as follows

13 // This version of onDraw randomly chooses a color 14 // to use when drawing the rectangle 15 protected void onDraw(Canvas canvas) { 16 17 // this is the “paintbrush” 18 Paint paint = new Paint(); 19 20 // set the color randomly 21 int whichColor = (int)(Math.random() * 4); 22 if (whichColor == 0) paint.setColor(Color.RED); 23 else if (whichColor == 1) paint.setColor(Color.GREEN); 24 else if (whichColor == 2) paint.setColor(Color.BLUE); 25 else paint.setColor(Color.YELLOW); 26 27 // draw Rectangle with corners at (40, 20) and (90, 80) 28 canvas.drawRect(40, 20, 90, 80, paint); 29 30 31 }

15 Add an onTouchEvent method

Add an onTouchEvent method

32 // this method is called when the user touches the View 33 public boolean onTouchEvent(MotionEvent event) { 34 35 // if it's an up (“release”) action 36 if (event.getAction() == MotionEvent.ACTION_UP) { 37 38 // get the coordinates 39 float x = event.getX(); 40 float y = event.getY(); 41 42 // see if they clicked on the box 43 if (x >= 40 && x <= 90 && y >= 20 && y <= 80) { 44 45 // redraw the View... this calls onDraw again! 46 invalidate(); 47 } 48 } 49 // indicates that the event was handled 50 return true; 51 } // end of onTouchEvent 52 } // end of DrawableView class

16 Helpful Hint: Debugging

Helpful Hint: Debugging

Log.v(tag, message); System.out.println(message); Window ? Show View ? Other... ? Android ? LogCat To show a pop-up window: Toast.makeText( getApplicationContext(), message, Toast.LENGTH_LONG).show();

17 Coming up after lunch

Coming up after lunch

Creating and handling forms Threads System services Discussion: how can you use Android in your high school CS course?

«Basic 2D Graphics in Android»
http://900igr.net/prezentacija/informatika/basic-2d-graphics-in-android-194246.html
cсылка на страницу
Урок

Информатика

130 тем
Слайды