Android實現圖片載入進度提示
阿新 • • 發佈:2020-06-20
本文例項為大家分享了Android實現圖片載入進度提示的具體程式碼,供大家參考,具體內容如下
先上圖:
實現原理:
第一個控制元件的實現原理是重寫ImageView的onDraw()方法,利用Canvas的clipRect()方法控制圖片的顯示區域,主鍵擴大圖片的顯示區域,從而實現逐漸增加的效果
關鍵程式碼:
public class LoadingImageView extends ImageView { /*** 背景圖片 */ private Drawable bgDrawable; /**前景圖片*/ private Drawable fgDrawable; /**是否顯示載入進度條*/ 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,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); } /** * 設定背景圖片 * @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,progressBottom); bgDrawable.draw(canvas); } if(fgDrawable!=null&&isShowProgress){ //根據進度計算圖片顯示的高的比 progressHeight = fgDrawable.getIntrinsicHeight()*progress/100; //關鍵程式碼,設定圖片的顯示區域 canvas.clipRect(progressLeft,progressBottom-progressHeight,progressBottom); fgDrawable.setBounds(progressLeft,progressBottom); fgDrawable.draw(canvas); } } }
第二個圓形載入進度的原理其實也很簡單,就是畫弧線,不斷增加弧線的角度,實現改變進度的功能
關鍵程式碼:
public class LoadingCircleView extends View { private final Paint paint; private final Context context; private Resources res; private int progress; private int ringWidth; //圓環的顏色 private int ringColor; //進度條顏色 private int progressColor; //字型顏色 private int textColor; //字的大小 private int textSize; private String textProgress; public LoadingCircleView(Context context,defStyle); this.context = context; this.paint = new Paint(); this.res = context.getResources(); this.paint.setAntiAlias(true); //消除鋸齒 this.ringWidth = dip2px(context,10); //設定圓環寬度 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,0); } public LoadingCircleView(Context context) { this(context,null); } /** * 設定載入進度,取值範圍在0~100之間 * @param progress */ public void setProgress(int progress) { if(progress>=0&&progress<=100){ this.progress = progress; invalidate(); } } /** * 設定圓環背景色 * @param ringColor */ public void setRingColor(int ringColor) { this.ringColor = res.getColor(ringColor); } /** * 設定進度條顏色 * @param progressColor */ public void setProgressColor(int progressColor) { this.progressColor = res.getColor(progressColor); } /** * 設定字型顏色 * @param textColor */ public void setTextColor(int textColor) { this.textColor = res.getColor(textColor); } /** * 設定字型大小 * @param textSize */ public void setTextSize(int textSize) { this.textSize = textSize; } /** * 設定圓環半徑 * @param ringWidth */ public void setRingWidthDip(int ringWidth) { this.ringWidth = dip2px(context,ringWidth); } /** * 通過不斷畫弧的方式更新介面,實現進度增加 */ @Override protected void onDraw(Canvas canvas) { int center = getWidth()/2; int radios = center-ringWidth/2; //繪製圓環 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); } /** * 根據手機的解析度從 dp 的單位 轉成為 px(畫素) */ public static int dip2px(Context context,float dpValue) { final float scale = context.getResources().getDisplayMetrics().density; return (int) (dpValue * scale + 0.5f); } }
控制元件定義好後就可以再Xml裡面呼叫了:
<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>
最後就可以使用了,在主執行緒裡面模擬載入進度,起一個執行緒,模仿載入進度逐漸增加:
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(); } }
好了,大工告成,可以運行了
資源地址:Android圖片載入進度提示
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。