Android custom View ------ bar chart

Android custom View ------ bar chart

With regard to custom views, I believe most developers are already very familiar with them, and there are also many examples on the network. There are also an endless stream of custom views with various cool-hitting days. This article is just a beginner's learning tutorial and has reference value for beginners.

The topic is officially entered below.

This article uses the custom View method to implement the bar graphview of the bar statistics graph, and implements the basic function of the bar statistics graph, because it is designed to learn the custom View, so the scalability is poor, it can only be used as a reference for custom views.

On:

 

The View is displayed on the screen.

(1) Measure (measurement)

First, View needs to measure its own size, including length and width. When the member function measure of the View class decides to re-measure the width and height of the current View, it calls another member function onMeasure to truly measure the width and height. Therefore, most custom views need to overwrite the onMeasure method to measure the View size. The onMeasure method is as follows:

 

  @Override    public void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        super.onMeasure(widthMeasureSpec, heightMeasureSpec);    }

The widthMeasureSpec and heightMeasureSpec parameters are the recommended size of the parent view. The value of the measureSpec parameter is actually composed of two parts. The highest two bits indicate a measurement mode, while the lower 30 bits indicate a width value or a height value. There are three measurement modes, they are MeasureSpec. EXACTLY and MeasureSpec. UNSPECIFIED and MeasureSpec. AT_MOST. Here we will not talk about the differences between the three modes. In BarGraphView, the two values are used to determine the BarGraphView size.

 

(2) Layout)

This process is only useful in the View container (ViewGroup and its subclass). Because the position of a non-container View on the screen is determined by the parent control, the onLayout () method does not need to be overwritten.

(3) Draw (drawing)

Finally, the View is drawn. In this process, the painting object is used to draw the corresponding image on the Canvas, and the View is displayed on the screen. For a custom View, you usually need to override the onDraw () method to draw the View.

 

    @Override    public void onDraw(Canvas canvas) {    }

This method provides a canvas. You only need to create a paint brush to draw the canvas.

 

 

Now that we understand the above process, we will start to implement BarGraphView.

The main code of BarGraphView is the Draw process. The onDraw method is used to Draw the Statistical Chart to the screen.

After analysis, the bar chart is divided into the following parts:

1. Horizontal/vertical axis

2. Horizontal/vertical axis dial line

3. Horizontal/vertical axis scale value

4. Horizontal/vertical axis arrows

5. Title

6. Bar Chart

DrawLine (), drawText (), drawPath (), and drawRect () are used for different parts) respectively.

The following is the BarGraphView code. You can directly view the comments.

 

Package com. eleven. demo. widget; import android. content. context; import android. content. res. typedArray; import android. graphics. canvas; import android. graphics. color; import android. graphics. paint; import android. graphics. path; import android. util. attributeSet; import android. view. view; import com. eleven. demo. r;/*** Created by Eleven on 2015/5/3. */public class BarGraphView extends View {private final Stri Ng TAG = BarGraphView. class. getName (); // Paint brush private Paint mPaint; // title private String title; // title color private int titleColor; // title size private float titleSize; // maximum value of X axis private float maxAxisValueX = 900; // Number of X axis dial lines private int axisDivideSizeX = 9; // maximum value of Y axis private float maxAxisValueY = 700; // Y axis dial line quantity private int axisDivideSizeY = 7; // view width private int width; // view height private int height; // coordinate origin position pr Ivate final int originX = 100; private final int originY = 800; // The column chart data is private int columnInfo [] []; public BarGraphView (Context context, AttributeSet attrs) {super (context, attrs); // create the Paint brush mPaint = new Paint (); // obtain the configured attribute value TypedArray mArray = context. obtainStyledAttributes (attrs, R. styleable. barGraphView); title = mArray. getString (R. styleable. barGraphView_barGraph_title); titleColor = mArray. getCol Or (R. styleable. barGraphView_barGraph_titleColor, Color. BLACK); titleSize = mArray. getDimension (R. styleable. barGraphView_barGraph_titleSize, 36);}/*** set the maximum value of the X axis and the number of dial lines (including the 0 coordinate scale) ** @ param maxValue maximum X axis * @ param divideSize dial line quantity */public void setAxisX (float maxValue, int divideSize) {maxAxisValueX = maxValue; axisDivideSizeX = divideSize ;} /*** set the maximum value of the Y axis and the number of dial lines (including the 0-axis scale) ** @ param maxValue the maximum value of the Y axis Optional * @ param divideSize dial number */public void setAxisY (float maxValue, int divideSize) {maxAxisValueY = maxValue; axisDivideSizeY = divideSize ;} /*** set bar chart data ** @ param columnInfo */public void setColumnInfo (int [] [] columnInfo) {this. columnInfo = columnInfo;} @ Override public void onMeasure (int widthMeasureSpec, int heightMeasureSpec) {super. onMeasure (widthMeasureSpec, heightMeasureSpec); wid Th = MeasureSpec. getSize (widthMeasureSpec)-200; height = MeasureSpec. getSize (heightMeasureSpec)-800 ;}@ Override public void onDraw (Canvas canvas) {drawAxisX (canvas, mPaint); drawAxisY (canvas, mPaint); trim (canvas, mPaint ); drawAxisScaleMarkY (canvas, mPaint); drawAxisArrowsX (canvas, mPaint); drawAxisArrowsY (canvas, mPaint); trim (canvas, mPaint); drawAxisScaleM ArkValueY (canvas, mPaint); drawColumn (canvas, mPaint); drawTitle (canvas, mPaint);}/*** draw the horizontal axis (X axis) ** @ param canvas * @ param paint */private void drawAxisX (Canvas canvas, Paint paint) {paint. setColor (Color. BLACK); // set the paint width to paint. setStrokeWidth (5); // you can specify the paint brush's anti-sawtooth paint. setAntiAlias (true); // draw a horizontal axis (X) canvas. drawLine (originX, originY, originX + width, originY, paint);}/*** plot the ordinate axis (Y axis) ** @ param canv As * @ param paint */private void drawAxisY (Canvas canvas, Paint paint) {// draw a vertical axis (Y) canvas. drawLine (originX, originY, originX INX, originY-height, painting); // parameter description: x, y on the left of the start point, x, y on the end coordinate, y, paint Brush}/*** draw the abscissa axis dial line (X axis) ** @ param canvas * @ param Paint */private void drawAxisScaleMarkX (Canvas canvas, paint) {float cellWidth = width/axisDivideSizeX; for (int I = 0; I <axisDivideSizeX-1; I ++) {canvas. draw Line (cellWidth * (I + 1) + originX, originY, cellWidth * (I + 1) + originX, originY-10, paint );}} /*** draw the ordinate axis dial line (Y axis) ** @ param canvas * @ param paint */private void drawAxisScaleMarkY (Canvas canvas, Paint paint) {float cellHeight = height/axisDivideSizeY; for (int I = 0; I <axisDivideSizeY-1; I ++) {canvas. drawLine (originX, (originY-cellHeight * (I + 1), originX + 10, (originY-cel LHeight * (I + 1), paint);}/*** plot the scale value of the horizontal axis (X axis) ** @ param canvas * @ param paint */private void drawAxisScaleMarkValueX (Canvas canvas, Paint paint) {// you can specify the paint attribute used to draw text from a paint brush. setColor (Color. GRAY); paint. setTextSize (28); paint. setFakeBoldText (true); float cellWidth = width/axisDivideSizeX; float cellValue = maxAxisValueX/axisDivideSizeX; for (int I = 1; I <axisDivideSizeX; I ++) {canvas. drawTe Xt (String. valueOf (cellValue * I), cellWidth * I + originX-35, originY + 30, paint) ;}/ *** plot the scale value of the ordinate axis (Y axis) ** @ param canvas * @ param paint */private void drawAxisScaleMarkValueY (Canvas canvas, Paint paint) {float cellHeight = height/axisDivideSizeY; float cellValue = maxAxisValueY/axisDivideSizeY; for (int I = 1; I <axisDivideSizeY; I ++) {canvas. drawText (String. valueOf (cellValue * I ), OriginX-80, originY-cellHeight * I + 10, paint);}/*** draw the X axis arrow (X axis) ** @ param canvas * @ param paint */private void drawAxisArrowsX (Canvas canvas, Paint paint) {// draw a triangle (X axis arrow) Path mPathX = new Path (); mPathX. moveTo (originX + width + 30, originY); // start point mPathX. lineTo (originX + width, originY-10); // The next mPathX. lineTo (originX + width, originY + 10); // The next mPathX. close (); canvas. drawPath (mPath X, paint);}/*** draw the vertical axis arrow (Y axis) ** @ param canvas * @ param paint */private void drawAxisArrowsY (Canvas canvas, Paint paint) {// draw the triangle (Y-axis arrow) Path mPathX = new Path (); mPathX. moveTo (originX, originY-height-30); // start point mPathX. lineTo (originX-10, originY-height); // The next mPathX. lineTo (originX + 10, originY-height); // The next mPathX. close (); canvas. drawPath (mPathX, paint);}/*** draw a bar chart ** @ param canva S * @ param paint */private void drawColumn (Canvas canvas, Paint paint) {if (columnInfo = null) return; float cellWidth = width/axisDivideSizeX; for (int I = 0; I <columnInfo. length; I ++) {paint. setColor (columnInfo [I] [1]); float leftTopY = originY-height * columnInfo [I] [0]/maxAxisValueY; canvas. drawRect (originX + cellWidth * (I + 1), leftTopY, originX + cellWidth * (I + 2), originY, mPain T); // the upper left corner of x, the lower right corner of y x, y, paint Brush}/*** draw title ** @ param canvas * @ param Paint */private void drawTitle (Canvas canvas, paint) {// draw title if (title! = Null) {// set the attribute mPaint of the paint brush text. setColor (titleColor); mPaint. setTextSize (titleSize); mPaint. setFakeBoldText (true); canvas. drawText (title, 300, originY + 150, paint );}}}

 

 

 

MainActivity layout file:

 

Use in MainActivity

 

 

public class MainActivity extends ActionBarActivity {    private BarGraphView mBarGraphView;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        initView();    }    private void initView(){        mBarGraphView = (BarGraphView)findViewById(R.id.custom_view);        mBarGraphView.setAxisX(900, 9);        mBarGraphView.setAxisY(700,7);        int columnInfo[][] = new int[][]{{600, Color.BLUE},{500, Color.GREEN},{400, Color.RED},{300, Color.BLUE},                {500, Color.YELLOW},{300, Color.LTGRAY},{200, Color.BLUE}};        mBarGraphView.setColumnInfo(columnInfo);    }