Upload
naman-dwivedi
View
204
Download
0
Embed Size (px)
Citation preview
Why custom views?
● Reusability ■ Same code can be used everywhere resulting in lesser mess and easier maintanance
Why custom views?
● Reusability ■ Same code can be used everywhere resulting in lesser mess and easier maintanance
● Encapsulation■ Custom views encapsulates a specific set of functionality
Why custom views?
● Reusability ■ Same code can be used everywhere resulting in lesser mess and easier maintanance
● Encapsulation■ Custom views encapsulates a specific set of functionality
● Custom Drawing■ Draw views that cannot be achieved from regular View classes
Why custom views?
● Reusability ■ Same code can be used everywhere resulting in lesser mess and easier maintanance
● Encapsulation■ Custom views encapsulates a specific set of functionality
● Custom Drawing■ Draw views that cannot be achieved from regular View classes
● XML Styling■ Easily add any sort of styling from xml attributes
Constructors
● public View(Context context)
○ Java Constructor
● public View(Context context, AttributeSet attrs)
○ XML Constructor
● public View(Context context, AttributeSet attrs, int defStyleAttr)
○ XML with style Constructor
Layout Inflation
● onFinishInflate()○ Called after a view has been inflated from XML.
● onLayout()○ Called when this view should assign a size and position to all of its
children● onMeasure()
○ Called to determine size requirements for view and its children● onSizeChanged()
○ Called when size of view has changed
Drawing
onDraw(android.graphics.Canvas)
onDraw(android.graphics.Canvas canvas) {
//draw content on canvas here
canvas.draw();
canvas.drawCircle();
canvas.drawBitmap();
...
//yadayada
}
Event Processing
● onKeyDown()○ called when a new hardware event occurs
● onKeyUp()○ Called when a new hardware up event occurs
● onTrackballEvent()○ called when a trackball motion event occurs
● onTouchEvent()○ called when a touch screen motion event occurs
Focus● onFocusChanged()
○ Called when a view gains or loses focus
● onWindowFocusChanged()○ called when window containing view gains or loses focus
Attaching● onAttachedToWindow()● onDetachedFromWindow()● onWindowVisibilityChanged()
getHeight() and getWidth()
getHeight() and getWidth() returns the width and height of the view respectively.
These methods must be used only when the view is ready and has been laid out on the screen. Otherwise these will return 0.
In Constructors, using getHeight() and getWidth() will always return 0.
onSizeChanged() or onLayout() can be used to keep track of the width and height of the view.
Constructors (View is not ready yet, getHeight(), getWidth() will return 0)
…………………..
onSizeChanged() (called whenever size of view is changed)
(getHeight() and getWidth() will return height and height of the view)
…………………...
onDraw() (getHeight() and getWidth() will return height and height of the view)
2. Constructorpublic class MyCustomView extends View {
public MyCustomView(Context context) {
super(context);
}
public MyCustomView(Context context, AttributeSet attrs){
super(context, attrs);
}
public MyCustomView(Context context, AttributeSet attrs,
int defRes){
super(context, attrs, defRes);
}
}
3. Draw something!public class MyCustomView extends View {
//constructors
.......
@Override
protected void onDraw(Canvas canvas) {
Paint paint = new Paint();
paint.setColor(Color.BLACK);
//canvas.drawCircle(float cx, float cy, float radius, Paint paint);
canvas.drawCircle(50, 50, 20, paint);
}
}
Canvas.draw() We can draw a lot of standard shapes using canvas draw APIs
canvas.drawCircle(float cx, float cy,
float radius, Paint paint);
canvas.drawRect(float left, float top, float right,
float bottom, Paint paint);
canvas.drawLine(float startX, float startY,
float stopX, float stopY, Paint paint);
Some more canvas draw APIs..
canvas.drawArc(RectF oval, float startAngle, float sweepAngle, boolean
useCenter, Paint paint);
canvas.drawOval(RectF oval, Paint paint);
canvas.drawBitmap(Bitmap bitmap, float left, float top, Paint paint);
canvas.drawColor(int color);
canvas.drawPaint(Paint paint);
canvas.drawPath(Path path);
attrs.xml
<resources>
<declare-styleable name="MyCustomView">
<attr name="circlecolor" format="color" />
</declare-styleable>
</resources>
Layout...
<com.example.CustomViewExample
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:circlecolor="#009688" />
public class MyCustomView extends View {
public MyCustomView(Context context, AttributeSet attrs){
super(context, attrs);
TypedArray ta = context.obtainStyledAttributes(attrs,
R.styleable.MyCustomView);
int circleColor = ta.getColor(R.styleable.MyCustomView_circlecolor,
Color.BLACK);
ta.recycle();
setColor(circlecolor);
}
public void setColor(Color color) {
paint.setColor(color);
}
}
PathFor drawing complicated geometric shapes, Path can be used.
The Path class can draw geometric paths consisting of straight line segments, quadratic curves, and cubic curves.
Path path = new Path();
path.moveTo(300, 300);
path.lineTo(600, 300);
path.lineTo(600, 600);
path.lineTo(300, 600);
path.lineTo(300, 300);
path.close();
//creates a simple square path
Why use Path?Path keeps the last position coordinates stored and Path can be used to create much more complicated shapes or curves
path.moveTo(300,300) will move the path pointer to 300,300 coordinates.
Similarly path.lineTo(700,700) will create a line and move the path pointer from previous coordinates to new coordinates.
While canvas.drawLine() requires the initial xy coordinates and the final xy coordinates thus using canvas apis directly can prove to be cumbersome.
A path can be drawn on canvas using -
canvas.drawPath(path,paint)
How you can animate view?
Runnables and view invalidation
Much more powerful method of creating a variety of advanced animations. You have more control over the animations.
Basic concept is-
Update the drawing properties every n milliseconds.Redraw the view every n milliseconds using a Runnable and invalidate() method.
invalidate() redraws the view and a call to onDraw() method is sent on each invalidate()
A simple animation using Runnablefloat posX = 0;
Every 15 milliseconds (using Runnable) -
posX += 10; //increase x coordinate by 10
invalidate();
Invalidate calls onDraw() where-
canvas.drawLine(0, getHeight()/2, posX, getHeight()/2, paint);
This will result in a straight line starting from 0 and slowly reaching the end of screen
private Runnable animateLine = new Runnable() { @Override
public void run() {
boolean reachedEnd = false;
if (posX < getWidth())
posX+= 10;
else reachedEnd = true;
if (!reachedEnd) {
postDelayed(this, 15);
}
invalidate();
}
};
Value animatorProperty Animation
With Value animators, we can animate a property of an object from an initial value to a final value over a duration of time
ValueAnimator animation = ValueAnimator.ofFloat(0f, 1f);
animation.setDuration(1000);
animation.start();
Value animator calculates the property with respect to time between the given values. It does not actually animates a give object or view, it just calculates the values which can be used to do something on an object.
Object animatorObject animator is a sub-class of ValueAnimator designed to calculate the animation values and directly apply them to an object.
ObjectAnimator anim = ObjectAnimator.ofFloat(myObject, "alpha", 0f, 1f);
anim.setDuration(1000);
anim.start();
The above object animator will animate the alpha of myObject from 0f to 1f.
We can provide a view to the ObjectAnimator and we can animate any property of that view
between two values
InterpolatorInterpolator defines a relation between values and time.
With different interpolator, we can define how values are calculated as a function of time.
LinearInterpolator- Changes the values at the same speed
public float getInterpolation(float input) {
return input;
}
AccelerateDecelerateInterpolator- It accelerates into the animation and decelerates out of it
public float getInterpolation(float input) {
return (float)(Math.cos((input + 1) * Math.PI) / 2.0f) + 0.5f;
}
What properties can be animated?● 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.
● rotation, rotationX, and rotationY: These properties control the rotation in 2D (rotationproperty) and 3D
around the pivot point.
● scaleX and scaleY: These properties control the 2D scaling of a View around its pivot point.
● 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 located 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 and top values and translationX and translationY values.
● alpha: Represents the alpha transparency on the View. This value is 1 (opaque) by default, with a value of 0
representing full transparency (not visible).
(This is not the full list of properties that can be animated)
Move a TextView horizontallyObjectAnimator anim = ObjectAnimator.ofFloat(textView, "translationX", 0f, 500f);
anim.setDuration(1000);
anim.start();
//this will move a textview horizontally by 500 starting from 0.
Move a TextView along a Path
ValueAnimator pathAnimator = ObjectAnimator.ofFloat(textView, "x", "y", path);
//path can be any complex geometric shapes as mentioned earlier
(works on API 21+ only, for below api 21, use a value animator to
get animated fraction in onAnimationUpdate listener)