分享一個最近在項目中用到的一個視圖，具體的效果如下圖：

打包贈送一個帶光暈的按鈕效果。

但是因為時間比較緊，這兩個控件封裝的不是很好，使用的時候需要修改一些代碼中的參數（代碼中有詳細的comment，改起來還是很方便的……）

首先是上面的大圈圈。

package top.greendami.circleprogressview;import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.RadialGradient; import android.graphics.RectF; import android.graphics.Shader; import android.util.AttributeSet; import android.view.View;/*** Created by zhaopy on 2017/2/23.*/public class CircleProgressView extends View {private String title = "規范評價";//顯示的文字private float progress = 0; //顯示的進度private int mLayoutSize = 100;//整個控件的尺寸（方形）public int mColor;//主要顏色public int mColorBackground;public int mColorShadow;private float now = 0; //當前的進度public CircleProgressView(Context context) {super(context);}public CircleProgressView(Context context, AttributeSet attrs) {super(context, attrs);mColor = context.getResources().getColor(R.color.colorPrimary);mColorBackground = context.getResources().getColor(R.color.white);mColorShadow = context.getResources().getColor(R.color.shadow);}public CircleProgressView(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);}@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {super.onMeasure(widthMeasureSpec, heightMeasureSpec);int widthSpecSize = MeasureSpec.getSize(widthMeasureSpec);int heightSpecSize = MeasureSpec.getSize(heightMeasureSpec);mLayoutSize = Math.min(widthSpecSize,heightSpecSize);setMeasuredDimension(mLayoutSize, mLayoutSize);}@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);Shader mShader = new RadialGradient(mLayoutSize/2 , mLayoutSize/2, mLayoutSize/2,new int[]{Color.BLACK ,Color.DKGRAY , Color.GRAY ,Color.WHITE },null,Shader.TileMode.REPEAT);//畫陰影Paint paint3 = new Paint();paint3.setShader(mShader);canvas.drawCircle(mLayoutSize/2, mLayoutSize/2, mLayoutSize/2 * 0.99f, paint3);int centre = getWidth()/2; //獲取圓心的x坐標float radius = mLayoutSize/2 * 0.95f; //圓環的半徑//畫白圓Paint paint = new Paint();paint.setAntiAlias(true);paint.setColor(Color.WHITE);paint.setStyle(Paint.Style.FILL); //設置空心radius = mLayoutSize/2 * 0.925f; //圓環的半徑canvas.drawCircle(centre, centre, radius, paint); //畫出圓環//畫第一個扇形paint = new Paint();paint.setAntiAlias(true);paint.setColor(mColor);paint.setStyle(Paint.Style.FILL); //float boder = mLayoutSize/2 - radius;RectF rectF = new RectF(boder, boder ,mLayoutSize - boder, mLayoutSize - boder);canvas.drawArc(rectF,-90,360 * (now / 100),true,paint);//畫第二個內心圓，如果想讓線粗一點，把0.98f改小一點boder = boder * 1.2f;rectF = new RectF(boder, boder ,mLayoutSize - boder, mLayoutSize - boder);paint.setColor(Color.WHITE);canvas.drawCircle(centre, centre, radius * 0.98f, paint); //畫出圓//畫頂頭的小球，0.05f是小球的半徑paint.setColor(mColor);float r = radius * 0.98f;canvas.drawCircle(r + (float)(r * Math.sin(Math.toRadians(360 * (now / 100)))) + boder,r + boder - (float)(r * Math.cos(Math.toRadians(360 * (now / 100)))) ,radius * 0.05f , paint);String per = now + "%";//寫文字，1.1f控制百分比字的Y軸位置//寫百分比paint.measureText(per);paint.setColor(mColor);paint.setTextSize(mLayoutSize/5);//控制文字大小canvas.drawText(per,centre - paint.measureText(per)/2,centre - (paint.ascent()+ paint.descent()) * 1.1f ,paint);//寫標題paint.setColor(Color.GRAY);paint.setTextSize(mLayoutSize/10);//控制文字大小canvas.drawText(title,centre - paint.measureText(title)/2,centre + (paint.ascent()+ paint.descent()) ,paint);if(now < progress - 1){now = now + 1 ;postInvalidate();}else if(now < progress){now = progress;postInvalidate();}}//外部回掉public void setProgress(float progress,boolean isAnim) {this.progress = progress;if(!isAnim){now = progress;}postInvalidate();} }復制代碼

下面是按鈕的drawable，這個按鈕就是用一個drawable實現的，然后當作按鈕的背景，實現的思路是畫幾個連續的圓形廣韻，然后給按鈕的主體背景（圓角矩形）加上padding。

<?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"><!--畫出背景的光暈 --><item android:left="65dp"><shape android:shape="rectangle"><gradientandroid:endColor="#00fffaf0"android:startColor="#8049c29d"android:type="radial"android:gradientRadius="100"/></shape></item><item android:left="25dp"><shape android:shape="rectangle" ><gradientandroid:endColor="#00fffaf0"android:startColor="#8049c29d"android:type="radial"android:gradientRadius="100"/></shape></item><item ><shape android:shape="rectangle" ><gradientandroid:endColor="#00fffaf0"android:startColor="#8049c29d"android:type="radial"android:gradientRadius="100"/></shape></item><item android:right="25dp"><shape android:shape="rectangle" ><gradientandroid:endColor="#00fffaf0"android:startColor="#8049c29d"android:type="radial"android:gradientRadius="100"/></shape></item><item android:right="65dp"><shape android:shape="rectangle" ><gradientandroid:endColor="#00fffaf0"android:startColor="#8049c29d"android:type="radial"android:gradientRadius="100"/></shape></item><!-- 畫出按鈕--><item android:bottom="10dp" android:right="10dp" android:left="10dp" android:top="10dp"><shapeandroid:shape="rectangle"android:useLevel="false"><corners android:radius="30dp" /><solid android:color="@color/colorPrimary" /></shape></item></layer-list> 復制代碼

使用方法，我這里固定的按鈕的大小，如果需要調整按鈕大小的話，需要改變drawable中光暈的位置（）和光暈的大小（android:gradientRadius="100"）

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main"android:layout_width="match_parent" android:layout_height="match_parent"android:paddingBottom="@dimen/activity_vertical_margin"android:paddingLeft="@dimen/activity_horizontal_margin"android:paddingRight="@dimen/activity_horizontal_margin"android:paddingTop="@dimen/activity_vertical_margin"android:background="@color/white"tools:context="top.greendami.circleprogressview.MainActivity"><top.greendami.circleprogressview.CircleProgressViewandroid:id="@+id/cv"android:background="@color/white"android:layout_width="400dp"android:layout_height="400dp" /><Buttonandroid:layout_centerHorizontal="true"android:layout_alignParentBottom="true"style="?android:attr/borderlessButtonStyle"android:textColor="@color/white"android:background="@drawable/green_button_normal"android:text="開始工作"android:layout_width="130dp"android:layout_height="65dp" /> </RelativeLayout>復制代碼

在Activity中設置進度

CircleProgressView CV = (CircleProgressView)findViewById(R.id.cv);CV.setProgress(35.8f); 復制代碼

總結

以上是生活随笔為你收集整理的Android鬼点子 CircleProgressView的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。