设为首页收藏本站
查看: 395|回复: 0

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

[复制链接]

75

主题

75

帖子

442

积分

网站编辑

Rank: 8Rank: 8

积分
442
发表于 2017-1-11 11:58:37 | 显示全部楼层 |阅读模式
本帖最后由 疯狂IT人 于 2017-1-11 12:00 编辑

一、通过动画实现
定义res/anim/loading.xml如下:
  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文件中引用如下:
  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如下:
  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文件中引用如下:
  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如下:
  1. <font face="" "=""><?xml version="1.0" encoding="utf-8"?></font>
  2. <font face="" "=""><layer-list xmlns:android="http://schemas.android.com/apk/res/android"></font>
  3. <font face="" "=""><item></font>
  4. <font face="" "="">  <rotate android:drawable="@drawable/dialog_progress_round"</font>
  5. <font face="" "="">   android:fromDegrees="0.0" android:toDegrees="360.0" android:pivotX="50.0%"</font>
  6. <font face="" "="">   android:pivotY="50.0%" /></font>
  7. <font face="" "=""></item></font>
  8. <font face="" "=""></layer-list></font>
复制代码


在layout文件中引用如下:
  1. <font face="" "=""><ProgressBar android:id="@+id/loading_process_dialog_progressBar"</font>
  2. <font face="" "="">  android:layout_width="wrap_content" android:layout_height="wrap_content"</font>
  3. <font face="" "="">  android:indeterminate="false" android:indeterminateDrawable="@drawable/dialog_style_xml_icon" /></font>
复制代码

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


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


直接上图:


下载地址:
百度云附件:AnimRoundProcessDialog.rar   

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?加入社区

x
回复

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 加入社区

本版积分规则

推荐阅读 More>
广告位

Powered by Discuz X3.2

© 2001-2016   

合作伙伴

返回顶部 返回列表