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

目录
相关文章
|
19天前
「Mac畅玩鸿蒙与硬件46」UI互动应用篇23 - 自定义天气预报组件
本篇将带你实现一个自定义天气预报组件。用户可以通过选择不同城市来获取相应的天气信息,页面会显示当前城市的天气图标、温度及天气描述。这一功能适合用于动态展示天气信息的小型应用。
128 38
|
10天前
|
人工智能 开发框架 JavaScript
LowCodeEngine:阿里开源的企业级低代码开发平台,提供预制的 UI 组件和模板,覆盖完整的研发周期
LowCodeEngine 是阿里巴巴开源的低代码开发框架,旨在通过拖拽、配置等简单操作,帮助开发者快速构建复杂的系统页面,提升开发效率和质量。
55 4
LowCodeEngine:阿里开源的企业级低代码开发平台,提供预制的 UI 组件和模板,覆盖完整的研发周期
|
2月前
|
UED
「Mac畅玩鸿蒙与硬件31」UI互动应用篇8 - 自定义评分星级组件
本篇将带你实现一个自定义评分星级组件,用户可以通过点击星星进行评分,并实时显示评分结果。为了让界面更具吸引力,我们还将添加一只小猫图片作为评分的背景装饰。
81 6
|
2月前
|
前端开发 开发者
「Mac畅玩鸿蒙与硬件21」鸿蒙UI组件篇11 - Canvas 组件的静态进阶应用
在鸿蒙应用开发中,Canvas 组件不仅用于基础绘图,还提供了处理复杂路径和渐变效果的多种手段,帮助开发者实现精美的静态图形。本篇将介绍如何在 Canvas 中绘制复杂路径、创建渐变填充效果。
64 7
「Mac畅玩鸿蒙与硬件21」鸿蒙UI组件篇11 - Canvas 组件的静态进阶应用
|
2月前
|
前端开发 开发者
「Mac畅玩鸿蒙与硬件22」鸿蒙UI组件篇12 - Canvas 组件的动态进阶应用
在鸿蒙应用中,Canvas 组件可以实现丰富的动态效果,适合用于动画和实时更新的场景。本篇将介绍如何在 Canvas 中实现动画循环、动态进度条、旋转和缩放动画,以及性能优化策略。
67 6
|
2月前
|
前端开发 开发者
「Mac畅玩鸿蒙与硬件23」鸿蒙UI组件篇13 - 自定义组件的创建与使用
自定义组件可以帮助开发者实现复用性强、逻辑清晰的界面模块。通过自定义组件,鸿蒙应用能够提高代码的可维护性,并简化复杂布局的构建。本篇将介绍如何创建自定义组件,如何向组件传递数据,以及如何在不同页面间复用这些组件。
60 5
|
1月前
|
XML 搜索推荐 前端开发
安卓开发中的自定义视图:打造个性化UI组件
在安卓应用开发中,自定义视图是一种强大的工具,它允许开发者创造独一无二的用户界面元素,从而提升应用的外观和用户体验。本文将通过一个简单的自定义视图示例,引导你了解如何在安卓项目中实现自定义组件,并探讨其背后的技术原理。我们将从基础的View类讲起,逐步深入到绘图、事件处理以及性能优化等方面。无论你是初学者还是有经验的开发者,这篇文章都将为你提供有价值的见解和技巧。
|
2月前
|
搜索推荐 Android开发 开发者
探索安卓开发中的自定义视图:打造个性化UI组件
【10月更文挑战第39天】在安卓开发的世界中,自定义视图是实现独特界面设计的关键。本文将引导你理解自定义视图的概念、创建流程,以及如何通过它们增强应用的用户体验。我们将从基础出发,逐步深入,最终让你能够自信地设计和实现专属的UI组件。
|
3月前
|
开发框架 JavaScript 前端开发
鸿蒙NEXT开发声明式UI是咋回事?
【10月更文挑战第15天】鸿蒙NEXT的声明式UI基于ArkTS,提供高效简洁的开发体验。ArkTS扩展了TypeScript,支持声明式UI描述、自定义组件及状态管理。ArkUI框架则提供了丰富的组件、布局计算和动画能力。开发者仅需关注数据变化,UI将自动更新,简化了开发流程。此外,其前后端分层设计与编译时优化确保了高性能运行,利于生态发展。通过组件创建、状态管理和渲染控制等方式,开发者能快速构建高质量的鸿蒙应用。
163 3
|
15天前
|
移动开发 前端开发 Java
Java最新图形化界面开发技术——JavaFx教程(含UI控件用法介绍、属性绑定、事件监听、FXML)
JavaFX是Java的下一代图形用户界面工具包。JavaFX是一组图形和媒体API,我们可以用它们来创建和部署富客户端应用程序。 JavaFX允许开发人员快速构建丰富的跨平台应用程序,允许开发人员在单个编程接口中组合图形,动画和UI控件。本文详细介绍了JavaFx的常见用法,相信读完本教程你一定有所收获!
Java最新图形化界面开发技术——JavaFx教程(含UI控件用法介绍、属性绑定、事件监听、FXML)
下一篇
开通oss服务