Android实现个性化的进度条

1.案例效果图

2.准备素材

progress1.png(78*78) progress2.png(78*78)

3.原理

采用一张图片作为ProgressBar的背景图片(一般采用颜色比较浅的)。另一张是进度条的图片(一般采用颜色比较深的图片)。进度在滚动时:进度图片逐步显示,背景图片逐步隐藏,达到上面的效果。

4.灵感来自Android控件提供的源码

4.1 默认带进度的进度条,如下图

<ProgressBar
android:id="@+id/progressBar2"
style="@android:style/Widget.ProgressBar.Horizontal"
android:layout_width="268dp"
android:layout_height="wrap_content"
android:progress="45" />

注意:关键是style属性在起作用

4.2 找到样式定义的位置

鼠标放在style属性值上,按下Ctrl键,出现超链接,点击超链接跳转到样式的定义位置

样式定义的内容如下

重点研究:

android:progressDrawable:进度条的样式

@android:drawable/progress_horizontal:样式定义的文件

在android-sdk-windows\platforms\android-14\data\res目下搜索progress_horizontal.xml文件,搜索结果如下:

打开progress_horizontal.xml文件,内容如下

<layer-listxmlns:android="http://schemas.android.com/apk/res/android">
<itemandroid:id="@android:id/background">
<shape>
<cornersandroid:radius="5dip"/>
<gradient
android:startColor="#ff9d9e9d"
android:centerColor="#ff5a5d5a"
android:centerY="0.75"
android:endColor="#ff747674"
android:angle="270"
/>
</shape>
</item>
<itemandroid:id="@android:id/secondaryProgress">
<clip>
<shape>
<cornersandroid:radius="5dip"/>
<gradient
android:startColor="#80ffd300"
android:centerColor="#80ffb600"
android:centerY="0.75"
android:endColor="#a0ffcb00"
android:angle="270"
/>
</shape>
</clip>
</item>
<itemandroid:id="@android:id/progress">
<clip>
<shape>
<cornersandroid:radius="5dip"/>
<gradient
android:startColor="#ffffd300"
android:centerColor="#ffffb600"
android:centerY="0.75"
android:endColor="#ffffcb00"
android:angle="270"
/>
</shape>
</clip>
</item>
</layer-list>

释义:

<item android:id="@android:id/background">:定义进度条的背景样式

<item android:id="@android:id/secondaryProgress">:辅助进度条的样式

<item android:id="@android:id/progress">:进度条的样式

思考:如果我想做垂直进度条,怎么办了?

关键在clip元素的属性上做修改

<clip
android:clipOrientation="vertical" 定义滚动的方向 vertical为垂直方向
android:drawable="@drawable/progress1" 定义进度的图片
android:gravity="bottom" > 定义进度的开始位置
</clip> 

5.定义样式文件progress_vertical.xml

progress_vertical.xml文件代码如下

<?xmlversion="1.0"encoding="utf-8"?>
<layer-listxmlns:android="http://schemas.android.com/apk/res/android">
<itemandroid:id="@android:id/progress">
<clip
android:clipOrientation="vertical"
android:drawable="@drawable/progress1"
android:gravity="bottom">
</clip>
</item>
</layer-list>

6.应用自定义的样式

<Button
android:id="@+id/btStart"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="150dp"
android:text="开始"/>
<ProgressBar
android:id="@+id/pbPic"
style="@android:style/Widget.ProgressBar.Horizontal"
android:layout_width="50dp"
android:layout_height="68dp"
android:background="@drawable/progress2"
android:max="100"
android:progress="0"
android:progressDrawable="@drawable/progress_vertical" /> <!-- 在此属性上应用 -->
<TextView
android:id="@+id/txtProgress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>

7.点击按钮模拟进度滚动的效果

publicclass ProgressActivity extends Activity {
ProgressBar pb = null;
TextView txtProgress;
Handler handler = new Handler();
@Override
publicvoid onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
System.out.println("主题=" + getTheme() + "");
pb = (ProgressBar) findViewById(R.id.pbPic);
Button btnStart = (Button) findViewById(R.id.btStart);//按钮
txtProgress = (TextView) findViewById(R.id.txtProgress);//显示进度
btnStart.setOnClickListener(new OnClickListener() {//按钮点击事件
publicvoid onClick(View v) {
new Thread(new Runnable() {//创建并启动线程,使用线程执行模拟的任务
publicvoid run() {
for (inti = 0; i < 100; i++) { //循环100遍
try {
handler.post(new Runnable() { //更新界面的数据
publicvoid run() {
pb.incrementProgressBy(1);//增加进度
txtProgress.setText(pb.getProgress() + "%");//显示完成的进度
}
});
Thread.sleep(100);
} catch (InterruptedException e) {
}
}
}
}).start();
}
});
}
}

以上所述是小编给大家介绍的Android实现个性化的进度条,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

时间: 2016-07-19

Android仿水波纹流量球进度条控制器

仿水波纹流球进度条控制器,Android实现高端大气的主流特效,供大家参考,具体内容如下 效果图: CircleView 这里主要是实现中心圆以及水波特效 package com.lgl.circleview; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.gra

Android自定义View实现带数字的进度条实例代码

第一步.效果展示 图1.蓝色的进度条 图2.红色的进度条 图3.多条颜色不同的进度条 图4.多条颜色不同的进度条 第二步.自定义ProgressBar实现带数字的进度条 0.项目结构 如上图所示:library项目为自定义的带数字的进度条NumberProgressBar的具体实现,demo项目为示例项目以工程依赖的方式引用library项目,然后使用自定义的带数字的进度条NumberProgressBar来做展示 如上图所示:自定义的带数字的进度条的library项目的结构图 如上图所示:de

Android自定义水平进度条的圆角进度

平时项目中经常用到自定义进度条样式,我们一般实现的也是下面的第一种,至于第二种的圆角进度,网上介绍的资料也不是很多,这里一起展示一下这两种的实现. 下面开始看代码,先从主界面布局开始看起: <ProgressBar style="@android:style/Widget.ProgressBar.Horizontal" android:layout_width="match_parent" android:layout_height="20dp&qu

Android实现自定义圆形进度条

今天无意中发现一个圆形进度,想想自己实现一个,如下图: 基本思路是这样的: 1.首先绘制一个实心圆 2.绘制一个白色实心的正方形,遮住实心圆 3.在圆的中心动态绘制当前进度的百分比字符 4.绘制一个与之前实心圆相同颜色的空心圆 5.逐渐改变当前的百分比 6.根据百分比,逐渐改变正方形的大小,逐渐减小正方形的底部y轴的坐标,不断重绘,直到达到100% 首先看看自定义的属性 在values目录下新建attrs.xml内容如下: 定义绘制圆形的背景色,和绘制圆形的半径大小 <?xml version=

Android中制作进度框和环形进度条的简单实例分享

进度框 import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.util.AttributeSet; import android.view.View; import java.util.Random; public class ObliqueProgressbar ext

Android 带进度条的WebView 示例代码

前言 如果不使用系统自带的TitleBar(即Activity被设置@android:style/Theme.NoTitleBar),那就需要自己来写进度条了,这里封装了一个自定义控件和加载网页的公共Activity,方便使用. 正文 一.截图 二.自定义控件 复制代码 /** * 带进度条的WebView * http://www.cnblogs.com/over140/archive/2013/03/07/2947721.html * */ @SuppressWarnings("deprec

Android三种方式实现ProgressBar自定义圆形进度条

进度条样式在项目中经常可以见到,下面小编给大家分享Android三种方式实现ProgressBar自定义圆形进度条. Android进度条有4种风格可以使用. 默认值是progressBarStyle. 设置成progressBarStyleSmall后,图标变小. 设置成progressBarStyleLarge后,图标变大 设置成progressBarStyleHorizontal后,变成横向长方形. 自定义圆形进度条ProgressBar的一般有三种方式: 一.通过动画实现 定义res/a

android 进度条组件ProgressBar

首先是main.xml文件 代码如下: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:orientation="vertical" android:layout_width="fill_parent" androi

Android自定义View之圆形进度条式按钮

介绍 今天上班的时候有个哥们问我怎么去实现一个按钮式的进度条,先来看看他需要实现的效果图. 和普通的圆形进度条类似,只是中间的地方有两个状态表示,未开始,暂停状态.而且他说圆形进度的功能已经实现了.那么我们只需要对中间的两个状态做处理就行了. 先来看看实现的效果图: 上面说了我们只需要处理中间状态的变化就可以了,对于进度的处理直接使用了弘洋文章中实现: http://blog.csdn.net/lmj623565791/article/details/43371299 下面开始具体实现. 具体实

Android自定义View基础开发之图片加载进度条

学会了Paint,Canvas的基本用法之后,我们就可以动手开始实践了,先写个简单的图片加载进度条看看. 按照惯例,先看效果图,再决定要不要往下看: 既然看到这里了,应该是想了解这个图片加载进度条了,我们先看具体用法,再看自定义View的实现: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:custom="http://schemas.android.co

Android ProgressBar进度条使用详解

ProgressBar进度条,分为旋转进度条和水平进度条,进度条的样式根据需要自定义,之前一直不明白进度条如何在实际项目中使用,网上演示进度条的案例大多都是通过Button点击增加.减少进度值,使用方法incrementProgressBy(int),最简单的做法是在xml布局文件中放置ProgressBar空间,然后再MainActivity中触发事件后执行incrementProgressBy(int),代码如下: <LinearLayout xmlns:android="http:/

Android 进度条使用详解及示例代码

在这里,总结一下loading进度条的使用简单总结一下. 一.说起进度条,必须说说条形进度条,经常都会使用到嘛,特别是下载文件进度等等,还有像腾讯QQ安装进度条一样,有个进度总给人良好的用户体验. 先来找图看看,做这个图完成不用图片就可以做到了. 看下xml布局文件,其实就是直接用xml写的在加两个属性设置一下就好了,一个style,另一个是background. <ProgressBar android:id="@+id/pb_progressbar" style="

Android应用中炫酷的横向和环形进度条的实例分享

一.概述 最近需要用进度条,秉着不重复造轮子的原则,上github上搜索了一番,看了几个觉得比较好看的ProgressBar,比如:daimajia的等.简单看了下代码,基本都是继承自View,彻彻底底的自定义了一个进度条.盯着那绚丽滚动条,忽然觉得,为什么要通过View去写一个滚动条,系统已经提供了ProgressBar以及属于它的特性,我们没必要重新去构建一个,但是系统的又比较丑,不同版本变现还不一定一样.那么得出我们的目标:改变系统ProgressBar的样子. 对没错,我们没有必要去从0

Android实现环形进度条的实例

Android实现环形进度条的效果图如下: 自定义控件:AttendanceProgressBar 代码如下: public class AttendanceProgressBar extends View { // 画圆环底部的画笔 private Paint mCirclePaint; // 画圆环的画笔 private Paint mRingPaint; // 画字体的画笔 private Paint mTextPaint; // 圆形颜色 private int mCircleColor

Android应用中拍照后获取照片路径并上传的实例分享

Activity 中的代码,我只贴出重要的事件部分代码 public void doPhoto(View view) { destoryBimap(); String state = Environment.getExternalStorageState(); if (state.equals(Environment.MEDIA_MOUNTED)) { Intent intent = new Intent("android.media.action.IMAGE_CAPTURE"); s

Android编程基于自定义View实现绚丽的圆形进度条功能示例

本文实例讲述了Android编程基于自定义View实现绚丽的圆形进度条功能.分享给大家供大家参考,具体如下: 本文包含两个组件,首先上效果图: 1.ProgressBarView1(支持拖动): 2.ProgressBarView2(不同进度值显示不同颜色,不支持拖拽):   代码不多,注释也比较详细,全部贴上了: (一)ProgressBarView1: /** * 自定义绚丽的ProgressBar. */ public class ProgressBarView1 extends View

教你制作Android中炫酷的ViewPagerIndicator(不仅仿MIUI)

1.概述 今天给大家带来一个ViewPagerIndicator的制作,相信大家在做tabIndicator的时候,大多数人都用过TabPageIndicator,并且很多知名APP都使用过这个开源的指示器.大家有没有想过如何自己去实现这样的一个指示器,并且代码会有多复杂呢~~~ 今天,我就带领大家来从无到有的实现这样一个指示器,当然了,不准备一模一样,搞得没有创新似的,再看标题,跟MIUI相关,所以我们准备做一个特性与TabPageIndicator一致的,但是样子和MIUI的Tab一样的~~

android 中win10 使用uwp控件实现进度条Marquez效果

本文将告诉大家,如何做一个带文字的进度条,这个进度条可以用在游戏,现在我做的挂机游戏就使用了他. 如何做上图的效果,实际需要的是两个控件,一个是显示文字 的 TextBlock 一个是进度条. 那么如何让 文字和左边的距离变化?使用 TranslateTransform 看起来 Marquez 的界面就是: <ProgressBar x:Name="Mcdon" Maximum="100" Minimum="0" Value="2

Android环形进度条(安卓默认形式)实例代码

Android开发中,有很多的功能在实际应用中都起了很大的作用,比如android进度条的实现方式,下面给大家介绍Android环形进度条(安卓默认形式),具体内容如下所示: .xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_widt

Android ProgressBar直线进度条的实例代码

直线进度条效果图: 点击下载后的效果图: 布局xml文件: empty Java代码: package com.example.android_rogressbar; import android.os.Handler; import android.os.Message; import android.os.StrictMode; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import

Android ProgressDialog用法之实现app上传文件进度条转圈效果

ProgressDialog 继承自AlertDialog,AlertDialog继承自Dialog public class ProgressDialog extends AlertDialog ProgressDialog的创建方式有两种,一种是new ProgressDialog,一种是调用ProgressDialog的静态方法show()创建并显示,这种进度条只能是圆形条. ProgressDialog dialog = ProgressDialog.show(this, "提示&quo