三种方式实现自定义圆形页面加载中效果的进度条，包含一个好看的Android UI

最新推荐文章于 2022-04-08 18:35:40 发布
最新推荐文章于 2022-04-08 18:35:40 发布
阅读量3.5k 收藏 1
点赞数
文章标签： 安卓 动画
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ch1406285246/article/details/52211121
版权

效果图如下：下载地址

样式一、通过动画实现定义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>
​

运行一下就像我效果图一样的效果了

下载地址：http://download.csdn.net/detail/ch1406285246/9859006

程前o
关注
android 页面加载效果（Dialog类型效果）
qq_35215220的博客
01-09 622
这个属于页面打开时的延迟加载效果，总的来说比较好用，网络太卡的时候也不至于没办法进行操作，当然也存在没有加载完成而产生的误操作可能性，具体还是要看项目的需要。 公共类： public class CustomProgressDialog extends Dialog { private Context context = null; private static CustomP
加载圆形进度条
jifashihan的博客
04-19 2348
项目需求，需要类似于支付宝支付时的圆形进度条，主要效果是圆形有无到有，再变成由有到无，如果加载成功，则在有无到有结束的时候，显示对号 具体效果图： 类似的实现，在github上有一个开源项目，github，我下载下来，在原有代码的基础上进行了修改 CusImage.java public class CusImage extends View { private Paint myPa
css3加载动画--动态圆形展示加载进度条
zuo-yiran的博客
10-25 1309
加载的圆形动画效果，可以理解从一条线分成一百份变成一个圆，进一步改的话可以把加载的进度用数字表示出来 html部分：(也是醉了，贴代码总是不显示，只能上截图了) css3部分： *{margin: 0;padding: 0;} .wrap,.circle,.percent{ position: absolute; width: 200px; height: 200px;...
android圆形加载进度条
11-17
android圆形加载进度条demo，拿来直接用
动画实现自定义圆形加载中效果的进度条
11-05
动画实现自定义圆形加载中效果的进度条 ,Android开发中在处理耗时工作的时候，例如：列表加载，大多数会有一个精度条加载的框，里面有一个像gif的图片在旋转一样。
Android 自定义view实现进度条加载效果实例代码
08-29
Android 自定义View 实现进度条加载效果实例代码 ...在本篇文章中，我们实现了一个进度条加载效果实例代码，使用自定义View 实现了进度条的绘制和动画效果。该效果可以应用于各种Android 应用程序中。
Android实现自定义圆形进度条
09-02
首先，实现自定义圆形进度条的基本思路包括以下几个步骤： 1. 绘制一个实心圆，作为进度条的基础。 2. 在实心圆上方绘制一个白色实心正方形，用来遮挡部分圆，从而形成进度效果。 3. 在圆的中心动态绘制当前进度的...
Android自定义带加载动画效果的环状进度条
01-20
在Android开发中，自定义视图是实现独特UI效果的重要手段。本文将详细介绍如何创建一个带加载动画效果的环状进度条。环状进度条在许多应用中都很常见，例如加载指示器或显示完成度。 首先，我们创建一个新的类`...
Qt案例之利用QPainter实现自定义圆形进度条.zip
04-24
Qt案例之利用QPainter实现自定义圆形进度条，纯QPainter绘制，不包括图片，详情可参考文章：https://blog.csdn.net/didi_ya/article/details/124378255
Android编程基于自定义View实现绚丽的圆形进度条功能示例
08-31
总结来说，这个示例提供了一个基础的自定义圆形进度条实现，包括了拖动交互和颜色变化等功能。开发者可以根据自己的需求在此基础上进行扩展，例如添加更多的颜色段来表示不同的进度区间，或者添加动画效果来增强用户...
html5圆形进度条加载按钮.zip
07-04
html5圆形进度条加载按钮是一款modernizr html5表单提交按钮圆形进度条加载动画表单验证效果。
简单的动画实现android的圆形加载条
03-23
简单的动画实现android的圆形加载条，在界面可以控制其显示与消失。android studio环境 如果编译不过 请改 compileSdkVersion 23 buildToolsVersion "23.0.3" defaultConfig { applicationId "com.meiaomei.circleprogress" minSdkVersion 15 targetSdkVersion 23 versionCode 1 versionName "1.0" } project的build.gradle: dependencies { classpath 'com.android.tools.build:gradle:1.5.0' // NOTE: Do not place your application dependencies here; they belong // in the individual module build.gradle files }
Android自定义webView头部进度加载效果
01-20
不多说先来看下效果图： 1. 颜色渐变加载进度条（夜神模拟器）   绿色加载进度条（魅蓝note2）   看图说话： 上图是不是加载网页的时候会有一个进度条在横向加载，比以前网速不好的时候是一片空白给人的感觉友好多了是不，然后效果还不错。 实现思路 就是自己画一条进度线（大家应该都会吧）然后加载到WebView的上面，开始进度条是隐藏的，进度线初始值为1，然后为了效果好一点，初始少于10的进度都让它加载到10的位置，等进度到100的时候0.2秒后隐藏。 请记得添加网络权限： <uses-permission android:name=android.permission.INTERNET
android三种自定义Loading加载框
05-29
android三种自定义Loading加载框，让你的手机界面加载等待不再枯燥
实现圆形加载中效果自定义Dialog
08-18
实现圆形加载中效果自定义Dialog,加载中，加载成功和加载失败的不同效果
多式样ProgressBar
iteye_15118的博客
01-22 595
多式样ProgressBar普通圆形ProgressBar该类型进度条也就是一个表示运转的过程，例如发送短信，连接网络等等，表示一个过程正在执行中。一般只要在XML布局中定义就可以了。 &lt;progressBar android:id="@+id/widget43"       android:layout_width="wrap_content"       andr...
Android加载圆形(圆角)图片的方式总结(RoundedBitmapDrawable、Glide)
qq_45448654的博客
04-08 5970
一、问题引入     Android开发中经常要使用到ImageView，而ImageView控件自带的宽度width、高度height等属性无法让ImageView呈现出圆形、圆角这样的形状，相信很多小伙伴都和我一样为这个问题苦恼，现在介绍几种方法，可以很方便地实现圆形图片。 二、方法总结 方法一：使用Glide(推荐使用) 在build.gradle中引入Glide包：implementation 'com.github.bumptech.glide:glid
三种方式实现自定义圆形页面加载中效果的进度条
Central-Perk的专栏
08-08 4875
一、通过动画实现 定义res/anim/loading.xml如下： <animation-list android:oneshot="false" xmlns:android="http://schemas.android.com/apk/res/android"> 在layout文件中引用如下： <ProgressBa
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值