欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Android简单实现一个颜色渐变的ProgressBar的方法

程序员文章站 2022-03-08 13:16:33
今天看一个教程,看到一个颜色渐变的progressbar,觉得有点意思,所以记录一番。 下面这个是效果图 颜色渐变的progressbar 看到效果图可能会给...

今天看一个教程,看到一个颜色渐变的progressbar,觉得有点意思,所以记录一番。
下面这个是效果图

Android简单实现一个颜色渐变的ProgressBar的方法

颜色渐变的progressbar

看到效果图可能会给人一种使用了高端技术的感觉,其实这个没有那么高深,我们只是简单改变了progressbar的样式即可实现,下面说说实现方式。

首先我们简单分析一下:

1 . 上面的样式只是实现了颜色渐变,但它旋转和呈现的方式仍然是一个圆形的progressbar。

2 . 这个progressbar实现了颜色渐变,我们就需要用到gradient,这个也比较简单,只要我们配置开始,中间,结束颜色即可实现
明白了上面两点我们就开始写代码。

首先,我们实现上面的布局,背景灰色,一个progressbar居中,一个textview位于progressbar下方。
代码如下:

<?xml version="1.0" encoding="utf-8"?>
<relativelayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  tools:context="cn.codekong.androidloading.mainactivity">
  <relativelayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#de262a3b">
    <progressbar
      android:id="@+id/loading"
      android:layout_width="60dp"
      android:layout_height="60dp"
      android:layout_centerinparent="true"
      android:indeterminate="false"/>
    <textview
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_below="@id/loading"
      android:text="加载中"
      android:textcolor="#ffffff"
      android:textsize="20sp"
      android:layout_centerhorizontal="true"/>
  </relativelayout>
</relativelayout>

上面其他代码都很好理解,只有progressbar有一个 indeterminate 属相需要解释一下:

一般的progressbar都是用于显示加载进度,如果我们直到当前的具体进度,那个这个属性要设置为true,并设置正确的进度,如果我们也不知道正确的进度,则设置为false。

布局设置好了,下一步就是设置progressbar的渐变样式,这里我们需要自定义一个drawable。

自定义的drawable代码如下:

<?xml version="1.0" encoding="utf-8"?>
<rotate
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:fromdegrees="0"
  android:pivotx="50%"
  android:pivoty="50%"
  android:todegrees="1080.0">
  <shape android:innerradiusratio="3"
      android:shape="ring"
      android:thicknessratio="10"
      android:uselevel="false">
    <gradient android:centercolor="#ffdc35"
         android:centery="0.50"
         android:endcolor="#ce0000"
         android:startcolor="#ffffff"
         android:type="sweep"/>
  </shape>
</rotate>

下面解释一下上面的代码:

外层的 rotate 表明这是一个旋转的动画,并且该规定了开始角度和结束角度,还有旋转中心为圆心

内层的shape定义了形状为一个环(ring),其中有三个属性:

<1> innerradiusratio 为外环半径和内径的比值,比如外环半径为30,内环半径为10,则比值为3

<2> thicknessratio 为外环半径与环的厚度的比值

<3> uselevel 如果为true,则可以在levellistdrawable中使用

接下来的 gradient 定义了渐变效果,规定了开始结束的颜色,还规定渐变方式为扫描渐变

最后一步,我们通过一个progressbar的属性给他设置我们上面定义的样式:

android:indeterminatedrawable="@drawable/loading_drawable"

经过上面的步骤我们就实现了一个简单的渐变的progressbar,是不是超级简单,希望可以帮助到需要的人。

源码地址: https://github.com/codekongs/android-learning/tree/master/androidloading

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。