android自定義控件之中間是斜線的占比條

最近一直在看各路大神的自定義控件，自己受益非淺，可是一直也沒有自己動手寫一個，這幾天有一個項目中要求有如下圖這樣一個功能：

兩個動態值，根據其占比，在這個橫柱上顯示出來，中間的隔線要有一定的斜角。

在網上找了半天，沒有發現什麼現成的。突然想到，學了這麼長時間自定義控件了，感覺這個也不是很難，就自己做一個試試呗。先理清一下思路。

首先，這個不能采用畫矩形圖，因為中間無法成斜線，可以采用Path的方法。用路徑 的方法畫來。裡面的百分比，直接進行百分比計算就完了，沒什麼特別的地方，顯示百分比會有兩種情況，一種是圖中的樣子，兩部分全有值，百分比顯示在左右兩邊， 另一種是其中一個值為0，則另一個會為100%，這樣讓百分比顯示在中間。這個加一個判斷也就OK了。這樣簡單分析一下，感覺很簡單沒什麼東西了。下面給出代碼:

attrs.xml這裡定義一些屬性

<?xml version="1.0" encoding="utf-8"?>
<resources>
    //自定義屬性名,定義公共屬性
    <attr name="iNum" format="float" />
    <attr name="iColor" format="color" />
    <attr name="oNum" format="float" />
    <attr name="oColor" format="color" />
    <attr name="Inclination" format="integer"/>
    <attr name="iTextColor" format="color" />
    <attr name="TextSize" format="dimension" />
    <attr name="oTextColor" format="color" />
    //自定義控件的主題樣式
    <declare-styleable name="MyPre">
        <attr name="iNum" />
        <attr name="iColor" />
        <attr name="oNum" />
        <attr name="oColor" />
        <attr name="Inclination" />
        <attr name="iTextColor" />
        <attr name="TextSize" />
        <attr name="oTextColor" />
    </declare-styleable>
</resources>

package com.example.cg.custompre.custom;

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.graphics.Rect;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.View;

import com.example.cg.custompre.R;

import java.text.DecimalFormat;

/**
 * 自定義百分比左右進度條，根據兩個值的百分比不同，在一個進度條中顯示出來，中間的隔線為斜線
 * Created by cg on 2016/7/28 0028.
 */
public class mPre extends View {

    private float iNum = 50;                     //進(左)的數量
    private int iColor = Color.RED;              //進的顏色
    private float oNum = 50;                     //出(右)的數量
    private int oColor = Color.GREEN;            //出的顏色
    private int mInclination = 40;               //兩柱中間的傾斜度
    private int iTextColor = Color.WHITE;        //進的百分比數字顏色
    private int oTextColor = Color.WHITE;        //出的百分比數字顏色
    private int TextSize = 30;                   //百分比字體大小


    private float iPre;
    private float oPre;

    private String txtiPre;                      //顯示進的百分比
    private String txtoPre;                      //顯示出的百分比

    private Paint mPaint;
    private Rect mBound;                        //包含文字的框

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

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

    public mPre(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        TypedArray arry = context.getTheme().obtainStyledAttributes(attrs, R.styleable.MyPre,defStyleAttr,0);
        int n = arry.getIndexCount();

        for(int i=0;i

調用的時候：
 
布局文件activity_main.xml
 




    


MainActivity.java
 
 
package com.example.cg.custompre;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

import com.example.cg.custompre.custom.mPre;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private Button btn_Add;
    private mPre myPre;

    private int iNum = 50;
    private int oNum = 50;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);



        initControls();
    }

    /**
     * 初始化控件
     */
    private void initControls() {
        myPre = (mPre)findViewById(R.id.myPre);

        btn_Add = (Button)findViewById(R.id.btn_Add);
        btn_Add.setOnClickListener(this);
    }

    @Override
    public void onClick(View view) {
        switch (view.getId())
        {
            case R.id.btn_Add:
                iNum = iNum + 5;
                myPre.setINum(iNum);
                //myPre.setONum(0);
                break;
        }
    }
}