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

效果图如下：下载地址

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