Home>

Foreword:

In daily android development, I often deal with controls.Sometimes the controls provided by android may not meet the needs of the business.At this time, we need to implement some custom controls.Let's first get a rough idea of ​​the requirements and implementation of custom controls today.

Custom control requirements:

1. Should comply with the android standard specifications (naming, configurable, event handling, etc.).

2. Configure the properties of the control in the xml layout.

3. There should be appropriate feedback on interactions,Like pressing,Click and wait.

4. has compatibility, There are many android versions,Should have broad applicability.

Custom control learning steps:

1.View works

2. Writing view class

3. Add attributes to the view class

4. Draw the screen

5. Respond to user messages

6. Custom callback function

Two ways to customize the control:

Viewgroup inherited

For example:viewgroup, linearlayout, framelayout, relativelayout, etc.

2. Inherit view

For example:view, textview, imageview, button, etc.

Basic drawing principle of custom control:

The drawing of the view is basically completed by three functions:measure (), layout (), and draw ().

1.) The measure-measure process calculates the view size,There are three main methods related to the view measure process:

public final void measure (int widthmeasurespec, int heightmeasurespec)
protected final void setmeasureddimension (int measuredwidth, int measuredheight)
protected void onmeasure (int widthmeasurespec, int heightmeasurespec)

measure calls onmeasure, onmeasure measures the width and height and then calls setmeasuredimension to save the measurement result,measure, setmeasuredimension is final, subclasses of view do not need to be overridden,onmeasure is overridden in a subclass of view.

About measurespec:

(1) upspecified:the parent container has no restrictions on child containers,The child container is as big as it wants to be.

(2) exactly the parent container has set the size for the child container,Child containers should obey these boundaries,No matter how much space the child container wants.

(3) The at_most child container can be any size within the declared size.

2.) The layout process is used to set the position of the view on the screen,There are three main methods related to the view layout process:

public void layout (int l, int t, int r, int b)
protected boolean setframe (int left, int top, int right, int bottom)
protected void onlayout (boolean changed, int left, int top, int right, int bottom)

Layout by calling setframe (l, t, r, b), l, t, r, b is the specific position of the child view in the parent view,onlayout is generally only used in custom viewgroups

3.) The draw-draw process is mainly used to use the parameters obtained in the first two steps,Display the view on the screen,This completes the entire drawing of the view.

public void draw (canvas canvas)
protected void ondraw (canvas canvas)

View drawing by calling the draw function,The ondraw function is an empty function in the view class.The final drawing needs need to be implemented in a custom ondraw function,For example, imageview finishes drawing the picture.If you customize viewgroup this function does not need to be overloaded.

Custom control example:

Here we introduce the way of inheriting view as an example.In fact, the final inheritance of viewgroup is also view. Here simulates a demand scenario,Need a circle to display the percentage.

public class percentview extends view {
private final static string tag=percentview.class.getsimplename ();
private paint mpaint;
public percentview (context context) {
super (context);
}
public percentview (context context, attributeset attrs) {
super (context, attrs);
}
public percentview (context context, attributeset attrs, int defstyleattr) {
super (context, attrs, defstyleattr);
}
@override
protected void onmeasure (int widthmeasurespec, int heightmeasurespec) {
super.onmeasure (widthmeasurespec, heightmeasurespec);
int widthmode=measurespec.getmode (widthmeasurespec);
int widthsize=measurespec.getsize (widthmeasurespec);
int heightmode=measurespec.getmode (heightmeasurespec);
int heightsize=measurespec.getsize (heightmeasurespec);
log.e (tag, "onmeasure--widthmode->" + widthmode);
switch (widthmode) {
case measurespec.exactly:
break;
case measurespec.at_most:
break;
case measurespec.unspecified:
break;
}
log.e (tag, "onmeasure--widthsize->" + widthsize);
log.e (tag, "onmeasure--heightmode->" + heightmode);
log.e (tag, "onmeasure--heightsize->" + heightsize);
}
@override
protected void onlayout (boolean changed, int left, int top, int right, int bottom) {
super.onlayout (changed, left, top, right, bottom);
log.e (tag, "onlayout");
}
@override
protected void ondraw (canvas canvas) {
super.ondraw (canvas);
mpaint=new paint ();
mpaint.setantialias (true);
mpaint.setcolor (color.gray);
//fill fill, stroke stroke, fill_and_stroke fill and stroke
mpaint.setstyle (paint.style.fill_and_stroke);
int with=getwidth ();
int height=getheight ();
log.e (tag, "ondraw ---->" + with + "*" + height);
float radius=with/4;
canvas.drawcircle (with/2, with/2, radius, mpaint);
mpaint.setcolor (color.blue);
rectf oval=new rectf (with/2-radius, with/2-radius, with/2
+ radius, with/2 + radius);//used to define the shape and size of the arc
canvas.drawarc (oval, 270, 120, true, mpaint);//Draw arcs according to progress
}
}

How to use in layout

<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.whoislcj.views.percentview
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp" />
</linearlayout>

display effect:

If the layout file is changed to

<?xml version="1.0" encoding="utf-8"?>
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.whoislcj.views.percentview
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_margin="10dp" />
</linearlayout>

The display effect becomes

to sum up:

  • Previous Example of angularjs paging code
  • Next Example code of popup closeable mask prompt box based on jQuery