AndroidのUI设计研究(一)——自定义ProgressBar

转载 2013年12月03日 10:21:57

最近迷上进度条,使用进度条可以增强用户体验,让用户心里有个底,再无奈的等待中体会loading的乐趣。

记得以前优乐美的官网,进入主页加载资源,显示给用户看的就是,炫彩背景下,一个杯子里的奶茶随着加载进度慢慢加上来,这对于浏览网站的人来讲,等于一种享受,并不是难熬等待的时间,在等待的时间的时候,她们看到确实另一番景象而不是单纯的进度条。

百度手机浏览器的做法又不一样,用户打开一个网页的时候,在后台请求资源并渲染,前台界面就是产品的宣传,几张宣传图相互切换,大部分PC软件的安装过程也是如此,在用户等待的时候,向用户宣传自己,让眼睛不会过度疲劳和产生厌倦感。

好了,话不多少,今天我们看看手机QQ空间,点击一张图片,然后加载。我们看图说话。

这个图片类型的进度条是怎么做的呢。

首先,这肯定是继承一个进度条ProgressBar,那我们分析一下ProgressBar的构成,主题分格是圆形的还是条状的,背景background,进度前景progressDrawable。

好我们看一下进度条的xml布局。

<ProgressBar android:id="@+id/pb"
        style="?android:attr/progressBarStyleHorizontal"
        android:background="@drawable/progress_bg"
        android:progressDrawable="@drawable/progress_vertical"
        android:layout_width="100dp"
        android:layout_height="80dp"/>

style定义了条状进度条,background设置进度条背景(这里我们可以把灰色的背景图放进去),progressDrawable设置进度前景(前景图可以放一张蓝色图)。

但是如果这样设置的话,会产生什么情况呢,进度条是从左边往右边进展的,问题就来了,我怎么把进度条的增长方向改为垂直向上呢?

我们看下ProgressBar布局源码,progress是一个layer-list文件。

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

 

可以看到android:id/progress这项包含了一个clip标签,在这里就可以控制自增方向,clip发现有3个属性,clipOrientation, gravity, drawable。在clipOrientation设置为纵向,drawable设置为蓝色图就大功告成啦!

 

看下实际效果:

不错吧!

 

 

相关源码:

main.xml

复制代码
 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="fill_parent"
 4     android:layout_height="fill_parent"
 5     android:orientation="vertical" >
 6 
 7     <TextView
 8         android:layout_width="fill_parent"
 9         android:layout_height="wrap_content"
10         android:text="@string/hello" />
11 
12     <Button android:id="@+id/bt"
13         android:text="开始"
14          android:layout_width="fill_parent"
15         android:layout_height="wrap_content"/>
16     
17     <ProgressBar android:id="@+id/pb"
18         style="?android:attr/progressBarStyleHorizontal"
19         android:background="@drawable/progress_bg"
20         android:progressDrawable="@drawable/progress_vertical"
21         android:layout_width="100dp"
22         android:layout_height="80dp"/>
23     
24 </LinearLayout>
复制代码

progress_vertical.xml

复制代码
 1 <?xml version="1.0" encoding="utf-8"?>
 2 <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> 
 3   <!--    
 4   <item android:id="@android:id/background" > 
 5         <shape> 
 6             <corners android:radius="5dip" /> 
 7             <gradient 
 8                     android:startColor="#fff" 
 9                     android:endColor="#f00" 
10                     android:angle="270" 
11             /> 
12         </shape> 
13     </item> -->
14    
15      
16     <item android:id="@android:id/progress"  > 
17         <clip android:clipOrientation="vertical" 
18             android:gravity = "bottom"
19             android:drawable="@drawable/progress"
20             > 
21             <!-- 
22            
23            
24             <shape > 
25                 <corners android:radius="5dip" /> 
26                 <gradient 
27                          android:startColor="#ffffd300" 
28                         android:centerColor="#ffffb600" 
29                         android:centerX="0.75" 
30                         android:endColor="#ffffcb00" 
31                         android:angle="90"
32                 /> 
33             </shape>  -->
34         </clip> 
35     </item> 
36      
37 </layer-list> 
复制代码

 

MainActivity.java

复制代码
 1 package com.bvin.study.progress;
 2 
 3 import android.app.Activity;
 4 import android.os.Bundle;
 5 import android.os.Handler;
 6 import android.os.Message;
 7 import android.view.View;
 8 import android.widget.Button;
 9 import android.widget.ProgressBar;
10 
11 public class MainActivity extends Activity {
12     /** Called when the activity is first created. */
13     ProgressBar pb ;
14     Handler handler = new Handler(){
15 
16         @Override
17         public void handleMessage(Message msg) {
18             // TODO Auto-generated method stub
19             super.handleMessage(msg);
20             pb.setProgress(msg.what);
21         }
22     
23         
24         
25     };
26     @Override
27     public void onCreate(Bundle savedInstanceState) {
28         super.onCreate(savedInstanceState);
29         setContentView(R.layout.main);
30         init();
31     }
32     
33     void init(){
34         pb = (ProgressBar)findViewById(R.id.pb);
35         Button bt = (Button)findViewById(R.id.bt);
36         bt.setOnClickListener(new View.OnClickListener() {
37             
38             @Override
39             public void onClick(View v) {
40                 // TODO Auto-generated method stub
41                 
42                 pb.incrementProgressBy(10);
43                 
44                 
45             }
46         });
47     }
48 }
复制代码

 

以后还会更新其他应用的一些UI设计揭秘,敬请关注!

Android源码自带的ProgressBar的总结与扩展——自定义ProgressDialog

出处: 炎之铠邮箱:yanzhikai_yjk@qq.com 本文原创,转载请注明本出处! 介绍对于进度条ProgressBar,在很多场景都会应用到它,最近项目要用到进度条,在网上搜了很...
  • totond
  • totond
  • 2017年05月16日 09:46
  • 2412

Android progressBar 自定义

在drawable文件夹中建立如下旋转动画文件     android:drawable="@drawable/loading1"         android:pivotX="50%"   ...
  • fancylovejava
  • fancylovejava
  • 2014年03月19日 20:53
  • 21474

自定义简单ProgressBar样式

该篇为学习笔记 记录学习中的困难,日后便于回顾熟练。 为了毕业找工作,决定基于环信的SDK,开发一个能发送多种消息类型的聊天应用。 第一步,想得有个欢迎界面,初始化界面。 由于android自...
  • Star_SDK
  • Star_SDK
  • 2017年03月07日 19:32
  • 1799

自定义进度条PictureProgressBar——从开发到开源发布全过程

出处: 炎之铠邮箱:yanzhikai_yjk@qq.com 本文原创,转载请注明本出处! 本项目JCenter地址:https://bintray.com/yanzhikaijky...
  • totond
  • totond
  • 2017年05月17日 11:10
  • 5358

android 自定义水平的ProgressBar

android 自定义水平的ProgressBar 颜色
  • u011140027
  • u011140027
  • 2013年10月16日 17:44
  • 2126

Android 自定义ProgressBar样式

首先,在activity_main中定义个一个ProgressBar 控件
  • qq_33048603
  • qq_33048603
  • 2016年07月08日 11:06
  • 544

Android 自定义横向的ProgressBar的颜色

1、首先在Drawable下面新建一个
  • laotai909101
  • laotai909101
  • 2014年06月18日 18:05
  • 1122

Android中自定义水平的ProgressBar

自定义水平ProgressBar
  • newMan1024
  • newMan1024
  • 2017年11月07日 10:50
  • 116

Android UI 之一步步教你自定义控件(自定义属性、合理设计onMeasure、合理设计onDraw等)

Android开发做到了一定程度,多少都会用到自定义控件,一方面是更加灵活,另一方面在大数据量的情况下自定义控件的效率比写布局文件更高。 一个相对完善的自定义控件在布局文件中和java代码中都应能灵活...
  • carrey1989
  • carrey1989
  • 2013年09月17日 10:58
  • 21810

Android自定义横向的ProgressBar

其实很简单,上代码! 在res下创建drawable文件夹,新建文件drawable/progressbar_color.xml xml version="1.0" encoding="u...
  • jiangbing0125
  • jiangbing0125
  • 2015年07月10日 18:06
  • 1723
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:AndroidのUI设计研究(一)——自定义ProgressBar
举报原因:
原因补充:

(最多只允许输入30个字)