Hexagon shaped ProgressBar

Question

我正在嘗試製作一個遊戲，用戶可以獲得經驗值，並且他的等級會增加，如下圖所示。

我想與使用進度條的實現這一目標的，但我不能夠做出與形狀的六角的進度條。

隨着用戶積分的增加，黃線應該增加。

誰能給我我如何能做到這一點？想法（我試過自定義進度，但沒有奏效。）

感謝。

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>