安卓简单实现自定义树状条形图一行代码解决条形图问题

一、首先看需求：

                                                                

二、 思路：只需要输入一个总体数字（X）和一个所占有的份数（Y），1、就能达到条目的长度（X/Y就是所占有的比例），2、条目的颜色必须随着条目所占有的比例变化透明度；

三、实现过程：

   1、自定义的view

/**
 * 数据分析里的矩形图
 */
注：红色的数字“1000”代表的是条目所占有的总份数（根据自己的需求不同设定）
public class ColumnarShapeView extends LinearLayout {
    @BindView(R.id.tv_name)
    TextView tvName;
    @BindView(R.id.view_shape)
    View viewShape;
    private Context mContex;

    public ColumnarShapeView(Context context) {
        super(context);
        initView(context, null);
    }

    public ColumnarShapeView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        initView(context, attrs);
    }

    private void initView(Context context, AttributeSet attrs) {
        mContex = context;
        View view = LayoutInflater.from(context).inflate(R.layout.item_columnar_shape, this, true);
        ButterKnife.bind(this, view);
        initAttrs(context, attrs);
    }

    private void initAttrs(Context context, AttributeSet attrs) {
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.ColumnarShapeView);
        String name = typedArray.getString(R.styleable.ColumnarShapeView_tvShapeName);
        tvName.setText(name);

        int color = typedArray.getColor(R.styleable.ColumnarShapeView_viewShapeColor, mContex.getResources().getColor(R.color.font_5e8));
        viewShape.setBackgroundColor(color);
        //设置矩形宽度
        float anInt = typedArray.getFloat(R.styleable.ColumnarShapeView_viewShapeWidth, 1);
        int value = (int) (anInt * 1000);
        WindowManager windowManager = BaseApplication.getCurrentActivity().getWindowManager();
        Display display = windowManager.getDefaultDisplay();
        LinearLayout.LayoutParams layoutParams = (LayoutParams) viewShape.getLayoutParams();
        layoutParams.width = display.getWidth() * value / 1000;
        //设置颜色透明度
        viewShape.getBackground().setAlpha((int) (255*anInt));
        typedArray.recycle();
    }

    /**
     * 设置条目名称
     * @param name
     */
    public void setTvName(String name) {
        tvName.setText(name);
    }

    /**
     * 设置条目颜色
     * @param color
     */
    public void setViewShapeColor(int color) {
        viewShape.setBackgroundColor(color);
    }

    /**
     * 设置矩形宽度（所占据屏幕宽度的比例）
     * @param value
     */
    public void setViewShapeWidth(float value) {
        int myValue = (int) (value * 100);
        WindowManager windowManager = BaseApplication.getCurrentActivity().getWindowManager();
        Display display = windowManager.getDefaultDisplay();
        LinearLayout.LayoutParams layoutParams = (LayoutParams) viewShape.getLayoutParams();
        layoutParams.width = display.getWidth() * myValue / 1000;
        //设置颜色透明度
        viewShape.getBackground().setAlpha((int) (255*value));
    }
}

2、item_columnar_shape 的布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:paddingLeft="@dimen/jl_6"
    android:paddingRight="@dimen/jl_6"
    android:layout_marginTop="@dimen/jl_36"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <TextView
        android:id="@+id/tv_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="安装工单数：100"
        android:textColor="@color/font_1"
        android:textSize="@dimen/font_26" />

    <View
        android:id="@+id/view_shape"
        android:layout_width="wrap_content"
        android:layout_height="@dimen/jl_20"
        android:layout_marginTop="@dimen/jl_10"
        android:background="@color/font_5e8" />
</LinearLayout>

3、res文件下的values文件下的attrs.xml内容：R.styleable.ColumnarShapeView的布局：

<!--数据分析矩形条目-->
<declare-styleable name="ColumnarShapeView">
    <attr name="tvShapeName" format="string"></attr>
    <attr name="viewShapeColor" format="color"></attr>
    <attr name="viewShapeWidth" format="float"></attr>
</declare-styleable>

四、使用：

ColumnarShapeView view = new ColumnarShapeView(mContext);
view.setTvName(oclistBean.getDescribeStr()+"工单数："+myNum);
//设置透明度
view.setViewShapeWidth(myNum);
//设置条目颜色
view.setViewShapeColor(R.color.font_5e8);
llAddContent1.addView(view);

至此：完成！