zoukankan      html  css  js  c++  java
  • 自定义圆形的ProgressBar

    1.自定义圆形的ProgressBar

      效果图:

      圆形ProgressBar的样式主要有以下几个,我们这里以progressBarStyleLarge为例进行样式的修改,其他的类似。

         

    <ProgressBar
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      style="?android:attr/progressBarStyleLarge"/>

      首先看一下style="?android:attr/progressBarStyleLarge"的源码,在frameworksasecore es esvaluesstyles.xml

    复制代码
    <style name="Widget.ProgressBar.Large">
      <item name="android:indeterminateDrawable">@android:drawable/progress_large_white</item>
      <item name="android:minWidth">76dip</item>
      <item name="android:maxWidth">76dip</item>
      <item name="android:minHeight">76dip</item>
      <item name="android:maxHeight">76dip</item>
    </style>
    复制代码

       看到这一行<item name="android:indeterminateDrawable">@android:drawable/progress_large_white</item>有木有,我们去看一下它的源码,在frameworksasecore es esdrawableprogress_large_white.xml

    <rotate xmlns:android="http://schemas.android.com/apk/res/android"
        android:drawable="@drawable/spinner_white_76"
        android:pivotX="50%"
        android:pivotY="50%"
        android:fromDegrees="0"
        android:toDegrees="360" />

      看到这一行 android:drawable="@drawable/spinner_white_76" 我们就明白了,原来它在这里放了一张图片,进行旋转。

      接下来我定义自己的ProgressBarStyle:

      首先我们先找一张图片加入我们的项目中(如一开始的效果图片),然后在drawable下新建progress_large.xml文件

    复制代码
    <?xml version="1.0" encoding="utf-8"?>
    <rotate xmlns:android="http://schemas.android.com/apk/res/android"
        android:drawable="@drawable/progress_large"
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="360" />
    复制代码

      在 valuestyle.xml中定义myProgressBarStyleLarge

    复制代码
    <style name="myProgressBarStyleLarge" >
      <item name="android:indeterminateDrawable">@drawable/progress_large</item>
      <item name="android:minWidth">76dip</item>
      <item name="android:maxWidth">76dip</item>
      <item name="android:minHeight">76dip</item>
      <item name="android:maxHeight">76dip</item>
    </style>
    复制代码

      最后在ProgressBar中使用我们自己定义的style,android:indeterminateDuration="700"指定图片旋转的速度,这样我们就可以根据自己的需要来定义ProgressBar的样式。

    <ProgressBar
      style="@style/myProgressBarStyleLarge"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:indeterminateDuration="700" />

    2.上面是通过一张图片填充android:indeterminateDrawable,我们也可以定义一个动画或者自定义颜色来实现,跟图片的用法一样:

      定义res/anim/progress_large_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="100" android:drawable="@drawable/loading_1" />  
      <item android:duration="100" android:drawable="@drawable/loading_2" />  
      <item android:duration="100" android:drawable="@drawable/loading_3" />  
      <item android:duration="100" android:drawable="@drawable/loading_4" />  
      <item android:duration="100" android:drawable="@drawable/loading_5" />  
      <item android:duration="100" android:drawable="@drawable/loading_6" />
    </animation-list>   
    复制代码

      在我们定义的style中引入<item name="android:indeterminateDrawable">@anim/progress_large_loading</item>

      定义res/drawable/progress_large_shape.xml如下:

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

      在我们定义的style中引入<item name="android:indeterminateDrawable">@drawable/progress_large_shape</item>

  • 相关阅读:
    绑定源特性的行为
    理解IOC和DI
    相遇~~~~
    选美素数~~~~~~~(⊙o⊙)
    狐狸找兔纸
    多重背包Q
    最长升序子序列
    构造逆序数
    田径赛马
    01背包M
  • 原文地址:https://www.cnblogs.com/laughingQing/p/10563365.html
Copyright © 2011-2022 走看看