仿豌豆荚应用下载按钮效果

让按钮具有显示进度的效果,节省布局空间,先看看效果:

主要的逻辑:根据下载进度的百分比和button的宽度得到一个进度的宽度,绘制一个以此为宽度的背景设置给button,随着下载进度这个button的背景不断变化。

下载的进度我们暂时用模拟;

button宽高的获得,在onclick事件中

w = v.getMeasuredWidth();
		h = v.getMeasuredHeight();

模拟下载使用异步任务:

class DownloadTask extends AsyncTask<Void, Integer, Void> {

		@Override
		protected Void doInBackground(Void... params) {
			for (int i = 0; i < max; i++) {
				publishProgress(i);
				try {
					Thread.sleep(100);
				} catch (InterruptedException e) {
					e.printStackTrace();
				}
			}
			return null;
		}

		@Override
		protected void onPostExecute(Void result) {
			bt.setText("点击安装");
			bt.setClickable(true);
			bt.setOnClickListener(new OnClickListener() {

				@Override
				public void onClick(View v) {
					Toast.makeText(MainActivity.this, "开始安装", Toast.LENGTH_LONG)
							.show();
				}
			});
		}

		@Override
		protected void onPreExecute() {
			super.onPreExecute();
			bt.setClickable(false);
		}

		@Override
		protected void onProgressUpdate(Integer... values) {
			Drawable d = createDrawable(Color.parseColor("#8e375a"), values[0]);
			float f = values[0] * 1.0f;
			String s = new DecimalFormat("#.#").format(f);
			bt.setText("已下载" + (f < 10 ? "0" : "") + s + "%");
			bt.setBackgroundDrawable(d);
		}

	}

得到一个指定宽度的Drawable方法

	public BitmapDrawable createDrawable(int color, int length) {
		Bitmap b = null;
		b = Bitmap.createBitmap(w, h, Config.ARGB_4444);
		Canvas c = new Canvas(b);
		// RectF rect = new RectF(0, 0, length, h);
		RectF rect = new RectF(0, 0, w * (length * 1.0f / max), h);
		p.setColor(color);
		c.drawRoundRect(rect, 10, 10, p);
		BitmapDrawable bd = new BitmapDrawable(b);
		return bd;
	}

加点圆角,看着美观一点。

将两种控件结合,还是能给我们平时的设计一点启示的。

时间: 2024-11-05 16:39:04

仿豌豆荚应用下载按钮效果的相关文章

仿淘宝分页按钮效果简单美观易使用的JS分页控件

分页按钮思想: 1.少于9页,全部显示 2.大于9页,1.2页显示,中间页码当前页为中心,前后各留两个页码 附件中有完整例子的压缩包下载.已更新到最新版本 先看效果图: 01输入框焦点效果 02效果 模仿淘宝的分页按钮效果控件kkpager  JS代码: Js代码   var kkpager = { //divID pagerid : 'div_pager', //当前页码 pno : 1, //总页码 total : 1, //总数据条数 totalRecords : 0, //是否显示总页数

Android耳机线控详解,蓝牙耳机按钮监听(仿酷狗线控效果)

转载请注明出处:http://blog.csdn.net/fengyuzhengfan/article/details/46461253 当耳机的媒体按键被单击后,Android系统会发出一个广播,该广播的携带者一个Action名为MEDIA_BUTTON的Intent.监听该广播便可以获取手机的耳机媒体按键的单击事件. 在Android中有个AudioManager类,该类会维护MEDIA_BUTTON广播的分发,所以要实现耳机按键监听需要向AudioManager注册一个用于接收耳机按键单击

仿支付宝/微信的密码输入框效果GridPasswordView解析

仿支付宝/微信的密码输入框效果GridPasswordView解析,把一些设置和一些关键的地方列了出来,方便大家使用,可能可以省一部分的时间,也算是自己的积累吧. 1.密码框可以输入的类型PasswordType public enum PasswordType { NUMBER, TEXT, TEXTVISIBLE, TEXTWEB; } 这里可以自行添加类型,然后在GridPasswordView中修改 @Override public void setPasswordType(Passwo

仿百度首页选项卡切换效果

效果:http://hovertree.com/texiao/jquery/71/ 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery仿百度首页选项卡切换效果 - 何问起</title> <base ta

自定义控件三部曲之绘图篇(二十)——RadialGradient与水波纹按钮效果

前言:每当感叹自己的失败时,那我就问你,如果让你重新来一次,你会不会成功?如果会,那说明并没有拼尽全力. 最近博主实在是太忙了,博客更新实在是太慢了,真是有愧大家. 这篇将是Shader的最后一篇,下部分,我们将讲述Canvas变换的知识.在讲完Canvas变换以后,就正式进入第三部曲啦,是不是有点小激动呢-- 今天给大家讲的效果是使用RadialGradient来实现水波纹按钮效果,水波纹效果是Android L平台上自带的效果,这里我们就看看它是如何实现的,本篇的最终效果图如下 一.Radi

使用 CSS3 制作一组超时尚的动画按钮效果

通过 CSS3 的新特性,我们创作出好的交互和效果的可能性大大增加.这篇文章中,我想与大家分享一些 CSS3 动画按钮效果.我们的想法是创建一个具有不同风格的一些动画链接元素,鼠标悬停时有动画效果和活动状态. 效果演示     插件下载 HTML 示例代码: <a href="#" class="a-btn"> <span class="a-btn-slide-text">$29</span> <img

HTML5 Canvas 高仿逼真 3D 布料图案效果

HTML5 规范引进了很多新特性,其中最令人期待的之一就是 Canvas 元素,HTML5 Canvas 提供了通过 JavaScript 绘制图形的方法,非常强大.下面给大家分享一个 HTML5 Canvas 绘制的 3D 布料图案效果. 温馨提示:为保证最佳的效果,请在 IE10+.Chrome.Firefox 和 Safari 等现代浏览器中浏览. 插件下载     效果演示 您可能感兴趣的相关文章 Web 开发中很实用的10个效果[源码下载] 精心挑选的优秀jQuery Ajax分页插件

美妙的 CSS3 动画!一组梦幻般的按钮效果

今天给大家带来的是五款梦幻般的动画按钮效果.下面是在线演示,把鼠标放在按钮上试试,有惊喜哦!CSS3 引入了众多供功能强大的新特性,让设计和开发人员能够轻松的创作出各种精美的界面效果. 温馨提示:为保证最佳的效果,请在 IE10+.Chrome.Firefox 和 Safari 等现代浏览器中浏览. 源码下载     在线演示 这些精美的效果用到了 CSS3 border-radius(圆角).box-shadow(阴影).transition(变形).transform(转换)和 animat

隐藏video标签的下载按钮

问题: 使用video标签时,有些浏览器会显示视频的下载按钮,而这并不是我们需要的功能,必须想办法去掉. 解决方法: 使用下面的css可以达到隐藏下载按钮的效果,但是点击下载的位置,还是能出现开始下载的事件,所以暂未能彻底解决. video::-internal-media-controls-download-button { display:none; } video::-webkit-media-controls-enclosure { overflow:hidden; } video::-