android 2d drawing and animation framework
Post on 15-Apr-2017
11.548 Views
Preview:
TRANSCRIPT
Android Drawing and Anima-on
Jussi Pohjolainen Tampere University of Applied Sciences
Android Graphics
• Custom 2D Graphics – android.graphics.drawable package
• OpenGL ES 1.0 high performance 3D graphics – javax.microedition.khronos.opengles package
• In this lecture, we will concentrate on the 2D graphics
DRAWABLES AND SCREEN SIZES
Drawables
• A Drawable is a general abstrac-on for “something that can be drawn” – BitmapDrawable, ShapeDrawable, LayerDrawable …
• How to define and instan-ate Drawable? 1. Use image saved to project resources 2. XML file that defines drawable proper-es 3. In Java
1. Use image saved to project resources
• Supported types: PNG (preferred), JPG (acceptable) and GIF (discoured)
• Add the file to res/drawable • Refer using the R – class • Use it from Java or XML
Save Image to Project
Screen Sizes
• Android supports different screen sizes • Simplifying developer’s work: – 4 generalized sizes: small, normal, large, xlarge – 4 generalized densi-es: ldpi, mdpi, hdpi, xhdpi
Emulators for different Screen Sizes
Resources res/layout/my_layout.xml // layout for normal screen size
res/layout-small/my_layout.xml // layout for small screen size
res/layout-large/my_layout.xml // layout for large screen size
res/layout-large-land/my_layout.xml // layout for large screen size in landscape mode
res/layout-xlarge/my_layout.xml // layout for extra large screen size
res/drawable-lhdpi/my_icon.png // image for low density
res/drawable-mdpi/my_icon.png // image for medium density
res/drawable-hdpi/my_icon.png // image for high density
res/drawable-nodpi/composite.xml // density independent resource
Displaying Image using Java public class DrawingExamples extends Activity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); Context mContext = getApplicationContext(); Resources res = mContext.getResources(); Drawable drawable = res.getDrawable(R.drawable.androidlogo); ImageView imageview = new ImageView(this); imageview.setImageDrawable(drawable); setContentView(imageview); } }
Easier way public class DrawingExamples extends Activity {
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
ImageView imageview = new ImageView(this);
imageview.setImageResource(R.drawable.androidlogo);
setContentView(imageview);
}
}
Or use it via the XML <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent”>
<ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/androidlogo" /> </LinearLayout>
2D DRAWING
Drawing on a View
• If no significant frame-‐rate speed needed, draw to custom View
• Extend View and define onDraw – method • onDraw() is called automa-cally • Redraw: invalidate() • Inside onDraw(), Canvas is given
Simple 2D Drawing: View public class CustomDrawableView extends View { public CustomDrawableView(Context context, AttributeSet attr) { super(context, attr); } protected void onDraw(Canvas canvas) { // Paint class holds style information Paint myPaint = new Paint(); myPaint.setStrokeWidth(3); myPaint.setColor(0xFF097286); canvas.drawCircle(200, 200, 50, myPaint); invalidate(); } }
Simple 2D Drawing: View
<fi.tamk.CustomDrawableView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
ShapeDrawable
• With ShapeDrawable, one can draw primi-ve 2D shapes – ArcShape, OvalShape, RoundRectShape, PathShape, RectShape
• ShapeDrawable takes Shape object and manages it into screen
• Shapes can be defined in XML
Shape Drawable in Java // Drawing primitive 2D shapes public class CustomDrawableView extends View { private ShapeDrawable mDrawable; public CustomDrawableView(Context context) { super(context); int x = 10; int y = 10; int width = 300; int height = 50; mDrawable = new ShapeDrawable(new OvalShape()); mDrawable.getPaint().setColor(0xff74AC23); mDrawable.setBounds(x, y, x + width, y + height); } protected void onDraw(Canvas canvas) { mDrawable.draw(canvas); } }
Shape Drawable in XML // res/drawable-xxx/myshapes.xml <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <gradient android:angle="90" android:startColor="#ffffff" android:endColor="#ff0000" android:type="linear" /> <size android:width="60dp" android:height="40dp" /> </shape>
Shape Drawable in XML // res/layout/main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" >
<ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/myshapes" /> </LinearLayout>
Result
ANIMATION
About Anima-on
– 1) View Anima<on • Any View object to perform tweened anima-on and frame
by frame anima-on • Tween anima-on calculates anima-on given informa-on:
start, end, size, rota-on and other • Frame by frame: series of drawables one ader another
– 2) Property Anima<on System (Android 3.x) • “Animate almost anything” • Define anima-on to change any object property over -me,
whether in screen or not
Differences
• View + Less -me to setup + Less code to write -‐ Only View objects -‐ Only certain aspects to animate (scaling, rota-ng..) -‐ View itself is not modified when anima-ng
• Property anima<on system + Anima-ng also non View objects + Anima-ng any property of any object -‐ More work
VIEW ANIMATION
About View Anima-on
• View anima-on can be 1) tween or 2) frame by frame anima-on
• Tween anima-on – Can perform series of simple transforma-ons (posi-on, size, rota-on, transparency) on View object
– In XML or in code
• Frame anima-on – Sequence of different images – In XML or in code
1) Tween anima-on
• Preferred way: Define in XML • Anima-on xml is stored in res/anim directory • Root element can be: alpha, scale, translate, rotate or set that holds groups of these elements
Tween Anima-on: XML <?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@[package:]anim/interpolator_resource" android:shareInterpolator=["true" | "false"] >
<alpha
android:fromAlpha="float"
android:toAlpha="float" />
<scale
android:fromXScale="float" android:toXScale="float"
android:fromYScale="float"
android:toYScale="float"
android:pivotX="float"
android:pivotY="float" />
<translate
android:fromXDelta="float"
android:toXDelta="float"
android:fromYDelta="float"
android:toYDelta="float" />
<rotate
android:fromDegrees="float"
android:toDegrees="float" android:pivotX="float"
android:pivotY="float" />
<set>
...
</set>
</set>
Tween Anima-on: Java
TextView v = (TextView) findViewById(R.id.textview1);
Animation myanimation =
AnimationUtils.loadAnimation(this, R.anim.myanimation);
v.startAnimation(myanimation);
Basic Defini-ons
• <alpha> – fade-‐in or fade-‐out anima-ons.
• <scale> – Resizing anima-on.
• <translate> – Ver-cal and or horizontal movement.
• <rotate> – A rota-on of an anima-on
Example of Translate <?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<translate android:fromXDelta="0"
android:fromYDelta="0"
android:toXDelta="0"
android:toYDelta="100%p"
android:duration="700"
android:repeatMode="reverse"
android:repeatCount="1"
/>
</set>
Start from 0,0 End to 0, 100% from parent
Dura-on is 700 Repeat in reverse one -me
Scale <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:shareInterpolator="false"> <scale android:fromXScale="1" android:fromYScale="1" android:toXScale="6" android:toYScale="6" android:duration="700" android:repeatMode="reverse" android:repeatCount="1" /> </set>
Rotate <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:shareInterpolator="false"> <rotate android:fromDegrees="0" android:toDegrees="360" android:pivotX="50%" android:pivotY="50%" android:duration="700" /> </set>
Alpha <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:shareInterpolator="false"> <alpha
android:fromAlpha = "1" android:toAlpha = "0" android:duration = "1000" android:repeatMode = "reverse" android:repeatCount= "1" />
</set>
Using Several Anima-ons
<?xml version="1.0" encoding="um-‐8"?> <set xmlns:android="hpp://schemas.android.com/apk/res/android" android:shareInterpolator="false"> <alpha android:fromAlpha = "1" android:toAlpha = "0" android:dura-on = "1000" android:repeatMode = "reverse" android:repeatCount= "1" /> <rotate android:fromDegrees = "0" android:toDegrees = "360" android:pivotX = "50%" android:pivotY = "50%" android:dura-on = "1000" android:repeatMode = "reverse" android:repeatCount = "1" />
<scale
android:fromXScale = "1"
android:fromYScale = "1"
android:toXScale = "6"
android:toYScale = "6"
android:pivotX = "50%"
android:pivotY = "50%"
android:duration = "1000"
android:repeatMode = "reverse"
android:repeatCount = "1" />
</set>
Interpola-on
• Interpola-on is an anima-on modifier defined in xml
• Rate of change in anima-on – Accelerate, decelerate, bounce…
Example of Interpola-on <?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="true"
android:interpolator="@android:anim/bounce_interpolator"
>
<translate android:fromXDelta="0"
android:fromYDelta="0"
android:toXDelta="0"
android:toYDelta="100%p"
android:duration="700" />
</set>
Different Interpola-ons
2) Frame Anima-on
• Create XML file that consists of sequence of different images
• Root-‐element: <anima-on-‐list> and series of child elements <item>
Example <?xml version="1.0" encoding="utf-8"?> <animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false"> <item android:drawable="@drawable/a1" android:duration="200" /> <item android:drawable="@drawable/a2" android:duration="200" /> <item android:drawable="@drawable/a3" android:duration="200" /> <item android:drawable="@drawable/a4" android:duration="200" /> <item android:drawable="@drawable/a5" android:duration="200" /> <item android:drawable="@drawable/a6" android:duration="200" /> <item android:drawable="@drawable/a7" android:duration="200" /> <item android:drawable="@drawable/a8" android:duration="200" /> </animation-list>
Star-ng the Frame Anima-on ImageView player = (ImageView) findViewById(R.id.player);
player.setImageResource(R.drawable.frameanimation);
AnimationDrawable anim = (AnimationDrawable) player.getDrawable();
anim.start();
PROPERTY ANIMATION Honeycomb Feature!
Property Anima-on
• Extend anima-on beyond Views! – Also limited scope: move, rotate, scale, alpha. That’s it.
• With Property Anima-on, you can animate almost anything
• Changes the object itself • Anima-ng values over <me
ValueAnimator
• To animate values 0.0 – 1.0 – ValueAnimator anim = ValueAnimator.ofInt(0, 100); – anim.setDuration(500); – anim.start();
• It animates, but nothing can be seen. Add listener! – anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { – public void onAnimationUpdate(ValueAnimator animation) { – int value = (Integer) animation.getAnimatedValue(); – // do something with value... – } – });
ObjectAnimator: animate objects! MyPoint myobject = new MyPoint(0,0);
// Animate myobject’s x-attribute from default value
// to 20!
ObjectAnimator anim2 =
ObjectAnimator.ofInt(myobject, "x", 20);
anim2.setDuration(2500);
anim2.start(); Assumes that myobject has getX() and setX(int x)
methods1
View class in Honeycomb
• In Honeycomb, View class has several set/get methods.. For example – setAlpha (float alpha) – float getAlpha ()
• So by using Object Animator, you can animate the alpha (transparency) for every view!
Value/Object Animator Methods
• setStartDelay(long) • setRepeatCount(int) • setRepeatMode(int) • setInterPolator(TimeInterpolator)
Example anima-ng View // Getting reference to TextView defined in xml
tv = (TextView) findViewById(R.id.textview1);
ObjectAnimator anim =
ObjectAnimator.ofFloat(tv, "alpha", 0);
anim.setDuration(1000);
anim.setRepeatCount(ObjectAnimator.INFINITE);
anim.setRepeatMode(ObjectAnimator.REVERSE);
anim.start();
AnimatorSet
• Choreograph mul-ple anima-ons • Play several anima-ons together – playTogether(Animator…)
• Play anima-ons one ader another – playSequen-ally(Animator…)
• Or combina-on of above – with(), before(), ader() methods
top related