android-circlebutton介紹

版本：1.0 日期：2014.3.21 著作權：© 2014 kince 轉載註明出處
android-circlebutton是github上的一個開源項目，正如它的簡介一樣：Circle button widget fZ喎?http://www.bkjia.com/kf/ware/vc/" target="_blank" class="keylink">vciBBbmRyb2lko6y+zcrH0ru49tSy0M61xGJ1dHRvbqGjy/zT69K7sOPUstDOtcRidXR0b26yu82s1q60ptTa09rL/MrHu62z9sC0tcSjrMr009rX1Lao0uVVSbXEt7az66Os0vK0y87SxMPAtL3pydzSu8/Co6y2+MPHxr2zo9K7sOPKudPDtcRidXR0b26/ycTcysfAtNfU09rDwLmktcTNvMasoaPL/LXEusO0psrHvdrKocHL18rUtL/VvOSjrLWxyLvIsbXj0rK63MP3z9S/qreiyMvUsdKy0qqyztPrvefD5snovMbV4r/pwcuho8bkyrXV4tH50rKyu8Tcy7Wyu7rDo6y3tLn9wLTP67z1ydnBy7bUw8C5pLXE0sDAtaOstvjH0tKysci9z8rKus+/qreiyMvUsdfUvLrIpcq1z9bSu9CpseLGvbuvtcS2q873o6zS8s6qy/y63LzyveChoyAgytfPyL+0tPrC66OsPHByZSBjbGFzcz0="brush:java;">package com.example.circlebutton;import android.animation.ObjectAnimator;import android.content.Context;import android.content.res.TypedArray;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.util.AttributeSet;import android.util.TypedValue;import android.widget.ImageView;public class CircleButton extends ImageView { private static final int PRESSED_COLOR_LIGHTUP = 255 / 25; private static final int PRESSED_RING_ALPHA = 75; private static final int DEFAULT_PRESSED_RING_WIDTH_DIP = 4; private static final int ANIMATION_TIME_ID = android.R.integer.config_shortAnimTime; private int centerY; private int centerX; private int outerRadius; private int pressedRingRadius; private Paint circlePaint; private Paint focusPaint; private float animationProgress; private int pressedRingWidth; private int defaultColor = Color.BLACK; private int pressedColor; private ObjectAnimator pressedAnimator; public CircleButton(Context context) { super(context); init(context, null); } public CircleButton(Context context, AttributeSet attrs) { super(context, attrs); init(context, attrs); } public CircleButton(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); init(context, attrs); } @Override public void setPressed(boolean pressed) { super.setPressed(pressed); if (circlePaint != null) { circlePaint.setColor(pressed ? pressedColor : defaultColor); } if (pressed) { showPressedRing(); } else { hidePressedRing(); } } @Override protected void onDraw(Canvas canvas) { canvas.drawCircle(centerX, centerY, pressedRingRadius + animationProgress, focusPaint); canvas.drawCircle(centerX, centerY, outerRadius - pressedRingWidth, circlePaint); super.onDraw(canvas); } @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); centerX = w / 2; centerY = h / 2; outerRadius = Math.min(w, h) / 2; pressedRingRadius = outerRadius - pressedRingWidth - pressedRingWidth / 2; } public float getAnimationProgress() { return animationProgress; } public void setAnimationProgress(float animationProgress) { this.animationProgress = animationProgress; this.invalidate(); } public void setColor(int color) { this.defaultColor = color; this.pressedColor = getHighlightColor(color, PRESSED_COLOR_LIGHTUP); circlePaint.setColor(defaultColor); focusPaint.setColor(defaultColor); focusPaint.setAlpha(PRESSED_RING_ALPHA); this.invalidate(); } private void hidePressedRing() { pressedAnimator.setFloatValues(pressedRingWidth, 0f); pressedAnimator.start(); } private void showPressedRing() { pressedAnimator.setFloatValues(animationProgress, pressedRingWidth); pressedAnimator.start(); } private void init(Context context, AttributeSet attrs) { this.setFocusable(true); this.setScaleType(ScaleType.CENTER_INSIDE); setClickable(true); circlePaint = new Paint(Paint.ANTI_ALIAS_FLAG); circlePaint.setStyle(Paint.Style.FILL); focusPaint = new Paint(Paint.ANTI_ALIAS_FLAG); focusPaint.setStyle(Paint.Style.STROKE); pressedRingWidth = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, DEFAULT_PRESSED_RING_WIDTH_DIP, getResources() .getDisplayMetrics()); int color = Color.BLACK; if (attrs != null) { final TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.CircleButton); color = a.getColor(R.styleable.CircleButton_cb_color, color); pressedRingWidth = (int) a.getDimension(R.styleable.CircleButton_cb_pressed_ring_width, pressedRingWidth); a.recycle(); } setColor(color); focusPaint.setStrokeWidth(pressedRingWidth); final int pressedAnimationTime = getResources().getInteger(ANIMATION_TIME_ID); pressedAnimator = ObjectAnimator.ofFloat(this, "animationProgress", 0f, 0f); pressedAnimator.setDuration(pressedAnimationTime); } private int getHighlightColor(int color, int amount) { return Color.argb(Math.min(255, Color.alpha(color)), Math.min(255, Color.red(color) + amount), Math.min(255, Color.green(color) + amount), Math.min(255, Color.blue(color) + amount)); }} 繼承了ImageView，這也註定了沒有文字效果，所以如果你還想有文字效果，那麼可以繼承於button。看一下變數，除了Paint之外，再也就是3.0之後引入的屬性動畫ObjectAnimator這個類。既然是屬性動畫，當然是改變屬性值了（不斷更改對象的屬性值），在這裡就是改變button的顏色值。 構造方法裡，還是常規的初始化paint、從attrs裡擷取屬性值以及設定一些其他變數值，還要就是ObjectAnimator的初始化。然後CircleButton類會進入onSizeChanged方法，在這個方法裡初始化了CircleButton的圓形座標以及其他的變數。接著進入onDraw方法，在這裡面繪製CircleButton，代碼如下：

  canvas.drawCircle(centerX, centerY, pressedRingRadius + animationProgress, focusPaint);  canvas.drawCircle(centerX, centerY, outerRadius - pressedRingWidth, circlePaint);

可以看到它繪製了兩個圓形，其實是這樣的，從兩個Paint變數就可以看出：一個是cirlcePaint，它的Style是FILL類型的，說明它畫的是實心圓也就是預設狀態下的button。另一個focusPaint是擷取焦點時候調用的，它的Style是STROKE類型的，所以畫出一個圓環效果，這也就是點擊button之後出現的。但是看一下這兩個圓環的半徑發現實心圓的半徑比空心圓的半徑要大4。那把畫實心圓的代碼注釋掉，效果是這樣的： 看完就明白了，原來是實心圓把空心圓給遮住了，所以預設情況下，看到的是實心圓。當點擊button的時候，執行setPressed()方法，這個方法在裡面會調用showPressedRing()方法，也就是開啟動畫效果。這樣，關於CircleButton的機制就清楚了。