Android UI——ProgressBar及其子类的使用

ProgressBar

1、Android 支持几种风格的进度条，通过设置style属性可以为ProgressBar指定风格，该属性支持一下几种风格属性值：

①@android：style/Widget.ProgressBar.Horizontal：水平进度条

②@android:style/Widget.ProgressBar.Inverse：普通大小的环形进度条

③@android:style/Widget.ProgressBar.Large：大环形的进度条

④@android:style/Widget.ProgressBar.Large.Inverse:大环形的进度条

⑤@android:style/Widget.ProgressBar.Small：小环形进度条

⑥@android:style/Widget.ProgressBar.Small.Inverse：小环形进度条

2、ProgressBar常用的XML属性

android：max 设置该进度条的最大值

android:progress 设置该进度条已完成的进度

android：progressDrawable 设置该进度条轨道对应的Drawable对象

android:indeterminate 设置该属性为true ， 设置当前的进度条为一个无法预计时间的常滚动进度条

我们对这个形式的进度条得多说两句，首先先看看这个类型的进度条的显示效果

 

可见这个类型的进度条和环形的不信是进度的进度条的功能是一样的，即，都表明：现在正有业务在处理当中，但是并不知道处理的进度情况

3、ProgressBar用于操作进度的方法：

setProgress(int) : 设置进度完成的数值

incrementProgressBy（int ）：设置每次调用这个方法时，进度条增加或者减少多少，当参数为正数的时候，进度增加，参数为负数的时候，进度减少，

下面举一个例子：

布局文件activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.penglee.progressbar_firsttest.MainActivity" >
    
    <LinearLayout 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        
        <!-- 定义一个大环形进度条 -->
        <ProgressBar
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            style="@android:style/Widget.ProgressBar.Large"/>
        <!-- 定义一个中等大小的环形进度条 -->
        <ProgressBar
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            style="@android:style/Widget.ProgressBar.Inverse"/>
        <!-- 定义一个小环形进度条 -->
        <ProgressBar
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            style="@android:style/Widget.ProgressBar.Small"/>
        
    </LinearLayout>
    
    <TextView 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/textView"/>

    <ProgressBar
        android:id="@+id/bar"
        style="@android:style/Widget.ProgressBar.Horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="10" />

    <ProgressBar 
        android:id="@+id/bar2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="10"
        android:progressDrawable="@drawable/my_bar"           my_bar是一个写好的Drawable 的xml文件
        style="@android:style/Widget.ProgressBar.Horizontal"/>
   
</LinearLayout>

my_bar.xml文件

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <!-- 定义轨道的背景 样式 no.jpg 和 ok.jpg是图片资源--> 
    <item
        android:id="@android:id/background"
        android:drawable="@drawable/no"/>
    <!-- 定义轨道上完成部分的样式 -->    
    <item 
        android:id="@android:id/progress"
        android:drawable="@drawable/ok"/>

</layer-list>

no.jpg和ok.jpg如下： 

MainActivity.java 文件如下：

public class MainActivity extends Activity {
    
    private int [ ] data = new int[10] ;  
    int status = 0;
    ProgressBar bar , bar2 ;
    
    public int doWork()  {
        data[MainActivity.this.status++] = (int)(Math.random()*100);
        try {
            Thread.sleep(1000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
        return MainActivity.this.status ;
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        bar = (ProgressBar)findViewById(R.id.bar);
        bar2 = (ProgressBar)findViewById(R.id.bar2);
        
        
        final Handler mHandler  = new Handler(){
            public void handleMessage(Message msg){
                if(msg.what== 0x111){
                    bar.setProgress(MainActivity.this.status);
                    bar2.setProgress(MainActivity.this.status);
                }
            }
        } ;
        
        new Thread(){
            public void run(){
                while(MainActivity.this.status<10){
                    doWork() ;
                    mHandler.sendEmptyMessage(0x111);
                }
            }
        } .start();
    }
}

 

 

分析：实际上，上面的这个例子是一个典型的规范的进度条使用方法，

即：主线程使用一个循环来随时的询问当前的业务的处理进度status，从而更新进度条的值，当然我们还可以使用广播的技术达到这种效果

其次，如果我们想要改变进度条的轨道的背景色，或者更改进度条的填充色的话，怎么办呢，实际上，上面已经为我们指出了方法就是

使用drawable文件，如上面的实例就是：“android:progressDrawable="@drawable/my_bar"”， 更改颜色也是定义一个drawable的xml文件，如下：

  <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item android:id="@android:id/background">
         <shape >
                <corners android:radius="5dip" />
                <gradient
                    android:angle="270"
                    android:centerY="0.75"
                    android:endColor="#F5F5F5"
                    android:startColor="#BEBEBE" />
            </shape>
    </item>

    <item android:id="@android:id/secondaryProgress">

        <clip >
            <shape >
                <corners android:radius="0dip" />
                <gradient
                    android:angle="270"
                    android:centerY="0.75"
                   android:endColor="#165CBC"
                    android:startColor="#85B0E9" />
            </shape>
        </clip>
    </item>

    <item android:id="@android:id/progress">

        <clip >
              <shape >
                <corners android:radius="5dip" />
                <gradient
                    android:angle="270"
                    android:centerY="0.75"
                   android:endColor="#165CBC"
                    android:startColor="#85B0E9" />
            </shape>
          
        </clip>
    </item>
</layer-list>

更改上面的颜色值就能够更改进度条的颜色了，实际上我们还能够自定义进度条，这部分内容以后有时间再说

 

问题：在实际中我们并不是像上面那幅图一样，将一个进度条和Activity中的其他的组件参合在一起，而是单独的弹出一个窗口才合适：即

这也非常的简单 ，我们只要将一个只含有进度条的布局文件加入到一个Dialog中，之后显示这个Dialog就行了，非常的简单，也可以将一个只含有进度条的Activity以Dialog的Theme主题显示出来就OK了，当然使用专门的ProgressDialog也可以,这部分内容参见http://www.cnblogs.com/wolipengbo/p/3394691.html

 

还有一种进度条，可以直接在窗口标题上显示

 这种进度条并不需要在任何地方添加ProgressBar组件，他是直接由Activity的方法启动的，在Activity的标题栏中显示进度条需要如下两步：

①调用Activity的requestWindowsFeature（int）方法，其中的int参数可以设置为：

Window.FEATURE_PROGRESS 启用显示进度的进度条

Window.FEATURE_INDETERMINATE_PROGRESS启用不显示进度的进度条（小的环形进度条）

需要注意的是，如果需要在标题栏中使用进度条的话，那么必须调用上面的方法，而且调用这个方法的位置，必须是在Activity的onCreate（）方法中，因为这个方法本身就是设置一个Activity在显示时的窗口，所以肯定是在onCreate方法中调用，而且这个方法还必须得在setContentView（）方法之前调用，如果不满足上面的所有的约束调价那么就会崩掉

②调用Activity的setProgress（int ）方法来设置当前的进度值，注意在ProgressBar组件对象中也有一个同名方法，但是和这个方法不同，

首先，调用这个方法不需要得到标题栏中的进度条的实例对象，而是直接在Activity中调用setProgress（int），其次，这个方法中的int参数指定的并不是百分比，而是进度条的当前的数值，标题栏中的可显示进度的进度条的数值最大为10000，那么如果我们想将当前的进度条的数值设为一半的话，那么就应该为：setProgress（5000） ；

③之后我们就要调用Activity的如下方法来显示标题进度条：

setProgressBarIndeterminateVisibility(boolean);显示或者隐藏不带进度的进度条

setProgressBarVisibility(boolean) ;显示或者隐藏带有进度的进度条

非常明显，我们使用上面的方法就能够随时的控制标题进度条，使用②方法能够随着业务的完成情况及时的更新进度条，使用③方法能够显示进度条，而且能够在业务完成的时候及时的将进度条给隐藏起来，非常的方便

下面举一个例子：

MainActivity.java 文件 其中有两个按钮，一个按钮用来显示标题栏进度条，另一个用来隐藏

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        
        //注意设置窗口特征的方法必须在setContentView（）方法之前就调用，否则会报错
        //设置窗口特征：启用显示进度的进度条
        requestWindowFeature(Window.FEATURE_PROGRESS);
        //设这窗口特征：启用不显示进度的进度条
        requestWindowFeature(Window.FEATURE_INDETERMINATE_PROGRESS);
        
        setContentView(R.layout.activity_main);
        
        Button bn1 = (Button)findViewById(R.id.bn1);
        Button bn2 = (Button)findViewById(R.id.bn2);
        
        bn1.setOnClickListener(new OnClickListener(){

            @Override
            public void onClick(View v) {
                //显示不带进度的进度条，这个方法必须在setContentView之后调用否则就崩了
                setProgressBarIndeterminateVisibility(true);
                //显示带进度的进度条，这个方法必须在setContentView之后调用否则就崩了
                setProgressBarVisibility(true) ;
                //设置进度条的进度,进度条的范围0—10000
                setProgress(4500) ;
            }
        });
        
        bn2.setOnClickListener(new OnClickListener(){

            @Override
            public void onClick(View v) {
                //隐藏不带进度的进度条，这个方法必须在UI线程中,否则就崩了
                setProgressBarIndeterminateVisibility(false);
                //隐藏带进度的进度条，这个方法必须在UI线程中,否则就崩了
                setProgressBarVisibility(false) ;
            }
        });
    }
}

 

SeekBar

1、由于拖动条SeekBar是ProgressBar的子类，那么对于ProgressBar的所支持的XML属性和方法完全相适应与SeekBar ,所以我们可以自定义SeekBar的滑道等等的显示效果

2、SeekBar允许用户改变拖动条的的滑块的外观，属性为：

android：thumb=“@drawable/......” ,

3、为了响应滑动条的数值变化，可以为SeekBar的实例对象绑定一个OnSeekBarChangeListener的监听器：

这个监听器能够监听的事件有三种：

开始拖动滑块

拖动滑块导致数值变化

停止拖动滑块

那么开始和停止拖动滑块的事件有什么用呢？下面是一个动图，可以看看：

4、使用非常的简单，通过下面的实例可以非常清楚的掌握：

这个实例是通过使用滑动条来改变图片的透明度：

布局文件

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.penglee.seekbartest.MainActivity" >

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="240dp"
        android:layout_alignParentTop="true"
        android:layout_centerInParent="true"
        android:src="@drawable/picture"/>
    
    <SeekBar 
        android:id="@+id/seekBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/imageView"
        android:max="255"
        android:progress="255"
        android:thumb="@drawable/ok"/>
    
    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content"
        android:layout_below="@id/seekBar"
        android:layout_centerInParent="true"/>

</RelativeLayout>

MainActivity.java文件

public class MainActivity extends Activity {
    
    ImageView image ;
    SeekBar seekBar ;
    TextView textView ;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        image = (ImageView)findViewById(R.id.imageView);
        seekBar=(SeekBar)findViewById(R.id.seekBar);
        textView = (TextView)findViewById(R.id.textView);

        seekBar.setOnSeekBarChangeListener(new OnSeekBarChangeListener(){

            @Override
            public void onProgressChanged(SeekBar seekBar, int progress,
                    boolean fromUser) {
                //动态的改变图片的透明度
                image.setImageAlpha(progress);
                textView.setText("当前透明度："+progress+"%");
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {
                textView.setText("开始调整透明度");
            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {
                textView.setText("调整停止");
            }
        });
    }
}

 

RatingBar—— 星型评分等级条

1、这个评分条和SeekBar没有什么分别，就是使用星星来打底

2、RatingBar支持的XML属性为：

android：isIndicator 设置该星级评分条是否允许用户改变（true为允许）

android：numStars 设定该星级评分条总共有多少颗星

android：stepSize：设置每次最少能够改变多少星级

3、为了能够响应星级数值改变，我们可以设置一个监听器：OnRatingBarListener

4、下面举个例子，这个例子非常的简单，就是将上面的例子的SeekBar更换为RatingBar

 

public class MainActivity extends Activity {

    ImageView image ;
    RatingBar ratingBar ;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        image = (ImageView)findViewById(R.id.imageView);
        ratingBar=(RatingBar)findViewById(R.id.ratingBar);
        
        ratingBar.setOnRatingBarChangeListener(new OnRatingBarChangeListener(){

            @Override
            public void onRatingChanged(RatingBar ratingBar, float rating,
                    boolean fromUser) {
                image.setImageAlpha((int) (rating * 255 / 5));
            }
        });
    }
}