六角形ProgressBar

Question

我正在努力制作一个用户获得经验值并且他的等级增加的游戏，如下图所示。

我正在考虑使用进度条实现这一目标，但我无法使用Hexagon 的形状创建进度条。

黄线应随着用户数量的增加而增加。

有人能告诉我如何实现这一点吗？（我尝试过自定义ProgressBar ，但它没有用。）

感谢。

Answer 1

我设法更改了Nilesh mentioned的代码并创建了一个没有任何曲线的进度条。

这对我来说很好。

现在我只需要弄清楚如何在进度条中插入图像。 ：P

package com.example.benedict.progress;

import android.animation.ObjectAnimator;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PathMeasure;
import android.graphics.RectF;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import android.widget.ImageButton;
import android.widget.ImageView;


public class V extends View implements View.OnClickListener {
Path segment = new Path();
Paint paint = new Paint();
PathMeasure pm;
String TAG = "View";
Path path;

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

public V(Context context, @Nullable AttributeSet attrs) {
    super(context, attrs);
    init();
}

public V(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init();
}

public V(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
    super(context, attrs, defStyleAttr, defStyleRes);
    init();
}

void init() {
    setOnClickListener(this);
    paint.setColor(0xaa00ff00);
    paint.setStyle(Paint.Style.STROKE);
    paint.setStrokeWidth(10);
    paint.setStrokeCap(Paint.Cap.ROUND);

}

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    Path src = new Path();

    src.moveTo(8.80000f, 0.630000f);//0
    src.lineTo(26.030001f, 0.630000f);//1
    src.lineTo(32.109999f, 14.030000f);//2
    src.lineTo(26.030001f, 28.440001f);//3
    src.lineTo(7.800000f, 28.440001f);//4
    src.lineTo(2.200000f, 14.030000f);//5
    src.lineTo(8.80000f, 0.630000f);//6


    Matrix m = new Matrix();
    RectF srcRect = new RectF(0, 0, 32, 40);
    RectF dstRect = new RectF(0, 0, w, h);

    dstRect.inset(paint.getStrokeWidth() / 2, paint.getStrokeWidth() / 2);
    m.setRectToRect(srcRect, dstRect, Matrix.ScaleToFit.CENTER);

    Path dst = new Path();
    src.transform(m, dst);
    pm = new PathMeasure(dst, true);
    pm.getSegment(0, pm.getLength() / 2, segment, true);
    //  segment.rLineTo(0, 0);
    setProgress(pm.getLength());
}

void setProgress(float progress) {
    segment.reset();
    float start = 0;
    float end = (progress);
    if (start < end) {
        pm.getSegment(start, end, segment, true);
    } /*else {
        pm.getSegment(start, length, segment, true);
      //  pm.getSegment(0, end, segment, true);
    }*/
    segment.rLineTo(0, 0);
    invalidate();
}

  @Override
    public void onClick(View v) {
    ObjectAnimator.ofFloat(this, "progress", 0, 
    pm.getLength()).setDuration(5 * 2500).start();
    Log.d(TAG, pm.getLength() + "");
}

  @Override
  protected void onDraw(Canvas canvas) {

      canvas.drawPath(segment, paint);

   }
 }

activity_main.xml中

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/loading_status"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center_horizontal"
android:orientation="vertical"
android:background="#000"
android:visibility="visible" >


<com.example.benedict.progress.V
    android:id="@+id/progress"
    android:src="@drawable/poster1"
    android:scaleType="centerCrop"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:visibility="visible" />



</LinearLayout>