自定义view绘制扇形,饼状图

标签: 自定义View  扇形  饼状图

如果你想要在你的界面上画个扇形,使用的平时的控件是没有这个功能的,这时候我们就可以使用自定义view来绘制扇形

下面,我们来学习一下怎么使用自定义view来绘制:

一:创建一个类

一:我们先创建一个类,继承自View,然后重写两个构造方法

    //我们调的
    public _view(Context context) {
        super(context);
    }
    //系统调的
    public _view(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

为什么要创建两个呢?

第一个是为了供我们调用的,第二个则是android系统调用的。

二:重写方法:

    //测量
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    //视图
    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
    }

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

然后再onDraw方法里面开始绘制。

二:开始绘制

先创建一个画笔,然后给画笔添加颜色

        //添加画笔
        Paint paint = new Paint();
        paint.setColor(Color.BLACK);

 

因为扇形是圆形的一部分,而圆形的大小的确定则需要确定一个矩形的起始位置。如下图:

明白了这个概念之后,然后我们就可以开始画扇形了

        //圆角矩形
        RectF rectF = new RectF(100,100,getWidth()-100,getWidth()-100);
        //          从多少度开始,画多少度
        canvas.drawArc(rectF,0,90,true,paint);

为了使我们绘制的扇形更加美观,我们可以添加

        paint.setAntiAlias(true);

否则画出来的扇形的边缘坑坑洼洼的。

 

效果如图:

然后我们再继续绘制:

        paint.setColor(Color.YELLOW);
        canvas.drawArc(rectF,90,45,true,paint);

如图:

我们只需要注意:

canvas.drawArc(rectF,0,90,true,paint);//第二个参数表示的是从多少度开始画,第三个参数表示的是画多少度

然后我们就可以画一个完整的饼状图啦!

三:引用

我们已经定义好了这个类,不引用的话可是没有效果的,那么在哪里引用呢?

其实很简单~,我们只需要在activity的布局文件里面引用一下:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    
    <com.text.con_view._view
        android:id="@+id/_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    </LinearLayout>

 

 

 

 

原文链接:加载失败,请重新获取