Android Ring Shape with division

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的自定义类（我需要添加更多视图但你可以覆盖任何其他视图）

然后我重写onDraw并在画布上绘制一个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