android 彩虹进度条自定义view实现

news2024/10/5 21:18:29

        实现一个彩虹色进度条功能，不说明具体用途大家应该能猜到。想找别人造的轮子，但是没有合适的，所以决定自己实现一个。

相关知识

android 自定义view

LinearGradient 线性渐变

实现步骤

自定义view

自定义一个TmcView类继承View

重写两个构造方法。构造方法一共有4个，这里边重写两个

重写ongSizeChanged方法，用来获取控件宽、高，来计算内部组件尺寸。

重写onDraw方法，里边要描画背景drawBackground，分段数据drawSection，和seekbar图片drawImage。

import android.content.Context;
import android.graphics.Canvas;
import android.util.AttributeSet;
import android.view.View;

import androidx.annotation.Nullable;

import java.util.List;

public class TmcView extends View {

    public TmcView(Context context) {
        super(context);
    }

    public TmcView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        drawBackground(canvas);
        drawSection(canvas);
        drawImage(canvas);
    }

    /**
     * 画背景
     * @param canvas 画布
     */
    private void drawBackground(Canvas canvas) {
    }

    /**
     * 画分段数据
     * @param canvas 画布
     */
    private void drawSection(Canvas canvas) {
    }

    /**
     * 画图片
     * @param canvas 画布
     */
    private void drawImage(Canvas canvas) {
    }

    /**
     * 更新view
     * @param total 总长度
     * @param rest 剩余长度
     * @param sections 分段数据
     */
    public void updateView(int total, int rest, List<SectionData> sections){

    }

实现几个重构方法

标注：

整体宽度为图片宽度44px

背景条宽度30px，外边距7px，圆角15px

带颜色的条宽度20xp，外边距5px，圆角15px

自定义view的坐标轴是以view的左上角位置为原点，向右为x轴正方向，向下为y轴正方向

在视图中用RectF创建背景，和颜色条，并在onSizeChanged中设置尺寸

public class TmcView extends View {

    private final RectF backgroundRectF = new RectF();

    private final RectF colorRectF = new RectF();

    public TmcView(Context context) {
        super(context);
    }

    public TmcView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        //设置矩形 left top right bottom 左上右下点的值  按照标注计算得出
        backgroundRectF.set(7, 0, 37, h);
        colorRectF.set(12, 5, 32, h-5);
    }
    ...
}

绘制背景条

实现drawBackground方法，画背景需要一根画笔Paint 为了避免重复创建，声明为成员变量

public class TmcView extends View {

    /*背景画笔*/
    private final Paint backPaint = new Paint(Paint.ANTI_ALIAS_FLAG);

    private final RectF backgroundRectF = new RectF();

    private final RectF colorRectF = new RectF();

    public TmcView(Context context) {
        super(context);
    }

    public TmcView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        //设置矩形 left top right bottom 左上右下点的值  按照标注计算得出
        backgroundRectF.set(7, 0, 37, h);
        colorRectF.set(12, 5, 32, h-5);
    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        drawBackground(canvas);
        drawSection(canvas);
        drawImage(canvas);
    }

    /**
     * 画背景
     * @param canvas 画布
     */
    private void drawBackground(Canvas canvas) {
        backPaint.setStyle(Paint.Style.FILL);
        backPaint.setAntiAlias(true); //抗锯齿
        backPaint.setColor(Color.parseColor("#FFFFFF"));
        //画圆角矩形，15为圆角的角度
        canvas.drawRoundRect(backgroundRectF, 15, 15, backPaint);
    }
...
}

  布局中加入TmcView

<com.bigxuan.tesapp.view.TmcView
        android:id="@+id/tmc"
        android:layout_width="44px"
        android:layout_height="690px"
        android:layout_marginEnd="1230px"
        android:layout_marginBottom="100px"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        />

绘制颜色条

实现drawSection方法，这里要用到线性渐变LinearGradient

LinearGradient 简单说，指定每一段的颜色和位置百分比，就能实现每一段显示不同颜色。

但它默认是渐变色，要想不变就在每一段的开始和结束位置都设置相同的颜色。

再创建一个画笔 Paint，画颜色条

public class TmcView extends View {


    private final Paint backPaint = new Paint(Paint.ANTI_ALIAS_FLAG);

    private final Paint colorPaint = new Paint(Paint.ANTI_ALIAS_FLAG);

    private final RectF backgroundRectF = new RectF();

    private final RectF colorRectF = new RectF();

    public TmcView(Context context) {
        super(context);
    }

    public TmcView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        //设置矩形 left top right bottom 左上右下点的值  按照标注计算得出
        backgroundRectF.set(7, 0, 37, h);
        colorRectF.set(12, 5, 32, h-5);
    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        drawBackground(canvas);
        drawSection(canvas);
        drawImage(canvas);
    }

    /**
     * 画背景
     * @param canvas 画布
     */
    private void drawBackground(Canvas canvas) {
        backPaint.setStyle(Paint.Style.FILL);
        backPaint.setAntiAlias(true); //抗锯齿
        backPaint.setColor(Color.parseColor("#FFFFFF"));
        //画圆角矩形，15为圆角的角度
        canvas.drawRoundRect(backgroundRectF, 15, 15, backPaint);
    }

    /**
     * 画分段数据
     * @param canvas 画布
     */
    private void drawSection(Canvas canvas) {
        int[] colorArray = {
                Color.parseColor("#FF0000"), Color.parseColor("#FF0000"),
                Color.parseColor("#00FF00"), Color.parseColor("#00FF00"),
                Color.parseColor("#0000FF"), Color.parseColor("#0000FF")
        };
        float[] positionArray = {
                0f, 0.2f,
                0.2f, 0.6f,
                0.6f, 1f
        };
        colorPaint.setStyle(Paint.Style.FILL);
        colorPaint.setAntiAlias(true);

        //指定渐变色方向x轴方向不变，沿y方向渐变，渐变范围为 颜色条高度
        colorPaint.setShader(new LinearGradient(0, 0, 0, colorRectF.bottom, colorArray, positionArray, Shader.TileMode.REPEAT));
        canvas.drawRoundRect(colorRectF,15, 15, colorPaint);
    }

    ...
}

绘制进度图片

app加入图片资源，根据资源id获取bitmap对象，绘制。

需要注意的是，坐标轴的顶点在左上角，绘制图片时也是以图片左上顶点位置做定位，图片位置是view的高度减掉图片的高度，才能显示在正确位置。

public class TmcView extends View {

    private Context context;

    private final Paint backPaint = new Paint(Paint.ANTI_ALIAS_FLAG);

    private final Paint colorPaint = new Paint(Paint.ANTI_ALIAS_FLAG);

    private final RectF backgroundRectF = new RectF();

    private final RectF colorRectF = new RectF();

    /*图片资源id*/
    private int imgResId;

    /*图片位置*/
    private int imgPos;

    public TmcView(Context context) {
        super(context);
    }

    public TmcView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        this.context = context;
        this.imgResId = R.drawable.icon_seekbar_day;
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        //设置矩形 left top right bottom 左上右下点的值  按照标注计算得出
        backgroundRectF.set(7, 0, 37, h);
        colorRectF.set(12, 5, 32, h-5);
        imgPos = h - 44; // 设置一个初始位置
    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        drawBackground(canvas);
        drawSection(canvas);
        drawImage(canvas);
    }

    /**
     * 画背景
     * @param canvas 画布
     */
    private void drawBackground(Canvas canvas) {
        backPaint.setStyle(Paint.Style.FILL);
        backPaint.setAntiAlias(true); //抗锯齿
        backPaint.setColor(Color.parseColor("#FFFFFF"));
        //画圆角矩形，15为圆角的角度
        canvas.drawRoundRect(backgroundRectF, 15, 15, backPaint);
    }

    /**
     * 画分段数据
     * @param canvas 画布
     */
    private void drawSection(Canvas canvas) {
        int[] colorArray = {
                Color.parseColor("#FF0000"), Color.parseColor("#FF0000"),
                Color.parseColor("#00FF00"), Color.parseColor("#00FF00"),
                Color.parseColor("#0000FF"), Color.parseColor("#0000FF")
        };
        float[] positionArray = {
                0f, 0.2f,
                0.2f, 0.6f,
                0.6f, 1f
        };
        colorPaint.setStyle(Paint.Style.FILL);
        colorPaint.setAntiAlias(true);

        //指定渐变色方向x轴方向不变，沿y方向渐变，渐变范围为 颜色条高度
        colorPaint.setShader(new LinearGradient(0, 0, 0, colorRectF.bottom, colorArray, positionArray, Shader.TileMode.REPEAT));
        canvas.drawRoundRect(colorRectF,15, 15, colorPaint);
    }

    /**
     * 画图片
     * @param canvas 画布
     */
    private void drawImage(Canvas canvas) {
        Bitmap bitmap = initBitmap(imgResId);
        canvas.save();
        canvas.translate(0, 0);
        canvas.drawBitmap(bitmap, 0, imgPos, null);
        canvas.restore();
    }

    /**
     * 通过资源id 创建bitmap
     * @param resId 资源id
     * @return
     */
    private Bitmap initBitmap(int resId) {
        Bitmap originalBmp = BitmapFactory.decodeResource(context.getResources(), resId);
        return Bitmap.createScaledBitmap(originalBmp, 44, 44, true);
    }
...
}

公共方法

暴露方法用来更新进度updateView

定义一个图片有效的运动距离为view高度减掉图片高度，函数参数为总距离和剩余距离，计算百分比后乘以有效运动距离得出图片描画位置。最后调用invalidate方法刷新view

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.graphics.Paint;
import android.graphics.RectF;
import android.graphics.Shader;
import android.util.AttributeSet;
import android.view.View;

import androidx.annotation.Nullable;

import com.navinfo.tesapp.R;

import java.util.List;

public class TmcView extends View {

    private Context context;

    private final Paint backPaint = new Paint(Paint.ANTI_ALIAS_FLAG);

    private final Paint colorPaint = new Paint(Paint.ANTI_ALIAS_FLAG);

    private final RectF backgroundRectF = new RectF();

    private final RectF colorRectF = new RectF();

    /*图片资源id*/
    private int imgResId;

    /*图片位置*/
    private int imgPos;

    /*图片有效的运动距离*/
    private int imgValidHeight;

    public TmcView(Context context) {
        super(context);
    }

    public TmcView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        this.context = context;
        this.imgResId = R.drawable.icon_seekbar_day;
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        //设置矩形 left top right bottom 左上右下点的值  按照标注计算得出
        backgroundRectF.set(7, 0, 37, h);
        colorRectF.set(12, 5, 32, h-5);
        imgValidHeight = h - 44;
        imgPos = h - 44; // 设置一个初始位置
    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        drawBackground(canvas);
        drawSection(canvas);
        drawImage(canvas);
    }

    /**
     * 画背景
     * @param canvas 画布
     */
    private void drawBackground(Canvas canvas) {
        backPaint.setStyle(Paint.Style.FILL);
        backPaint.setAntiAlias(true); //抗锯齿
        backPaint.setColor(Color.parseColor("#FFFFFF"));
        //画圆角矩形，15为圆角的角度
        canvas.drawRoundRect(backgroundRectF, 15, 15, backPaint);
    }

    /**
     * 画分段数据
     * @param canvas 画布
     */
    private void drawSection(Canvas canvas) {
        int[] colorArray = {
                Color.parseColor("#FF0000"), Color.parseColor("#FF0000"),
                Color.parseColor("#00FF00"), Color.parseColor("#00FF00"),
                Color.parseColor("#0000FF"), Color.parseColor("#0000FF")
        };
        float[] positionArray = {
                0f, 0.2f,
                0.2f, 0.6f,
                0.6f, 1f
        };
        colorPaint.setStyle(Paint.Style.FILL);
        colorPaint.setAntiAlias(true);

        //指定渐变色方向x轴方向不变，沿y方向渐变，渐变范围为 颜色条高度
        colorPaint.setShader(new LinearGradient(0, 0, 0, colorRectF.bottom, colorArray, positionArray, Shader.TileMode.REPEAT));
        canvas.drawRoundRect(colorRectF,15, 15, colorPaint);
    }

    /**
     * 画图片
     * @param canvas 画布
     */
    private void drawImage(Canvas canvas) {
        Bitmap bitmap = initBitmap(imgResId);
        canvas.save();
        canvas.translate(0, 0);
        canvas.drawBitmap(bitmap, 0, imgPos, null);
        canvas.restore();
    }

    /**
     *
     * @param resId
     * @return
     */
    private Bitmap initBitmap(int resId) {
        Bitmap originalBmp = BitmapFactory.decodeResource(context.getResources(), resId);
        return Bitmap.createScaledBitmap(originalBmp, 44, 44, true);
    }

    /**
     * 更新view
     * @param total 总长度
     * @param rest 剩余长度
     * @param sections 分段数据
     */
    public void updateView(int total, int rest, List<SectionData> sections){
        float percent = (1f * rest) / total;
        //防止溢出
        if(percent < 0){
            return;
        }
        imgPos = (int)(percent * imgValidHeight);
        invalidate();
    }
}

updateView方法还有第三个参数，是用来传出颜色条不同段的颜色和百分比数据的。根据此数据来更新颜色条。这里需要根据业务不同自己实现，我这里就不写了。

总结

        大家可能看出来了，这个视图是用来展示导航中不同路段交通情况和当前车辆进度用的。自定义view中可以在构造方法中获取一些自定义属性，像背景条和颜色条的边距、圆角这些都可以定义到xml中，因为只适配一种屏幕尺寸所以也没有做多尺寸适配。以前也没有做过，这次记录下来。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1842324.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

CRT手册

CRT手册

阅读更多...
Python+appium 自动化测试-Android 端环境配置

Python+appium 自动化测试-Android 端环境配置

一、安装配置 JDK 一、安装环境 1、本机系统&#xff1a;Windows 10&#xff08;64 位&#xff09; 2、JDK 版本&#xff1a;1.8&#xff08;64 位&#xff09; 二、下载安装 1、JDK 和 JRE 简介 Java 环境分 JDK 和 JRE &#xff0c;JDK 就是 Java Development Kit。简单…
阅读更多...
第 三 方 组 件 e l e m e n t - u i[Vue]

第 三 方 组 件 e l e m e n t - u i[Vue]

一、组件之间的传值 组件可以由内部的Data提供数据&#xff0c;也可以由父组件通过prop的方式传值。 兄弟组件之间可以通过Vuex等统一数据源提供数据共享 第一种 Movie.vue <template><div><h1>我才不要和你做朋友</h1></div></template&…
阅读更多...
.NET C# 操作Neo4j图数据库

.NET C# 操作Neo4j图数据库

.NET C# 操作Neo4j图数据库 目录 .NET C# 操作Neo4j图数据库环境Code 环境 VisualStudio2022 .NET 6 Neo4j.Driver 5.21 Code // 连接设置 var uri "bolt://localhost:7687"; var user "neo4j"; var password "password"; // 请替换为你的…
阅读更多...
丹尼尔·T·琼斯：精益生产到底是什么？

丹尼尔·T·琼斯：精益生产到底是什么？

本文摘要自《精益思想》、《改变世界的机器》作者之一丹尼尔T琼斯的文章。丹尼尔T琼斯是一位学者、英国作家和研究员。他曾多次获得瑞士山吉奥卓越运营奖研究与专业出版类别的奖项&#xff0c;也包括了国际精益六西格玛研究所&#xff08;ILSSI&#xff09;[1]的"精益思想…
阅读更多...
ChatGPT在社工攻击和反钓鱼中的应用

ChatGPT在社工攻击和反钓鱼中的应用

概述 ChatGPT是一种基于神经网络的自然语言处理模型&#xff0c;可以生成自然流畅的文本或对话。在钓鱼攻击中&#xff0c;攻击者可以使用ChatGPT生成虚假电子邮件或消息&#xff0c;更好地伪装成受害者所信任的个人或组织&#xff0c;从而获取受害者的个人信息。这种行为对个…
阅读更多...
网络编程（一）基本概念

网络编程（一）基本概念

文章目录 一、概念&#xff08;一&#xff09;网络发展阶段1. ARPAnet阶段2. TCP/IP两个协议阶段3. 网络体系结构和OSI开放系统互联模型4. TCP/IP协议簇体系结构&#xff08;1&#xff09; 应用层&#xff1a;&#xff08;2&#xff09;传输层&#xff1a;&#xff08;3&#x…
阅读更多...
vue3面试题八股集合——2024

vue3面试题八股集合——2024

vue3比vue2有什么优势&#xff1f; 性能更好&#xff0c;打包体积更小&#xff0c;更好的ts支持&#xff0c;更好的代码组织&#xff0c;更好的逻辑抽离&#xff0c;更多的新功能 描述Vu3生命周期 Options API的生命周期&#xff1a; beforeCreate: 在实例初始化之后、数据观…
阅读更多...
NSSCTF-Web题目11

NSSCTF-Web题目11

目录 [鹤城杯 2021]EasyP 1、题目 2、知识点 3、思路 [SWPUCTF 2022 新生赛]numgame 1、题目 2、知识点 3、思路 [鹤城杯 2021]EasyP 1、题目 2、知识点 php代码审计 3、思路 打开题目&#xff0c;出现一段代码&#xff0c;我们对代码进行审计 这里出现了很多不懂的…
阅读更多...
VBA学习(14):给1000个文件重命名

VBA学习(14):给1000个文件重命名

如下图所示&#xff0c;一个文件夹内包含了大量文件&#xff0c;现在需要在每个文件前面增加前缀"星光牌-" 为了使代码更具有通用性&#xff0c;更方便大家使用&#xff0c;我们还是采用两步走的方式。 首先&#xff0c;使用以下代码&#xff0c;将该文件夹内的文件…
阅读更多...
数据结构：3.3.4遍历应用例子

数据结构：3.3.4遍历应用例子

应用例子一&#xff1a; 改一下先序遍历的程序 例子二&#xff1a;求二叉树的高度 怎么求&#xff1f;树是递归定义的&#xff0c;所以思考求二叉树高度能不能用递归做。 二叉树的高度和左右高度有什么关系&#xff1f;二叉树的高度等于左右子树的最大高度加上一 求树高的前…
阅读更多...
废品回收小程序的优势？有什么开发功能？

废品回收小程序的优势？有什么开发功能？

随着环保意识的增强&#xff0c;废品回收市场备受大众关注。我国是人口大国&#xff0c;回收市场拥有巨大的发展空间&#xff0c;对于商家来说&#xff0c;废品回收市场的利润空间也非常大。 在科技快速发展时代&#xff0c;为促进我国资源回收利用&#xff0c;让居民便捷回收…
阅读更多...
开发环境安装---Visual Studio Code

开发环境安装---Visual Studio Code

开发环境安装---Visual Studio Code 1.官网下载Visual Studio Code2.安装步骤3.安装插件 1.官网下载Visual Studio Code VScode: https://code.visualstudio.com/ Visual Studio Code 简称 VSCode &#xff0c;2015 年由微软公司发布。可用于 Windows&#xff0c;macOS 和 Li…
阅读更多...
pycharm不能安装包的解决方法

pycharm不能安装包的解决方法

一直使用VScode写python&#xff0c;最近使用pycharm&#xff0c;但是pycharm不能安装包&#xff0c;类似这种 后面直接使用ALT F12跳转终端&#xff1a; pip install 需要添加的包 -i https://pypi.tuna.tsinghua.edu.cn/simple不报错了
阅读更多...
如何优雅地使用 console.log 打印数组或对象

如何优雅地使用 console.log 打印数组或对象

一、背景 使用 console.log 在控制台中打印数组或者对象时&#xff0c;很多时候它们的字段都是默认关闭的&#xff0c;需要手动一个个的点开&#xff0c;非常不直观且麻烦。 二、解决方案 使用 JSON.stringify() 的第三个参数 我们来看一下官方对于 JSON.stringify 的介绍 三、…
阅读更多...
【SQL每日一练】HackerRan-Basic Join-Challenges练习

【SQL每日一练】HackerRan-Basic Join-Challenges练习

文章目录 题目题析题解1.sqlserver 题目 编写一个查询来打印 hacker _ id、 name 和每个学生创建的挑战的总数。按照挑战的总数按降序对结果进行排序。如果不止一个学生创建了相同数量的挑战&#xff0c;那么按 hacker _ id 对结果进行排序。如果不止一个学生创建了相同数量的…
阅读更多...
NGINX_十二 nginx 地址重写 rewrite

NGINX_十二 nginx 地址重写 rewrite

十二 nginx 地址重写 rewrite 1 什么是Rewrite Rewrite对称URL Rewrite&#xff0c;即URL重写&#xff0c;就是把传入Web的请求重定向到其他URL的过程。URL Rewrite最常见的应用是URL伪静态化&#xff0c;是将动态页面显示为静态页面方式的一种技术。比如 http://www.123.com…
阅读更多...
odoo 入库发票三大凭证

odoo 入库发票三大凭证

注意对应科目 库存计价凭证 原材料 成品 供应商账单凭证 银行账单凭证
阅读更多...
分布式系列之限流组件

分布式系列之限流组件

概述 在高并发场景下&#xff0c;请求量瞬间到达&#xff0c;后端服务器即使有缓存、集群主备、分库分表、容错降级等措施&#xff0c;也有可能扛不住这请求量&#xff0c;因此可考虑引入限流组件。限流的目的&#xff1a;防止恶意请求流量或流量超出系统承载。 应用场景&…
阅读更多...
1.搭建SpringBoot项目三种方式

1.搭建SpringBoot项目三种方式

目录 1.使用Spring Initializr 1.1访问Spring Initializr: 1.2填写项目基本信息 1.3配置项目元数据: 1.4添加依赖: 1.5生成项目: 1.6下载项目: 1.7解压项目: 1.8导入项目到IDE: 1.9运行项目: 1.10创建控制器: 1.11访问应用 2.使用IDE&#xff08;集成开发环境&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023