Android自定義View基礎(chǔ)開發(fā)之圖片加載進(jìn)度條
學(xué)會(huì)了Paint,Canvas的基本用法之后,我們就可以動(dòng)手開始實(shí)踐了,先寫個(gè)簡(jiǎn)單的圖片加載進(jìn)度條看看。
按照慣例,先看效果圖,再?zèng)Q定要不要往下看:
既然看到這里了,應(yīng)該是想了解這個(gè)圖片加載進(jìn)度條了,我們先看具體用法,再看自定義View的實(shí)現(xiàn):
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:custom="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView android:id="@+id/img" android:layout_width="200dp" android:layout_height="200dp" android:scaleType="centerCrop" android:layout_centerInParent="true"/> <com.example.circleprogresstest.CircleProgressView android:id="@+id/progressView" android:layout_width="60dp" android:layout_height="60dp" android:layout_centerInParent="true" custom:isShowProgress="true" /> </RelativeLayout>
ImageLoader.getInstance().displayImage(url, imageView, options, new SimpleImageLoadingListener() , new ImageLoadingProgressListener() { @Override public void onProgressUpdate(String imageUri, View view, int current, int total) { if(current==total){ progressView.setVisibility(View.GONE); }else{ progressView.setSweepAngle((int)(360*current*1.0f/total)); progressView.postInvalidate(); } } } );
可以看出,以上的用法,非常簡(jiǎn)單,在xml中添加我們自定義的View,和添加textview或者button完全相同,只是多了我們自己的自定義屬性而已,可以設(shè)置圓的顏色,以及文字顏色,大小等等。之后,在MainActivity中使用的方法也是同樣簡(jiǎn)單,只要在圖片的進(jìn)度更新的時(shí)候,同時(shí)更新我們進(jìn)度條的進(jìn)度就行了。
下面我們具體說下我們實(shí)現(xiàn)自定義進(jìn)度條的過程,我們只需要重寫onDraw()方法就夠了,很明顯,我們的進(jìn)度條包括三部分,內(nèi)圈圓,外圈圓弧,中間的文字,具體看代碼:
protected void onDraw(Canvas canvas) { mWidth=getMeasuredWidth(); mHeight=getMeasuredHeight(); radius=(float)(Math.min(mWidth,mHeight)*1.0/2)-strokeWidth/2; //繪制內(nèi)圈圓 mPaint.setColor(initColor); mPaint.setStyle(Paint.Style.STROKE); mPaint.setStrokeWidth(strokeWidth); canvas.drawCircle(mWidth/2,mHeight/2,radius,mPaint); //繪制覆蓋的圓弧 mPaint.setColor(coverColor); RectF rectF=new RectF(mWidth/2-radius,mHeight/2-radius,mWidth/2+radius,mHeight/2+radius); canvas.drawArc(rectF,-90,sweepAngle,false,mPaint); //繪制中間的文本 if(isShowProgress){ progressText=String.format(getResources().getString(R.string.progress_text),(int)(sweepAngle*100.0/360)); mPaint.setTextSize(textSize); mPaint.setColor(textColor); if(mBound==null){ mBound=new Rect(); } mPaint.getTextBounds(progressText,0,progressText.length(),mBound); mPaint.setStyle(Paint.Style.FILL); canvas.drawText(progressText,mWidth/2-mBound.width()/2,mHeight/2+mBound.height()/2,mPaint); } }
當(dāng)然,為了讓我們可以自定義進(jìn)度條的大小顏色,我們還采用了自定義屬性,并且在構(gòu)造器中,也需要加載xml中的各項(xiàng)屬性:
<resources> <declare-styleable name="CircleProgressView"> <attr name="initColor" format="color"/> <attr name="coverColor" format="color"/> <attr name="strokeWidth" format="dimension"/> <attr name="progressTextSize" format="dimension"/> <attr name="progressTextColor" format="color"/> <attr name="isShowProgress" format="boolean"/> </declare-styleable> </resources>
private void initValues(Context context, AttributeSet attrs, int defStyleAttr){ TypedArray typedArray=context.getTheme().obtainStyledAttributes(attrs,R.styleable.CircleProgressView,defStyleAttr,0); int num=typedArray.getIndexCount(); for(int i=0;i<num;i++){ int attr=typedArray.getIndex(i); switch (attr){ case R.styleable.CircleProgressView_initColor: initColor=typedArray.getColor(attr,Color.GRAY); break; case R.styleable.CircleProgressView_coverColor: coverColor=typedArray.getColor(attr,Color.BLACK); break; case R.styleable.CircleProgressView_strokeWidth: strokeWidth=typedArray.getDimensionPixelOffset(attr,5); break; case R.styleable.CircleProgressView_progressTextSize: textSize=typedArray.getDimensionPixelSize(attr,30); break; case R.styleable.CircleProgressView_progressTextColor: textColor=typedArray.getColor(attr,Color.BLACK); break; case R.styleable.CircleProgressView_isShowProgress: isShowProgress=typedArray.getBoolean(attr,false); break; default: break; } } typedArray.recycle(); mPaint=new Paint(); mPaint.setAntiAlias(true); }
源碼下載
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Android圖片加載利器之Picasso基本用法
- Android Glide圖片加載(加載監(jiān)聽、加載動(dòng)畫)
- Android中RecyclerView 滑動(dòng)時(shí)圖片加載的優(yōu)化
- 從源碼分析Android的Glide庫(kù)的圖片加載流程及特點(diǎn)
- Android基于Glide v4.x的圖片加載進(jìn)度監(jiān)聽
- Android圖片加載框架Glide的基本用法介紹
- Android開發(fā)中ImageLoder進(jìn)行圖片加載和緩存
- Android 常見的圖片加載框架詳細(xì)介紹
- Android圖片加載緩存框架Glide
- Android實(shí)現(xiàn)多張圖片合成加載動(dòng)畫
相關(guān)文章
android 實(shí)現(xiàn)APP中改變頭像圖片的實(shí)例代碼
這篇文章主要介紹了android 實(shí)現(xiàn)APP中改變頭像圖片的實(shí)例代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07android Tween Animation屬性設(shè)置方法實(shí)例
在Android開發(fā)中,Animation是用來給控件制作效果的,本文介紹二種實(shí)現(xiàn)方法2013-11-11Webview實(shí)現(xiàn)android簡(jiǎn)單的瀏覽器實(shí)例代碼
這篇文章主要介紹了Webview實(shí)現(xiàn)android簡(jiǎn)單的瀏覽器實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2016-02-02RecyclerView+SnapHelper實(shí)現(xiàn)無限循環(huán)篩選控件
這篇文章主要為大家詳細(xì)介紹了RecyclerView+SnapHelper實(shí)現(xiàn)無限循環(huán)篩選控件,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-10-10詳解Android WebView的input上傳照片的兼容問題
本篇文章主要介紹了詳解Android WebView的input上傳照片的兼容問題,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-08-08Android?studio實(shí)現(xiàn)app登錄界面
這篇文章主要為大家詳細(xì)介紹了Android?studio實(shí)現(xiàn)app登錄界面,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04Android 中在有序廣播中添加自定義權(quán)限的實(shí)例
這篇文章主要介紹了Android 中在有序廣播中添加自定義權(quán)限的實(shí)例的相關(guān)資料,這里對(duì)有序廣播的用法進(jìn)行了詳細(xì)介紹并附有簡(jiǎn)單實(shí)例,需要的朋友可以參考下2017-07-07Android ListView添加頭布局和腳布局實(shí)例詳解
這篇文章主要介紹了Android ListView添加頭布局和腳布局實(shí)例詳解的相關(guān)資料,大家看下效果是否是自己想要實(shí)現(xiàn)的效果,這里附了實(shí)現(xiàn)代碼和實(shí)現(xiàn)效果圖,需要的朋友可以參考下2016-11-11Android編程實(shí)現(xiàn)WebView自適應(yīng)全屏方法小結(jié)
這篇文章主要介紹了Android編程實(shí)現(xiàn)WebView自適應(yīng)全屏方法,結(jié)合實(shí)例形式總結(jié)了三種常用的WebView自適應(yīng)全屏實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-12-12