2. 程式人生 > >三種方式實現自定義圓形頁面載入中效果的進度條，包含一個好看的Android UI

三種方式實現自定義圓形頁面載入中效果的進度條，包含一個好看的Android UI

阿新 • • 發佈：2019-02-04

效果圖如下：下載地址

樣式一、通過動畫實現定義res/drawable/loading.xml如下：


<?xml version="1.0" encoding="UTF-8"?>
​
<animation-list android:oneshot="false"
​
xmlns:android="http://schemas.android.com/apk/res/android">
​
  <item android:duration="150" android:drawable="@drawable/loading_01" />
​
  <item android:duration
 
="150" android:drawable="@drawable/loading_02" />
​
  <item android:duration="150" android:drawable="@drawable/loading_03" />
​
  <item android:duration="150" android:drawable="@drawable/loading_04" />
​
  <item android:duration="150" android:drawable="@drawable/loading_05" />
​
  <item android:duration
 
="150" android:drawable="@drawable/loading_06" />
  
  <item android:duration="150" android:drawable="@drawable/loading_07" />
  
  </animation-list> <?xml version="1.0" encoding="UTF-8"?>
​
<animation-list android:oneshot="false"
​
xmlns:android="http://schemas.android.com/apk/res/android"
 
>
​
  <item android:duration="150" android:drawable="@drawable/loading_01" />
​
  <item android:duration="150" android:drawable="@drawable/loading_02" />
​
  <item android:duration="150" android:drawable="@drawable/loading_03" />
​
  <item android:duration="150" android:drawable="@drawable/loading_04" />
​
  <item android:duration="150" android:drawable="@drawable/loading_05" />
​
  <item android:duration="150" android:drawable="@drawable/loading_06" />
  
  <item android:duration="150" android:drawable="@drawable/loading_07" />
  
  </animation-list>

樣式二、定義res/drawable/dialog_style_xml_color.xml如下：


<?xml version="1.0" encoding="utf-8"?>
​
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
​
  android:pivotX="50%" android:pivotY="50%" android:fromDegrees="0"
​
  android:toDegrees="360">
​
  <shape android:shape="ring" android:innerRadiusRatio="3"
​
    android:thicknessRatio="8" android:useLevel="false">
​
    <gradient android:type="sweep" android:useLevel="false"
​
     android:startColor="#FFFFFF" android:centerColor="#FFDC35"
​
     android:centerY="0.50" android:endColor="#CE0000" />
</shape>
​
</rotate><?xml version="1.0" encoding="utf-8"?>
​
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
​
  android:pivotX="50%" android:pivotY="50%" android:fromDegrees="0"
​
  android:toDegrees="360">
​
  <shape android:shape="ring" android:innerRadiusRatio="3"
​
    android:thicknessRatio="8" android:useLevel="false">
​
    <gradient android:type="sweep" android:useLevel="false"
​
     android:startColor="#FFFFFF" android:centerColor="#FFDC35"
​
     android:centerY="0.50" android:endColor="#CE0000" />
</shape>
​
</rotate>

樣式三、使用一張圖片進行自定義定義res/drawable/dialog_style_xml_icon.xml如下：


<?xml version="1.0" encoding="utf-8"?>
​
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
​
<item>
​
  <rotate android:drawable="@drawable/dialog_progress_round"
​
   android:fromDegrees="0.0" 
          
   android:toDegrees="360.0" 
          
   android:pivotX="50.0%"
​
   android:pivotY="50.0%" />
​
</item>
​
</layer-list><?xml version="1.0" encoding="utf-8"?>
​
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
​
<item>
​
  <rotate android:drawable="@drawable/dialog_progress_round"
​
   android:fromDegrees="0.0" 
          
   android:toDegrees="360.0" 
          
   android:pivotX="50.0%"
​
   android:pivotY="50.0%" />
​
</item>
​
</layer-list>

樣式四、最後借鑑第一種實現方式做出來第四種圖片

定義res/drawable/loading1.xml如下


<?xml version="1.0" encoding="utf-8"?>
<animation-list android:oneshot="false"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:duration="50" android:drawable="@mipmap/nicolas_00000" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00001" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00002" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00003" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00004" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00005" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00006" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00007" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00008" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00009" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00010" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00011" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00012" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00013" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00014" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00015" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00016" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00017" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00018" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00019" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00020" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00021" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00022" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00023" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00024" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00025" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00026" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00027" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00028" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00029" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00030" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00031" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00032" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00033" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00034" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00035" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00036" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00037" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00038" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00039" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00040" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00041" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00042" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00043" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00044" />
</animation-list><?xml version="1.0" encoding="utf-8"?>
<animation-list android:oneshot="false"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:duration="50" android:drawable="@mipmap/nicolas_00000" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00001" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00002" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00003" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00004" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00005" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00006" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00007" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00008" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00009" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00010" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00011" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00012" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00013" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00014" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00015" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00016" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00017" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00018" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00019" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00020" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00021" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00022" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00023" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00024" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00025" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00026" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00027" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00028" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00029" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00030" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00031" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00032" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00033" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00034" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00035" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00036" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00037" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00038" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00039" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00040" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00041" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00042" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00043" />
    <item android:duration="50" android:drawable="@mipmap/nicolas_00044" />
</animation-list>

在layout檔案activity_main.xml中引用如下：


<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="cq.my.progressbar.MainActivity"
    android:orientation="vertical"
    android:gravity="center_horizontal">
    <ProgressBar android:id="@+id/loading_process_dialog_progressBar1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:indeterminate="false"
        android:indeterminateDrawable="@drawable/loading"
        android:layout_margin="10dp"/>
​
    <ProgressBar android:id="@+id/loading_process_dialog_progressBar2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:indeterminate="false"
        android:indeterminateDrawable="@drawable/dialog_style_xml_color"
        android:layout_margin="10dp"/>
    <ProgressBar android:id="@+id/loading_process_dialog_progressBar3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:indeterminate="false"
        android:indeterminateDrawable="@drawable/dialog_style_xml_icon"
        android:layout_margin="10dp"/>
    <ProgressBar android:id="@+id/loading_process_dialog_progressBar4"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:indeterminate="false"
        android:indeterminateDrawable="@drawable/loading1"
        android:layout_margin="10dp"/>
</LinearLayout>
​<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="cq.my.progressbar.MainActivity"
    android:orientation="vertical"
    android:gravity="center_horizontal">
    <ProgressBar android:id="@+id/loading_process_dialog_progressBar1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:indeterminate="false"
        android:indeterminateDrawable="@drawable/loading"
        android:layout_margin="10dp"/>
​
    <ProgressBar android:id="@+id/loading_process_dialog_progressBar2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:indeterminate="false"
        android:indeterminateDrawable="@drawable/dialog_style_xml_color"
        android:layout_margin="10dp"/>
    <ProgressBar android:id="@+id/loading_process_dialog_progressBar3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:indeterminate="false"
        android:indeterminateDrawable="@drawable/dialog_style_xml_icon"
        android:layout_margin="10dp"/>
    <ProgressBar android:id="@+id/loading_process_dialog_progressBar4"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:indeterminate="false"
        android:indeterminateDrawable="@drawable/loading1"
        android:layout_margin="10dp"/>
</LinearLayout>
​

執行一下就像我效果圖一樣的效果了

相關推薦

三種方式實現自定義圓形頁面載入中效果的進度條，包含一個好看的Android UI

效果圖如下：下載地址 樣式一、通過動畫實現定義res/drawable/loading.xml如下： <?xml version="1.0" encoding="UTF-8"?> ​ <animation-list android:oneshot=

Android 三種方式實現自定義圓形頁面載入中效果的進度條

一、通過動畫實現定義res/anim/loading.xml如下：<?xml version="1.0" encoding="UTF-8"?>  <animation-list android:oneshot="false"xmlns:android="ht

【Android進度條】三種方式實現自定義圓形進度條ProgressBar

總結了3種方法： 1.多張圖片切換 2.自定義顏色 3.旋轉自定義圖片 其它： Android自定義控制元件NumberCircleProgressBar(圓形進度條)的實現：點選開啟連結 橫線帶數字進度條：點選開啟連結

Android 三種常用實現自定義圓形進度條 ProgressBar 及demo

           Android 自定義 進度條，一般有三種方式，最早一般使用UI給的圖片使用幀動畫，完成，後面兩種，一種是使用自定義顏色，另外一種是使用帶相近色的圖片加動畫完成。 下面具體 說一下三種方式，推薦使用第二種方式，如果這種達不到效果，或者比較高也可使用第一

java 兩種方式實現自定義排序

package test; //Comparable 使物件本身具有可比性，這種方式稱為元素的自然順序或預設順序 //Comparator 元素自身不具備比較性或者比較性不是所需要的，在集合初始化讓其具有比較性 （更實用） import java.util.*; //cl

三種方式實現觀察者模式 及 Spring中的事件編程模型

其中 我想 訂閱 個人 args 我們 發送通知 當前 字段 觀察者模式可以說是眾多設計模式中，最容易理解的設計模式之一了，觀察者模式在Spring中也隨處可見，面試的時候，面試官可能會問，嘿，你既然讀過Spring源碼，那你說說Spring中運用的設計模式吧，你可以自信的

Android 三種方式實現三角形氣泡效果、自定義View、shape、點9圖

背景 這期需求中，專案需要這樣一個情況，就是二級選單上面有個三角形 乍一看，用個圖片就可以解決，一個線性佈局、垂直襬下去，所以一開始我是這樣嘗試的，後來發現美工給我切的圖很不合適，不同手機顯示效果也不一樣，所以後來放棄了。以下是解決方案 使用.9圖

Android 三種方式實現圓形ImageView

所有方式均繼承了ImageView 圓形圖片實現一：BitmapShader package com.open.widget; import android.content.Context; import android.graphics.Bitmap; impor

三種方式實現Android頁面底部導航欄

我們在Android手機上使用新浪微博和QQ等一些軟體時，經常會遇到類似下面這種頁面底部導航欄的控制元件，使用這種導航欄可以在手機螢幕的一頁中顯示儘可能多的內容，如下圖所示： 下面我將實現這種導航欄的三種方法總結如下： 一、使用TabHost實現（TabHost在新版的A

詳解Linux搭建vsftp服務器通過三種方式實現文件傳輸

x86 sys fig passwd 問題： mage vpd cee 啟用 概述 FTP（File Transfer Protocol）中文稱為“文件傳輸協議”。用於Internet上的控制文件的雙向傳輸。 工作原理 一、主動模式： 1、客戶端通過用戶名和密碼登錄服務器

WPFの三種方式實現快捷鍵

原文: WPFの三種方式實現快捷鍵 最近，對wpf新增快捷鍵的方式進行了整理。主要用到的三種方式如下： 一、wpf命令： 資源中新增命令 <Window.Resources> <RoutedUICommand x:Key="ToolCapClick" Text

Spring Boot 實現自定義錯誤頁面

sprin 支援實現ErrorController 來自定義錯誤頁面 下面是具體程式碼的實現 @Controller public class CustomErrorController implements ErrorController { @Autowired

實現執行緒的第三種方式 實現Callable介面

package com.juc; import java.util.concurrent.Callable; import java.util.concurrent.ExecutionException; import java.util.concurrent.FutureTask; /**

三種方式實現java單例

java的單例模式主要分為：餓漢模式和懶漢模式 餓漢模式：餓漢很飢餓，所以直接先new出來，再提供。 餓漢模式程式碼：載入class檔案的時候就例項化。 package com.jkf.redis; public class HungryManSingleto

三種方式實現遠端restful 介面呼叫

1,基本介紹 Restful介面的呼叫，前端一般使用ajax呼叫，後端可以使用的方法比較多， 　　本次介紹三種： 　　　　1.HttpURLConnection實現 　　　　2.HttpClient實現 　　　　3.Spring的RestTemplate  　　　　

以下是JAVA中三種方式實現檔案字元統計

以下是JAVA中三種方式實現檔案字元統計 package com.lyc.gui; import java.io.FileReader; import java.io.IOException; import java.util.HashMap; import java.util.Ha

三種方式實現二維碼（java）

一. 通過使用zxing方式實現：  jar準備： https://github.com/zxing/zxing 下載原始碼，將core/src/main/Java/下的所有檔案和javase/src/main/java/下的所有檔案一起打成jar檔案zxing.jar

vue三種方式實現：全選、反選、全不選

方法一：v-model 與 [{checked:true},…] <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="vi

python使用遞迴、尾遞迴、迴圈三種方式實現斐波那契數列

    在最開始的時候所有的斐波那契程式碼都是使用遞迴的方式來寫的，遞迴有很多的缺點，執行效率低下，浪費資源，還有可能會造成棧溢位，而遞迴的程式的優點也是很明顯的，就是結構層次很清晰，易於理解     可以使用迴圈的方式來取代遞迴，當然也可以使用尾遞迴的方式來實現。    

【框架】[Spring]AOP攔截-三種方式實現自動代理

這裡的自動代理，我講的是自動代理bean物件，其實就是在xml中讓我們不用配置代理工廠，也就是不用配置class為org.springframework.aop.framework.ProxyFactoryBean的bean。 總結了一下自己目前所學的知識