各种自定义进度条(progressbar或seekbar)的实现

转载 2016年06月01日 10:04:26


1.可以动的蜗牛进度条(seekbar):https://github.com/android-cjj/SnailBar






边框就是设置seekbar的background为一个sharp或一个.9图片

进度条就是一个layerlist

thumb设置成一个动画:

<?xml version="1.0" encoding="utf-8"?>

<animation-list xmlns:android="http://schemas.android.com/apk/res/android"

    android:oneshot="false">

    <item android:drawable="@drawable/s1" android:duration="300" />

    <item android:drawable="@drawable/s2" android:duration="300" />

    <item android:drawable="@drawable/s3" android:duration="300" />

    <item android:drawable="@drawable/s4" android:duration="300" />

    <item android:drawable="@drawable/s5" android:duration="300" />

</animation-list>
seekbar的thumb设置为这个逐帧动画:

android:thumb="@drawable/snailanim"


<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/background"
android:paddingTop="3px"
android:paddingBottom="3px">
<shape>
<corners android:radius="10dip" />
<gradient
android:startColor="#ffd9e5e6"
android:centerColor="#ffdeeaeb"
android:endColor="#ffd9e5e6"
android:centerY="0.45"
android:angle="270"/>
</shape>
</item>

<item android:id="@android:id/progress"
android:paddingTop="3px"
android:paddingBottom="3px" >
<clip>
<shape>
<corners android:radius="10dip" />
<gradient
android:startColor="#ff7efd21"
android:centerColor="#ffdfffc5"
android:endColor="#ff87f31a"
android:centerY="0.45"
android:angle="270"/>
</shape>
</clip>
</item>
</layer-list>

2.纵向的progressbar:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:id="@android:id/background">
        <shape>
            <corners android:radius="5dip" />
            <gradient
                android:startColor="#ff9d9e9d"
                android:centerColor="#ff5a5d5a"
                android:centerY="0.75"
                android:endColor="#ff747674"
                android:angle="270"
                />
        </shape>
    </item>

    <item android:id="@android:id/secondaryProgress">
        <clip android:clipOrientation="vertical" android:gravity="bottom">
            <shape>
                <corners android:radius="5dip" />
                <gradient
                    android:startColor="#80ffd300"
                    android:centerColor="#80ffb600"
                    android:centerY="0.75"
                    android:endColor="#a0ffcb00"
                    android:angle="270"
                    />
            </shape>
        </clip>
    </item>

    <item android:id="@android:id/progress">
        <clip android:clipOrientation="vertical" android:gravity="bottom">
            <shape>
                <corners android:radius="5dip" />
                <gradient
                    android:startColor="#ffffd300"
                    android:centerColor="#ffffb600"
                    android:centerY="0.75"
                    android:endColor="#ffffcb00"
                    android:angle="270"
                    />
            </shape>
        </clip>
    </item>

</layer-list>

clip的clipOrientation指定进度条是横向还是竖向,默认是横向,gravity属性指定对齐方式,默认是竖向中间横向靠左


<ProgressBar

    android:indeterminateOnly="false"
    android:indeterminateDrawable="@drawable/animlist_vprogressbar"
    android:progressDrawable="@drawable/layerlist_vprogress"
    android:layout_width="wrap_content"
    android:layout_height="100dp"
    android:id="@+id/progressBar"
    android:minWidth="10dp"
    android:maxWidth="10dp"
    android:progress="30"
    android:layout_centerInParent="true"
     />

indeterminateOnly:是模糊的还是精细的进度,true时为模糊进度条,fasle为水平或垂直精确进度条

android:indeterminateDrawable:表示模糊进度的逐帧动画,此处可以不指定,当然,也可以指定indeterminateOnly为true,这样这个动画就可以起作用了

layout_height/width:竖向时指定具体高度,宽度可以为wrap_content

min/maxwidth:如果是横向的,指定的就是min/maxheight,指定这个,让进度条粗细合适



3.模糊进度也可以用横向的进度条显示出来:

<ProgressBar
    style="?android:attr/progressBarStyleHorizontal"
    android:indeterminateOnly="true"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/progressBar"
    android:minWidth="10dp"
    android:maxWidth="10dp"
    android:progress="30"
     />

如下面那个进度条显示的那样:



4.三种自定义圆形进度条的方式:

4.1.使用逐帧动画:

动画drawable:

<?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"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:orientation="horizontal">

    <ProgressBar
        android:id="@+id/loading_process_dialog_progressBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:indeterminate="true"
        android:indeterminateDrawable="@drawable/loading" />
</LinearLayout>

4.2.使用sharp:

drawable下新建xml,以rotate为根节点:

<?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="#FFDC35"
            android:centerY="0.50"
            android:endColor="#CE0000"
            android:startColor="#FFFFFF"
            android:type="sweep"
            android:useLevel="false" />
    </shape>
</rotate>

直接用shape不会旋转

布局文件一样

4.3.使用图片:

drawable下新建xml:

<?xml version="1.0" encoding="utf-8"?>

<rotate android:drawable="@drawable/dialog_progress_round"
   android:fromDegrees="0.0"
   android:toDegrees="360.0"
   android:pivotX="50.0%"
   android:pivotY="50.0%"
   xmlns:android="http://schemas.android.com/apk/res/android" />
或:

<?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:pivotX="50.0%"
            android:pivotY="50.0%"
            android:toDegrees="360.0" />
    </item>
</layer-list>

布局文件一样


以上都没有指定style,默认style是:style="?android:attr/progressBarStyle"

如果要放大,可以用:progressBarStyleLarge,缩小用:progressBarStyleSmall








layer加载遮罩层使用 Ajax Loading Demo

layer加载弹出层 Ajax Loading Demo

layer和layui的用法

layer的话先引入jq1.8以上版本,然后引入layer文件,就可以去官网找想要的样式复制用了,layer:open之类的。 layui加载他的css文件就好,手机号,邮箱,身份证验证什么都有,复...

CAShaperLayer环形进度条加载动画

介绍一个简单好玩的动画给各位默默敲码的攻城狮们。一个基于Layer层的环型进度条的动画吧,这个动画我们可以在加载数据和倒计时的时候看到,还有录制小视频时的一个小动画吧。 关键技术就是用CAShape...

android 节点进度条

/** * 2015-1-24 * 小林爱 * */ public class NodeProgressBar extends View implements Runnable { /*...

Android自定义View(三)--可点击的节点进度条

需求  根据效果图,我们可以确定,用自定义View完全可以搞定,在自定义控件系列博客第一篇中,我们总结了自定义View的几个步骤:继承View,覆盖构造方法 自定义属性 重写onMeasure方法测...

Android 打造形形色色的进度条 实现可以如此简单

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/43371299 ,本文出自:【张鸿洋的博客】1、概述 最近需要用进度条,秉着不重复...

NodeProgressView 物流节点进度条

关于作者戴定康 博客:个人博客 Csdn:戴定康的博客 NodeProgressView 用来显示物节点进度的自定义View,仿淘宝 版本尚未发布到Jcenter,后续将会逐一发布,...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

android中各式各样的进度条,加载进度,太棒了

Progress Wheel为GitHub热门项目,作者是:Todd-Davies,项目地址: https://github.com/Todd-Davies/ProgressWheel ...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:各种自定义进度条(progressbar或seekbar)的实现
举报原因:
原因补充:

(最多只允许输入30个字)