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

目录
相关文章
|
20天前
|
缓存 搜索推荐 索引
「Mac畅玩鸿蒙与硬件12」鸿蒙UI组件篇2 - Image组件的使用
在鸿蒙应用开发中,Image 组件用于加载和显示图片资源,并提供多种属性来控制图片的显示效果和适配方式。本篇将带你学习如何在鸿蒙应用中加载本地和远程图片、设置图片样式以及实现简单的图片轮播功能。
87 7
「Mac畅玩鸿蒙与硬件12」鸿蒙UI组件篇2 - Image组件的使用
|
12天前
|
搜索推荐 Android开发 开发者
探索安卓开发中的自定义视图:打造个性化UI组件
【10月更文挑战第39天】在安卓开发的世界中,自定义视图是实现独特界面设计的关键。本文将引导你理解自定义视图的概念、创建流程,以及如何通过它们增强应用的用户体验。我们将从基础出发,逐步深入,最终让你能够自信地设计和实现专属的UI组件。
|
6天前
|
搜索推荐 前端开发 开发者
「Mac畅玩鸿蒙与硬件19」鸿蒙UI组件篇9 - 自定义动画实现
自定义动画让开发者可以设计更加个性化和复杂的动画效果,适合表现独特的界面元素。鸿蒙提供了丰富的工具,支持通过自定义路径和时间控制来创建复杂的动画运动。本篇将带你学习如何通过自定义动画实现更多样化的效果。
59 11
「Mac畅玩鸿蒙与硬件19」鸿蒙UI组件篇9 - 自定义动画实现
|
6天前
|
UED
「Mac畅玩鸿蒙与硬件17」鸿蒙UI组件篇7 - Animation 组件基础
在应用开发中,动画效果可以增强用户体验。鸿蒙框架提供了 translate、scale 和 rotate 等动画功能,允许对组件进行平移、缩放和旋转等操作。本篇将介绍 Animation 组件的基础知识和示例代码。
55 10
「Mac畅玩鸿蒙与硬件17」鸿蒙UI组件篇7 - Animation 组件基础
|
4天前
|
前端开发 开发者
「Mac畅玩鸿蒙与硬件22」鸿蒙UI组件篇12 - Canvas 组件的动态进阶应用
在鸿蒙应用中,Canvas 组件可以实现丰富的动态效果,适合用于动画和实时更新的场景。本篇将介绍如何在 Canvas 中实现动画循环、动态进度条、旋转和缩放动画,以及性能优化策略。
32 6
「Mac畅玩鸿蒙与硬件22」鸿蒙UI组件篇12 - Canvas 组件的动态进阶应用
|
4天前
|
前端开发 开发者
「Mac畅玩鸿蒙与硬件23」鸿蒙UI组件篇13 - 自定义组件的创建与使用
自定义组件可以帮助开发者实现复用性强、逻辑清晰的界面模块。通过自定义组件,鸿蒙应用能够提高代码的可维护性,并简化复杂布局的构建。本篇将介绍如何创建自定义组件,如何向组件传递数据,以及如何在不同页面间复用这些组件。
26 5
「Mac畅玩鸿蒙与硬件23」鸿蒙UI组件篇13 - 自定义组件的创建与使用
|
7天前
|
存储 数据安全/隐私保护 开发者
「Mac畅玩鸿蒙与硬件13」鸿蒙UI组件篇3 - TextInput 组件获取用户输入
在鸿蒙应用开发中,TextInput 组件用于接收用户输入,适用于文本、密码等多种输入类型。本文详细介绍鸿蒙 TextInput 组件的使用方法,包括输入限制、样式设置、事件监听及搜索框应用,帮助你灵活处理鸿蒙应用中的用户输入。
41 7
「Mac畅玩鸿蒙与硬件13」鸿蒙UI组件篇3 - TextInput 组件获取用户输入
|
1月前
|
开发框架 JavaScript 前端开发
鸿蒙NEXT开发声明式UI是咋回事?
【10月更文挑战第15天】鸿蒙NEXT的声明式UI基于ArkTS,提供高效简洁的开发体验。ArkTS扩展了TypeScript,支持声明式UI描述、自定义组件及状态管理。ArkUI框架则提供了丰富的组件、布局计算和动画能力。开发者仅需关注数据变化,UI将自动更新,简化了开发流程。此外,其前后端分层设计与编译时优化确保了高性能运行,利于生态发展。通过组件创建、状态管理和渲染控制等方式,开发者能快速构建高质量的鸿蒙应用。
120 3
|
29天前
|
开发框架 JavaScript 前端开发
HarmonyOS UI开发:掌握ArkUI(包括Java UI和JS UI)进行界面开发
【10月更文挑战第22天】随着科技发展,操作系统呈现多元化趋势。华为推出的HarmonyOS以其全场景、多设备特性备受关注。本文介绍HarmonyOS的UI开发框架ArkUI,探讨Java UI和JS UI两种开发方式。Java UI适合复杂界面开发,性能较高;JS UI适合快速开发简单界面,跨平台性好。掌握ArkUI可高效打造符合用户需求的界面。
89 8
|
1月前
|
JavaScript API 开发者
掌握ArkTS,打造HarmonyOS应用新视界:从“Hello World”到状态管理,揭秘鸿蒙UI开发的高效秘诀
【10月更文挑战第19天】ArkTS(ArkUI TypeScript)是华为鸿蒙系统中用于开发用户界面的声明式编程语言,结合了TypeScript和HarmonyOS的UI框架。本文介绍ArkTS的基本语法,包括组件结构、模板和脚本部分,并通过“Hello World”和计数器示例展示其使用方法。
61 1