当前位置: 首页 > news >正文

自定义view - 玩转字体变色

自定义View步骤:
1>:values__attrs.xml,定义自定义属性;
2>:在第三个构造方法中获取自定义属性;
3>:onMeasure【不是必须的】;
4>:onDraw:绘制代码全都在onDraw中写的;
这篇文章主要是结合属性动画自定义一个文字变色的view。先来看效果图。
在这里插入图片描述技术分析:
不能用TextView,因为系统的TextView只能有一种颜色,需要ColorTraceTextView,继承TextView,而不是继承View,原因是:
1>:继承TextView不用自己手动实现onMeasure、onDraw,系统已经实现了;
2>:textColor、textSize属性TextView已经实现了,不用自己实现;
3>: 自定义属性a.不变的颜色 origincolor b.变化的颜色 changcolor

1.字体颜色

自定义属性:attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources><declare-styleable name="ColorTrackText"><attr name="originColor" format="color"/><attr name="changeColor" format="color"/></declare-styleable>
</resources>

使用属性:avtivity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"android:paddingBottom="16dp"android:paddingLeft="16dp"android:paddingRight="16dp"android:paddingTop="16dp"android:orientation="vertical"tools:context=".MainActivity"><com.example.view_day04.ColorTrackTextViewandroid:id="@+id/ColorTrackTextView"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="hello world"android:textSize="20sp"app:changeColor ="@color/purple_200"app:originColor = "@color/black"/><Buttonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="左到右"android:onClick="leftToRight"/><Buttonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="右到左"android:onClick="rightToLeft"/></LinearLayout>

2.自定义View–初始化、获取画笔、绘制、实现不同朝向

ColorTrackTextView.java

2.1.初始化、画笔、 绘制

public class ColorTrackTextView extends TextView{// 绘制不变色的画笔private Paint mOriginPaint ;// 绘制变色的画笔private Paint mChangePaint ;private float mCurrentProgress = 0.0f;private Direction mDirection;//实现不同朝向public enum Direction {LEFT_TO_RIGHT,RIGHT_TO_LEFT}public ColorTrackTextView(Context context) {this(context, null);}public ColorTrackTextView(Context context, @Nullable @org.jetbrains.annotations.Nullable AttributeSet attrs) {this(context, attrs, 0);}public ColorTrackTextView(Context context, @Nullable @org.jetbrains.annotations.Nullable AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);initPaint(context, attrs);}private void initPaint(Context context, AttributeSet attrs){TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.ColorTrackText);// 此处颜色传递默认值,防止你在布局文件中没有指定颜色int originColor = typedArray.getColor(R.styleable.ColorTrackText_originColor, getTextColors().getDefaultColor());int changeColor = typedArray.getColor(R.styleable.ColorTrackText_changeColor, getTextColors().getDefaultColor());mOriginPaint = getPaintByColor(originColor);mChangePaint = getPaintByColor(changeColor);typedArray.recycle();}private Paint getPaintByColor(int color) {Paint paint = new Paint() ;// 给画笔设置颜色paint.setColor(color);// 设置抗锯齿paint.setAntiAlias(true);// 仿抖动paint.setDither(true);// 设置文字大小,拿到布局中的Textsizepaint.setTextSize(getTextSize());return paint;}//利用cliprect可以裁剪,左边用一个画笔去画,右边用另一个画笔去画 不断地改变中间值@Overrideprotected void onDraw(Canvas canvas) {//根据进度把中间值是算出来int middle = (int)(mCurrentProgress * getWidth());if (mDirection == Direction.LEFT_TO_RIGHT) {//绘制不变色的drawText(canvas,mOriginPaint,0, middle);//绘制变色的drawText(canvas,mChangePaint,middle, getWidth());} else {// 右-左:drawText(canvas , mChangePaint , getWidth()-middle , getWidth());drawText(canvas , mOriginPaint , 0 , getWidth()-middle);}}/*** 画文字*/private void drawText(Canvas canvas, Paint paint, int start, int end) {// 保存画笔canvas.save();Rect rect = new Rect(start,0,end,getHeight()) ;// 裁剪区域canvas.clipRect(rect);// 画文字套路String text = getText().toString() ;Rect bounds = new Rect() ;paint.getTextBounds(text,0,text.length(),bounds);// 获取字体宽度int x = getWidth()/2 - bounds.width()/2;// 基线计算方式Paint.FontMetricsInt fontMetricsInt = paint.getFontMetricsInt();int dy = (fontMetricsInt.bottom-fontMetricsInt.top)/2-fontMetricsInt.bottom;int baseLine = getHeight()/2+dy;canvas.drawText(text,x,baseLine,paint);// 释放画布canvas.restore();}/*** 设置朝向*/public void setDirection(Direction direction){this.mDirection = direction;}/*** 设置当前进度*/public void setCurrentProgress(float currentProgress){this.mCurrentProgress = currentProgress;// 获取到当前进度后,进行重绘invalidate();}/*** 设置改变的颜色*/public void setChangeColor(int color){this.mChangePaint.setColor(color);}}

相关文章:

自定义view - 玩转字体变色

自定义View步骤&#xff1a; 1>&#xff1a;values__attrs.xml&#xff0c;定义自定义属性&#xff1b; 2>&#xff1a;在第三个构造方法中获取自定义属性&#xff1b; 3>&#xff1a;onMeasure【不是必须的】&#xff1b; 4>&#xff1a;onDraw&#xff1a;绘制代…...

工业边缘网关HiWoo Box的4G/5G CPE功能:为现场无线设备提供网络

引言 随着工业物联网的快速发展&#xff0c;现场设备的无线连接需求越来越迫切。然而&#xff0c;在一些室外或者不方便布网的场景下&#xff0c;为现场的无线设备提供网络仍然是一个挑战。为了满足这一需求&#xff0c;工业边缘网关HiWoo Box引入了4G/5G CPE&#xff08;Cust…...

Set 和 Map 数据结构

数据结构Set ES6提供了新的数据结构Set。它类似于数组&#xff0c;但是成员的值都是唯一的&#xff0c;没有重复的值。 Set本身是一个构造函数&#xff0c;用来生成Set数据结构。 // 数组去重 const set new Set([1, 2, 3, 4, 4]); [...set] // [1, 2, 3, 4]目前个人感觉Se…...

nginx根据url参数动态代理

nginx根据url参数动态代理 请求url格式&#xff0c;其中参数proxy后面的url就是需要访问的真实地址&#xff1a; http://localhost:9388/?proxyhttp://localhost:8038/Content/layui/font/iconfont.woff?v256 http://localhost:9388/?proxyhttp://localhost:8072/article/A…...

TCP协议(收集和记录)

收集写的比较好的文章 TCP四次挥手详解 四次挥手介绍的非常详细, 重点介绍了各种异常情况下协议是如何处理的, 异常处理可以做到两点: 让连接保活, 也许只是一次连接异常让连接死掉后不影响后续的操作, 重点介绍了TIME_WAIT...

【Kafka】自动提交偏移量和手动提交偏移量的区别

区别 自动提交偏移量&#xff08;Auto Commit Offset&#xff09;和手动提交偏移量&#xff08;Manual Commit Offset&#xff09;是两种不同的消费者偏移量管理方式。 自动提交偏移量&#xff1a; 在自动提交模式下&#xff0c;消费者会定期自动将已消费的消息偏移量提交给…...

缠论线段的划分

第一种情况&#xff1a; 第二种情况&#xff1a; 第二种情况中的特例&#xff1a; 第二种情况的特例&#xff1a; 顶分型成立&#xff1a; 向上线段延续&#xff1a; 顶分型后面底分型&#xff0c;形成三段 插入一个分型的反面例子&#xff1a; dd...

【Linux】Ubuntu基本使用与配置, 以及常见问题汇总(一)

前言 大学期间&#xff0c;感觉很多时候学习课外知识都是被推着往前走&#xff0c;很多内容并没有深入去学习&#xff0c;知识的记录受限于所学比较片面&#xff0c;如今渐渐意识到似乎并没有建立起相关知识的体系架构&#xff0c;缺乏一个系统学习并整理的过程。本文将以Ubunt…...

【UE5 多人联机教程】02-开始游戏菜单控件

目录 步骤 一、完善开始游戏菜单控件 二、控件功能实现 2.1 “开始游戏”按钮切换界面 2.2 “创建房间”、“加入房间”按钮切换界面 2.3 “创建房间”按钮 步骤 一、完善开始游戏菜单控件 打开“UMG_Main” 首先在控件切换器外层包裹一个画布面板 然后调整控件切换器全…...

设计模式-工厂方法模式

基于面向对象语言开发中&#xff0c;免不得需要创建对象。前面讲解的"单例模式"也是如此&#xff0c;不过是要创建唯一的对象。本文要讲述“工厂方法模式”是要封装创建对象的过程。工厂&#xff0c;也称之为“制造厂”&#xff0c;用于创建具体的产品直接提供给外界…...

【Hammerstein模型的级联】快速估计构成一连串哈默斯坦模型的结构元素研究(Matlab代码实现)

目录 &#x1f4a5;1 概述 &#x1f4da;2 运行结果 &#x1f389;3 参考文献 &#x1f308;4 Matlab代码实现 &#x1f4a5;1 概述 在许多振动应用中&#xff0c;所研究的系统略微非线性。Hammerstein模型的级联可以方便地描述这样的系统。Hammerstein提供了一种基于指数正弦…...

「C 语言」extern关键字

在 C 语言中&#xff0c;关键字 extern 是用来告诉编译器&#xff0c;这个变量 OR 函数在其他文件中已有定义&#xff0c;可在当前文件中使用 当我们定义了一个全局变量 OR 函数时&#xff0c;它就已经具有了外部链接的属性&#xff0c;我们只需要通过在引用该变量的文件中用 …...

oracle单个用户最大连接数限制

项目经理反馈&#xff0c;现场已做了单个用户的最大连接数2000的限制&#xff0c;但数据库还是报无法连接&#xff0c;故障用户的连接数已3800多了。 查看日志报错如下 2023-07-20T13:07:57.79465308:00 Process m000 submission failed with error 20 Process m000 submiss…...

计算机网络最基础知识介绍

OSI和TCP/IP是很基础但又非常重要的知识,很多知识点都是以它们为基础去串联的,作为底层,掌握得越透彻,理解上层时会越顺畅。今天这篇网络基础科普,就是根据OSI层级去逐一展开的。 01 计算机网络基础 01 计算机网络的分类 按照网络的作用范围:广域网(WAN)、城域网(MA…...

接口测试进阶之数据模板

大家好久不见了。今天的文章将介绍jinja2模板在接口测试数据上的应用。 这几个月我在想&#xff0c;进阶系列要怎么写。 毕竟很多情况下&#xff0c;我觉得写技术文章和做培训一样&#xff0c;都会有两个结果&#xff1a; 1.是需要这些知识的人看不懂。 2.是看得懂的人不需要…...

Java中使用MySQL详解

1. 简介 在Java开发中&#xff0c;与数据库的交互是常见且重要的一部分。MySQL是一个广泛使用的关系型数据库管理系统&#xff0c;而Java作为一种强大的编程语言&#xff0c;提供了丰富的API和工具&#xff0c;使得与MySQL数据库的结合应用更加便捷和高效。 本篇博客将详细介…...

Docker安装Elasticsearch相关软件安装

Docker安装Elasticsearch相关软件安装 本文将介绍通过 Docker 的方式安装 Elasticsearch 相关的软件。 1、Docker安装Elasticsearch 1.1 搜索镜像 $ docker search elasticsearch $ docker search elasticsearch:7.12.11.2 拉取镜像 $ docker pull elasticsearch:7.12.11.…...

Ubuntu的安装与部分配置

该教程使用的虚拟机是virtuabox&#xff0c;镜像源的版本是ubuntu20.04.5桌面版 可通过下面的链接在Ubuntu官网下载&#xff1a;Alternative downloads | Ubuntu 也可直接通过下面的链接进入百度网盘下载【有Ubuntu20.04.5与hadoop3.3.2以及jdk1.8.0_162&#xff0c;该篇需要使…...

为什么 Splashtop 是更好用的 iOS 远程桌面应用

全球远程桌面软件市场最近达到19.2亿美元&#xff0c;表明使用任意设备实现随处远程控制越来越受欢迎。 近年来&#xff0c;企业的运营方式发生了重大改变&#xff0c;远程桌面软件已成为广泛使用的解决方案。Splashtop 是目前最好用的远程桌面工具之一&#xff0c;安全可靠且…...

[SQL挖掘机] - 字符串函数 - lower

介绍: lower函数是mysql中的一个字符串函数&#xff0c;其作用是将给定的字符串转换为小写形式。它接受一个字符串作为参数&#xff0c;并返回一个新的字符串&#xff0c;其中所有的字母字符均被转换为小写形式。 使用lower函数可以帮助我们在字符串处理中实现标准化和规范化…...

OpenClaw+Phi-3-vision-128k-instruct:自动化儿童教育素材生成

OpenClawPhi-3-vision-128k-instruct&#xff1a;自动化儿童教育素材生成 1. 为什么选择这个组合&#xff1f; 去年夏天&#xff0c;我女儿开始对恐龙产生浓厚兴趣&#xff0c;每天晚上都要我讲不同的恐龙故事。作为程序员父亲&#xff0c;我最初尝试手动编写故事&#xff0c…...

零基础玩转Qwen-Image-2512-SDNQ-uint4-svd-r32:Web界面一键生成图片

零基础玩转Qwen-Image-2512-SDNQ-uint4-svd-r32&#xff1a;Web界面一键生成图片 1. 快速了解Qwen-Image-2512-SDNQ-uint4-svd-r32 Qwen-Image-2512-SDNQ-uint4-svd-r32是一款基于Stable Diffusion技术的高性能图片生成模型&#xff0c;经过特殊优化后体积更小、运行更快。这…...

OpenClaw自动化测试方案:Qwen2.5-VL-7B实现UI截图比对与报告生成

OpenClaw自动化测试方案&#xff1a;Qwen2.5-VL-7B实现UI截图比对与报告生成 1. 为什么需要自动化UI测试 作为一名长期奋战在一线的开发者&#xff0c;我深知UI测试的痛点所在。每次产品迭代后&#xff0c;手动检查各个页面的样式和布局是否正常&#xff0c;不仅耗时耗力&…...

OpenClaw视频处理流水线:千问3.5-9B自动剪辑与字幕生成

OpenClaw视频处理流水线&#xff1a;千问3.5-9B自动剪辑与字幕生成 1. 从手动剪辑到AI流水线的转变 去年夏天&#xff0c;当我需要为一期技术教程视频添加字幕时&#xff0c;整整花了三个小时反复校对时间轴。这种低效的重复劳动让我开始思考&#xff1a;能否用AI实现视频处理…...

camerax拍照函数

https://developer.android.google.cn/reference/androidx/camera/core/ImageCapture#takePicture(androidx.camera.core.ImageCapture.OutputFileOptions,%20java.util.concurrent.Executor,%20androidx.camera.core.ImageCapture.OnImageSavedCallback)...

OpenClaw安全实践:Phi-3-mini-128k-instruct本地化部署的3个关键配置

OpenClaw安全实践&#xff1a;Phi-3-mini-128k-instruct本地化部署的3个关键配置 1. 为什么需要关注OpenClaw的安全配置&#xff1f; 去年夏天&#xff0c;我在整理个人财务数据时突发奇想&#xff1a;能否用AI自动生成月度支出分析报告&#xff1f;这个看似简单的需求&#…...

2026加密算法全景解析:从原理到实战,一文读懂加密的核心逻辑

在数字化时代&#xff0c;数据就是核心资产——从手机支付的交易信息、社交软件的私密聊天&#xff0c;到企业的客户数据、政府的敏感文件&#xff0c;每一份数据的安全都离不开加密算法的守护。我们每天都在接触加密&#xff1a;打开HTTPS网页、登录账号、传输文件&#xff0c…...

2025届毕业生推荐的降重复率平台实际效果

Ai论文网站排名&#xff08;开题报告、文献综述、降aigc率、降重综合对比&#xff09; TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek 针对维普检测系统具备能识别 AI 生成内容的特性情形之下&#xff0c;若要降低文本里的 AI 痕…...

直播录制从未如此简单:StreamCap 40+平台自动录制全攻略

直播录制从未如此简单&#xff1a;StreamCap 40平台自动录制全攻略 【免费下载链接】StreamCap Multi-Platform Live Stream Automatic Recording Tool | 多平台直播流自动录制客户端 基于FFmpeg 支持监控/定时/转码 项目地址: https://gitcode.com/gh_mirrors/st/StreamCa…...

IDEA中使用Claude Code

1、先安装好node.js 安装好之后验证是否安装成功 nodejs下载安装地址https://nodejs.p2hp.com/安装结束后&#xff0c;执行以下命令查看安装结果&#xff0c;若显示版本号则安装成功。 node --version 2、使用npm安装Claude Code ​​​​​​​npm install -g anthropic-ai…...