Android自定义View模拟并实现3D柱状图

先看效果图

呈上代码:

  • 自定义View类
public class MyBarView extends View {
    private Paint barPaint;                             //柱状图画笔
    private Paint shadowPaint;                          //阴影画笔
    private int xOffset=1,yOffset=1;                    //x和y方向的偏移量
    private int startX=100,startY=400,endX=200,endY=1000;
    private int layerNum=25;                            //画布的层数
    private int barMargin=50;                           //每个柱状体之前的间隔
    private List<Integer> percents=new ArrayList<>(); //每种数据的数值,用于计算比例,画出柱状体高度
    private int perSum;                                 //每种数据数值的总和
    public MyBarView(Context context,int... pers){
        super(context);
        for(int i=0;i<pers.length;i++){
            perSum+=pers[i];
            percents.add(pers[i]);
        }
        init();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int rectangleLen=endY-startY;           //矩形的长度
        for(int i=0;i<percents.size();i++){
            int nowStartY=endY-(percents.get(i)*rectangleLen)/perSum;   //重新计算矩阵左上角y点的值
            for(int j=layerNum;j>=1;j--){       //从后往前画
                canvas.drawRect(startX+xOffset*j,nowStartY-yOffset*j,endX+xOffset*j,endY-yOffset*j,barPaint);
                if(j==1||j==layerNum)           //画阴影
                    canvas.drawRect(startX+xOffset*j,nowStartY-yOffset*j,endX+xOffset*j,endY-yOffset*j,shadowPaint);
            }
            int length=endX-startX;     //矩形边长
            startX+=length+barMargin;   //计算下一个柱状体的左上角x点的值
            endX+=length+barMargin;     //计算下一个柱状体的右下角x点的值
        }
    }

    private void init(){    //初始化控件
        barPaint=new Paint();
        barPaint.setStyle(Paint.Style.FILL);
        barPaint.setColor(Color.RED);

        shadowPaint=new Paint();
        shadowPaint.setStyle(Paint.Style.STROKE);
        shadowPaint.setStrokeWidth(1);
        shadowPaint.setColor(Color.parseColor("#515151"));
    }
}
  • MainActivity中创建该View
public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }

    private void initView(){
        MyBarView myBarView=new MyBarView(this,10,20,30,50,60,80);
        ((FrameLayout)(findViewById(R.id.frame))).addView(myBarView);
    }

}
  • 最后是布局文件
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <FrameLayout
        android:id="@+id/frame"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"></FrameLayout>
</RelativeLayout>

猜你喜欢

转载自blog.csdn.net/zz51233273/article/details/107235215
今日推荐