Android coders probably know that the Android platform provides quite a variety of View Classes to “fit” with different types of projects. However, there will be some specific projects that require different enhancements or transformations of the view , this is why we should know custom views to increase flexibility and reuse views.
In this part 1 we will go through the “view lifecycle” and custom some basic view attributes, there is no draw canvas and onMeasure() yet. I will write about it in part 2.
1. View lifecycle
Activity , fragment , service , … are all components that have their own life cycle, so does the View. The life cycle of a view is described as follows:
Constructors:
This passage must be quite confusing for you to see 4 constructor overloads being called, so what are they for?
1 2 | constructor(context: Context): super(context) |
This constructor is called when the official view is run into the context where the view is run, can access the theme, resource through this context.
1 2 | constructor(context: Context, attrs: AttributeSet): super(context , attrs) |
This guy is called when we inflate a view from XML , providing default properties of the given AttributeSet and theme is also from the default theme of the context.
1 2 | constructor(context: Context, attrs: AttributeSet, defStyle: Int): super(context, attrs, defStyle) |
Called when the view is inflated from XML , with a style taken from the theme attribute.
1 2 | constructor(context: Context, attrs: AttributeSet, defStyle: Int, defStyleRes: Int): super(context, attrs, defStyle, defStyleRes) |
Called when the view is inflated from XML , with a style taken from the theme attribute or style resource.
OnAttachToWindow():
This is the callback that is called when the view is attached to a window, now the view is officially active and draws on the surface of that window, the attributes and listeners are set.
OnDetachToWindow():
Now that the view is officially removed from the window surface, the attributes or resources are released and the inactive view is called when we remove the view from the ViewGroup or destroy its parent context (fragment , activity,…)
onMeasure():
This callback is called to determine and calculate the size of the views depending on the size provided by its parent, viewgroup. You will be provided with 2 parameters “widthMeasureSpec” and “heightMeasureSpec” , these 2 parameters provided by the parent view are the size at which your view is drawn.
onLayout():
This callback is called when the sizing is done and the view is positioned on the screen.
onDraw():
After calculating and shaping the position, the view is drawn on the layout to which it is specified. Object Canvas was born to do this.
Note: Since onDraw() is called multiple time when the view has any changes on the screen, be careful with instantiating multiple objects here.
invalidate():
Calling this method invalidates the entire view, when the view is being successfully rendered, onDraw() will be called at some point in the future.
Note: Instead of calling onDraw() directly, we will call invalidate() , to optimize performance, we should limit this method call as much as possible.
requestLayout():
This method is called when there is any change in layout view bound , it will predetermine layout phase (measure -> layout -> draw) .
Note: We should call this method on UI thread, if it’s called on non-UI thread, use Handler.
2. Define custom Attributes.
Custom views can be configured via an XML resource file and via the <declare-styleable tag. For example, you need to configure shapeColor and isDisplayShapeName , we will declare as follows:
1 2 3 4 5 6 7 | <resources> <declare-styleable name="ShapeSelectorView"> <attr name="shapeColor" format="color" /> <attr name="displayShapeName" format="boolean" /> </declare-styleable> </resources> |
Once you have defined attributes in the resource , you can now use them in the XML layout:
1 2 3 4 5 6 7 8 9 10 | <com.codepath.example.customviewdemo.ShapeSelectorView app:shapeColor="#7f0000" app:displayShapeName="true" android:id="@+id/shapeSelector" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_above="@+id/btnSelect" android:layout_alignParentLeft="true" android:layout_below="@+id/tvPrompt" /> |
3. Apply custom attributes.
Once we have finished customizing the components (displayShapeName, shapeColor) , we need to extract these components in the CustomView file, define them in the constructor with the parameter passed as AttributeSet (as I said above).
Along with get, set methods of declared properties:
1 2 3 4 5 6 7 8 9 10 11 12 | public void setDisplayingShapeName(boolean state) { this.displayShapeName = state; invalidate(); requestLayout(); } public void setShapeColor(int color) { this.shapeColor = color; invalidate(); requestLayout(); } |
With these methods, we can set the above properties outside the code depending on the purpose of use.
4. Summary.
Above is an article about ViewLifeCycle and the basic custom AttributeSet. Part 2 we will talk about draw view using Canvas and how to build a crop image library using Canvas.
Reference articles:
https://guides.codepath.com/android/defining-custom-views#apply-custom-attributes
https://www.oodlestechnologies.com/dev-blog/understanding-custom-view-android/