Android 三种方式实现自定义圆形页面加载中效果的进度条

转载:http://www.eoeandroid.com/forum.php?mod=viewthread&tid=76872

一、通过动画实现

定义res/anim/loading.xml如下:

[java] view plaincopy

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <animation-list android:oneshot="false"
  3. xmlns:android="http://schemas.android.com/apk/res/android">
  4. <item android:duration="150" android:drawable="@drawable/loading_01" />
  5. <item android:duration="150" android:drawable="@drawable/loading_02" />
  6. <item android:duration="150" android:drawable="@drawable/loading_03" />
  7. <item android:duration="150" android:drawable="@drawable/loading_04" />
  8. <item android:duration="150" android:drawable="@drawable/loading_05" />
  9. <item android:duration="150" android:drawable="@drawable/loading_06" />
  10. <item android:duration="150" android:drawable="@drawable/loading_07" />
  11. </animation-list>

在layout文件中引用如下:

[java] view plaincopy

  1. <ProgressBar android:id="@+id/loading_process_dialog_progressBar"
  2. android:layout_width="wrap_content" android:layout_height="wrap_content"
  3. android:indeterminate="false" android:indeterminateDrawable="@anim/loading" />

二、通过自定义颜色实现
定义res/drawable/dialog_style_xml_color.xml如下:

[java] view plaincopy

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

在layout文件中引用如下:

[java] view plaincopy

  1. <ProgressBar android:id="@+id/loading_process_dialog_progressBar"
  2. android:layout_width="wrap_content" android:layout_height="wrap_content"
  3. android:indeterminate="false" android:indeterminateDrawable="@drawable/dialog_style_xml_color" />

三、使用一张图片进行自定义
定义res/drawable/dialog_style_xml_icon.xml如下:

[java] view plaincopy

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

在layout文件中引用如下:

[html] view plaincopy

  1. <ProgressBar android:id="@+id/loading_process_dialog_progressBar"
  2. android:layout_width="wrap_content" android:layout_height="wrap_content"
  3. android:indeterminate="false" android:indeterminateDrawable="@drawable/dialog_style_xml_icon" />

main.xml如下:

[html] view plaincopy

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:orientation="vertical" android:layout_width="fill_parent"
  4. android:layout_height="fill_parent" android:gravity="center"
  5. android:background="#FFF">
  6. <Button android:text="@string/anim" android:id="@+id/anim"
  7. android:layout_width="120dip" android:layout_height="wrap_content" />
  8. <Button android:text="@string/color" android:id="@+id/color"
  9. android:layout_width="120dip" android:layout_height="wrap_content" />
  10. <Button android:text="@string/icon" android:id="@+id/icon"
  11. android:layout_width="120dip" android:layout_height="wrap_content" />
  12. </LinearLayout>

之后通过三个按钮将ProgressBar 放在对话框中显示出来就完成了。

 AnimRoundProcessDialog.rar

截图如下:

时间: 2024-11-09 02:41:39

Android 三种方式实现自定义圆形页面加载中效果的进度条的相关文章

Android 三种方式实现自定义圆形进度条ProgressBar

一.通过动画实现 定义res/anim/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=&qu

【Android进度条】三种方式实现自定义圆形进度条ProgressBar

一.通过动画实现 定义res/anim/loading.xml如下: [html] view plaincopyprint? <?xml version="1.0" encoding="UTF-8"?> <animation-list android:oneshot="false" xmlns:android="http://schemas.android.com/apk/res/android"> &

极客编程挑战#018:设计独一无二的页面 ”加载中“ 效果

本期挑战 请使用以下开练 LOGO 素材 为基础(三选一即可): 图片(base64):http://www.gbtags.com/gb/rtreplayerpreview/808.htm SVG图形:http://www.gbtags.com/gb/rtreplayerpreview/809.htm 或者基于以上图形的的自定义LOGO设计 挑战要求: 使用你所熟悉的任意前端技术(JS,CSS3,画布,SVG动画等等),生成一个漂亮动态的 ”页面加载中“ 效果,持续5秒后,页面即导向地址:htt

三种方式解决你的js加载乱码

第一种方式——编码统一 我们以前觉得出现乱码的原因是因为编码不统一,就是因为我们设置编码统一之后,就解决了问题,所以,让html和js的编码统一,是最简单的一个乱码解决方式,原因是什么,是因为,如果你在加载js的时候,并没有声明js的编码格式,那么浏览器会默认的按照当前html的编码格式进行解析引入的js文件,如果你的js和本身页面编码不一样,并且js中引入了中文字符,那么肯定会出现乱码的.要知道,程序都是笨笨的. 第二种方式——在引入js的标签中加入charset属性 这样引入,那么这个xx.

两种方法实现在HTML页面加载完毕后运行某个js

两种方法实现在HTML页面加载完毕后运行某个js 这篇文章主要介绍了通过两种方法实现在HTML页面加载完毕后运行某个js,需要的朋友可以参考下 js方法: 复制代码 代码如下: <script type="text/javascript"> window.onload=function(){ var userName="xiaoming"; alert(userName); } </script> 以下为jQuery方法,需要引用jQuery

页面加载中jquery逐渐消失效果实现

为了获得更好的用户体验,现在大多数网页都会在页面中加一个加载中效果,这里实现一个加载中逐渐消失的效果,以至于看上去不那么生硬. html: <div id="loading"><img src="images/common/loading.gif" ></div> css: /*加载中*/ #loading{     position: fixed;     top: 0;     left: 0;     width: 100%

jQuery8种不同的瀑布流懒加载loading效果

优化图片加载插件jQuery8种不同的瀑布流懒加载loading效果  在线预览 下载地址 实例代码 <ul class="grid effect-1" id="grid"> <li><a href="#"><img src="/api/jq/5733e33ac28cb/images/5.jpg"></a></li> <li><a hre

css 实现页面加载中等待效果

<!DOCTYPE html> <html> <head> <title>css实现页面加载中,请稍候效果</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my pa

三种思路实现自定义404页面

如何定义404 404,说白了就是找不到页面,那么如何定义"找不到"呢? 我们可以通过源代码来看看Spring MVC如何定义"404"的: // Determine handler for the current request. mappedHandler = getHandler(processedRequest, false); if (mappedHandler == null || mappedHandler.getHandler() == null)