用layer-list实现弧形进度条
本文转载自: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实现弧形进度条的更多相关文章
- 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 ...
- [WPF] 使用三种方式实现弧形进度条
1. 需求 前天看到有人问弧形进度条怎么做,我模仿了一下,成果如下图所示: 当时我第一反应是可以用 Microsoft.Toolkit.Uwp.UI.Controls 里的 RadialGauge 实 ...
- 【iOS实现一个颜色渐变的弧形进度条】
在Github上看到一些进度条的功能,都是通过Core Graph来实现.无所谓正确与否,但是开发效率明显就差很多了,而且运行效率还是值得考究的.其实使用苹果提供的Core Animation能够非常 ...
- 用canvas画弧形进度条
function toCanvas(id ,progress){ //canvas进度条 var canvas = document.getElementById(id), ctx = canvas. ...
- CircularSlider半弧形滑动条
前言 这边文章主要 是写 一.半圆弧型滑块的设计 最近项目中需要用到半圆弧形滑块,其作用和UISlider差不多,用于拖动改变播放音乐的播放进度. 大概样子是这样的: 效果展示 特点如下: 滑动响应区 ...
- iOS圆弧渐变进度条的实现
由于项目需要一个环形渐变进度条显示课程,这方便网上的确有很多相关资料但是,都是比较零散的而且,大多数只是放一堆代码就算完了.这里我想详细写一篇我自己实现这个进度条的过程. 实现一个圆弧进度条主要分为三 ...
- Android自定义控件系列之应用篇——圆形进度条
一.概述 在上一篇博文中,我们给大家介绍了Android自定义控件系列的基础篇.链接:http://www.cnblogs.com/jerehedu/p/4360066.html 这一篇博文中,我们将 ...
- 利用贝塞尔曲线绘制(UIBezierPath)自定义iOS动态速度表,可以自定义刻度,刻度值,进度条样式
GitHub的Demo下载地址 使用UIBezierPath画图步骤: 创建一个UIBezierPath对象 调用-moveToPoint:设置初始线段的起点 添加线或者曲线去定义一个或者多个子路径 ...
- N 种仅仅使用 HTML/CSS 实现各类进度条的方式
本文将介绍如何使用 HTML/CSS 创建各种基础进度条及花式进度条及其动画的方式,通过本文,你可能可以学会: 通过 HTML 标签 <meter> 创建进度条 通过 HTML 标签 &l ...
随机推荐
- ModelDriven 和 Preparable 拦截器
Params 拦截器 Parameters 拦截器将把表单字段映射到 ValueStack 栈的栈顶对象的各个属性中. 如果某个字段在模型里没有匹配的属性, Param 拦截器将尝试 ValueSta ...
- L3-004 肿瘤诊断 dfs bfs
在诊断肿瘤疾病时,计算肿瘤体积是很重要的一环.给定病灶扫描切片中标注出的疑似肿瘤区域,请你计算肿瘤的体积. 输入格式: 输入第一行给出4个正整数:M.N.L.T,其中M和N是每张切片的尺寸(即每张切片 ...
- AngularJS之jeDate日期控件基本使用
业务背景: 初学AngularJs,最近一段时间,因业务需求,要求日期选择带有快捷键.时分秒等.鉴于AngularJS组件库ui-bootstrap没有此功能,找了一款基于原生JS实现的插件-jeDa ...
- BZOJ 3253 Fence Repair 哈夫曼树 水题
http://poj.org/problem?id=3253 这道题约等于合并果子,但是通过这道题能够看出来哈夫曼树是什么了. #include<cstdio> #include<c ...
- tomcat 启动 关闭 重启脚本
启动 #!/bin/bash # Author:wanglan # Mail:@qq.com # Fuction:Tomcat Start/stop/restart script # Version: ...
- Linux学习笔记04—IP配置
一.自动获取IP只有一种情况可以自动获取IP地址,那就是你的Linux所在的网络环境中有DHCP服务.只要你的真机可以自动获取IP,那么安装在虚拟机的Linux同样也可以自动获取IP. 方法很简单,只 ...
- 【原创】Nginx+PHP-FPM优化技巧总结(转)
php-fpm的安装很简单,参见PHP(PHP-FPM)手动编译安装.下面主要讨论下如何提高Nginx+Php-fpm的性能. 1.Unix域Socket通信 之前简单介绍过Unix Doma ...
- 【汇总】PHP-FPM 配置优化(转)
-----------------------开启php-fpm慢脚本日志 request_slowlog_timeout = 30sslowlog = /usr/local/php/var/log/ ...
- 通过WinAPI播放PCM声音
在Windows平台上,播放PCM声音使用的API通常有如下两种. waveOut and waveIn:传统的音频MMEAPI,也是使用的最多的 xAudio2:C++/COM API,主要针对游戏 ...
- 使用36-pin的STM32输出VGA, VGA output using a 36-pin STM32
使用36-pin的STM32输出VGA 手头上有个项目需要通过单片机来控制将图像显示在LCD上,在网上搜了一阵子,发现都是使用的FPGA做的, 开始自己对FPGA不是很熟,一直在用的也是ARM系列的, ...