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>

     mPre.java

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<n;i++)
        {
            int attr = arry.getIndex(i);
            switch (attr)
            {
                case R.styleable.MyPre_iNum:
                    iNum = arry.getFloat(attr, 50);
                    break;
                case R.styleable.MyPre_iColor:
                    iColor = arry.getColor(attr, Color.RED);
                    break;
                case R.styleable.MyPre_oNum:
                    oNum = arry.getFloat(attr, 50);
                    break;
                case R.styleable.MyPre_oColor:
                    oColor = arry.getColor(attr,Color.GREEN);
                    break;
                case R.styleable.MyPre_Inclination:
                    mInclination = arry.getInt(attr,40);
                    break;
                case R.styleable.MyPre_iTextColor:
                    iTextColor = arry.getColor(attr,Color.WHITE);
                    break;
                case R.styleable.MyPre_oTextColor:
                    oTextColor = arry.getColor(attr,Color.WHITE);
                    break;
                case R.styleable.MyPre_TextSize:
                    TextSize = arry.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(
                            TypedValue.COMPLEX_UNIT_SP, 16, getResources().getDisplayMetrics()));
                    break;
            }
        }

        arry.recycle();

        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setStrokeWidth(5);

        mBound = new Rect();
    }

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

        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);

        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);

        int width ;
        int height ;

        if(widthMode==MeasureSpec.EXACTLY)
        {
            width = widthSize;
        }else
        {
            width = getPaddingLeft() + getWidth() + getPaddingRight();
        }

        if(heightMode==MeasureSpec.EXACTLY)
        {
            height = heightSize;
        }else
        {
            height = getPaddingTop() + getHeight() + getPaddingBottom();
        }

        setMeasuredDimension(width,height);
    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        iPre = (iNum /(iNum + oNum)) * getWidth();
        oPre = (oNum /(iNum + oNum)) * getWidth();

        //Log.e("mPre", "iPre:" + iPre + "  oPre:" + oPre + "width" + getWidth());

        //如果进值或出值有一个为0，则另一个就会占满整个进度条，这时就不需要倾斜角度了
        if(iNum==0 || oPre==0)
        {
            mInclination = 0;
        }

        Path iPath = new Path();
        iPath.moveTo(0, 0);
        iPath.lineTo(iPre + mInclination, 0);
        iPath.lineTo(iPre, getHeight());
        iPath.lineTo(0, getHeight());
        iPath.close();

        mPaint.setColor(iColor);
        canvas.drawPath(iPath, mPaint);


        Path oPath = new Path();
        oPath.moveTo(iPre + mInclination, 0);
        oPath.lineTo(getWidth(), 0);
        oPath.lineTo(getWidth(), getHeight());
        oPath.lineTo(iPre - mInclination, getHeight());
        oPath.close();

        mPaint.setColor(oColor);
        canvas.drawPath(oPath, mPaint);

        txtiPre = getProValText(iNum /(iNum + oNum) * 100);
        txtoPre = getProValText(oNum /(iNum + oNum) * 100);


        mPaint.setColor(iTextColor);
        mPaint.setTextSize(TextSize);

        mPaint.getTextBounds(txtiPre, 0, txtiPre.length(), mBound);
        //判断一下，如果进值为0则不显示，如果进值不为空而出值为0，则进值的数值显示居中显示
        if(iNum!=0 && oNum!=0) {

            canvas.drawText(txtiPre, 20, getHeight() / 2 + mBound.height() / 2, mPaint);

        }else if(iNum!=0 && oNum==0){

            canvas.drawText(txtiPre, getWidth()/2 - mBound.width()/2, getHeight() / 2 + mBound.height() / 2, mPaint);

        }

        mPaint.setColor(oTextColor);
        mPaint.getTextBounds(txtoPre, 0, txtoPre.length(), mBound);
        if(oNum!=0 && iNum!=0) {

            canvas.drawText(txtoPre, getWidth() - 20 - mBound.width(), getHeight() / 2 + mBound.height() / 2, mPaint);

        }else if(oNum!=0 && iNum==0){


            canvas.drawText(txtoPre, getWidth()/2 - mBound.width()/2, getHeight() / 2 + mBound.height() / 2, mPaint);
        }
    }

    /**
     * 格式化显示的百分比
     * @param proValue
     * @return
     */
    private String getProValText(float proValue)
    {
        DecimalFormat format = new DecimalFormat("#0.0");
        return format.format(proValue) + "%";
    }

    /**
     * 动态设置进值
     * @param iNum
     */
    public void setINum(float iNum)
    {
        this.iNum = iNum;
        postInvalidate();
    }

    /**
     * 动态设置出值
     * @param oNum
     */
    public void setONum(float oNum)
    {
        this.oNum = oNum;
        postInvalidate();
    }
}

调用的时候：

布局文件activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context="com.example.cg.custompre.MainActivity"
    android:orientation="vertical">


    <com.example.cg.custompre.custom.mPre
        android:id="@+id/myPre"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_margin="100dp"
        app:TextSize="14dp"/>

    <Button
        android:id="@+id/btn_Add"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="变化开始"/>
</LinearLayout>

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;
        }
    }
}