首页 > 系统 > Android > 正文

Android自定义View实现圆环交替效果

2019-12-12 05:35:59
字体:
来源:转载
供稿:网友

下面请先看效果图:

  

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

首先是我们的attrs文件:

<?xml version="1.0" encoding="utf-8"?><resources>  <attr name="firstColor" format="color"/> <attr name="secondColor" format="color"/> <attr name="circleWidth" format="dimension"/> <attr name="speed" format="integer"/>  <declare-styleable name="CustomView">  <attr name="firstColor" />  <attr name="secondColor" />  <attr name="circleWidth" />  <attr name="speed" /> </declare-styleable> </resources>

接下来是我们重写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 xmlns:android="http://schemas.android.com/apk/res/android" xmlns:zhy="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需要大量的练习,才能为我所用。希望本文对大家开发Android能有所帮助。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表