如今APP越來越多,我們每天所使用的的軟件也越來越多,可是在我們不付費的情況下,App制造商如何實現,實現收入甚至是盈利呢?答案就是在我們打開軟件所必須經過的地方穿插廣告,當然為了顧及用戶的感受,一般都會以倒計時的形式展示給用戶,用戶可以選擇跳過.可能是因為自己的強迫癥,總想著是怎么做的,自己就嘗試了一下,分享給大家的同時,順便加深自己的理解.效果如圖：
1.為了滿足產品和設計,先搞幾個自定義屬性
1)內層背景
2)數字的顏色
3)外層圓環寬度
4)文字大小
5)外層圓環顏色
6)圓的半徑
這里,我的外環顏色和文字顏色相同,具體的自定義屬性如下:
<declare-styleable name="AdTimePickView"> <attr name="mSmallCircleBg" format="color"></attr> <attr name="mTextSize1" format="dimension"></attr> <attr name="mTextColor1" format="color"></attr> <attr name="mProgressWidth" format="dimension"></attr> <attr name="mRadius" format="dimension"></attr> </declare-styleable>
--------------------------------------------------------------------------------
2.在自定義View的構造方法中讀取自定義屬性:
mProgressViewWidth = typedArray.getDimensionPixelSize(R.styleable.AdTimePickView_mProgressWidth, DEFAULT_PROGRESS_WIDTH); mRadius = typedArray.getDimensionPixelSize(R.styleable.AdTimePickView_mRadius1, DEFAULT_RADIUS); mSmallCircleBg = typedArray.getColor(R.styleable.AdTimePickView_mSmallCircleBg, Color.parseColor(DEFAULT_BG_COLOR)); mTextSize = typedArray.getDimensionPixelSize(R.styleable.AdTimePickView_mTextSize1, DEFAULT_TEXT_SIZE); mTextColor = typedArray.getColor(R.styleable.AdTimePickView_mTextColor1, Color.parseColor(DEFAULT_TEXT_COLOR));
--------------------------------------------------------------------------------
3.重寫onMeasure()方法,
根據寬高得出半徑,為什么不適用自定義半徑呢?因為根據寬高得出的半徑才是這個View的內切圓半徑,自定義半徑只是為了在根據寬高無法得出半徑的情況下才使用的.
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); mWidth = getViewSize(widthMeasureSpec, 0); mHeight = getViewSize(heightMeasureSpec, 1); mRadius = Math.min(mWidth, mHeight) / 2; setMeasuredDimension(mWidth, mHeight); }getViewSize方法如下：
private int getViewSize(int viewMeasureSpec, int type) { int viewValue = 0; int viewSize = MeasureSpec.getSize(viewMeasureSpec); int viewMode = MeasureSpec.getMode(viewMeasureSpec); if (MeasureSpec.EXACTLY == viewMode) { viewValue = viewSize; if (type == 0) { mCirCleX = viewSize / 2; } else { mCircleY = viewSize / 2; } } else { if (type == 0) { mCirCleX = mRadius; } else { mCircleY = mRadius; } viewValue = 2 * (mRadius + mProgressViewWidth); } return viewValue; }--------------------------------------------------------------------------------
4.onDraw方法進行繪制
1)繪制內層圓
canvas.drawCircle(mCirCleX, mCircleY, (float) (mRadius - 1.5 * mProgressViewWidth), mPaint);
2)繪制文字,要計算好文字的位置,保持居中
Rect textRect = getTextRect(String.valueOf(mAdTIme)); Paint.FontMetrics fontMetrics = mTextPaint.getFontMetrics(); int baseLine = (int) (mHeight / 2 + (fontMetrics.descent - fontMetrics.ascent) / 2 - fontMetrics.descent); int x = mWidth / 2 - textRect.width() / 2; canvas.drawText(String.valueOf(mAdTIme), x, baseLine, mTextPaint);//獲取繪制內容的Rect private Rect getTextRect(String centerContent) { Rect rect = new Rect(); mTextPaint.getTextBounds(centerContent, 0, centerContent.length(), rect); return rect; }3)繪制外層不斷刷新的圓環
原理:從360度開始每隔一段時間進行圓弧繪制,角度分別為:360,359,1,0,因此需要一個輪詢器,不斷的去繪制刷新.
繪制圓弧的代碼：
//保存Canvans的狀態,因為繪制其他地方時,Canvas坐標系不需要變化 canvas.save(); //將坐標系圍繞View的中心逆時針旋轉90度數,為了從正上方開始繪制 canvas.rotate(-90, mCirCleX, mCircleY); //計算圓弧的RectF RectF rectF = new RectF(mCirCleX - mRadius + mProgressViewWidth, mCirCleX - mRadius + mProgressViewWidth, mCirCleX + mRadius - mProgressViewWidth, mCirCleX + mRadius - mProgressViewWidth); //第四個參數表示逆時針還是順時針繪制 canvas.drawArc(rectF, 0, -mCurrentAngle, false, mPaint); //恢復坐標系 canvas.restore();
--------------------------------------------------------------------------------
5.刷新的輪詢器
1)使用RxAndroid和lambda實現
//interval操作符：從1開始每隔一段時間發射遞增的數Observable.interval(1, TIME_DIFF, TimeUnit.MILLISECONDS) //map操作符將發射的數據轉換成我們需要的數據 .map(value -> { return countAngel - value.intValue(); }) //限制發射的數據個數，讓其停止，負責會一直發射下去 .limit(361) //接收結果并處理 .subscribe(action -> { if (action % 72 == 0) { mAdTIme = action / 72; } mCurrentAngle = action; AdTimePickView.this.postInvalidate(); });2)使用線程的方式實現
new Thread(new Runnable() { @Override public void run() { for (int i = 360; i>=0;i--){ try { Thread.sleep(100); } catch (InterruptedException e) { e.printStackTrace(); } if (i % 72 == 0) { mAdTIme = i / 72; } mCurrentAngle = i; AdTimePickView.this.postInvalidate(); } } }).start();OK,這樣我們的廣告倒計時View就完成了,歡迎大家指正.
附:整個自定義View的代碼
public class AdTimePickView extends View {private Paint mPaint;private Paint mTextPaint;//大圓半徑private int mRadius = 200;//內層小圓背景private int mSmallCircleBg = Color.parseColor("#66f1679b");//小圓外層線條寬度private int mProgressViewWidth = 10;private float mCurrentAngle;private static final int TIME_DIFF = 25;//圓心坐標private int mCirCleX;private int mCircleY;//測量之后View的寬高,繪制中心文字時需要用到private int mWidth;private int mHeight;//中心文字的大小與樣式private int mTextSize;private int mTextColor;//廣告總時間private int mAdTIme = 5;private Context mContext;public AdTimePickView(Context context) { this(context, null);}public AdTimePickView(Context context, AttributeSet attrs) { this(context, attrs, 0);}public AdTimePickView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.AdTimePickView, defStyleAttr, 0); mProgressViewWidth = typedArray.getDimensionPixelSize(R.styleable.AdTimePickView_mProgressWidth, 10); mRadius = typedArray.getDimensionPixelSize(R.styleable.AdTimePickView_mRadius1, 100); mSmallCircleBg = typedArray.getColor(R.styleable.AdTimePickView_mSmallCircleBg, Color.parseColor("#66f1679b")); mTextSize = typedArray.getDimensionPixelSize(R.styleable.AdTimePickView_mTextSize1, 20); mTextColor = typedArray.getColor(R.styleable.AdTimePickView_mTextColor1, Color.parseColor("#333333")); //注意資源的回收 typedArray.recycle(); this.mContext = context; init();}private void init() { mPaint = new Paint(Paint.ANTI_ALIAS_FLAG); mPaint.setAntiAlias(true); mTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG); mTextPaint.setColor(mTextColor); mTextPaint.setTextSize(mTextSize); mTextPaint.setStyle(Paint.Style.FILL); mTextPaint.setAntiAlias(true);}@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); mWidth = getViewSize(widthMeasureSpec, 0); mHeight = getViewSize(heightMeasureSpec, 1); //大半徑 mRadius = Math.min(mWidth, mHeight) / 2; setMeasuredDimension(mWidth, mHeight);}private int getViewSize(int viewMeasureSpec, int type) { int viewValue = 0; int viewSize = MeasureSpec.getSize(viewMeasureSpec); int viewMode = MeasureSpec.getMode(viewMeasureSpec); if (MeasureSpec.EXACTLY == viewMode) { viewValue = viewSize; if (type == 0) { mCirCleX = viewSize / 2; } else { mCircleY = viewSize / 2; } } else { if (type == 0) { mCirCleX = mRadius; } else { mCircleY = mRadius; } viewValue = 2 * (mRadius + mProgressViewWidth); } return viewValue;}@Overrideprotected void onDraw(Canvas canvas) { super.onDraw(canvas); mPaint.setColor(mSmallCircleBg); mPaint.setStyle(Paint.Style.FILL); canvas.drawCircle(mCirCleX, mCircleY, (float) (mRadius - 1.5 * mProgressViewWidth), mPaint); //設置畫筆狀態 mPaint.setColor(mTextColor); mPaint.setStyle(Paint.Style.STROKE); mPaint.setStrokeWidth(mProgressViewWidth); //保存Canvans的狀態 canvas.save(); //將坐標系圍繞View的中心逆時針旋轉90度數 canvas.rotate(-90, mCirCleX, mCircleY); RectF rectF = new RectF(mCirCleX - mRadius + mProgressViewWidth, mCirCleX - mRadius + mProgressViewWidth, mCirCleX + mRadius - mProgressViewWidth, mCirCleX + mRadius - mProgressViewWidth); //第四個參數表示逆時針還是順時針繪制 canvas.drawArc(rectF, 0, -mCurrentAngle, false, mPaint); canvas.restore(); Rect textRect = getTextRect(String.valueOf(mAdTIme)); Paint.FontMetrics fontMetrics = mTextPaint.getFontMetrics(); int baseLine = (int) (mHeight / 2 + (fontMetrics.descent - fontMetrics.ascent) / 2 - fontMetrics.descent); int x = mWidth / 2 - textRect.width() / 2; canvas.drawText(String.valueOf(mAdTIme), x, baseLine, mTextPaint);}private Rect getTextRect(String centerContent) { Rect rect = new Rect(); mTextPaint.getTextBounds(centerContent, 0, centerContent.length(), rect); return rect;}public void refresh() { final int countAngel = 360; Observable.interval(1, TIME_DIFF, TimeUnit.MILLISECONDS) .map(value -> { return countAngel - value.intValue(); }) .limit(361) .subscribe(action -> { if (action % 72 == 0) { mAdTIme = action / 72; } mCurrentAngle = action; AdTimePickView.this.postInvalidate(); });}}以上所述是小編給大家介紹的Android 自定義閃屏頁廣告倒計時view效果，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的，在此也非常感謝大家對VEVB武林網網站的支持！
新聞熱點
疑難解答
