上一篇文章實現了一個簡單的音量增減控制元件，這篇文章在此基礎上面繼續實現一個簡單折線圖控制元件

一、首先看一下我們這次要實現的效果圖：

二、在attrs.xml中新增自定義屬性：

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <attr name="number_Y" format="integer"/>
    <attr name="number_X" format="integer"/>

    <declare-styleable name
 
="BrokenLine">
        <attr name="number_Y" />
        <attr name="number_X" />
    </declare-styleable>

</resources>

三、對應的佈局檔案：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
 

    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_horizontal"
    android:orientation="horizontal"
    android:padding="20dp"
    tools:context="com.shi.androidstudio.brokenline.MainActivity">
 



    <com.shi.androidstudio.brokenline.SimpleView_05
        android:id="@+id/simpleView_05"
        android:layout_width="300dp"
        android:layout_height="300dp"
        app:number_X="7"
        app:number_Y="10"/>
</LinearLayout>

四、SimpleView_04自定義控制元件程式碼：

/**
 * Created by SHI on 2017/2/27 14:29
 */
public class SimpleView_05 extends View {

    //X座標尺碼單位長度
    private int tick_X;
    //Y座標尺碼單位長度
    private int tick_Y;

    private int number_Y = 10;
    private int number_X = 10;


    private int start_X = 30;
    private int start_Y = 30;
    private int tickLength = 5;

    //分割線長度
    private int [] xArray = {1,2,3,4,5,6,7};
    private int [] yArray = {1,4,4,2,5,6,4};

    public SimpleView_05(Context context) {
        this(context, null);
    }

    public SimpleView_05(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public SimpleView_05(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        /**
         * 獲得我們所定義的自定義樣式屬性
         */
        TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.BrokenLine, defStyleAttr, 0);
        int length = a.getIndexCount();
        for (int i = 0; i < length; i++) {
            int attr = a.getIndex(i);
            switch (attr) {
                case R.styleable.BrokenLine_number_X:
                    number_X = a.getInt(attr,0);
                    Log.e("BrokenLine_number_X", ""+number_X);
                    break;

                case R.styleable.BrokenLine_number_Y:
                    number_Y = a.getInt(attr, 0);
                    Log.e("BrokenLine_number_Y", ""+number_Y);
                    break;
            }
        }
        a.recycle();
    }



    //重寫onDraw方法，繪製音量圖案
    @Override
    protected void onDraw(Canvas canvas) {

        Paint mPaint = new Paint();
        mPaint.setColor(Color.GREEN);
        canvas.drawRect(0,0,getMeasuredWidth(),getMeasuredHeight(),mPaint);
        //減少10是為了防止繪製超出範圍
        int width = getMeasuredWidth()-10;
        int height = getMeasuredHeight();
        Log.e("寬度", ""+width);
        tick_X = (width-start_X)/number_X;
        tick_Y = (height-start_Y)/number_Y;
        mPaint.setColor(Color.BLACK);
        //繪製座標系Y軸
        canvas.drawLine(start_X, 0, start_X, height-start_Y, mPaint);
        //繪製座標系X軸
        canvas.drawLine(start_X, height-start_Y, width, height-start_Y, mPaint);

        for (int i=1; i<=number_Y; i++){
            //繪製Y軸分割線
            canvas.drawLine(start_X, height-start_Y-tick_Y*i, start_X-tickLength, height-start_Y-tick_Y*i, mPaint);
            //繪製Y軸座標描述,減少10分之9是為了防止Y軸出界
            canvas.drawText(""+10*i, 0, height-start_Y*9/10-tick_Y*i, mPaint);
        }
        for (int i=1; i<=number_X; i++){
            //繪製X軸分割線
            canvas.drawLine(start_X+tick_X*i, height-start_Y, start_X+tick_X*i, height-start_Y+tickLength, mPaint);
            //繪製X軸座標描述
            canvas.drawText("Ps"+i, start_X/2+tick_X*i, height-start_Y/2, mPaint);
        }

        //繪製點集
        for (int i=0; i<xArray.length; i++){
            mPaint.setStrokeWidth(4);
            canvas.drawPoint(start_X+xArray[i]*tick_X, height-start_Y-yArray[i]*tick_Y, mPaint);
            if(i != 0){
                mPaint.setStrokeWidth(1);
                canvas.drawLine(start_X+xArray[i-1]*tick_X,height-start_Y-yArray[i-1]*tick_Y
                        ,start_X+xArray[i]*tick_X, height-start_Y-yArray[i]*tick_Y,mPaint);
            }
        }

    }


}

到這裡基本就實現了我們需要的自定義控制元件了。
附上demo下載