Android自定义ViewGroup绘制圆圈行

Question

我必须创建一个小部件，其中显示了一行中的3个圆圈，并在其上应用动画来更改Alpha值。我试图扩展相对布局，但它没有正确显示。 我试图通过在画布上绘制圆来扩展视图，但我不知道如何在画布上设置动画。 我去了第三个选项来创建一个圆的视图，并创建一个视图组，并将三个圆视图添加到视图组并将动画应用到视图组上。但我无法计算出正确的测量值。所以圈子没有出现。为了绘制圆，我需要一个中心点绘制。但是这个小部件可以放在屏幕上的任何地方。我该如何添加圈子？ 我该采取什么样的途径来绘制这些3圈： 这里是我的代码

DotsView.java

public class DotsView extends View { 

    private final float xAxis,yAxis; 
    private final int radius; 
    Paint paint; 

    public DotsView(Context context,float xAxis, float yAxis, int radius) { 
     super(context); 

     this.xAxis = xAxis; 
     this.yAxis = yAxis; 
     this.radius = radius; 

     paint = new Paint(); 
     paint.setColor(Color.BLACK); 
     paint.setStyle(Paint.Style.FILL); 
    } 

    @Override 
    protected void onDraw(Canvas canvas){ 
     canvas.drawCircle(xAxis,yAxis,radius, paint); 
    } 

} 

ThreeDots.java

public class ThreeDots extends ViewGroup { 

    private static final int leftCircle = 0; 
    private static final int middleCircle = 1; 
    private static final int rightCircle = 2; 
    private Point center; 
    private int size; 
    DotsView left; 
    DotsView middle; 
    DotsView right; 

    public ThreeDots(Context context) { 
     super(context); 
     center = new Point(); 
     createDots(context); 
    } 

    public ThreeDots(Context context, AttributeSet attrs) { 
     super(context, attrs); 
     center = new Point(); 
     createDots(context); 
    } 

    @Override 
    protected void onMeasure(int widthSpec, int heightSpec) { 
     int measuredWidth = MeasureSpec.getSize(widthSpec); 
     int measuredHeight = MeasureSpec.getSize(heightSpec); 
     size = Math.min(measuredWidth, measuredHeight); 
     center.x = center.y = measuredWidth/2; 

     int childSpec = MeasureSpec.makeMeasureSpec(size, MeasureSpec.EXACTLY); 
     // left.measure(widthMeasureSpec, heightMeasureSpec); 
     // left.measure(25, 25); 
     // middle.measure(25, 25); 
     // right.measure(25, 25); 
     setMeasuredDimension(measuredWidth, measuredHeight); 
    } 

    @Override 
    protected void onLayout(boolean changed, int l, int t, int r, int b) { 
     this.left.layout(0, 0, 25, 25); 
     this.middle.layout(0, 0, 25, 25); 
     this.right.layout(0, 0, 25, 25); 
    } 

    public void createDots(Context context) { 
     int radius = 10; 
     int centerXAxis = center.x; 
     int centerYAxis = center.y; 

     LayoutParams circleParams = new LayoutParams(LayoutParams.WRAP_CONTENT, 
       LayoutParams.WRAP_CONTENT); 

     left = new DotsView(context, centerXAxis - (radius * 3), centerYAxis, radius); 
     left.setLayoutParams(circleParams); 
     left.setId(leftCircle); 

     middle = new DotsView(context, centerXAxis, centerYAxis, radius); 
     middle.setLayoutParams(circleParams); 
     middle.setId(middleCircle); 

     right = new DotsView(context, centerXAxis + (radius * 3), centerYAxis, radius); 
     right.setLayoutParams(circleParams); 
     right.setId(rightCircle); 

     final AnimatorSet animSet = new AnimatorSet(); 
     animSet.playSequentially(alphaAnimate(left), alphaAnimate(middle), alphaAnimate(right)); 
     animSet.start(); 
     animSet.addListener(new AnimatorListener() { 
      @Override 
      public void onAnimationStart(Animator animation) { 
      } 

      @Override 
      public void onAnimationRepeat(Animator animation) { 
      } 

      @Override 
      public void onAnimationEnd(Animator animation) { 
       animSet.start(); 
      } 

      @Override 
      public void onAnimationCancel(Animator animation) { 
      } 
     }); 

     this.addView(left, 0); 
     this.addView(middle, 1); 
     this.addView(right, 2); 
    } 

    private ValueAnimator alphaAnimate(DotsView view) { 
     ValueAnimator alphaAnim = ObjectAnimator.ofFloat(view, "alpha", 1f, 0.5f); 
     alphaAnim.setDuration(500); 
     return alphaAnim; 
    } 

} 


layout.xml 
<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 

    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:background="@color/white"> 

    <com.android.champ.ThreeDots 
     xmlns:custom="http://schemas.android.com/apk/res-auto" 
     android:id="@+id/load_more_progress" 
     android:layout_width="100dp" 
     android:layout_height="100dp" 
     android:background="@color/blue_background" 
     /> 

    </RelativeLayout> 

Answer 1

延伸查看和onDraw有借鉴这三个圈merhod。对于Canvas动画，请参阅我对此问题的回答：How to maintain multi layers of ImageViews and keep their aspect ratio based on the largest one?