Android UI（四）雲通信錄項目之雲端更新進度條實現

時間 2020-01-03

原文原文鏈接

做者：泥沙磚瓦漿木匠
網站：http://blog.csdn.net/jeffli1993
我的簽名：打算起手不凡寫出鴻篇巨做的人，每每堅持不了完成第一章節。
交流QQ羣：【編程之美 365234583】http://jq.qq.com/?_wv=1027&k=XVfBTo 前端

1、前言

繼續AndroidUI系列，UI實際上是個前端活，美感是最終的boss階段。泥瓦匠的美感也就給大家評論評論哈哈，我等UI寫到必定地步。我想寫下Android的一系列簡單入門。爲了鞏固提高唄。哈哈。下面介入正題。
有道是路漫漫其修遠兮，吾將上下而求索。任何東西都不是一步登天，愛情啥都同樣。錢也同樣，沒人願意給你1億，更況且也沒願意給你100的。爲何？沒啥的，注意細節，一步一步來。讓你值得那一億就有了。可是要記住 android

「作人作事第一，技術第二」

2、正文

泥瓦匠是個愛扯的人。項目的進展也不錯，前天友人通了個宵，或是今天降溫了，想睡覺。晚上去鍛鍊下，應該就行了。哈哈~扯淡完畢。今天咱們來實現下面這個界面：雲通信錄項目之雲端更新界面編程

先理理思路： canvas

一個barTop層：一個ImgView或是Button，一個TextView，用styles.xml控制其的樣式。
核心中間一個圓形進度條的實現，自定義View。此次的核心講解。
底部ImgBottom的實現

3、實現圓形進度條

實現這個，首先咱們得明白關於Canvas Paint的相關知識。這裏我也就把涉及到的東西講下。仍是看效果說話吧。關於2D繪圖的api都在android.graphics和android.graphics.drawable包裏面。圖形相關的有Point（點），RetcF（矩形）等，還有動畫相關有AnimationDrawable、 BitmapDrawable和TransitionDrawable等。 api

本例中，其實咱們用到的是很簡單的兩個操做。定義一個矩形（RetcF）而後再矩形區域，畫弧線。一個弧線是對應的白色底部，另外一個弧線是對應的進度。算好角度，而後就天然而然的能夠了。話很少說，泥瓦匠就上代碼了。（代碼裏面的詳細註解，你也應該能夠方便的看的懂。） ide

          package org.nsg.view; 
        
          import android.content.Context; 
        
          import android.graphics.Canvas; 
        
          import android.graphics.Color; 
        
          import android.graphics.Paint; 
        
          import android.graphics.Paint.Style; 
        
          import android.graphics.RectF; 
        
          import android.util.AttributeSet; 
        
          import android.view.View; 
        
          import android.view.animation.Animation; 
        
          import android.view.animation.RotateAnimation; 
        
          public class CircleProgressBar extends View 
        
          { 
        
              private int maxProgress = 100; 
        
              private int progress = 15; 
        
              private int progressStrokeWidth = 16; 
        
              private int marxArcStorkeWidth = 16; 
        
              /* 畫圓所在的距形區域 */ 
        
              RectF oval; 
        
              Paint paint; 
        
              public CircleProgressBar(Context context, AttributeSet attrs) 
        
              { 
        
                  super(context, attrs); 
        
                  oval = new RectF(); 
        
                  paint = new Paint(); 
        
              } 
        
              @Override 
        
              protected void onDraw(Canvas canvas) 
        
              { 
        
                  super.onDraw(canvas); 
        
                  int width = this.getWidth(); 
        
                  int height = this.getHeight(); 
        
                  width  = (width > height) ? height : width; 
        
                  height = (width > height) ? height : width; 
        
                  /* 設置畫筆爲抗鋸齒 */ 
        
                  paint.setAntiAlias(true); 
        
                  /* 設置畫筆顏色 */ 
        
                  paint.setColor(Color.WHITE); 
        
                  /* 白色背景 */ 
        
                  canvas.drawColor(Color.TRANSPARENT); 
        
                  /* 線寬 */ 
        
                  paint.setStrokeWidth(progressStrokeWidth); 
        
                  paint.setStyle(Style.STROKE); 
        
                  /* 左上角x */ 
        
                  oval.left = marxArcStorkeWidth / 2; 
        
                  /* 左上角y */ 
        
                  oval.top  = marxArcStorkeWidth / 2; 
        
                  /* 左下角x */ 
        
                  oval.right  = width  - marxArcStorkeWidth / 2; 
        
                  /* 右下角y */ 
        
                  oval.bottom = height - marxArcStorkeWidth / 2; 
        
                  /* 繪製白色圓圈，即進度條背景 */ 
        
                  canvas.drawArc(oval, -90, 360, false, paint); 
        
                  paint.setColor(Color.rgb(0x57, 0x87, 0xb6)); 
        
                  paint.setStrokeWidth(marxArcStorkeWidth); 
        
                  /* 繪製進度圓弧，這裏是藍色 s*/ 
        
                  canvas.drawArc(oval, -90, ((float) progress / maxProgress) * 360,false, paint); 
        
                  /* 設置百分比文本 */ 
        
                  paint.setStrokeWidth(1); 
        
                  String text = progress + "%"; 
        
                  int textHeight = height / 4; 
        
                  paint.setTextSize(textHeight); 
        
                  int textWidth = (int) paint.measureText(text, 0, text.length()); 
        
                  paint.setStyle(Style.FILL); 
        
                  canvas.drawText(text, width / 2 - textWidth / 2, height / 2 + textHeight / 2, paint); 
        
              } 
        
              public int getMaxProgress() 
        
              { 
        
                  return maxProgress; 
        
              } 
        
              public void setMaxProgress(int maxProgress) 
        
              { 
        
                  this.maxProgress = maxProgress; 
        
              } 
        
              /** 設置進度 
        
               * 
         @param progress 進度百分比 
        
               * 
         @param view  標識進度的節點視圖 
        
               */ 
        
              public void setProgress(int progress, View view) 
        
              { 
        
                  this.progress = progress; 
        
                  view.setAnimation(pointRotationAnima(0,(int) (((float) 360 / maxProgress) * progress))); 
        
                  this.invalidate(); 
        
              } 
        
              /** 非ＵＩ線程調用 */ 
        
              public void setProgressNotInUiThread(int progress, View view) 
        
              { 
        
                  this.progress = progress; 
        
                  view.setAnimation(pointRotationAnima(0,(int) (((float) 360 / maxProgress) * progress))); 
        
                  this.postInvalidate(); 
        
              } 
        
              /** 進度標註點的動畫 
        
               * 
         @param fromDegrees 
        
               * 
         @param toDegrees 
        
               */ 
        
              private Animation pointRotationAnima(float fromDegrees, float toDegrees) 
        
              { 
        
                  /* 進度點起始位置(圖片偏移約54度) */ 
        
                  int initDegress = 300; 
        
                  RotateAnimation animation = 
        
                          new RotateAnimation(fromDegrees, 
        
                                  initDegress + toDegrees, 
        
                                  Animation.RELATIVE_TO_SELF, 
        
                                  0.5f, 
        
                                  Animation.RELATIVE_TO_SELF, 
        
                                  0.5f); 
        
                  /* 設置動畫執行時間 */ 
        
                  animation.setDuration(1); 
        
                  /* 設置重複執行次數 */ 
        
                  animation.setRepeatCount(1); 
        
                  /* 設置動畫結束後是否停留在結束位置 */ 
        
                  animation.setFillAfter(true); 
        
                  return animation; 
        
              } 
        
          }

1

          <RelativeLayout xmlns:android=" 
         http://schemas.android.com/apk/res/android" 
        
              xmlns:tools=" 
         http://schemas.android.com/tools" 
        
              android:layout_width="match_parent" 
        
              android:layout_height="match_parent" 
        
              tools:context=".MainActivity" > 
        
              <RelativeLayout 
        
                  android:layout_width="match_parent" 
        
                  android:layout_height="46dp" 
        
                  android:background="@drawable/bg_black"> 
        
                  <ImageView 
        
                      android:id="@+id/img_user_list_back" 
        
                      android:layout_width="wrap_content" 
        
                      android:layout_height="wrap_content" 
        
                      android:layout_alignParentLeft="true" 
        
                      android:paddingLeft="24dp" 
        
                      android:paddingTop="10dp" 
        
                      android:paddingBottom="10dp" 
        
                      android:clickable="true" 
        
                      android:focusable="true" 
        
                      android:scaleType="fitXY" 
        
                      android:src="@drawable/btn_return"/> 
        
                  <TextView 
        
                      android:layout_width="wrap_content" 
        
                      android:layout_height="wrap_content" 
        
                      style="@style/txt_topbar" 
        
                      android:text="雲端更新"/> 
        
              </RelativeLayout> 
        
               <org.nsg.main.CircleProgressBar 
        
                  android:id="@+id/sync_progress" 
        
                  android:layout_width="200dp" 
        
                  android:layout_height="200dp" 
        
                  android:layout_marginBottom="210dp" 
        
                  android:layout_alignBottom="@+id/lay_bottom" 
        
                  android:layout_centerHorizontal="true" 
        
                   /> 
        
               <LinearLayout 
        
                  android:layout_width="match_parent" 
        
                  android:layout_height="50dp" 
        
                  android:layout_marginBottom="140dp" 
        
                  android:layout_alignBottom="@+id/lay_bottom"> 
        
                  <TextView 
        
                      android:id="@+id/syncText" 
        
                      android:layout_width="wrap_content" 
        
                      android:layout_height="wrap_content" 
        
                      android:textColor="@color/red" 
        
                      android:paddingLeft="50dp" 
        
                      android:textSize="15sp" 
        
                      android:text="舒適提醒："/> 
        
                  <TextView 
        
                      android:id="@+id/syncText" 
        
                      android:layout_width="wrap_content" 
        
                      android:layout_height="wrap_content" 
        
                      android:textColor="@color/black" 
        
                      android:textSize="15sp" 
        
                      android:text="在Wifi下，更新更有效果"/> 
        
              </LinearLayout> 
        
              <Button 
        
                 android:id="@+id/syncButton" 
        
                 android:layout_width="fill_parent" 
        
                 android:layout_height="wrap_content" 
        
                 android:layout_marginLeft="20dp" 
        
                 android:layout_marginRight="20dp" 
        
                  android:layout_marginBottom="90dp" 
        
                  android:layout_alignBottom="@+id/lay_bottom" 
        
                  android:textColor="@color/white" 
        
                  android:textSize="22sp" 
        
                 android:background="@drawable/user_detail_call_bg" 
        
                 android:text="更新" /> 
        
              <LinearLayout 
        
                  android:id="@+id/lay_bottom" 
        
                  android:layout_width="fill_parent" 
        
                  android:layout_height="wrap_content" 
        
                  android:orientation="horizontal" 
        
                  android:layout_alignParentBottom="true"> 
        
                  <ImageView 
        
                      android:layout_width="match_parent" 
        
                      android:layout_height="wrap_content" 
        
                      android:src="@drawable/libe_footer" /> 
        
              </LinearLayout> 
        
          </RelativeLayout>

定義好這個View以後，咱們就把最難的東西搞定了。代碼裏面，最後用動畫的形式展示給你們，百分比會根據你設計的百分比進行變化。泥瓦匠和你們同樣，都想急切的看到效果圖，只要你們以下簡單的操做就行了。打開設計的xml文件詳細的xml設計我也方便你們貼出來了：其餘設計都是簡單的，我這邊也不展開講了。 post