你的位置:首页 > 操作系统

[操作系统]Android自定义View之圆环交替 等待效果


  学习了前面两篇的知识,对于本篇实现的效果,相信大家都不会感觉太困难,我要实现的效果是什么样呢?下面请先看效果图:

  

  看上去是不很炫的样子,它的实现上也不是很复杂,重点在与onDraw()方法的绘制。

  首先是我们的attrs文件:

<?

  接下来是我们重写View类的自定义View类:

public class MySelfCircleView extends View {    /*   * 第一圈颜色   */  int firstColor;  /*   * 第二圈颜色   */  int secondColor;  /*   * 圆的宽度   */  int circleWidth;  /*   * 速率   */  int speed;  /*   * 画笔   */  Paint mPaint;  /*   * 进度   */  int mProgress;  /*   * 是否切换标志   */  boolean isNext;    public MySelfCircleView(Context context, AttributeSet attrs,      int defStyleAttr) {    super(context, attrs, defStyleAttr);     TypedArray typedArray = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CustomView, defStyleAttr, 0);    int n = typedArray.getIndexCount();    for(int i=0; i<n; i++){      int attr = typedArray.getIndex(i);      switch (attr) {        case R.styleable.CustomView_firstColor:          firstColor = typedArray.getColor(attr, Color.RED);          break;        case R.styleable.CustomView_secondColor:          secondColor = typedArray.getColor(attr, Color.RED);          break;        case R.styleable.CustomView_circleWidth:          circleWidth = typedArray.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(               TypedValue.COMPLEX_UNIT_PX, 20, getResources().getDisplayMetrics()));           break;        case R.styleable.CustomView_speed:          speed = typedArray.getInt(attr, 20);          break;      }    }    typedArray.recycle();        mPaint = new Paint();    new Thread(new Runnable() {      @Override      public void run() {        while (true) {          mProgress++;          if (mProgress == 360) {             mProgress = 0;             if (!isNext)               isNext = true;             else               isNext = false;           }           postInvalidate();           try {             Thread.sleep(speed);           } catch (InterruptedException e) {             e.printStackTrace();           }         }      }    }).start();  }  public MySelfCircleView(Context context, AttributeSet attrs) {    this(context, attrs, 0);  }  public MySelfCircleView(Context context) {    this(context, null);  }    @Override  protected void onDraw(Canvas canvas) {    super.onDraw(canvas);    int centre = getWidth() / 2; // 获取圆心的x坐标     int radius = centre - circleWidth / 2;// 半径     mPaint.setStrokeWidth(circleWidth); // 设置圆环的宽度     mPaint.setAntiAlias(true); // 消除锯齿     mPaint.setStyle(Paint.Style.STROKE); // 设置空心     RectF oval = new RectF(centre - radius, centre - radius, centre + radius, centre + radius); // 用于定义的圆弧的形状和大小的界限     if (!isNext) {// 第一颜色的圈完整,第二颜色跑       mPaint.setColor(firstColor); // 设置圆环的颜色       canvas.drawCircle(centre, centre, radius, mPaint); // 画出圆环       mPaint.setColor(secondColor); // 设置圆环的颜色       canvas.drawArc(oval, -90, mProgress, false, mPaint); // 根据进度画圆弧     } else {       mPaint.setColor(secondColor); // 设置圆环的颜色       canvas.drawCircle(centre, centre, radius, mPaint); // 画出圆环       mPaint.setColor(firstColor); // 设置圆环的颜色       canvas.drawArc(oval, -90, mProgress, false, mPaint); // 根据进度画圆弧     }  }  }

  最后是我们的布局文件:

<RelativeLayout   ="http://schemas.android.com/apk/res/com.example.myselfview"  android:layout_width="match_parent"  android:layout_height="match_parent" >    <com.example.myselfview.view.MySelfCircleView     android:layout_width="120dp"    android:layout_height="120dp"    android:layout_marginTop="20dp"    android:layout_alignParentTop="true"    android:layout_centerHorizontal="true"    zhy:circleWidth="15dp"    zhy:firstColor="#D4F668"    zhy:secondColor="#2F9DD2"    zhy:speed="10" />    <com.example.myselfview.view.MySelfCircleView     android:layout_width="200dp"    android:layout_height="200dp"    android:layout_alignParentBottom="true"    android:layout_centerHorizontal="true"    zhy:circleWidth="24dp"    android:layout_marginBottom="40dp"    zhy:firstColor="#16A3FA"    zhy:secondColor="#D20F02"    zhy:speed="5" />  </RelativeLayout>

  好了,到这里我们的效果就算大工告成,新童鞋的可以写写看,个人感觉自定义View需要大量的联系,才能为我所用。