0

3 つの円を連続して表示するウィジェットを作成し、その上にアニメーションを適用してアルファ値を変更する必要があります。相対レイアウトを拡張しようとしましたが、正しく表示されません。キャンバスに円を描いてビューを拡張しようとしましたが、キャンバスにアニメーションを設定する方法がわかりません。円のビューを作成してビュー グループを作成し、3 つの円ビューをビュー グループに追加してアニメーションを適用する 3 番目のオプションを選択しました。しかし、正しい onMeasure 値を計算できません。したがって、円は表示されません。円を描くには、描く中心点が必要です。ただし、ウィジェットは画面上のどこにでも配置できます。その時点で円を追加するにはどうすればよいですか。これらの 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>
4

1 に答える 1

1

これらの 3 つの円を onDraw merhod で表示および描画します。キャンバス アニメーションについては、この質問に対する私の回答を参照してください。

于 2013-09-26T20:33:45.553 に答える