Android半圆形进度条动画,Android：半圆形进度条

这可以通过剪裁包含图像的画布(通过绘制弧)来实现.

你可以使用像这样的图像

并通过绘制弧形来剪裁该图像.

这是怎么做的.

//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中

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context=".MainActivity" >

android:id="@+id/progress"

android:layout_width="match_parent"

android:layout_height="match_parent" />

请注意,如果硬件加速打开,则clipPath功能不起作用.您只能为该视图关闭硬件加速.

//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％进度

semiCircleProgressBarView.setClipping(70); //70% progress

您可以使用自己的图像来匹配要求.希望它有帮助！

编辑：要将半圆移动到屏幕底部,请更改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);

}