Android 自定義View -- 簡約的折線圖

jopen 8年前發布 | 167K 次閱讀 Android開發移動開發

昨天分手了，不開心，來練練自定義view麻痹自己，畢竟菜鳥只能靠不斷練習提高。#程序員不應該有女朋友#

我們要實現的是一種只有來看趨勢，不需要看具體數值，比較簡約的折線圖。比如下圖這樣的：

這個時候，一些比較優秀的第三方圖表庫如：MPChart 就顯得比較臃腫了。所以我們需要自定義一個折線圖。

老規矩，先來看最終的實現效果：

其實這種做的很簡約，大概分三個步驟：

一、畫坐標軸

二、畫點

三、畫線

那么我們開始吧Let's go (Let it go)。

設計一下大概需要的東西。首先把X軸和Y軸的數據存放在兩個String[]里。

具體的點的位置用一個Map<Integer,Integer>來存放.

步驟：

一、新建一個類，取名為SimpleLineChart繼承View 重寫他的構造方法。這里為了簡便，就不添加自定義屬性了attr.xml。

<span style="font-size:18px;">   </span><span style="font-size:12px;"> public SimpleLineChart(Context context) {
        this(context, null);
    }

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

    public SimpleLineChart(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }</span>

二、測量大小。（繼續偷懶，只支持EXACTLY，AT_MOST直接丟異常）

@Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);

        if (widthMode == MeasureSpec.EXACTLY) {
            mWidth = widthSize;
        }else if(widthMode == MeasureSpec.AT_MOST){
            throw new IllegalArgumentException("width must be EXACTLY,you should set like android:width=\"200dp\"");
        }

        if (heightMode == MeasureSpec.EXACTLY) {
            mHeight = heightSize;
        }else if(widthMeasureSpec == MeasureSpec.AT_MOST){

            throw new IllegalArgumentException("height must be EXACTLY,you should set like android:height=\"200dp\"");
        }

        setMeasuredDimension(mWidth, mHeight);
    }

三、重點來了，開始draw。首先處理幾種異常情況。當X軸或者Y軸為沒有文字（也就是沒有刻度的時候），拋出異常。

if(mXAxis.length==0||mYAxis.length==0){
            throw new IllegalArgumentException("X or Y items is null");
        }

當沒有任何點的數據的時候，顯示字符串提醒用戶沒有數據（實際上是往中心drawText）。

 //畫坐標線的軸
        Paint axisPaint = new Paint();
        axisPaint.setTextSize(mYAxisFontSize);
        axisPaint.setColor(Color.parseColor("#3F51B5"));

if (mPointMap == null || mPointMap.size() == 0) {
            int textLength = (int) axisPaint.measureText(mNoDataMsg);
            canvas.drawText(mNoDataMsg, mWidth/2 - textLength/2, mHeight/2, axisPaint);
        }

異常情況處理完了，開始上面三個步驟挨個畫，首先來畫個Y軸，計算每個刻度的間隔。他的值應該是mWidth / Y軸文字個數，然后用循環把每個刻度都畫出來。再申請一個數組yPoints，存放每個Y刻度的具體坐標。

//畫 Y 軸


            //存放每個Y軸的坐標
            int[] yPoints = new int[mYAxis.length];


            //計算Y軸 每個刻度的間距
            int yInterval = (int) ((mHeight - mYAxisFontSize - 2) / (mYAxis.length));

            //測量Y軸文字的高度 用來畫第一個數
            Paint.FontMetrics fm = axisPaint.getFontMetrics();
            int yItemHeight = (int) Math.ceil(fm.descent - fm.ascent);

            Log.e("wing", mHeight + "");
            for (int i = 0; i < mYAxis.length; i++) {
                canvas.drawText(mYAxis[i], 0, mYAxisFontSize + i * yInterval, axisPaint);
                yPoints[i] = (int) (mYAxisFontSize + i * yInterval);


            }

我們運行一下，看到了如下效果：

需要注意的是，這里的坐標需要微調，大家多試一下。同理開始畫X軸：

//畫 X 軸

            //x軸的刻度集合
            int[] xPoints = new int[mXAxis.length];

            Log.e("wing", xPoints.length + "");
            //計算Y軸開始的原點坐標
            int xItemX = (int) axisPaint.measureText(mYAxis[1]);

            //X軸偏移量
            int xOffset = 50;
            //計算x軸 刻度間距
            int xInterval = (int) ((mWidth - xOffset) / (mXAxis.length));
            //獲取X軸刻度Y坐標
            int xItemY = (int) (mYAxisFontSize + mYAxis.length * yInterval);

            for (int i = 0; i < mXAxis.length; i++) {
                canvas.drawText(mXAxis[i], i * xInterval + xItemX + xOffset, xItemY, axisPaint);
                xPoints[i] = (int) (i * xInterval + xItemX + axisPaint.measureText(mXAxis[i]) / 2 + xOffset + 10);
//            Log.e("wing", xPoints[i] + "");
            }

注意這里X軸的y坐標就是畫Y軸時候的最下面的文字（最后一個）的坐標，存成了xItemY。

之后我們來畫點，這里我采用的方法是畫圓。直接drawCircle。從map中取出所有點的對應i,j然后再從兩個數組 xPoints[] yPoints[]取出真實的X,Y坐標，最后畫出來

//畫點
            Paint pointPaint = new Paint();

            pointPaint.setColor(mLineColor);

            Paint linePaint = new Paint();

            linePaint.setColor(mLineColor);
            linePaint.setAntiAlias(true);
            //設置線條寬度
            linePaint.setStrokeWidth(mStrokeWidth);
            pointPaint.setStyle(Paint.Style.FILL);


            for (int i = 0; i < mXAxis.length; i++) {
                if (mPointMap.get(i) == null) {
                    throw new IllegalArgumentException("PointMap has incomplete data!");
                }

                //畫點
                canvas.drawCircle(xPoints[i], yPoints[mPointMap.get(i)], mPointRadius, pointPaint);
                if (i > 0) {//畫線
                    canvas.drawLine(xPoints[i - 1], yPoints[mPointMap.get(i - 1)], xPoints[i], yPoints[mPointMap.get(i)], linePaint);
                }
            }

上面畫完點之后開始畫線drawLine，參數是前一個點的坐標，和后一個點的坐標。挨個畫出來。

這時候我們的最復雜的繪制就完成了。接下來來加入一點功能：參數的設置。

/**
     * 設置map數據
     * @param data
     */
    public void setData(HashMap<Integer,Integer> data){
        mPointMap = data;
        invalidate();
    }

    /**
     * 設置Y軸文字
     * @param yItem
     */
    public void setYItem(String[] yItem){
        mYAxis = yItem;
    }

    /**
     * 設置X軸文字
     * @param xItem
     */
    public void setXItem(String[] xItem){
        mXAxis = xItem;
    }

    public void setLineColor(int color){
        mLineColor = color;
        invalidate();
    }

以上代碼很簡單我就不多說了。整個View完工，接下來介紹如何使用。

使用：

和普通的View一樣，我們直接在XML布局文件中加入SimpleLineChart，注意不要忘記包名。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context="com.wingsofts.simplelinechart.MainActivity">

<com.wingsofts.simplelinechart.SimpleLineChart
    android:id="@+id/simpleLineChart"
    android:layout_width="400dp"
    android:layout_height="200dp" />
</RelativeLayout>

然后在Activity中findviewbyid，給他設置X軸的文字 Y軸的文字還有數據源

public class MainActivity extends AppCompatActivity {
    private SimpleLineChart mSimpleLineChart;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mSimpleLineChart = (SimpleLineChart) findViewById(R.id.simpleLineChart);
        String[] xItem = {"1","2","3","4","5","6","7"};
        String[] yItem = {"10k","20k","30k","40k","50k"};
        if(mSimpleLineChart == null)
            Log.e("wing","null!!!!");
        mSimpleLineChart.setXItem(xItem);
        mSimpleLineChart.setYItem(yItem);
        HashMap<Integer,Integer> pointMap = new HashMap();
        for(int i = 0;i<xItem.length;i++){
            pointMap.put(i, (int) (Math.random()*5));
        }
        mSimpleLineChart.setData(pointMap);
    }
}

簡單的幾步，就可以得到預覽圖的效果了!是不是很好玩！覺得好的話評論一下，star一下。祭奠我死去的愛情。

項目下載地址（求關注求星星）：點擊打開鏈接

下一篇來一個比較炫比較復雜的view 自定義儀表盤：時尚自定義儀表盤

來自： http://blog.csdn.net/wingichoy/article/details/50434634

本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1452576400651.html

Android開發移動開發

Android 自定義View -- 簡約的折線圖

相關經驗

相關資訊

相關文檔

目錄