带分区的 Android Ring Shape

Question

我需要创建带间隙的圆形。

我正在创建一个代表时钟的进度条。 12 个间隙，每个间隙分配给小时数。

这正是我想要实现的目标。 (死星上的外环)

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

在activity.xml

<ProgressBar
    android:id="@+id/progressBar"
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:indeterminate="false"
    android:progressDrawable="@drawable/circular_progress_bar"
    android:background="@drawable/circle_shape"
    style="?android:attr/progressBarStyleHorizontal"
    android:max="500"
    android:progress="65"
    android:layout_marginBottom="165dp"
    android:layout_above="@+id/button5"
    android:layout_centerHorizontal="true" />

在circular_progress_bar

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="270"
    android:toDegrees="270">
    <shape
        android:innerRadiusRatio="2.5"
        android:shape="ring"
        android:thickness="4dp"
        android:useLevel="true"><!-- this line fixes the issue for lollipop api 21 -->

        <gradient
            android:angle="0"
            android:endColor="#007DD6"
            android:startColor="#007DD6"
            android:type="sweep"
            android:useLevel="false" />
    </shape>
</rotate>

在circle_shape.xml

中

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:innerRadiusRatio="2.5"
    android:thickness="4dp"
    android:useLevel="false">

    <solid android:color="#CCC" />
    <stroke
        android:dashGap="10px"
        android:dashWidth="10px"
        android:width="1dp"
        android:color="#ababb2" />
</shape>

如何分离我的形状，使其看起来像这样？我在正确的道路上吗？

Answer 1

过去我不得不创建一个自定义进度条。我不确定您的解决方案，所以我不会对此发表评论。这就是我处理这个问题的方式:

我创建了一个覆盖 LinearLayout 的自定义类(我需要添加更多 View ，但您可以覆盖任何其他 View )

然后我覆盖 onDraw 并在 Canvas 上绘制一个 Arch:

ArchProgressBar.java

public class ArchProgressBar extends LinearLayout {

private static final float START_ANGLE = 130;
private static final float ARCH_LENGTH = 50;

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

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

private void init(Context context) {
    this.setWillNotDraw(false);

    LayoutInflater inflater = (LayoutInflater) context
            .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    inflater.inflate(R.layout.arch_progress_bar, this, true);

    this.postInvalidate();
}

@Override
public void onDraw(Canvas canvas) {

    float middleWidth = canvas.getWidth() / 2;
    float middleHeight = canvas.getHeight() / 2;
    float left = middleWidth - 105 * getResources().getDisplayMetrics().density;
    float top = middleHeight - 90 * getResources().getDisplayMetrics().density;
    float right = middleWidth + 105 * getResources().getDisplayMetrics().density;
    float bottom = middleHeight + 120 * getResources().getDisplayMetrics().density;

    Paint mPaintBackground = new Paint();
    mPaintBackground.setAntiAlias(true);
    mPaintBackground.setStyle(Paint.Style.STROKE);
    mPaintBackground.setStrokeWidth(35);
    mPaintBackground.setColor(Color.BLACK);

    RectF mRectF = new RectF(left, top, right, bottom);

    // draw background line
    canvas.drawArc(mRectF, START_ANGLE, ARCH_LENGTH, false, mPaintBackground);

    canvas.drawArc(mRectF, START_ANGLE + ARCH_LENGTH + 10, ARCH_LENGTH, false, mPaintBackground);

}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    int width = View.MeasureSpec.getSize(widthMeasureSpec);
    setMeasuredDimension(width, Math.max(800, heightMeasureSpec));
}

}

arch_progress_bar.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="wrap_content">

</LinearLayout>

然后你可以像这样将它添加到任何你想要的 xml 中:

<com.training.archprogress.ArchProgressBar
    android:id="@+id/result_result"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true" />

您可以只绘制 12 个不同的线段，并使拱形略小于线段的大小。然后在进度更新时绘制您需要的段数。

我在 github 中为您提供了一个包含此解决方案的项目: https://github.com/nevoroee/ArchProgress