web-dev-qa-db-ja.com

Android：半円進行バー

画像の背景に半円のプログレスバーが欲しい。下の画像のように。

enter image description here

キャンバスを使って描こうとしましたが、うまくいきません。カスタムプログレスバーライブラリにも疲れましたが、結果は同じです。

助言がありますか。

ワンタイム開発を探し、すべての画面サイズで使用されます。

androidprogress-barandroid-progressbar
17
Dhaval Parmar

これは、（円弧を描くことにより）画像を含むキャンバスを斜めにクリッピングすることで実装できます。

このような画像を使用できます

enter image description here

そして、その画像を弧を描いて切り取ります。

これを行う方法は次のとおりです。

_//Convert the progress in range of 0 to 100 to angle in range of 0 180. Easy math.
float angle = (progress * 180) / 100;
mClippingPath.reset();
//Define a rectangle containing the image
RectF oval = new RectF(mPivotX, mPivotY, mPivotX + mBitmap.getWidth(), mPivotY + mBitmap.getHeight());
//Move the current position to center of rect
mClippingPath.moveTo(oval.centerX(), oval.centerY());
//Draw an arc from center to given angle
mClippingPath.addArc(oval, 180, angle);
//Draw a line from end of arc to center
mClippingPath.lineTo(oval.centerX(), oval.centerY());
_

そして、パスを取得したら、clipPath関数を使用して、そのパスでキャンバスをクリップできます。

_canvas.clipPath(mClippingPath);
_

これが完全なコードです

SemiCircleProgressBarView.Java

_import Android.app.Activity;
import Android.content.Context;
import Android.graphics.Bitmap;
import Android.graphics.BitmapFactory;
import Android.graphics.Canvas;
import Android.graphics.Path;
import Android.graphics.RectF;
import Android.util.AttributeSet;
import Android.util.DisplayMetrics;
import Android.view.View;



public class SemiCircleProgressBarView extends View {

    private Path mClippingPath;
    private Context mContext;
    private Bitmap mBitmap;
    private float mPivotX;
    private float mPivotY;

    public SemiCircleProgressBarView(Context context) {
        super(context);
        mContext = context;
        initilizeImage();
    }

    public SemiCircleProgressBarView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mContext = context;
        initilizeImage();
    }

    private void initilizeImage() {
        mClippingPath = new Path();

        //Top left coordinates of image. Give appropriate values depending on the position you wnat image to be placed
        mPivotX = getScreenGridUnit();
        mPivotY = 0;

        //Adjust the image size to support different screen sizes
        Bitmap bitmap = BitmapFactory.decodeResource(mContext.getResources(), R.drawable.circle);
        int imageWidth = (int) (getScreenGridUnit() * 30);
        int imageHeight = (int) (getScreenGridUnit() * 30);
        mBitmap = Bitmap.createScaledBitmap(bitmap, imageWidth, imageHeight, false);
    }

    public void setClipping(float progress) {

        //Convert the progress in range of 0 to 100 to angle in range of 0 180. Easy math.
        float angle = (progress * 180) / 100;
        mClippingPath.reset();
        //Define a rectangle containing the image
        RectF oval = new RectF(mPivotX, mPivotY, mPivotX + mBitmap.getWidth(), mPivotY + mBitmap.getHeight());
        //Move the current position to center of rect
        mClippingPath.moveTo(oval.centerX(), oval.centerY());
        //Draw an arc from center to given angle
        mClippingPath.addArc(oval, 180, angle);
        //Draw a line from end of arc to center
        mClippingPath.lineTo(oval.centerX(), oval.centerY());
        //Redraw the canvas
        invalidate();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        //Clip the canvas
        canvas.clipPath(mClippingPath);
        canvas.drawBitmap(mBitmap, mPivotX, mPivotY, null);

    }

    private float getScreenGridUnit() {
        DisplayMetrics metrics = new DisplayMetrics();
        ((Activity)mContext).getWindowManager().getDefaultDisplay().getMetrics(metrics);
        return metrics.widthPixels / 32;
    }

}
_

そして、どんな活動でもそれを使うのはとても簡単です。

activity_main.xml

_<RelativeLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:tools="http://schemas.Android.com/tools"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <com.example.progressbardemo.SemiCircleProgressBarView
        Android:id="@+id/progress"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent" />

</RelativeLayout>   
_

clipPath関数は、_hardware acceleration_がオンの場合は機能しません。ハードウェアアクセラレーションをオフにできるのは、そのビューに対してのみです。

_   //Turn off hardware accleration
  semiCircleProgressBarView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
_

MainActivity.Java

_public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        SemiCircleProgressBarView semiCircleProgressBarView = (SemiCircleProgressBarView) findViewById(R.id.progress);
        semiCircleProgressBarView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);

        semiCircleProgressBarView.setClipping(70);
    }

}  
_

進行状況が変わると、関数を呼び出して進行状況バーを設定できます。

_semiCircleProgressBarView.setClipping(progress);
_

例：semiCircleProgressBarView.setClipping(50); //50% progress

enter image description here

_semiCircleProgressBarView.setClipping(70); //70% progress
_

enter image description here

独自の画像を使用して要件に合わせることができます。それが役に立てば幸い！！

編集：半円を画面の下部に移動するには、mPivotYの値を変更します。このようなもの

_//In `SemiCircleProgressBarView.Java`
//We don't get the canvas width and height initially, set `mPivoyY` inside `onWindowFocusChanged` since `getHeight` returns proper results by that time
        public void onWindowFocusChanged(boolean hasWindowFocus) {
            super.onWindowFocusChanged(hasWindowFocus);

            mPivotX = getScreenGridUnit();
            mPivotY = getHeight() - (mBitmap.getHeight() / 2);
        }
_
39
Abhishek V

SeekArc Library を試すことができます。別の種類のシークバーを知っていますが、マイナーなカスタマイズを行うことで、アプリのプログレスバーとして使用できます。私は同じことをしました。あなただけのようないくつかのプロパティを変更する必要があります
seekarc:touchInside="false"。
かなりシンプルです。

アプリのカスタム実装は次のようになります。

Custom progressbar in CleanMaster

img src： Google PlayのCleanMaster

9
saran

ネイティブProgressBarを使用して半円を実現することもできます。次のようにProgressBarを定義します。

<ProgressBar
    Android:id="@+id/progressBar"
    style="?android:attr/progressBarStyleHorizontal"
    Android:layout_width="100dp"
    Android:layout_height="100dp"
    Android:layout_alignParentBottom="true"
    Android:layout_centerHorizontal="true"
    Android:max="200"
    Android:progress="0"
    Android:progressDrawable="@drawable/circular" />

ドローアブルを作成します。

circular（APIレベル<21）：

<shape
   Android:innerRadiusRatio="2.3"
   Android:shape="ring"
   Android:thickness="5sp" >
   <solid Android:color="@color/someColor" />
</shape>

circular（APIレベル> = 21）：

<shape
   Android:useLevel="true"
   Android:innerRadiusRatio="2.3"
   Android:shape="ring"
   Android:thickness="5sp" >
   <solid Android:color="@color/someColor" />
</shape>

APIレベル21では、useLevelはデフォルトでfalseです。

max = 200、半円を達成するには、進行状況の範囲は0から100。これらの値をいじって、目的の形状を実現できます。

したがって、次のように使用します。

ProgressBar progressBar = (Progressbar) view.findViewById(R.id.progressBar);
progressBar.setProgress(value); // 0 <= value <= 100
3
Rohit Arya

これは、高さが幅の半分に等しいビューです。セッターを使用して、必要に応じて動作を調整します。デフォルトでは、進行状況は0で、円弧の幅は20です。setProgress（）を呼び出すと、指定された進行状況でビューが無効になります。背景のドローアブルを追加することが可能で、進行状況バーが上に描画されます。

public class SemicircularProgressBar extends View {
private int mProgress;
private RectF mOval;
private RectF mOvalInner;
private Paint mPaintProgress;
private Paint mPaintClip;
private float ovalsDiff;
private Path clipPath;

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

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

public SemicircularProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init();
}

private void init() {
    mProgress = 0;
    ovalsDiff = 20;
    mOval = new RectF();
    mOvalInner = new RectF();
    clipPath = new Path();
    mPaintProgress = new Paint();
    mPaintProgress.setColor(Color.GREEN);
    mPaintProgress.setAntiAlias(true);
    mPaintClip = new Paint();
    mPaintClip.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
    mPaintClip.setAlpha(0);
    mPaintClip.setAntiAlias(true);
}


// call this from the code to change the progress displayed
public void setProgress(int progress) {
    this.mProgress = progress;
    invalidate();
}

// sets the width of the progress arc
public void setProgressBarWidth(float width) {
    this.ovalsDiff = width;
    invalidate();
}

// sets the color of the bar (#FF00FF00 - Green by default)
public void setProgressBarColor(int color){
    this.mPaintProgress.setColor(color);
}

@Override
public void onDraw(Canvas c) {
    super.onDraw(c);
    mOval.set(0, 0, this.getWidth(), this.getHeight()*2);
    mOvalInner.set(0+ovalsDiff, 0+ovalsDiff, this.getWidth()-ovalsDiff, this.getHeight()*2);
    clipPath.addArc(mOvalInner, 180, 180);
    c.clipPath(clipPath, Op.DIFFERENCE);
    c.drawArc(mOval, 180, 180f * ((float) mProgress / 100), true, mPaintProgress);
}

// Setting the view to be always a rectangle with height equal to half of its width
@Override
public void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    int parentWidth = MeasureSpec.getSize(widthMeasureSpec);
    int parentHeight = MeasureSpec.getSize(heightMeasureSpec);
    this.setMeasuredDimension(parentWidth/2, parentHeight);
    ViewGroup.LayoutParams params = this.getLayoutParams();
    params.width = parentWidth;
    params.height = parentWidth/2;
    this.setLayoutParams(params);
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
}
1
SceLus

このライブラリを使用できます：

 compile 'com.github.lzyzsd:circleprogress:1.1.1'

enter image description here

例えば ​​：

   <com.github.lzyzsd.circleprogress.DonutProgress
        Android:layout_marginLeft="50dp"
        Android:id="@+id/donut_progress"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        custom:donut_progress="30"/>

enter image description here

<com.github.lzyzsd.circleprogress.ArcProgress
        Android:id="@+id/arc_progress"
        Android:background="#214193"
        Android:layout_marginLeft="50dp"
        Android:layout_width="100dp"
        Android:layout_height="100dp"
        custom:arc_progress="55"
        custom:arc_bottom_text="MEMORY"/>

詳細については、次のWebサイトを参照してください。

https://github.com/lzyzsd/CircleProgress

1
Masoud Siahkali

あなたはこれを使うことができるかもしれません githubライブラリ-循環シークバー 。半円を実現するには、次の属性を操作する必要があります： "app：start_angle"＆ "app：end_angle"

その他のオプション：

  1. The Holo Seekbarライブラリ
  2. 半円形のシークバーを示すチュートリアル チュートリアルへのリンク
0
user1406716