Android實(shí)現(xiàn)圖片加載進(jìn)度提示
本文實(shí)例為大家分享了Android實(shí)現(xiàn)圖片加載進(jìn)度提示的具體代碼,供大家參考,具體內(nèi)容如下
先上圖:
實(shí)現(xiàn)原理:
第一個(gè)控件的實(shí)現(xiàn)原理是重寫(xiě)ImageView的onDraw()方法,利用Canvas的clipRect()方法控制圖片的顯示區(qū)域,主鍵擴(kuò)大圖片的顯示區(qū)域,從而實(shí)現(xiàn)逐漸增加的效果
關(guān)鍵代碼:
public class LoadingImageView extends ImageView { /*** 背景圖片 */ private Drawable bgDrawable; /**前景圖片*/ private Drawable fgDrawable; /**是否顯示加載進(jìn)度條*/ private boolean isShowProgress; private Resources rsc; private int progress; private int progressHeight; private int progressLeft; private int progressTop; private int progressRight; private int progressBottom; public LoadingImageView(Context context) { this(context,null); } public LoadingImageView(Context context, AttributeSet attrs) { this(context, attrs,0); } public LoadingImageView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); rsc = getResources(); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); if(bgDrawable==null){ return; } progressLeft = getMeasuredWidth()/2-(fgDrawable.getIntrinsicWidth()/2); progressTop = getMeasuredHeight()/2-(fgDrawable.getIntrinsicHeight()/2); progressRight = getMeasuredWidth()/2+(fgDrawable.getIntrinsicWidth()/2); progressBottom = getMeasuredHeight()/2+(fgDrawable.getIntrinsicHeight()/2); } @Override public boolean onTouchEvent(MotionEvent event) { return super.onTouchEvent(event); } /** * 設(shè)置背景圖片 * @param drawableRes */ public void setBgDrawableRes(int drawableRes){ bgDrawable = rsc.getDrawable(drawableRes); invalidate(); } public void setFgDrawableRes(int drawableRes){ fgDrawable = rsc.getDrawable(drawableRes); invalidate(); } public void setProgress(int progress,boolean flag) { isShowProgress = flag; if(progress>=0&progress<=100){ this.progress = progress; invalidate(); } } @Override protected void onDraw(Canvas canvas) { if(bgDrawable!=null){ bgDrawable.setBounds(progressLeft, progressTop, progressRight, progressBottom); bgDrawable.draw(canvas); } super.onDraw(canvas); if(bgDrawable!=null&&isShowProgress){ bgDrawable.setBounds(progressLeft, progressTop, progressRight, progressBottom); bgDrawable.draw(canvas); } if(fgDrawable!=null&&isShowProgress){ //根據(jù)進(jìn)度計(jì)算圖片顯示的高的比 progressHeight = fgDrawable.getIntrinsicHeight()*progress/100; //關(guān)鍵代碼,設(shè)置圖片的顯示區(qū)域 canvas.clipRect(progressLeft,progressBottom-progressHeight,progressRight,progressBottom); fgDrawable.setBounds(progressLeft, progressTop, progressRight, progressBottom); fgDrawable.draw(canvas); } } }
第二個(gè)圓形加載進(jìn)度的原理其實(shí)也很簡(jiǎn)單,就是畫(huà)弧線(xiàn),不斷增加弧線(xiàn)的角度,實(shí)現(xiàn)改變進(jìn)度的功能
關(guān)鍵代碼:
public class LoadingCircleView extends View { private final Paint paint; private final Context context; private Resources res; private int progress; private int ringWidth; //圓環(huán)的顏色 private int ringColor; //進(jìn)度條顏色 private int progressColor; //字體顏色 private int textColor; //字的大小 private int textSize; private String textProgress; public LoadingCircleView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); this.context = context; this.paint = new Paint(); this.res = context.getResources(); this.paint.setAntiAlias(true); //消除鋸齒 this.ringWidth = dip2px(context, 10); //設(shè)置圓環(huán)寬度 this.ringColor = Color.rgb(233, 233, 233); this.progressColor = Color.rgb(146, 206, 108); this.textColor = Color.rgb(203, 203, 203); this.textSize = 30; } public LoadingCircleView(Context context, AttributeSet attrs) { this(context, attrs,0); } public LoadingCircleView(Context context) { this(context,null); } /** * 設(shè)置加載進(jìn)度,取值范圍在0~100之間 * @param progress */ public void setProgress(int progress) { if(progress>=0&&progress<=100){ this.progress = progress; invalidate(); } } /** * 設(shè)置圓環(huán)背景色 * @param ringColor */ public void setRingColor(int ringColor) { this.ringColor = res.getColor(ringColor); } /** * 設(shè)置進(jìn)度條顏色 * @param progressColor */ public void setProgressColor(int progressColor) { this.progressColor = res.getColor(progressColor); } /** * 設(shè)置字體顏色 * @param textColor */ public void setTextColor(int textColor) { this.textColor = res.getColor(textColor); } /** * 設(shè)置字體大小 * @param textSize */ public void setTextSize(int textSize) { this.textSize = textSize; } /** * 設(shè)置圓環(huán)半徑 * @param ringWidth */ public void setRingWidthDip(int ringWidth) { this.ringWidth = dip2px(context, ringWidth); } /** * 通過(guò)不斷畫(huà)弧的方式更新界面,實(shí)現(xiàn)進(jìn)度增加 */ @Override protected void onDraw(Canvas canvas) { int center = getWidth()/2; int radios = center-ringWidth/2; //繪制圓環(huán) this.paint.setStyle(Paint.Style.STROKE); //繪制空心圓 this.paint.setColor(ringColor); this.paint.setStrokeWidth(ringWidth); canvas.drawCircle(center,center, radios, this.paint); RectF oval = new RectF(center-radios, center-radios, center+radios, center+radios); this.paint.setColor(progressColor); canvas.drawArc(oval, 90, 360*progress/100, false, paint); this.paint.setStyle(Paint.Style.FILL); this.paint.setColor(textColor); this.paint.setStrokeWidth(0); this.paint.setTextSize(textSize); this.paint.setTypeface(Typeface.DEFAULT_BOLD); textProgress = progress+"%"; float textWidth = paint.measureText(textProgress); canvas.drawText(textProgress, center-textWidth/2, center+textSize/2, paint); super.onDraw(canvas); } /** * 根據(jù)手機(jī)的分辨率從 dp 的單位 轉(zhuǎn)成為 px(像素) */ public static int dip2px(Context context, float dpValue) { final float scale = context.getResources().getDisplayMetrics().density; return (int) (dpValue * scale + 0.5f); } }
控件定義好后就可以再Xml里面調(diào)用了:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <com.example.imagetest.LoadingImageView android:id="@+id/loading_image_view" android:layout_width="258px" android:layout_height="257px" android:background="#330000" > </com.example.imagetest.LoadingImageView> <com.example.imagetest.LoadingCircleView android:id="@+id/loading_cirle_view" android:layout_width="100dp" android:layout_height="100dp" > </com.example.imagetest.LoadingCircleView> <!-- <ListView android:id="@+id/listview" android:layout_width="fill_parent" android:layout_height="fill_parent" ></ListView> --> </LinearLayout>
最后就可以使用了,在主線(xiàn)程里面模擬加載進(jìn)度,起一個(gè)線(xiàn)程,模仿加載進(jìn)度逐漸增加:
public class MainActivity extends Activity { ListView listview; private LoadingImageView loadingImageView; private LoadingCircleView loadingCircleView; private Handler handler = new Handler(){ public void handleMessage(android.os.Message msg) { loadingImageView.setProgress(msg.what,true); loadingCircleView.setProgress(msg.what); }; }; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); loadingImageView = (LoadingImageView) findViewById(R.id.loading_image_view); loadingImageView.setFgDrawableRes(R.drawable.bg_click_load_img); loadingImageView.setBgDrawableRes(R.drawable.ic_launcher); loadingImageView.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { loading(); } }); loadingCircleView = (LoadingCircleView) findViewById(R.id.loading_cirle_view); loadingCircleView.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { loading(); } }); // listview = (ListView) findViewById(R.id.listview); // showImage(); } private void loading(){ Thread t = new Thread(){ @Override public void run() { int i = 0; while(i<=100){ try { i++; handler.sendEmptyMessage(i); this.sleep(10); } catch (InterruptedException e) { e.printStackTrace(); } } super.run(); } }; t.start(); } @Override protected void onResume() { super.onResume(); } @Override protected void onPause() { super.onPause(); } @Override protected void onDestroy() { super.onDestroy(); } }
好了,大工告成,可以運(yùn)行了
資源地址:Android圖片加載進(jìn)度提示
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Android如何使用Glide加載清晰長(zhǎng)圖
- android實(shí)現(xiàn)長(zhǎng)圖加載效果
- Android仿微博加載長(zhǎng)圖滾動(dòng)查看效果
- Android 官推 kotlin-first 的圖片加載庫(kù)——Coil的使用入門(mén)
- Android如何加載Base64編碼格式圖片
- Android Fresco圖片加載優(yōu)化的方案
- Android適配利用webview加載后圖片顯示過(guò)大的問(wèn)題解決
- Android框架Volley之利用Imageloader和NetWorkImageView加載圖片的方法
- Android框架Volley使用:ImageRequest請(qǐng)求實(shí)現(xiàn)圖片加載
- Android高效安全加載圖片的方法詳解
- Android加載長(zhǎng)圖的多種方案分享
相關(guān)文章
Android實(shí)現(xiàn)自適應(yīng)屏幕的彈窗廣告
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)自適應(yīng)屏幕的彈窗廣告,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-07-07Android原生實(shí)現(xiàn)多線(xiàn)程斷點(diǎn)下載實(shí)例代碼
本篇文章主要介紹了Android原生實(shí)現(xiàn)多線(xiàn)程斷點(diǎn)下載實(shí)例代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05Android利用SAX對(duì)XML進(jìn)行增刪改查操作詳解
在項(xiàng)目中會(huì)遇到對(duì)于XML的增刪改查,下面這篇文章主要給大家介紹了關(guān)于A(yíng)ndroid利用SAX對(duì)XML進(jìn)行增刪改查操作的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01Flutter上線(xiàn)項(xiàng)目實(shí)戰(zhàn)記錄之路由篇
這篇文章主要給大家介紹了關(guān)于Flutter上線(xiàn)項(xiàng)目實(shí)戰(zhàn)記錄之路由篇的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用Flutter具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09Android ViewPager實(shí)現(xiàn)圖片輪翻效果
這篇文章主要為大家詳細(xì)介紹了Android ViewPager實(shí)現(xiàn)圖片輪翻效果的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01Android仿百度谷歌搜索自動(dòng)提示框AutoCompleteTextView簡(jiǎn)單應(yīng)用示例
這篇文章主要介紹了Android仿百度谷歌搜索自動(dòng)提示框AutoCompleteTextView簡(jiǎn)單應(yīng)用,結(jié)合實(shí)例形式分析了AutoCompleteTextView Widget使用步驟與相關(guān)操作技巧,需要的朋友可以參考下2016-10-10Android framework ATMS啟動(dòng)流程
這篇文章主要為大家介紹了Android framework ATMS啟動(dòng)流程示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03