Custom view for android 1

 

Overview
When the UI components provided by the Android system are insufficient to meet our needs, we can inherit the View to design our own View. Then, select the method for rewriting. The method that can be rewritten is as follows:

1) constructor. View has three constructor:

Public View (Context context) This method needs to be rewritten when we create a view through code.

Public View (Context context, AttributeSet attrs) This method needs to be rewritten when we create a view through xml.

Public View (Context context, AttributeSet attrs, int defStyle) through the source code we can know that the public View (Context context, AttributeSet attrs) the constructor public View (Context context, AttributeSet attrs, int defStyle) of the three parameters is also called ). We generally do not need to re-write this constructor.

2) callback function

OnFinishInflate (): This method is called back when the application loads the component from the XML layout file and uses it to build the interface.

OnMeasure (int, int): used to check the size of a View and its sub-View.

OnLayout (boolean, int): callback is triggered when the View needs to assign its sub-component location and size.

OnSizeChanged (int, int): callback when the component size is changed

OnDraw (Canvas): called back when the component is to be drawn.

OnKeyDown (int, KeyEvent): callback when this View is pressed

OnKeyUp (int, KeyEvent): callback when this View is released

OnTrackballEvent (MotionEvent): When a trackball event occurs

OnTouchEvent (MotionEvent): When a touch event occurs

OnWindowFocusChanged (boolean): When the focus changes

OnAttachedToWindow (): When this component is added to a window

OnDetachedFromWindow (): When a window is separated

OnWindowVisibilityChanged (int): triggered when the visibility of the window containing this component changes

Procedure
1) inherit View (of course, you can also select some of its sub-classes based on your actual needs)

2) rewrite two constructors: As mentioned above, View has three constructors. We only need to rewrite the first two constructors.

Note: In fact, we do not need to re-write the two constructors. If we only add our custom views through code, we can only re-write the single-argument constructor. If we only add custom views to the Activity in XML Layout mode, we can write only the constructor of double parameters. To prevent errors, we recommend that you repeat the single and double parameters.

3) Select a part of the write-back callback function. You can select a number of write-back functions as needed. Generally, the onDraw (Canvas) method is used.

4) after completing the above steps, we will complete the custom View. We can add it to our Activity in two ways.

A. Using Code

B. XML

For details, see the following example code:

Instance
Simulate a small ball that follows the mobile phone.

Custom View class mmview1

1 package com. example. customview;
2
3 import android. content. Context;
4 import android. graphics. Canvas;
5 import android. graphics. Color;
6 import android. graphics. Paint;
7 import android. util. AttributeSet;
8 import android. view. View;
9
10 public class CustomView1 extends View {
11
12 public float currentX = 46;
13 public float currentY = 57;
14 Paint p;
15
16 private void init (){
17 p = new Paint ();
18 p. setColor (Color. GREEN );
19}
20
21 public CustomView1 (Context context ){
22 super (context );
23 System. out. println ("--------- 1 -----------");
24 init ();
25}
26
27 public CustomView1 (Context context, AttributeSet attrs ){
28 super (context, attrs );
29 System. out. println ("--------- 2 -----------");
30 init ();
31}
32
33 @ Override
34 protected void onDraw (Canvas canvas ){
35 super. onDraw (canvas );
36 canvas. drawCircle (currentX, currentY, 20, p );
37}
38
39} 1) Introduce CustomView through code

View Code
1 package com. example. customview;
2
3 import android. OS. Bundle;
4 import android. view. MotionEvent;
5 import android. view. View;
6 import android. view. View. OnTouchListener;
7 import android. widget. RelativeLayout;
8 import android. app. Activity;
9
10 public class CustomViewActivity extends Activity {
11
12 @ Override
13 protected void onCreate (Bundle savedInstanceState ){
14 super. onCreate (savedInstanceState );
15 setContentView (R. layout. activity_custom_view );
16 final CustomView1 cs = new CustomView1 (this );
17 RelativeLayout Rlayout = (RelativeLayout) findViewById (R. id. RLayout );
18 Rlayout. addView (cs );
19 cs. setOnTouchListener (new OnTouchListener (){
20
21 @ Override
22 public boolean onTouch (View v, MotionEvent event ){
23 cs. currentX = event. getX ();
24 cs. currentY = event. getY ();
25 cs. invalidate ();
26 return true;
27}
28 });
29}
30} Our xml layout file is as follows:

<RelativeLayout xmlns: android = "http://schemas.android.com/apk/res/android"
Xmlns: tools = "http://schemas.android.com/tools"
Android: id = "@ + id/RLayout"
Android: layout_width = "match_parent"
Android: layout_height = "match_parent"
Android: paddingBottom = "@ dimen/activity_vertical_margin"
Android: paddingLeft = "@ dimen/activity_horizontal_margin"
Android: paddingRight = "@ dimen/activity_horizontal_margin"
Android: paddingTop = "@ dimen/activity_vertical_margin"
Tools: context = ". CustomViewActivity">
<! --
<Com. example. customview. CustomView1
Android: id = "@ + id/cs"
Android: layout_width = "fill_parent"
Android: layout_height = "fill_parent"/>
-->
</RelativeLayout> 2) Introduce CustomView through XML

View Code
1 package com. example. customview;
2
3 import android. OS. Bundle;
4 import android. view. MotionEvent;
5 import android. view. View;
6 import android. view. View. OnTouchListener;
7 import android. app. Activity;
8
9 public class CustomViewActivity extends Activity {
10
11 @ Override
12 protected void onCreate (Bundle savedInstanceState ){
13 super. onCreate (savedInstanceState );
14 setContentView (R. layout. activity_custom_view );
15 final CustomView1 cs = (CustomView1) findViewById (R. id. cs );
16 cs. setOnTouchListener (new OnTouchListener (){
17
18 @ Override
19 public boolean onTouch (View v, MotionEvent event ){
20 cs. currentX = event. getX ();
21 cs. currentY = event. getY ();
22 cs. invalidate ();
23 return true;
24}
25 });
26}
27} Our xml layout file is as follows:

<RelativeLayout xmlns: android = "http://schemas.android.com/apk/res/android"
Xmlns: tools = "http://schemas.android.com/tools"
Android: id = "@ + id/RLayout"
Android: layout_width = "match_parent"
Android: layout_height = "match_parent"
Android: paddingBottom = "@ dimen/activity_vertical_margin"
Android: paddingLeft = "@ dimen/activity_horizontal_margin"
Android: paddingRight = "@ dimen/activity_horizontal_margin"
Android: paddingTop = "@ dimen/activity_vertical_margin"
Tools: context = ". CustomViewActivity">

<Com. example. customview. CustomView1
Android: id = "@ + id/cs"
Android: layout_width = "fill_parent"
Android: layout_height = "fill_parent"/>

</RelativeLayout> you can pay attention to the Logcat output and compare the calling of the constructor when the custom View mode is introduced.

PS: we know that the View subclass has many unique attributes, such as the text attribute and color attribute of TextView. So can we add some custom attributes to our custom View? The answer is certainly yes. Let's talk about it in the next lecture.