本文转载自:http://www.linuxidc.com/Linux/2013-04/82743.htm

之前我有写过如何用style或者是layer-list实现自定义的横向进度条(http://www.cnblogs.com/tianzhijiexian/p/3854105.html),最近看到网上有人写了个垂直的弧形进度条的实现方式,觉得思路很巧妙,值得学习和体会,便转载一下。

之前文章的主要代码如下:

方法一:

<?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:drawable="@drawable/bar_bg" /> <!-- 设置进度条颜色图像资源 -->
<item
android:id="@android:id/progress"
android:drawable="@drawable/bar_progress" /> </layer-list>

方法二:

<?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="6dp" />
<gradient android:startColor="#0000ff"
android:endColor="#0000ff" />
</shape>
</item> <!-- 设置进度条颜色(红色) -->
<item android:id="@android:id/progress" >
<clip>
<shape>
<corners android:radius="6dp" />
<gradient android:startColor="#ff0000"
android:endColor="#ff0000" />
</shape>
</clip>
</item> </layer-list>

文章讲的是如何用一个图片来定义弧形进度条,其实就是把图片做个弧度,然后设置背景透明,最后修改进度条的方向为垂直的。下面是文章内容:

Android自带的progressbar组件基本可以满足常用的一些需求,最近一套新UI用到了弧形的进度条,如图

最初看到,自己是想自己实现,涉及到的问题就比较多,需要一些精确的计算画上去,整个屏幕的背景图是这样的:

不过在动手前,自己又百度了一些自定义进度条的文章看了一下。看了一篇受了很大的启发,这个弧形的效果完全可以用一个垂直的进度条来实现。使用这样一张图:

  

弧形与背景图的轨迹一样,然后整张图是长方形,不过背景是透明的,这样以后这样将android的progressbar竖直显示即可。

<ProgressBar android:id="@+id/disc_audio_progressbar"
style="?android:attr/progressBarStyleHorizontal"
android:progressDrawable="@drawable/audioseekbar_style"
android:layout_width="49dip"
 android:layout_height="281dip"
android:max="100"
android:layout_x="486dp"
android:layout_y="142dp"
android:progress="1">
</ProgressBar>

竖直显示了,下一步就是如何进度条沿竖直方向走呢?那就在audioseekbar_style中进行设置

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!--
<item android:id="@android:id/secondaryProgress" android:drawable="@drawable/imgslider_second">
</item>
-->
<item android:id="@android:id/progress">
<clip android:clipOrientation="vertical" android:drawable="@drawable/imgslider" android:gravity="top">
</clip>
</item>
</layer-list>

代码中的clip节点一共有四个属性,其中clipOrientation就是用来设置progress走向的,这里设置成vertical,图片就是刚才那张彩色弧形的图即可。

用layer-list实现弧形进度条的更多相关文章

  1. android弧形进度条,有详细注释的,比较简单

    Java code? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 ...

  2. [WPF] 使用三种方式实现弧形进度条

    1. 需求 前天看到有人问弧形进度条怎么做,我模仿了一下,成果如下图所示: 当时我第一反应是可以用 Microsoft.Toolkit.Uwp.UI.Controls 里的 RadialGauge 实 ...

  3. 【iOS实现一个颜色渐变的弧形进度条】

    在Github上看到一些进度条的功能,都是通过Core Graph来实现.无所谓正确与否,但是开发效率明显就差很多了,而且运行效率还是值得考究的.其实使用苹果提供的Core Animation能够非常 ...

  4. 用canvas画弧形进度条

    function toCanvas(id ,progress){ //canvas进度条 var canvas = document.getElementById(id), ctx = canvas. ...

  5. CircularSlider半弧形滑动条

    前言 这边文章主要 是写 一.半圆弧型滑块的设计 最近项目中需要用到半圆弧形滑块,其作用和UISlider差不多,用于拖动改变播放音乐的播放进度. 大概样子是这样的: 效果展示 特点如下: 滑动响应区 ...

  6. iOS圆弧渐变进度条的实现

    由于项目需要一个环形渐变进度条显示课程,这方便网上的确有很多相关资料但是,都是比较零散的而且,大多数只是放一堆代码就算完了.这里我想详细写一篇我自己实现这个进度条的过程. 实现一个圆弧进度条主要分为三 ...

  7. Android自定义控件系列之应用篇——圆形进度条

    一.概述 在上一篇博文中,我们给大家介绍了Android自定义控件系列的基础篇.链接:http://www.cnblogs.com/jerehedu/p/4360066.html 这一篇博文中,我们将 ...

  8. 利用贝塞尔曲线绘制(UIBezierPath)自定义iOS动态速度表,可以自定义刻度,刻度值,进度条样式

    GitHub的Demo下载地址 使用UIBezierPath画图步骤: 创建一个UIBezierPath对象 调用-moveToPoint:设置初始线段的起点 添加线或者曲线去定义一个或者多个子路径 ...

  9. N 种仅仅使用 HTML/CSS 实现各类进度条的方式

    本文将介绍如何使用 HTML/CSS 创建各种基础进度条及花式进度条及其动画的方式,通过本文,你可能可以学会: 通过 HTML 标签 <meter> 创建进度条 通过 HTML 标签 &l ...

随机推荐

  1. ModelDriven 和 Preparable 拦截器

    Params 拦截器 Parameters 拦截器将把表单字段映射到 ValueStack 栈的栈顶对象的各个属性中. 如果某个字段在模型里没有匹配的属性, Param 拦截器将尝试 ValueSta ...

  2. L3-004 肿瘤诊断 dfs bfs

    在诊断肿瘤疾病时,计算肿瘤体积是很重要的一环.给定病灶扫描切片中标注出的疑似肿瘤区域,请你计算肿瘤的体积. 输入格式: 输入第一行给出4个正整数:M.N.L.T,其中M和N是每张切片的尺寸(即每张切片 ...

  3. AngularJS之jeDate日期控件基本使用

    业务背景: 初学AngularJs,最近一段时间,因业务需求,要求日期选择带有快捷键.时分秒等.鉴于AngularJS组件库ui-bootstrap没有此功能,找了一款基于原生JS实现的插件-jeDa ...

  4. BZOJ 3253 Fence Repair 哈夫曼树 水题

    http://poj.org/problem?id=3253 这道题约等于合并果子,但是通过这道题能够看出来哈夫曼树是什么了. #include<cstdio> #include<c ...

  5. tomcat 启动 关闭 重启脚本

    启动 #!/bin/bash # Author:wanglan # Mail:@qq.com # Fuction:Tomcat Start/stop/restart script # Version: ...

  6. Linux学习笔记04—IP配置

    一.自动获取IP只有一种情况可以自动获取IP地址,那就是你的Linux所在的网络环境中有DHCP服务.只要你的真机可以自动获取IP,那么安装在虚拟机的Linux同样也可以自动获取IP. 方法很简单,只 ...

  7. 【原创】Nginx+PHP-FPM优化技巧总结(转)

    php-fpm的安装很简单,参见PHP(PHP-FPM)手动编译安装.下面主要讨论下如何提高Nginx+Php-fpm的性能.   1.Unix域Socket通信   之前简单介绍过Unix Doma ...

  8. 【汇总】PHP-FPM 配置优化(转)

    -----------------------开启php-fpm慢脚本日志 request_slowlog_timeout = 30sslowlog = /usr/local/php/var/log/ ...

  9. 通过WinAPI播放PCM声音

    在Windows平台上,播放PCM声音使用的API通常有如下两种. waveOut and waveIn:传统的音频MMEAPI,也是使用的最多的 xAudio2:C++/COM API,主要针对游戏 ...

  10. 使用36-pin的STM32输出VGA, VGA output using a 36-pin STM32

    使用36-pin的STM32输出VGA 手头上有个项目需要通过单片机来控制将图像显示在LCD上,在网上搜了一阵子,发现都是使用的FPGA做的, 开始自己对FPGA不是很熟,一直在用的也是ARM系列的, ...