UI组件-ProgressBar及其子类

简介: 前言余生希望你和让你快乐的那个人度过。ProgressBar组件进度条也是UI界面中一种常用的组件,Android支持多种风格的进度条,通过style属性可以为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;
    }
}

效果

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属性,设置每次最少需要改变多少个星级。

目录
相关文章
|
12天前
|
JavaScript 前端开发
如何优雅的只在当前页面中覆盖ui库中组件的样式(vue的问题)
如何优雅的只在当前页面中覆盖ui库中组件的样式(vue的问题)
12 0
如何优雅的只在当前页面中覆盖ui库中组件的样式(vue的问题)
|
1月前
|
搜索推荐 BI 开发者
sap.ui.comp.smarttable.SmartTable 组件 beforeRebindTable 事件的用法
sap.ui.comp.smarttable.SmartTable 组件 beforeRebindTable 事件的用法
22 0
|
3月前
|
开发框架 前端开发 .NET
七天.NET 8操作SQLite入门到实战 - (1)第七天BootstrapBlazor UI组件库引入
七天.NET 8操作SQLite入门到实战 - (1)第七天BootstrapBlazor UI组件库引入
|
3月前
|
JavaScript 前端开发 API
面试官:ui组件可以自动加载,那么业务组件可以吗?
面试官:ui组件可以自动加载,那么业务组件可以吗?
|
3月前
|
设计模式 前端开发 数据可视化
【第4期】一文了解React UI 组件库
【第4期】一文了解React UI 组件库
81 0
|
2月前
|
资源调度 JavaScript
Vue + Element-ui组件上传图片报错问题解决方案
Vue + Element-ui组件上传图片报错问题解决方案
|
3月前
|
前端开发
element-ui组件DatePicker日期选择器移动端兼容
element-ui组件DatePicker日期选择器移动端兼容
element-ui组件DatePicker日期选择器移动端兼容
|
3月前
|
JSON Java 数据库
基于uniapp原生组件uni-ui 做一个登录注册与个人中心(后端篇)
基于uniapp原生组件uni-ui 做一个登录注册与个人中心(后端篇)
86 2
|
3月前
|
搜索推荐 C# 开发者
3个值得推荐的WPF UI组件库
3个值得推荐的WPF UI组件库
150 0
|
3月前
|
前端开发 JavaScript C#
10款值得推荐的Blazor UI组件库
10款值得推荐的Blazor UI组件库
123 0

热门文章

最新文章