Android自定義view實現(xiàn)圓環(huán)效果實例代碼
先上效果圖,如果大家感覺不錯,請參考實現(xiàn)代碼。
重要的是如何實現(xiàn)自定義的view效果
(1)創(chuàng)建類,繼承view,重寫onDraw和onMesure方法
public class CirclePercentBar extends View{ private Context mContext; private int mArcColor; private int mArcWidth; private int mCenterTextColor; private int mCenterTextSize; private int mCircleRadius; private Paint arcPaint; private Paint arcCirclePaint; private Paint centerTextPaint; private RectF arcRectF; private Rect textBoundRect; private float mCurData=0; private int arcStartColor; private int arcEndColor; private Paint startCirclePaint; public CirclePercentBar(Context context) { this(context, null); } public CirclePercentBar(Context context, AttributeSet attrs) { this(context, attrs, 0); } public CirclePercentBar(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); mContext=context; TypedArray typedArray=context.obtainStyledAttributes(attrs,R.styleable.CirclePercentBar,defStyleAttr,0); mArcColor = typedArray.getColor(R.styleable.CirclePercentBar_arcColor,0xff0000); mArcWidth = typedArray.getDimensionPixelSize(R.styleable.CirclePercentBar_arcWidth, DisplayUtil.dp2px(context, 20)); mCenterTextColor = typedArray.getColor(R.styleable.CirclePercentBar_centerTextColor, 0x0000ff); mCenterTextSize = typedArray.getDimensionPixelSize(R.styleable.CirclePercentBar_centerTextSize, DisplayUtil.dp2px(context, 20)); mCircleRadius = typedArray.getDimensionPixelSize(R.styleable.CirclePercentBar_circleRadius, DisplayUtil.dp2px(context, 100)); arcStartColor = typedArray.getColor(R.styleable.CirclePercentBar_arcStartColor, ContextCompat.getColor(mContext, R.color.green)); arcEndColor = typedArray.getColor(R.styleable.CirclePercentBar_arcEndColor, ContextCompat.getColor(mContext, R.color.yellow)); typedArray.recycle(); initPaint(); } private void initPaint() { startCirclePaint = new Paint(Paint.ANTI_ALIAS_FLAG); startCirclePaint.setStyle(Paint.Style.FILL); //startCirclePaint.setStrokeWidth(mArcWidth); startCirclePaint.setColor(arcStartColor); arcCirclePaint = new Paint(Paint.ANTI_ALIAS_FLAG); arcCirclePaint.setStyle(Paint.Style.STROKE); arcCirclePaint.setStrokeWidth(mArcWidth); arcCirclePaint.setColor(ContextCompat.getColor(mContext,R.color.colorAccent)); arcCirclePaint.setStrokeCap(Paint.Cap.ROUND); arcPaint = new Paint(Paint.ANTI_ALIAS_FLAG); arcPaint.setStyle(Paint.Style.STROKE); arcPaint.setStrokeWidth(mArcWidth); arcPaint.setColor(mArcColor); arcPaint.setStrokeCap(Paint.Cap.ROUND); centerTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG); centerTextPaint.setStyle(Paint.Style.STROKE); centerTextPaint.setColor(mCenterTextColor); centerTextPaint.setTextSize(mCenterTextSize); //圓弧的外接矩形 arcRectF = new RectF(); //文字的邊界矩形 textBoundRect = new Rect(); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); setMeasuredDimension(measureDimension(widthMeasureSpec),measureDimension(heightMeasureSpec)); } private int measureDimension(int measureSpec) { int result; int specMode=MeasureSpec.getMode(measureSpec); int specSize=MeasureSpec.getSize(measureSpec); if(specMode==MeasureSpec.EXACTLY){ result=specSize; }else{ result=mCircleRadius*2; if(specMode==MeasureSpec.AT_MOST){ result=Math.min(result,specSize); } } return result; } @Override protected void onDraw(Canvas canvas) { canvas.rotate(-90, getWidth()/ 2, getHeight()/ 2); arcRectF.set(getWidth()/2-mCircleRadius+mArcWidth/2,getHeight()/2-mCircleRadius+mArcWidth/2 ,getWidth()/2+mCircleRadius-mArcWidth/2,getHeight()/2+mCircleRadius-mArcWidth/2); canvas.drawArc(arcRectF, 0,360,false,arcCirclePaint); arcPaint.setShader(new SweepGradient(getWidth()/2,getHeight()/2,arcStartColor,arcEndColor)); canvas.drawArc(arcRectF, 0,360* mCurData /100,false,arcPaint); canvas.rotate(90, getWidth()/ 2, getHeight()/ 2); canvas.drawCircle(getWidth()/2,getHeight()/2-mCircleRadius+mArcWidth/2,mArcWidth/2,startCirclePaint); String data= String.valueOf(mCurData) +"%"; centerTextPaint.getTextBounds(data,0,data.length(),textBoundRect); canvas.drawText(data,getWidth()/2-textBoundRect.width()/2,getHeight()/2+textBoundRect.height()/2,centerTextPaint); } public void setPercentData(float data, TimeInterpolator interpolator){ ValueAnimator valueAnimator=ValueAnimator.ofFloat(mCurData,data); valueAnimator.setDuration((long) (Math.abs(mCurData-data)*30)); valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator valueAnimator) { float value= (float) valueAnimator.getAnimatedValue(); mCurData=(float)(Math.round(value*10))/10; invalidate(); } }); valueAnimator.setInterpolator(interpolator); valueAnimator.start(); } }
(2)其中需要用到的類
public class DisplayUtil { public static int px2dp(Context context,float pxValue){ final float scale=context.getResources().getDisplayMetrics().density; return (int)(pxValue/scale+0.5f); } public static int dp2px(Context context,float dpValue){ final float scale=context.getResources().getDisplayMetrics().density; return (int)(dpValue*scale+0.5f); } }
(3)attrs.xml
<?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="CirclePercentBar"> <attr name="arcColor" format="color"/> <attr name="arcWidth" format="dimension"/> <attr name="centerTextColor" format="color"/> <attr name="centerTextSize" format="dimension"/> <attr name="circleRadius" format="dimension"/> <attr name="arcStartColor" format="color"/> <attr name="arcEndColor" format="color"/> </declare-styleable> </resources>
(4)在activity_main里面寫布局
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <com.example.administrator.textc.CirclePercentBar android:id="@+id/circle_bar" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="20dp" android:layout_gravity="center_horizontal" app:arcWidth="30dp" app:circleRadius="100dp" app:centerTextSize="30sp" app:arcColor="@color/colorPrimary" app:centerTextColor="@color/colorAccent" app:arcStartColor="@android:color/holo_green_light"/> <Button android:id="@+id/start_btn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="隨機(jī)"/> </LinearLayout>
(6)編程實現(xiàn)效果:
public class MainActivity extends AppCompatActivity { CirclePercentBar circlePercentBar; Button startBtn; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); circlePercentBar= (CirclePercentBar) findViewById(R.id.circle_bar); circlePercentBar.setPercentData(55.2f,new DecelerateInterpolator()); startBtn= (Button) findViewById(R.id.start_btn); startBtn.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { circlePercentBar.setPercentData((float) (100*Math.random()),new DecelerateInterpolator()); } }); } }
總結(jié)
以上所述是小編給大家介紹的Android自定義view實現(xiàn)圓環(huán)效果實例代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
- Android實現(xiàn)長按圓環(huán)動畫View效果的思路代碼
- Android自定義View實現(xiàn)圓環(huán)進(jìn)度條
- Android自定義View實現(xiàn)圓環(huán)帶數(shù)字百分比進(jìn)度條
- android自定義View實現(xiàn)圓環(huán)顏色選擇器
- Android自定義view繪制圓環(huán)占比動畫
- Android自定義View實現(xiàn)圓環(huán)交替效果
- Android中自定義View實現(xiàn)圓環(huán)等待及相關(guān)的音量調(diào)節(jié)效果
- Android自定義View之酷炫數(shù)字圓環(huán)
- Android開發(fā)筆記之:在ImageView上繪制圓環(huán)的實現(xiàn)方法
- Android自定義view實現(xiàn)半圓環(huán)效果
相關(guān)文章
Android Studio 3.0上分析內(nèi)存泄漏的原因
本篇文章主要介紹了Android Studio 3.0上分析內(nèi)存泄漏的原因,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-11-11Android框架Volley使用之Post請求實現(xiàn)方法
這篇文章主要介紹了Android框架Volley使用之Post請求實現(xiàn)方法,,本文通過實例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05初識Android?PowerManagerService省電模式
這篇文章主要介紹了初識Android?PowerManagerService省電模式,文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價值,感興趣的小伙伴可以參考一下2022-08-08Android實現(xiàn)手勢滑動多點觸摸縮放平移圖片效果(二)
這篇文章主要介紹了Android實現(xiàn)手勢滑動多點觸摸縮放平移圖片效果,實現(xiàn)圖片支持多點觸控,自由的進(jìn)行縮放、平移的注意事項,感興趣的小伙伴們可以參考一下2016-02-02Android ListView滾動到底后自動加載數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了Android之ListView滾動到底后自動加載數(shù)據(jù),文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-09-09Android實現(xiàn)授權(quán)訪問網(wǎng)頁的方法
這篇文章主要介紹了Android實現(xiàn)授權(quán)訪問網(wǎng)頁的方法,需要的朋友可以參考下2014-07-07