Android 自定义控件——Simple_Loading

本文介一个简单的自定义加载圈的实现

先看看效果：

继承View，和一系列的自定义属性在画布上实现的Loading的效果

效果总共三中：

1.弧度Loading

2.圆Loading

3.可以设置1-100的数字，表示百分比，并在Loading上表示相应的百分比效果

属性文件和属性的意义：

<?xml version="1.0" encoding="utf-8"?><resources>    <declare-styleable name="Loading">        <attr name="outer_width" format="dimension" />        <attr name="outer_color" format="color" />        <attr name="inner_width" format="dimension" />        <attr name="inner_color" format="color" />        <attr name="inner_rotating_speed" format="integer"></attr>        <attr name="mode">            <enum name="arc" value="1" />            <enum name="circle" value="2" />            <enum name="custom" value="3" />        </attr>        <!-- mode=circle时有效 -->        <attr name="inner_circle_speed" format="integer"></attr>        <!-- mode=custom时有效 -->        <attr name="inner_custom_degree" format="integer"></attr>    </declare-styleable></resources>

outer_width  外圈的宽

outer_color  外圈的颜色 

inner_width  内圈的宽

inner_color  内圈的颜色

inner_rotaing_speed  内圈的速度

mode  模式，arc：弧形的Loading，circle：圆形的Loading，custom：可以设置百分比度数的circle loading

inner_circle_speed 当mode=circle时有效，内圈的速度

inner_custom_degree 当mode=custom时有效，内圈的度数，百分比，1-100之间

LoadingView.java

/** * 自定义的一个LoadingView *  * @author mingwei */public class LoadingView extends View {private final String TAG = "LoadingView";private Paint mTestPaint;private Paint mOuterPaint;private RectF mOuterRectF;private Paint mInnerPaint;private RectF mInnerRectF;/** * mStart 起始值 弧度 mSweep 终点值 弧度 */int mStart = 0;int mSweep = 90;int mWidth, mHeight;int mArcLenght = 60;/** * outer width */int mOuterWidth;/** * inner width */int mInnerWidth;/** * outer color */int mOuterColor;/** * inner color */int mInnerColor;/** * inner rotating speed */int mInnerRotatingSpeed = 1;/** * loading的模式 */LoadingMode mLoadingMode = LoadingMode.ARC;/** * Circle degree */int mCircle = 0;/** * Circle speed,only mode==circle */int mCircleSpeed = 1;/** * custom degree,only mode==custom */int mCustomDegree = 0;enum LoadingMode {ARC, CIRCLE, CUSTOM;}public LoadingView(Context context) {this(context, null);}public LoadingView(Context context, AttributeSet attrs) {this(context, attrs, 0);}public LoadingView(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);initAttr(context, attrs);}private void setBounds() {mOuterRectF = new RectF(getPaddingLeft(), getPaddingTop(), getWidth() - getPaddingRight(), getHeight()- getPaddingBottom());mInnerRectF = new RectF(mOuterRectF);}@Overrideprotected void onSizeChanged(int w, int h, int oldw, int oldh) {super.onSizeChanged(w, h, oldw, oldh);setBounds();initPaint();}private void initPaint() {mOuterPaint = new Paint();mOuterPaint.setAntiAlias(true);mOuterPaint.setColor(mOuterColor);mOuterPaint.setStyle(Style.STROKE);mOuterPaint.setStrokeWidth(mOuterWidth);//mInnerPaint = new Paint();mInnerPaint.setAntiAlias(true);mInnerPaint.setColor(mInnerColor);mInnerPaint.setStyle(Style.STROKE);mInnerPaint.setStrokeWidth(mInnerWidth);//mTestPaint = new Paint();mTestPaint.setAntiAlias(true);mTestPaint.setColor(Color.BLACK);mTestPaint.setStyle(Style.STROKE);}private void initAttr(Context context, AttributeSet attrs) {TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.Loading);mOuterWidth = array.getDimensionPixelOffset(R.styleable.Loading_outer_width, 0);mOuterColor = array.getColor(R.styleable.Loading_outer_color, Color.GRAY);mInnerWidth = array.getDimensionPixelOffset(R.styleable.Loading_inner_width, R.styleable.Loading_inner_width);mInnerColor = array.getColor(R.styleable.Loading_inner_color, Color.BLACK);mInnerRotatingSpeed = array.getInt(R.styleable.Loading_inner_rotating_speed, 1);if (array.getInt(R.styleable.Loading_mode, 0) == 1) {mLoadingMode = LoadingMode.ARC;} else if (array.getInt(R.styleable.Loading_mode, 0) == 2) {mLoadingMode = LoadingMode.CIRCLE;mCircleSpeed = array.getInt(R.styleable.Loading_inner_circle_speed, 1);} else if (array.getInt(R.styleable.Loading_mode, 0) == 3) {mLoadingMode = LoadingMode.CUSTOM;mCustomDegree = array.getInt(R.styleable.Loading_inner_custom_degree, 1);}array.recycle();}@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);// canvas.drawRect(mOuterRectF, mTestPaint);canvas.drawArc(mOuterRectF, 360, 360, false, mOuterPaint);if (mLoadingMode == LoadingMode.ARC) {canvas.drawArc(mInnerRectF, mStart, mSweep + 2, false, mInnerPaint);// int d = mRandom.nextInt(8);mStart += mInnerRotatingSpeed;if (mStart > 360) {mStart -= 360;}invalidate();} else if (mLoadingMode == LoadingMode.CIRCLE) {canvas.drawArc(mInnerRectF, mStart, mCircle, false, mInnerPaint);mCircle += mCircleSpeed;if (mCircle > 360) {mCircle -= 360;}invalidate();} else if (mLoadingMode == LoadingMode.CUSTOM) {float f = (float) mCustomDegree / 100f;canvas.drawArc(mInnerRectF, mStart, 360f * f, false, mInnerPaint);}}}

在Activity的XML中使用：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    xmlns:loading="http://schemas.android.com/apk/res-auto"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:paddingBottom="@dimen/activity_vertical_margin"    android:paddingLeft="@dimen/activity_horizontal_margin"    android:paddingRight="@dimen/activity_horizontal_margin"    android:paddingTop="@dimen/activity_vertical_margin"    tools:context="com.mingwei.sampleloading.MainActivity" >    <com.mingwei.sampleloading.view.LoadingView        android:layout_width="80dip"        android:layout_height="80dip"        android:padding="10dip"        loading:inner_color="@color/loading_inner_color"        loading:inner_rotating_speed="5"        loading:inner_width="3dip"        loading:mode="arc"        loading:outer_color="@color/loading_outer_color"        loading:outer_width="3dip" />    <com.mingwei.sampleloading.view.LoadingView        android:layout_width="80dip"        android:layout_height="80dip"        android:padding="10dip"        loading:inner_circle_speed="3"        loading:inner_color="@android:color/holo_blue_bright"        loading:inner_rotating_speed="5"        loading:inner_width="3dip"        loading:mode="circle"        loading:outer_color="@color/loading_outer_color"        loading:outer_width="3dip" />    <com.mingwei.sampleloading.view.LoadingView        android:layout_width="80dip"        android:layout_height="80dip"        android:padding="10dip"        loading:inner_color="@android:color/holo_green_dark"        loading:inner_custom_degree="90"        loading:inner_width="3dip"        loading:mode="custom"        loading:outer_color="@color/loading_outer_color"        loading:outer_width="3dip" /></LinearLayout>

Activity中啥也没干，想要设置Custom时的度数，只需要改变mCustomDegree并调用invalidate()就可以了。