Custom Views, Drawing, Styles, Themes, ViewProperties, Animations, oh my!
-
Upload
geraldine-weaver -
Category
Documents
-
view
221 -
download
1
Transcript of Custom Views, Drawing, Styles, Themes, ViewProperties, Animations, oh my!
Custom Views, Drawing, Styles, Themes, ViewProperties, Animations, oh my!
Custom Views
• Android provides several helpful Views and ViewGroups
• However sometimes…– you need something different– want to encapsulate functionality– want resuability
Wanting something different
Want to encapsulate functionality
• Create a ViewGroup that encapsulates a group of widgets that closely interact with each other.
Want reusability
• Logic that you reuse over and over again could easily be wrapped up in a custom view.– TextView doesn’t support an attribute to specify a
custom font.– However, if you create a custom TextView, you can
read in your own font and apply it to a TextView in code.
Extend Views
• Simply create a new class that extends any preexisting View.– Usually you want to extend the View that provides
the most functionality for your new view.
• Override any public method the view has and add your own logic to tweak it to your needs.
package com.example.lecture2;
public class CustomView extends TextView {
Paint mPaint = new Paint();public CustomView(Context context) {
this(context, null);}public CustomView(Context context, AttributeSet attrs) {
this(context, attrs, 0);}public CustomView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);Typeface type = Typeface.createFromAsset(getContext().getAssets(), "fonts/calibri.ttf");setTypeface(type);
}}
package com.example.lecture2;
public class CustomView extends TextView {
Paint mPaint = new Paint();public CustomView(Context context) {
this(context, null);}public CustomView(Context context, AttributeSet attrs) {
this(context, attrs, 0);}public CustomView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);Typeface type = Typeface.createFromAsset(getContext().getAssets(), "fonts/calibri.ttf");setTypeface(type);
}}
package com.example.lecture2;
public class CustomView extends TextView {
Paint mPaint = new Paint();public CustomView(Context context) {
this(context, null);}public CustomView(Context context, AttributeSet attrs) {
this(context, attrs, 0);}public CustomView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);Typeface type = Typeface.createFromAsset(getContext().getAssets(), "fonts/calibri.ttf");setTypeface(type);
}}
Use your Custom Views in XML
• You can access your custom views in XML to declaratively define them in your UI
• You need to key things1. The package name2. The class name
package com.example.lecture2;
public class CustomView extends TextView {
Paint mPaint = new Paint();public CustomView(Context context) {
this(context, null);}public CustomView(Context context, AttributeSet attrs) {
this(context, attrs, 0);}public CustomView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);Typeface type = Typeface.createFromAsset(getContext().getAssets(), "fonts/calibri.ttf");setTypeface(type);
}}
Package name
Class Name
Access Custom View in XML<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content" >
<com.example.lecture2.CustomView android:id="@+id/text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="1" android:textSize="75dp" android:layout_centerVertical="true" /><Button android:id="@+id/plus" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="+" android:layout_toRightOf="@id/text" android:textSize="20dp" /><Button android:id="@+id/minus" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="-" android:layout_alignLeft="@id/plus" android:layout_below="@id/plus" android:textSize="20dp" /></RelativeLayout>
Android Drawing
How a View Draws
• In order to show on the screen, a View must be drawn.
• Views have a few different draw calls that developers can override to completely change how a view is drawn or slightly modify it.
• Use the appropriate method depending on your use case.
android.view draw methods
15
draw(Canvas canvas) – coordinates all the drawing for the view. Draws the view’s background, scrollbars, fading edges, etc.
onDraw(Canvas canvas) – draws the view’s contents
dispatchDraw(Canvas canvas) – draws the view’s children.
4 basic components for drawing
16
Drawing Primitive
Rect, Line, Arc, Text, Bitmap
Paint
Color, opacity, stroke, fill, text size
Canvas
Bitmap
Draw commands
• Draw commands are supported by the Canvas class.
• Each of the View’s draw method receives a Canvas object.
• Use the Canvas to draw
Canvas API – draw methods
18
1. drawRect() – draws a rectangle
2. drawArc() – draws an arc (used for drawing circles)
3. drawBitmap() – draws a bitmap
4. drawText() – draw text
Drawing a Rectangle// draw a rectangle starting at 0,0 and ending at the View's width and //height canvas.drawRect(0, 0, getWidth(), getHeight(), paint);
Paint
• Paint controls– Opacity– Color– Stroke– Fill– Text height, spacing, etc (When drawing Text)
How to get Paint
• You’ll have to create your own Paint object.
Paint paint = new Paint(); paint.setColor(0xFFFF0000); paint.setAlpha(128); //setAlpha() takes values 0-255 paint.setTextSize(20);
A canvas is backed by a Bitmap
• The Canvas object is just a helper object that provides tools for drawing.
• The “surface” where the drawing occurs is on a bitmap.
• All Canvas object are backed by a Bitmap
Creating your own Canvas// Creates a bitmap the size of the View Bitmap bitmap = Bitmap.createBitmap(getWidth(), getHeight(),
Bitmap.Config.ARGB_8888); Canvas canvas = new Canvas(bitmap);
// draw a rectangle starting at 0,0 and ending at the View's //width and height canvas.drawRect(0, 0, getWidth(), getHeight(), paint);
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android::background="#FF0000" android:layout_width="match_parent" android:layout_height="match_parent" ><TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Android Drawing!“ /></LinearLayout>
Sharing the canvas
24
LinearLayout
Android Drawing!TextView
Styles
Notice any problems? <TextView android:id="@+id/name" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight=".5" android:paddingLeft="5dp" android:background="#AAFF0000" android:drawableLeft="@drawable/seven_up" /> <TextView android:id="@+id/serial" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight=".5" android:paddingLeft="5dp" android:background="#AAFF0000" android:drawableLeft="@drawable/seven_up" /> <TextView android:id="@+id/name" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight=".5" android:paddingLeft="5dp" android:background="#AAFF0000" android:drawableLeft="@drawable/seven_up" /> <TextView android:id="@+id/serial" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight=".5" android:paddingLeft="5dp" android:background="#AAFF0000" android:drawableLeft="@drawable/seven_up" />
What if I want to change the bg color? <TextView android:id="@+id/name" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight=".5" android:paddingLeft="5dp" android:background="#AAFF0000" android:drawableLeft="@drawable/seven_up" /> <TextView android:id="@+id/serial" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight=".5" android:paddingLeft="5dp" android:background="#AAFF0000" android:drawableLeft="@drawable/seven_up" /> <TextView android:id="@+id/name" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight=".5" android:paddingLeft="5dp" android:background="#AAFF0000" android:drawableLeft="@drawable/seven_up" /> <TextView android:id="@+id/serial" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight=".5" android:paddingLeft="5dp" android:background="#AAFF0000" android:drawableLeft="@drawable/seven_up" />
What a difference style can make<TextView android:id="@+id/name" style="@style/loginTextTheme"/><TextView android:id="@+id/serial" style="@style/loginTextTheme" />
O Style Where Art Thou
• Place your styles in a new xml file in your res/values directory
• Typically the file is called styles.xml
Defining Styles
<style name="loginTheme" <item name="android:layout_width">0dp</item> <item name="android:layout_height">wrap_content</item> <item name="android:layout_weight">.5</item> <item name="android:paddingLeft">5dp</item> <item name="android:background">#AAFF0000</item> <item name="android:drawableLeft">@drawable/seven_up</item></style>
Style Inheritance
• Your styles can inherit from the following:– Android Styles– Your own Styles
Themes
• Themes are styles that are applied to an entire application or activity.
• If you know how to do styles then Themes are easy.
• See documentation here.
Android Holo Light Theme
Android Holo Dark Theme
Android Holo Theme Mixed
Holo Light with dark action bar
Other Themes
• Use theme to hide title bar/action bar
Android Animations
Animations
• You can load animations from XML– Animate a single property of a View– Animate a set of properties on a View
• In code, you can directly animate a View
XML Animations
• To load animations from XML you’ll use ObjectAnimators
• You can also declare ObjectAnimators in code
• Object Animators allow you to animate any object property as long as it has a public setter and getter method.
Programmatic Animations
• Use ViewPropertyAnimator
• ViewPropertyAnimator only allows you to animate a few special View properties.
View Properties• translationX and translationY: These properties control where
the View is located as a delta from its left and top coordinates which are set by its layout container. You can run a move animation on a button by animating these, like this: ObjectAnimator.ofFloat(view, "translationX", 0f, 100f);.
• rotation, rotationX, and rotationY: These properties control the rotation in 2D (rotation) and 3D around the pivot point.
• scaleX and scaleY: These properties control the 2D scaling of a View around its pivot point.
View Properties• pivotX and pivotY: These properties control the location of the
pivot point, around which the rotation and scaling transforms occur. By default, the pivot point is centered at the center of the object.
• x and y: These are simple utility properties to describe the final location of the View in its container, as a sum of the left/top and translationX/translationY values.
• alpha: This value is 1 (opaque) by default, with a value of 0 representing full transparency (i.e., it won't be visible). To fade a View out, you can do this: ObjectAnimator.ofFloat(view, "alpha", 0f);
View Properties methods
• All of the new View properties are accessible via setter and getter methods on the View itself.
• For example,– setRotation()– getRotation()
ViewPropertyAnimator Example• myView.animate().x(50f).y(100f);
• myView.animate().setDuration(2000);
• myView.animate().alpha(0);
• myView.animate().x(50f).y(100f).alpha(0).setDuration(2000).start();
Animations Auto-Start
Auto-start: Note that we didn’t actually start() the animations. In this new API, starting the animations is implicit. As soon as you’re done declaring them, they will all begin.
Animation Resources
• Animation in Honeycomb
• Introducing ViewPropertyAnimator
• Android 4.0 Graphics and Animations
• Android ViewPropertyAnimator documentation
• Property Animation: A good Overall Summary of all Animations in Android.