如何在android中绘制填充颜色的自定义圆圈?

时间:2014-06-16 11:35:19

标签: java android android-canvas android-custom-view

我试图在我的Android应用中绘制这个形状:

canvas example

我想画一个宽笔画的空心圆圈,

我想绘制一个宽笔画的空心圆,我想每个圆圈都会以自定义的方式填充。如果用户输入57,那么圆形笔划将是57%黄色,并且在形状的中间将是文本视图。 有办法吗?

到目前为止,这是我的代码:

public class MyView extends View {

Paint paint;
Path path;

public MyView(Context context) {
 super(context);
 init();
}

public MyView(Context context, AttributeSet attrs) {
 super(context, attrs);
 init();
}

public MyView(Context context, AttributeSet attrs, int defStyle) {
 super(context, attrs, defStyle);
 init();
}

private void init(){
paint = new Paint();
paint.setColor(Color.BLUE);
paint.setStrokeWidth(10);
paint.setStyle(Paint.Style.STROKE);

}

@Override
protected void onDraw(Canvas canvas) {
 // TODO Auto-generated method stub
 super.onDraw(canvas);

 paint.setStyle(Paint.Style.STROKE);
 canvas.drawCircle(50, 50, 30, paint);



}

}

和xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="right"
        android:orientation="vertical"
        android:padding="10dp" >

        <TextView
            style="@style/black_textview"
            android:text="@string/status_m" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:baselineAligned="false"
            android:orientation="horizontal" >

            <FrameLayout
                android:id="@+id/frame_graph_1"
                android:layout_width="0dp"
                android:layout_height="100dp"
                android:layout_marginTop="10dp"
                android:layout_weight="1"
                android:orientation="vertical" >
            </FrameLayout>

            <FrameLayout
                android:id="@+id/frame_graph_2"
                android:layout_width="0dp"
                android:layout_height="100dp"
                android:layout_marginTop="10dp"
                android:layout_weight="1"
                android:orientation="vertical" >
            </FrameLayout>

            <FrameLayout
                android:id="@+id/frame_graph_3"
                android:layout_width="0dp"
                android:layout_height="100dp"
                android:layout_marginTop="10dp"
                android:layout_weight="1"
                android:orientation="vertical" >
            </FrameLayout>
        </LinearLayout>
    </LinearLayout>

</LinearLayout>

这是主要的课程

public  class HomeGraphFragment extends Fragment {

    FrameLayout frameGraph1 , frameGraph2 , frameGraph3;

    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {

        View v = inflater.inflate(R.layout.home_graph, container, false);
        init(v);
        return v;
    }

    private void init(View v) {

        frameGraph1 = (FrameLayout)v.findViewById(R.id.frame_graph_1);
        frameGraph2 = (FrameLayout)v.findViewById(R.id.frame_graph_2);
        frameGraph3= (FrameLayout)v.findViewById(R.id.frame_graph_3);

        frameGraph1.addView(new MyView(getActivity()));

    }



}

2 个答案:

答案 0 :(得分:1)

您可以自定义进度条:

<item android:id="@android:id/background">
    <rotate
        android:fromDegrees="270"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="270" >
        <shape
            android:innerRadiusRatio="3"
            android:shape="ring"
            android:thicknessRatio="15.0" >
            <solid android:color="@color/clr_secondary" />
        </shape>
    </rotate>
</item>
<item android:id="@android:id/secondaryProgress">
    <rotate
        android:fromDegrees="270"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="270" >
        <shape
            android:innerRadiusRatio="3"
            android:shape="ring"
            android:thicknessRatio="15.0" >
            <solid android:color="@color/clr_secondary" />
        </shape>
    </rotate>
</item>
<item android:id="@android:id/progress">
    <rotate
        android:fromDegrees="270"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="270" >
        <shape
            android:innerRadiusRatio="3"
            android:shape="ring"
            android:thicknessRatio="15.0" >
            <solid android:color="@color/clr_primary" />
        </shape>
    </rotate>
</item>

最后将ProgressBar drawable设置为drawable

android:progressDrawable="@drawable/blue_progress_bar"

要在中心显示文字,请将RelativeLayout设置为背景,然后添加ProgressBarTextView。然后在您的父centerInParent="true"

中设置RelativeLayout

答案 1 :(得分:0)

您可以使用SweepGradient,将圆心坐标作为参数传递。