文档章节

自定义ProgressBar(长)

lsy999
 lsy999
发布于 2017/04/26 20:39
字数 764
阅读 11
收藏 0

首先在布局上

<RelativeLayout
    android:layout_below="@id/just_used_to_locate_04"
    android:layout_marginLeft="16.0dip"
    android:layout_marginRight="16.0dip"
    android:layout_marginTop="5dp"
    android:layout_toRightOf="@+id/cim_xinix"
    android:layout_width="wrap_content"
    android:layout_height="30dp">
    <ProgressBar
        android:id="@+id/gradient_progress"
        android:layout_width="match_parent"
        android:layout_height="30dp"
        style="@style/Base.Widget.AppCompat.ProgressBar.Horizontal"
        android:progress="60"
        android:progressDrawable="@drawable/my_xinxi_progress"
        android:indeterminateDuration="10"
        />

    <ImageView
        android:layout_width="15dp"
        android:layout_height="15dp"
        android:background="@drawable/redbag_img_minitree"
        android:layout_centerVertical="true"
        android:layout_marginLeft="10dp"
        />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="6/10"
        android:textColor="#ffffff"
        />
</RelativeLayout>

在drawable下布局两个

<?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="20dp" />
            <stroke
                android:width="2dp"
                android:color="#ffffff" />
            <gradient
                android:angle="270"
                android:centerColor="#C55C18"
                android:centerY="0.75"
                android:endColor="#C55C18"
                android:startColor="#C55C18" />
        </shape>
    </item>

    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <corners android:radius="20dp" />
                <stroke
                    android:width="2dp"
                    android:color="#ffffff" />
                <gradient
                    android:angle="270"
                    android:centerColor="#80ffb600"
                    android:centerY="0.75"
                    android:endColor="#a0ffcb00"
                    android:startColor="#80ffd300" />
            </shape>
        </clip>
    </item>

    <item android:id="@android:id/progress">
        <clip>

            <scale android:scaleWidth="100%"
                android:drawable="@drawable/progressview_xinxi"   />
        </clip>
    </item>

</layer-list>
效果图如上
progressview_xinxi.xml
<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle"
  xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="20dp"/>
    <stroke
        android:width="2dp"
        android:color="#00000000" />
    <stroke
        android:width="4dp"/>
    <solid android:color="#00000000"/>
    <solid android:color="#F55c18"/>
    <gradient
        android:angle="0"
        android:centerY="0.75"
        android:endColor="#ff3e24"
        android:startColor="#ffcf23"/>

</shape>

然后在mainActivity里面加上一句

ProgressBar gradient_progress = (ProgressBar) findViewById(R.id.gradient_progress);
ObjectAnimator
        .ofInt(gradient_progress, "progress", 0, 60)
        .setDuration(500)
        .start();

就这样 这个动态的长形出来了。

shape的定义

android:shape=["rectangle"|"oval"|"line"|"ring"]

shape的 形状,默认为矩形,可以设置为矩形(rectangle), 、椭圆形(oval)、线性形状(line)、环形(ring)

下面的属性只有在android:shape=”ring时可用:
android:innerRadius 尺寸,内环的半径。
android:innerRadiusRatio 浮点型,以环的宽度比率来表示内环的半径,

  • solid
    实心,填充的意思
    android:color指定填充的颜色

  • gradient
    渐变
    android:startColor 开始的颜色
    android:endColor 渐变结束的颜色
    android:angle 渐变角度,必须为45的整数倍,当angle=0时,渐变色是从左向右。 然后逆时针方向转,当angle=90时为从下往上
    android:type=”linear”,即线性渐变,可以指定渐变为径向渐变,android:type=”radial”,径向渐变需要指定半径android:gradientRadius=”50”

  • stroke
    描边缘
    android:width=”2dp” 描边的宽度
    android:color 描边的颜色
    我们还可以把描边弄成虚线的形式,设置方式为:android:dashWidth=”5dp” android:dashGap=”3dp”
    其中android:dashWidth表示’-‘这样一个横线的宽度,android:dashGap表示之间隔开的距离。

  • corners
    拐角,radius属性为半径,android:radius为角的弧度,值越大角越圆。

  • padding:间隔

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape>
            <gradient
                android:startColor="#ff8c00"
                android:endColor="#ff8c00"
                android:angle="270"/>
            <stroke
                android:width="0dp"
                android:color="#dcdcdc">
            </stroke>
            <corners
                android:radius="10dp">
            </corners>
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp"></padding>
        </shape>
    </item>
    <item android:state_focused="true">
        <shape>
            <gradient
                android:startColor="#ffc2b7"
                android:endColor="#ffc2b7"
                android:angle="270">
            </gradient>
            <stroke
                android:width="0dp"
                android:color="#dcdcdc">
            </stroke>
            <corners
                android:radius="10dp">
            </corners>
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp">
            </padding>
        </shape>
    </item>
    <item>
        <shape>
            <gradient
                android:startColor="#ff9677"
                android:endColor="#ff9d77"
                android:angle="270">
            </gradient>
            <stroke
                android:width="0dp"
                android:color="#fad3cf">
            </stroke>
            <corners
                android:radius="10dp">
            </corners>
            <padding
                android:left="10dp"
                android:right="10dp"
                android:top="10dp"
                android:bottom="10dp">
            </padding>
        </shape>
    </item>
</selector>

© 著作权归作者所有

共有 人打赏支持
lsy999
粉丝 0
博文 85
码字总数 25183
作品 0
程序员
自定义之progressbar(图片实现)

自定义Progressbar: 1.自选一张图片 2.在drawable下创建一个rotate相关xml文件 3.自定义一个Style , 在控件Progressbar上引入自定义的style , 指定转动速度 在drawable文件下的 rotateprog...

新根
2015/09/25
1K
0
Android Progressbar

各种类型的Android进度条:CircleProgress: http://www.open-open.com/lib/view/open1415936845930.html#label0 自定义圆形的ProgressBar: http://www.cnblogs.com/xingfuzzhd/archive/2013......

当空皓月
2015/04/20
0
0
Android 通知常见样式小结

一.普通通知 这是最常见通知样式,如下图 默认样式,包括一个标题和一个内容,内容只显示一行 ,多余的内容会以省略号替代。 效果图:(第三行内容在低版本不一定显示) 注意: build内提供了...

肖朝胜
2016/10/12
74
0
Android ProgressBar自定义图片进度,自定义渐变色进度条

在某些操作的进度中的可视指示器,为用户呈现操作的进度,还它有一个次要的进度条,用来显示中间进度,如在流媒体播放的缓冲区的进度。一个进度条也可不确定其进度。在不确定模式下,进度条显...

simpower
2014/10/04
0
0
Android 两种自定义ProgressBar

横向的ProgressBar 在res下创建drawable文件夹,新建文件drawable/progressbar_color.xml <?xml version="1.0" encoding="utf-8"?><layer-list xmlns:android="http://schemas.android.com/......

yaly
2015/05/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

(一)软件测试专题——之Linux常用命令篇01

本文永久更新地址:https://my.oschina.net/bysu/blog/1931063 【若要到岸,请摇船:开源中国 不最醉不龟归】 Linux的历史之类的很多书籍都习惯把它的今生来世,祖宗十八代都扒出来,美其名曰...

不最醉不龟归
22分钟前
6
0
蚂蚁金服Java开发三面

8月20号晚上8点进行了蚂蚁金服Java开发岗的第三面,下面开始: 自我介绍(要求从实践过程以及技术背景角度着重介绍) 实习经历,说说你在公司实习所做的事情,学到了什么 关于你们的交易平台...

edwardGe
29分钟前
7
0
TypeScript基础入门 - 函数 - this(三)

转载 TypeScript基础入门 - 函数 - this(三) 项目实践仓库 https://github.com/durban89/typescript_demo.gittag: 1.2.4 为了保证后面的学习演示需要安装下ts-node,这样后面的每个操作都能...

durban
39分钟前
0
0
Spark core基础

Spark RDD的五大特性 RDD是由一系列的Partition组成的,如果Spark计算的数据是在HDFS上那么partition个数是与block数一致(大多数情况) RDD是有一系列的依赖关系,有利于Spark计算的容错 RDD中每...

张泽立
46分钟前
0
0
如何搭建Keepalived+Nginx+Tomcat高可用负载均衡架构

一.概述 初期的互联网企业由于业务量较小,所以一般单机部署,实现单点访问即可满足业务的需求,这也是最简单的部署方式,但是随着业务的不断扩大,系统的访问量逐渐的上升,单机部署的模式已...

Java大蜗牛
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部