Android custom table controls meet people's visual needs

The Android platform has provided many standard components, such as TextView, EditView, Button, ImageView, and Menu, as well as many layout controls. common components include: absoluteLayout, LinerLayout, RelativeLayout, and TableLayout. However, with people's visual requirements, basic components cannot meet people's requirements for new and different requirements, so we often customize components to achieve a more beautiful UI interface.

There are two ways to implement custom controls. One is to inherit the View class and override the important method, and the other is to inherit the ViewGroup class. By Rewriting some methods in the parent class, to re-draw the component. Recently, I have done a exercises on customizing table controls, from which I can sum up some experience. In this exercise, I inherited the ViewGroup class and re-drew the container component used to render the table style. First, let's take a look at the parent class ViewGroup. This class has three constructor Methods: ViewGroup (Context context), ViewGroup (Context context, AttributeSet attrs), ViewGroup (Context context, AttributeSet attrs, int defStyle ), the custom class that inherits ViewGroup needs to implement at least one constructor. There are several methods in ViewGroup that are very important. These methods help us better achieve the layout and drawing of our own components.

1. onLayout Method

This method is used to place child controls in containers. If you do not override this method, the Child control cannot be displayed in the layout control. This method has five parameters, this method is used to set the position of the top, bottom, left, and right sides of the sub-control, and a flag. This method must be implemented by sub-classes because it is an abstract method.

2. addView Method

This method is used to add child controls to container components.

3. dispatchDraw Method

Using this method, we can obtain the canvas object, which allows us to draw any image we want on the component. In this table control, we can display the outer border and line of the table on the canvas.

4. getChildCount and getChildAt Methods

These two methods are used to obtain the number and position of the neutron control of the container control, so that we can easily typeset and layout the child control.

5. onMeasure Method

This method is used to measure the size of a sub-control. It is called before the onLayout method, and the size of the sub-control is measured. Then, the layout position of the sub-control in the container component can be drawn.

The following code example is provided for reference only.

The first is the table control class:

Copy codeThe Code is as follows: public class TableView extends ViewGroup {
Private static final int STARTX = 0; // start X coordinate
Private static final int STARTY = 0; // start Y coordinate
Private static final int BORDER = 2; // table BORDER Width
Private int mRow; // number of rows
Private int mCol; // Number of Columns
Public TableView (Context context, AttributeSet attrs ){
Super (context, attrs );
This. mRow = 3; // The default number of rows is 3.
This. mCol = 3; // The default number of columns is 3.
// Add a child Control
This. addOtherView (context );
}
Public TableView (Context context, int row, int col ){
Super (context );
If (row> 20 | col> 20 ){
This. mRow = 20; // if the number of rows is greater than 20, set the number of rows to 20.
This. mCol = 20; // if the number of columns is greater than 20, set the number of columns to 20.
} Else if (row = 0 | col = 0 ){
This. mRow = 3;
This. mCol = 3;
}
Else {
This. mRow = row;
This. mCol = col;
}
// Add a child Control
This. addOtherView (context );
}
Public void addOtherView (Context context ){
Int value = 1;
For (int I = 1; I <= mRow; I ++ ){
For (int j = 1; j <= mCol; j ++ ){
TextView view = new TextView (context );
View. setText (String. valueOf (value ++ ));
View. setTextColor (Color. rgb (79,129,189 ));
View. setGravity (Gravity. CENTER );
If (I % 2 = 0 ){
View. setBackgroundColor (Color. rgb (219,238,243 ));
} Else {
View. setBackgroundColor (Color. rgb (235,241,221 ));
}
This. addView (view );
}
}
}
@ Override
Protected void dispatchDraw (Canvas canvas ){
Paint paint = new Paint ();
Paint. setStrokeWidth (BORDER );
Paint. setColor (Color. rgb (79,129,189 ));
Paint. setStyle (Style. STROKE );
// Draw an external border
Canvas. drawRect (STARTX, STARTY, getWidth ()-STARTX, getHeight ()-STARTY, paint );
// Draw a column split line
For (int I = 1; I <mCol; I ++ ){
Canvas. drawLine (getWidth ()/mCol) * I, STARTY, (getWidth ()/mCol) * I, getHeight ()-STARTY, paint );
}
// Draw line
For (int j = 1; j <mRow; j ++ ){
Canvas. drawLine (STARTX, (getHeight ()/mRow) * j, getWidth ()-STARTX, (getHeight ()/mRow) * j, paint );
}
Super. dispatchDraw (canvas );
}
@ Override
Protected void onLayout (boolean changed, int l, int t, int r, int B ){
Int x = STARTX + BORDER;
Int y = STARTY + BORDER;
Int I = 0;
Int count = getChildCount ();
For (int j = 0; j <count; j ++ ){
View child = getChildAt (j );
Child. layout (x, y, x + getWidth ()/mCol-BORDER * 2, y + getHeight ()/mRow-BORDER * 2 );
If (I> = (mCol-1 )){
I = 0;
X = STARTX + BORDER;
Y + = getHeight ()/mRow;
} Else {
I ++;
X + = getWidth ()/mCol;
}
}
}
Public void setRow (int row ){
This. mRow = row;
}
Public void setCol (int col ){
This. mCol = col;
}
}

Then we use our controls in the Activity:Copy codeThe Code is as follows: public class MainActivity extends Activity implements OnClickListener {
Private Button btn;
Private EditText row;
Private EditText col;
@ Override
Protected void onCreate (Bundle savedInstanceState ){
Super. onCreate (savedInstanceState );
SetContentView (R. layout. main );
Btn = (Button) findViewById (R. id. button1 );
Row = (EditText) findViewById (R. id. editRow );
Col = (EditText) findViewById (R. id. editCol );
Row. setError ("enter an integer smaller than 20 ");
Col. setError ("enter an integer smaller than 20 ");
Btn. setOnClickListener (this );
}
@ Override
Public boolean onCreateOptionsMenu (Menu menu ){
// Inflate the menu; this adds items to the action bar if it is present.
GetMenuInflater (). inflate (R. menu. main, menu );
Return true;
}
@ Override
Public void onClick (View v ){
Intent intent = new Intent ();
Bundle bun = new Bundle ();
If ("". equals (row. getText (). toString ())){
Toast. makeText (this, "the number of rows cannot be blank", Toast. LENGTH_SHORT). show ();
Return;
} Else if ("". equals (col. getText (). toString ())){
Toast. makeText (this, "the number of Columns cannot be blank", Toast. LENGTH_SHORT). show ();
Return;
} Else {
Int rowNum = Integer. parseInt (row. getText (). toString ());
Int colNum = Integer. parseInt (col. getText (). toString ());
Bun. putInt ("row", rowNum );
Bun. putInt ("col", colNum );
Intent. setClass (MainActivity. this, TableActivity. class );
Intent. putExtras (bun );
StartActivity (intent );
}
}
}

Copy codeThe Code is as follows: public class TableActivity extends Activity {
@ Override
Protected void onCreate (Bundle savedInstanceState ){
Super. onCreate (savedInstanceState );
Intent intent = this. getIntent ();
Bundle bun = intent. getExtras ();
Int row = bun. getInt ("row ");
Int col = bun. getInt ("col ");
TableView table = new TableView (this, row, col );
SetContentView (table );
}
}

As follows: