UI组件-ProgressBar及其子类

  1. 云栖社区>
  2. 博客>
  3. 正文

UI组件-ProgressBar及其子类

arrowhalo 2017-10-20 22:24:00 浏览764
展开阅读全文

前言

余生希望你和让你快乐的那个人度过。

ProgressBar组件

进度条也是UI界面中一种常用的组件,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:小环形进度条

代码示例

progress.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        >
          <!-- 定义一个大环形进度条 -->
          <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"
              />
          <!-- 定义一个小环形进度条 -->
          <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="任务完成的进度"
        />
    <!-- 定义一个水平进度条 -->
    <ProgressBar
        android:id="@+id/bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="100"
        style="@android:style/Widget.ProgressBar.Horizontal"
        />
</LinearLayout>

MainActivity.java
public class MainActivity extends Activity {

    //该程序模拟填充长度为100的数组
    private int[] data = new int[100];
    int hashData = 0;
    //记录ProgressBar的完成进度
    int status = 0;
    ProgressBar bar;
    //创建一个负责更新进度的Handler
    Handler mHandler = new Handler()
    {

        @Override
        public void handleMessage(Message msg) {
            //表明消息是由该程序发送的
            if(msg.what == 1)
            {
                bar.setProgress(status);
            }
        }
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.progressbar);
        bar = (ProgressBar) findViewById(R.id.bar);
        //启动线程来执行任务
        new Thread()
        {
            public void run()
            {
                while(status < 100)
                {
                    //获取耗时操作的完成百分比
                    status = doWork();
                    //发送消息
                    mHandler.sendEmptyMessage(1);
                }
            }
        }.start();
    }

    public int doWork() {
        //为数组赋值
        data[hashData++] = (int) (Math.random() * 100);
        try {
            Thread.sleep(1000);
        }catch (InterruptedException e) {
            e.printStackTrace();
        }
        return hashData;
    }
}

效果

img_c5503892dcf91af80da2966cf157ef5f.png
Screenshot_20171020-125343.png

提示

android:max属性,设置该进度条的最大值。
android:progress属性,设置该进度条的已完成进度值。

SeekBar组件

拖动条和进度条非常相似,只是进度条采用颜色填充来表明进度完成的程度,而拖动条则通过滑块的位置来标识数值。可以用来调节音量等等。

代码示例

seekbar.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    <ImageView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="240dp"
        android:src="@drawable/kaola"
        />
    <!-- 定义一个拖动条,并改变它的滑块外观 -->
    <SeekBar
        android:id="@+id/seekbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="255"
        android:progress="255"
        />
</LinearLayout>
MainActivity.java
public class MainActivity extends Activity {

    ImageView image;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.seekbar);
        image = (ImageView) findViewById(R.id.image);
        SeekBar seekBar = (SeekBar) findViewById(R.id.seekbar);
        seekBar.setOnSeekBarChangeListener(new OnSeekBarChangeListener() {

            //当拖动条的滑块位置发送改变时触发该方法
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {

                //动态改变图片透明度
                image.setImageAlpha(progress);
            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {

            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {

            }
        });
    }

}

效果

img_2d869092356c499c2a30c23163f08745.png
Screenshot_20171020-131641.png

RatingBar组件

星级评分条(RatingBar)与拖动条(SeekBar)的用法、功能十分相似,最大的区别在于RatingBar通过星星来表示进度。

代码示例

ratingbar.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    <ImageView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="240dp"
        android:src="@drawable/kaola"
        />
    <!-- 定义一个拖动条,并改变它的滑块外观 -->
    <RatingBar
        android:id="@+id/ratingbar"
        android:layout_gravity="center_horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:numStars="5"
        android:max="255"
        android:progress="255"
        android:stepSize="0.5"
        />
</LinearLayout>

MainActivity.java
public class MainActivity extends Activity {

    ImageView image;

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

            @Override
            public void onRatingChanged(RatingBar ratingBar, float rating, boolean fromUser) {

                //动态改变图片透明度
                //5颗星星就代表最大值255
                image.setImageAlpha((int) (rating * 255 / 5));
            }
        });
    }
}

效果

img_a8062cd1b34a8af30c43b684226bd624.png
Screenshot_20171020-133417.png

提示

android:isIndicator属性,设置该星级评分条是否允许用户改变。
android:numStars属性,设置该星级评分条总共有多少星级。
android:rating属性,设置该星级评分条默认的星级。
android:stepSize属性,设置每次最少需要改变多少个星级。

网友评论

登录后评论
0/500
评论
arrowhalo
+ 关注