圖片預(yù)覽

1. 分析和實(shí)現(xiàn)原理

1. 自定義一個(gè)圓環(huán) 2. 自定義ViewGroup，然后添加圓環(huán) 3. onMeasue和onLayout處理 4. 繪制文字

2. 繪制圓環(huán)

//平移坐標(biāo)系到中心點(diǎn) canvas.translate(mCenterX,mCenterY); mPaint.setColor(mRingColor); //兩種思路 畫圓 或者畫圓環(huán) canvas.drawCircle(0,0,mRingRadius,mPaint);//或者畫圓環(huán) // float left = -mRingRadius; // float top = -mRingRadius; // float right = mRingRadius; // float bottom = mRingRadius; // mRectF.set(left,top,right,bottom); // canvas.drawArc(mRectF,0,360,false,mPaint);

3. ViewGroup中添加圓環(huán)

int margin = dp2px(8); //添加5個(gè)圓環(huán) for (int i = 0; i < 5; i++) {MarginLayoutParams lp = new MarginLayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);lp.setMargins(margin, margin, 0, margin);addView(new RingProgressBar(context, attrs),lp); }

4. onMeasure處理

這個(gè)代碼都很簡(jiǎn)單 沒(méi)什么解釋的

@Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {super.onMeasure(widthMeasureSpec, heightMeasureSpec);int widthMode = MeasureSpec.getMode(widthMeasureSpec);int heightMode = MeasureSpec.getMode(heightMeasureSpec);int widthSize = MeasureSpec.getSize(widthMeasureSpec);int heightSize = MeasureSpec.getSize(heightMeasureSpec);//wrap_content計(jì)算寬高int width = 0;int height = 0;//計(jì)算上面 下面的寬高int tWidth = 0;int bWidth = 0;int tHeight = 0;int bHeight = 0;for (int i = 0; i < getChildCount(); i++) {View child = getChildAt(i);//測(cè)量每一個(gè)子孩子的寬高measureChild(child,widthMeasureSpec,heightMeasureSpec);MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();int cWidth = child.getMeasuredWidth() + lp.leftMargin;int cHeight = child.getMeasuredHeight() + lp.topMargin + lp.bottomMargin;if(i < 3){tWidth += cWidth;tHeight = cHeight;}else{bWidth += cWidth;bHeight = tHeight / 2 + cHeight;}}mRingMaxHeight = Math.max(tHeight,bHeight);width = Math.max(tWidth,bWidth);//要加上文字的高度和上下間距height = Math.max(tHeight,bHeight) + mENDescHeight + mCNDescHeight+ textSpacing * 2;//wrap_content 取子View測(cè)量的寬高int measureWidth = widthMode == MeasureSpec.AT_MOST ? width : widthSize;int measureHeight = heightMode == MeasureSpec.AT_MOST ? height : heightSize;setMeasuredDimension(measureWidth,measureHeight); }

5. onLayout處理

計(jì)算每一個(gè)圓環(huán)左上右下的值，完成布局，完成放置子View的位置

@Override protected void onLayout(boolean changed, int l, int t, int r, int b) {//上面下面子view距離左邊的間距int tLeft = 0;int bLeft = 0;int top = 0;for (int i = 0; i < getChildCount(); i++) {View child = getChildAt(i);//如果子View是GONE，則不處理if(child.getVisibility() == View.GONE){continue;}MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();int cWidth = child.getMeasuredWidth();int cHeight = child.getMeasuredHeight();//上面三個(gè)圓環(huán) top都是一樣的。//left值等于前一個(gè)圓環(huán)的寬度加上左邊的margin值if(i < 3){if(i == 0){tLeft = lp.leftMargin;}else {tLeft = tLeft + cWidth + lp.leftMargin;}top = lp.topMargin;child.layout(tLeft, top, tLeft + cWidth, top + cHeight);}else {//下面兩個(gè)圓環(huán)top的高度等于topMargin+上面圓環(huán)高度的1/2，左邊的left第一個(gè)圓環(huán)等于// 上面圓環(huán)的寬度取它的0.55倍+距離左邊的間距，第二個(gè)圓環(huán)等于下面// 第一個(gè)圓環(huán)的left+圓環(huán)寬度+leftMarginif( i == 3){bLeft = (int) (0.55f * cWidth + lp.leftMargin);}else{bLeft = bLeft + cWidth + lp.leftMargin;}top = (int) (lp.topMargin + 0.5 * cHeight);child.layout(bLeft,top,bLeft + cWidth,top + cHeight);}} }

6. 繪制文字

繪制文字的時(shí)候文字的top值=上面圓環(huán)的高度+文字之間的間距

@Override protected void onDraw(Canvas canvas) {super.onDraw(canvas);//畫文字float cnY = mRingMaxHeight + textSpacing;float enY = cnY + mCNDescHeight+ textSpacing;canvas.drawText(chineseDesc,mCenterX,cnY,mPaint);canvas.drawText(englishDesc,mCenterX, enY,mPaint); }

7. 小結(jié)和源碼下載

小結(jié)： 最核心還是onMeasure和onlayout的處理源碼下載： 最后統(tǒng)一提供代碼下載地址

8.聯(lián)系方式

QQ:1509815887

總結(jié)

以上是生活随笔為你收集整理的自定义ViewGroup之仿奥运五环的实现的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。