UI组件-ProgressBar及其子类

前言

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

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;
    }
}

效果

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) {

            }
        });
    }

}

效果

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));
            }
        });
    }
}

效果

Screenshot_20171020-133417.png

提示

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 昵称:Cherry 听课感受 1、只有不断积累自己的价值,自己的使用价值才会越来高。 如何积累自己的价值呢?这个问...
    Cherry_wxh阅读 1,279评论 0 0
  • 嗯,我是手残党,想学画画的手残党。在心蓝老师的带领下慢慢走向正轨。每日一画。 一开始不会渐变,自己学着渐变,绿叶画...
    代号0041阅读 1,796评论 2 3
  • 第一缕阳光照进卧房 伸手把手机拿起 探寻着一个秘密 先看看消息 有没有栏目关注你 通过你的投稿 心里一阵窃喜 如果...
    梦雪他乡阅读 1,792评论 4 14
  • 八月的最后一天,北京天气大好,灿烂阳光,湛蓝天空,闲云多多,凉风习习。 我真的决定中午做饭带饭吃了!今天正式开始第...
    Joyce徐琼阅读 1,625评论 2 1

友情链接更多精彩内容