首页 > 资讯 > 移动开发 >AndroidProgressBar组件使用教程

217

分享到

AndroidProgressBar组件使用教程

Android ProgressBar Android ProgressBar控件 2022-11-13 19:11:39 217人浏览薄情痞子

摘要

目录1. 前言2. ProgressBar属性介绍2.1 XML属性2.2 api属性3. 水平进度条4. 圆形进度条5. 实例演示1. 前言进度条是UI界面中一种非常实用的组件，

1. 前言

进度条是UI界面中一种非常实用的组件，通常用于向用户显示某个耗时操作完成的百分比，进度条可以动态的显示进度，因为避免长时间地执行某个耗时操作时，让用户感觉程序失去了响应，从而更好地提高用户界面的友好性。

进度条展示有两种：水平进度条和环形进度条，下文分别详细介绍。首先我们来看下进度条的相关属性介绍。

2. ProgressBar属性介绍

2.1 XML属性

这里的andorid:progressDrawable用于指定进度条的轨道的绘制形式，该属性可以指定为一个LayerDrawble对象的引用（该对象可以在XML文件中使用<layer-list>元素来进行配置）。

Android:indeterminateBehavior

定义当进度达到最大时，不确定模式的表现；该值必须为repeat或者cycle，repeat表示进度从0重新开始；cycle表示进度保持当前值，并且回到0

android:indeterminateDuration=“500”，每转一圈的时间，ms

2.2 API属性

当然ProgressBar也提供如下方法来操作进度条：

setProgress(int) //设置第一进度
setSecondaryProgress(int) //设置第二进度
getProgress() //获取第一进度
getSecondaryProgress() //获取第二进度
incrementProgressBy(int) //增加或减少第一进度，当参数为正数时，进度条增加，当参数为负数时，进度条减少
incrementSecondaryProgressBy(int) //增加或减少第二进度
getMax() //获取最大进度

3. 水平进度条

在xml中引用有两种方式：

A为 style="?android:attr/progressBarStyleHorizontal"

B为 style="@android:style/Widget.ProgressBar.Horizontal"

查看B的源码，相关属性为：

    <style name="Widget.ProgressBar.Horizontal">
        <item name="indeterminateOnly">false</item>
        <item name="progressDrawable">@drawable/progress_horizontal</item>
        <item name="indeterminateDrawable">@drawable/progress_indeterminate_horizontal</item>
        <item name="minHeight">20dip</item>
        <item name="maxHeight">20dip</item>
        <item name="mirrorForRtl">true</item>
    </style>

上文中提到的progressDrawable就是水平进度条轨迹的显示Drawable。我们继续去看下progress_horizontal 的源码

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="Http://schemas.android.com/apk/res/android">
     <!-- 进度条的背景色-->
    <item android:id="@android:id/background">
        <shape>
            <corners android:radius="5dip" />
            <gradient
                    android:startColor="#ff9d9e9d"
                    android:centerColor="#ff5a5d5a"
                    android:centerY="0.75"
                    android:endColor="#ff747674"
                    android:angle="270"
            />
        </shape>
    </item>
    <!-- 缓冲进度条的背景色-->
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <corners android:radius="5dip" />
                <gradient
                        android:startColor="#80ffd300"
                        android:centerColor="#80ffb600"
                        android:centerY="0.75"
                        android:endColor="#a0ffcb00"
                        android:angle="270"
                />
            </shape>
        </clip>
    </item>
    <!-- 下载过程中进度条的颜色-->
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="5dip" />
                <gradient
                        android:startColor="#ffffd300"
                        android:centerColor="#ffffb600"
                        android:centerY="0.75"
                        android:endColor="#ffffcb00"
                        android:angle="270"
                />
            </shape>
        </clip>
    </item>
</layer-list>

上述代码就是一个 LayerDrawble图片，它是层次化的Drawable合集，根元素为<layer-list> ，每一个item就是一个shape图片，最后一个item显示在最上层。

4. 圆形进度条

系统自带的圆形进度条，都是一直转圈状态，为不精确显示进度默认android:indeterminate属性值为true 。

我们进去 android:style/Widget.ProgressBar.Large源码看下

 <style name="Widget.ProgressBar.Large">
        <item name="indeterminateDrawable">@drawable/progress_large_white</item>
        <item name="minWidth">76dip</item>
        <item name="maxWidth">76dip</item>
        <item name="minHeight">76dip</item>
        <item name="maxHeight">76dip</item>
    </style>

就是一个indeterminateDrawable ，进去再看下代码：

<animated-rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/spinner_white_76"
    android:pivotX="50%"
    android:pivotY="50%"
    android:framesCount="12"
    android:frameDuration="100" />

看看 spinner_white_76 这个图片:

是一个 rotate 动画效果。

1. 我们来修改一下系统圆形进度条的颜色，修改属性为：android:indeterminateTint="#ff0000"

源码注释：Tint to apply to the indeterminate progress indicator 翻译：就是给进度条着色

代码：

    <ProgressBar
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:indeterminateTint="#ff0000"/>

没加这句话是默认灰色圆形进度条，加了之后就变成了红色圆形进度条。

2. 自定义转圈动画

    <ProgressBar
        android:id="@+id/progressbar2"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:indeterminateDrawable="@drawable/bg_loading"/>

bg_loading.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <rotate
            android:drawable="@drawable/loading"
            android:fromDegrees="0.0"
            android:pivotX="50.0%"
            android:pivotY="50.0%"
            android:toDegrees="359.0"
            android:repeatMode="reverse"/>
    </item>
</layer-list>

loading.xml :

5. 实例演示

我们来写一个水平进度条，模拟下载任务进度过程：

public class MainActivity extends AppCompatActivity {
    private ProgressBar horizontalProgress;
    private ProgressBar circleProgress;
    private Button startBtn;
    private TextView mTextView;
    private Handler mHandler = new Handler(){
        @Override
        public void handleMessage(@NonNull Message msg) {
            super.handleMessage(msg);
            if(msg.what >= 100) {
                horizontalProgress.setProgress(100);
                mTextView.setText("下载完成");
                removeCallbacksAndMessages(null);
                return;
            }
            int progress = msg.what;
            horizontalProgress.setProgress(progress);
            mTextView.setText("下载进度：" + progress + "%");
            Message message = Message.obtain();
            int temp = progress + 4;
            message.what = temp;
            mHandler.sendMessageDelayed(message, 1000);
        }
    };
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        horizontalProgress = findViewById(R.id.progressbar1);
        mTextView = findViewById(R.id.tv_progress);
        circleProgress = findViewById(R.id.progressbar2);
        startBtn = findViewById(R.id.start_download);
    }
    @Override
    protected void onResume() {
        super.onResume();
        startBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Message msg = Message.obtain();
                msg.what = 1;
                mHandler.sendMessage(msg);
                startBtn.setClickable(false);
            }
        });
    }
    @Override
    protected void onDestroy() {
        super.onDestroy();
        mHandler.removeCallbacksAndMessages(null);
    }

布局文件activity_main.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="wrap_content"
    android:layout_marginLeft="8dp"
    android:layout_marginRight="8dp"
    android:gravity="center"
    android:orientation="vertical">
    <TextView
        android:id="@+id/tv_progress"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="水平进度条"
        android:textSize="20sp" />
    <ProgressBar
        style="@android:style/Widget.ProgressBar.Horizontal"
        android:id="@+id/progressbar1"
        android:layout_height="15dp"
        android:layout_width="match_parent"
        android:progress="0"
        android:max="100"/>
    <TextView
        android:id="@+id/tv_progress2"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:layout_width="wrap_content"
        android:text="圆形进度条"
        android:textSize="20sp" />
    <ProgressBar
        android:id="@+id/progressbar2"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:indeterminateDrawable="@drawable/bg_loading"
        />
    <Button
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:id="@+id/start_download"
        android:textSize="20sp"
        android:text="开始下载"/>

演示效果图：

到此这篇关于Android ProgressBar组件使用教程的文章就介绍到这了,更多相关Android ProgressBar内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

--结束END--

本文标题: AndroidProgressBar组件使用教程

本文链接: https://lsjlt.com/news/170671.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

回答

如何调试操作系统的错误？
操作系统

2023-11-15发布

回答

操作系统中的I/O系统是如何实现的？
操作系统

2023-11-15发布

回答

如何实现操作系统的内存管理？
操作系统

2023-11-15发布

回答

什么是虚拟内存，它对操作系统有什么影响？
操作系统

2023-11-15发布

回答

ASP中的MVC架构和WebForms架构有什么区别和使用场景？
ASP.NET

2023-11-15发布

回答

ASP中的数据验证和数据校验有什么不同？
ASP.NET

2023-11-15发布

回答

ASP中的ADO对象和DAO对象有什么区别和使用方法？
ASP.NET

2023-11-15发布

回答

Node.js中的包管理器NPM是什么？如何使用它进行依赖管理？
node.js

2023-11-15发布

回答

Vue.js中的动态组件是什么？如何使用它来动态渲染组件？
VUE

2023-11-15发布

回答

如何使用Vue.js实现懒加载和预加载？
VUE

2023-11-15发布

AndroidProgressBar组件使用教程

目录

1. 前言

2. ProgressBar属性介绍

2.1 XML属性

2.2 API属性

3. 水平进度条

4. 圆形进度条

5. 实例演示

AndroidProgressBar组件使用教程

JetpackComposeScaffold组件使用教程

Android ProgressBar组件使用教程

XamarinAndroid组件教程RecylerView动画组件使用动画(3)

Node.js与Sails redis组件的使用教程

Vue封装svg-icon组件使用教程

React组件与事件的创建使用教程

Android Flutter中Offstage组件的使用教程详解

Android应用开发中RecyclerView组件使用入门教程

ElementUI的Tree组件的基本使用实战教程

Android App开发中ViewPager组件的入门使用教程

前端架构vue动态组件使用基础教程

Django中ModelForm组件的简单配置与使用教程

Vue移动端下拉刷新组件的使用教程

Flutter3.7新增Menu菜单组件的使用教程分享

微信小程序Vant组件库的安装与使用教程

Unity3D应用之时钟与钟表小组件的使用教程

微信小程序使用扩展组件库WeUI的入门教程

javascript onclick事件使用教程

javascript ondblclick事件使用教程

Mac清理软件cleanmymac x4.14.4破解版,2024年有免费cleanmymac x激活码

山东移动CM311-5-ZG_国科GK6323V100C_安卓4.4.2_免拆U盘卡刷刷机固件包

基于微信海南海口某健身房私教预约小程序系统设计与实现研究背景和意义、国内外现状

Android Studio常用快捷键、Android Studio快捷键大全

xcode15下载ios17模拟器失败

C51模拟CSGO的C4炸弹小程序

uniapp中video层级太高解决方案，适用安卓/IOS/H5

基于微信小程序化妆品商城系统设计与实现

Axios使用方法详解，从入门到进阶

微信小程序使用自定义tabbar 想要获取tabbar的高度,返回的结果是null,该如何获取?