java - 如何在android中绘制带有填充颜色的自定义圆圈？

Question

我正在尝试在我的 Android 应用程序中绘制这个形状:

我想画一个宽描边的空心圆，

我想用宽笔画画一个空心圆，并且我希望每个圆都以自定义方式填充。如果用户输入 57，则圆形笔划将为 57% 黄色，并且形状的中间将是 TextView 。有办法做到吗？

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

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()));

    }



}

Answer 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 可绘制对象设置为您的可绘制对象

android:progressDrawable="@drawable/blue_progress_bar"

要在中心显示文本，请将 RelativeLayout 设置为背景，然后添加 ProgressBar 和 TextView。然后在父级 RelativeLayout

中设置 centerInParent="true"