自定义view - 玩转字体变色

news2024/10/3 2:13:56

自定义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.ColorTrackTextView
        android: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"
        />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="左到右"
        android:onClick="leftToRight"/>
    <Button
        android: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);
        // 设置文字大小,拿到布局中的Textsize
        paint.setTextSize(getTextSize());
        return paint;
    }

    //利用cliprect可以裁剪,左边用一个画笔去画,右边用另一个画笔去画 不断地改变中间值
    @Override
    protected 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);
    }

}

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

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

相关文章

【Java中的Thread线程的简单方法介绍和使用详细分析】

文章目录 前言一、run() 和 start() 方法二、sleep() 方法三、join() 方法总结 前言 提示&#xff1a;若对Thread没有基本的了解&#xff0c;可以先阅读以下文章&#xff0c;同时部分的方法已经在如下两篇文章中介绍过了&#xff0c;本文不再重复介绍&#xff01;&#xff01;…

海量遥感数据处理与云计算技术教程

详情点击链接&#xff1a;海量遥感数据处理与GEE云计算技术 一&#xff0c;GEE及开发平台 1.GEE平台及典型应用&#xff1b; 2.GEE JavaScript开发环境及常用数据资源&#xff1b; 3.JavaScript基础&#xff0c;包括变量&#xff0c;运算符&#xff0c;数组&#xff0c;判断及…

【数据结构和算法15】二叉树的实现

二叉树是这么一种树状结构&#xff1a;每个节点最多有两个孩子&#xff0c;左孩子和右孩子 重要的二叉树结构 完全二叉树&#xff08;complete binary tree&#xff09;是一种二叉树结构&#xff0c;除最后一层以外&#xff0c;每一层都必须填满&#xff0c;填充时要遵从先左后…

程序员千万别碰这3种副业!!!

最近&#xff0c;“消费降级”这个词频频被大家提及&#xff0c;某瓣上&#xff0c;“今天消费降级了吗”小组的常驻人口有36万&#xff0c;某书上&#xff0c;跟消费降级有关的笔记近7万条...... 不少网友晒出了自己消费降级后的生活&#xff1a;由从前每天一杯的星巴克变成了…

ROS noetic,ROS melodic 安装 MoveIt 并运行

ROS noetic&#xff0c;ROS melodic 安装 MoveIt 并运行 前言更新功能包版本下载依赖文件创建工作区和软件源下载源代码安装编译器缓存&#xff08;可选环节&#xff09;编译Moveit&#xff01;安装Moveit&#xff01;检测是否安装成功 前言 在安装过程中我也碰壁过很多次&…

[算法通关村] 1.3 链表的删除

上一节我们谈到了链表的头插、尾插、中间插入的方法&#xff0c;忘记的小伙伴可以复习一下&#xff1a; [算法通关村] 1.2 链表的插入 接下来&#xff0c;完成链表的删除工作&#xff0c;我们在上一节的学习中&#xff0c;分别在链表的开头、中间和结尾插入了节点&#xff0c;…

【USACO OPEN12铜组】岛屿

【USACO OPEN12铜组】岛屿 文章目录 【USACO OPEN12铜组】岛屿题目描述输入格式输出格式数据范围输入样例&#xff1a;输出样例&#xff1a; 思路code 2014. 岛 - AcWing题库 题目描述 每当下雨时&#xff0c;农夫约翰的田地总是被洪水淹没。 由于田地不是完全水平的&#xf…

Cesium态势标绘专题-扇形(标绘+编辑)

标绘专题介绍:态势标绘专题介绍_总要学点什么的博客-CSDN博客 入口文件:Cesium态势标绘专题-入口_总要学点什么的博客-CSDN博客 辅助文件:Cesium态势标绘专题-辅助文件_总要学点什么的博客-CSDN博客 本专题没有废话,只有代码,代码中涉及到的引入文件方法,从上面三个链…

(五)FLUX中的数据类型

以下内容来自 尚硅谷&#xff0c;写这一系列的文章&#xff0c;主要是为了方便后续自己的查看&#xff0c;不用带着个PDF找来找去的&#xff0c;太麻烦&#xff01; 第 5 章 FLUX中的数据类型 5.1 10 个基本数据类型 5.1.1 Boolean &#xff08;布尔型&#xff09; 5.1.1.1 …

Pytorch学习笔记 | 利用线性回归实现最简单的梯度下降 | 含代码和数据

代码 import torch import numpy as np import matplotlib.pyplot as plt import pandas as pddef make_linear_regression_data():x = np.linspace(start=10

IIC通讯故障纠错一例

1.问题描述 IIC在既有的工作中&#xff0c;用来协调两个外围芯片。一个芯片扩展IO&#xff0c;一个处理显示。仔细核对了IIC的种种配置&#xff0c;并且最终测量了输出的时钟和数据波形&#xff0c;最终的时钟线波形是这样的&#xff1a; 单片机master模式&#xff0c;输出前面…

ES6基础知识八:你是怎么理解ES6中Proxy的?使用场景?

一、介绍 定义&#xff1a; 用于定义基本操作的自定义行为 本质&#xff1a; 修改的是程序默认形为&#xff0c;就形同于在编程语言层面上做修改&#xff0c;属于元编程(meta programming) 元编程&#xff08;Metaprogramming&#xff0c;又译超编程&#xff0c;是指某类计算…

【Java练习题汇总】《第一行代码JAVA》异常处理篇,汇总Java练习题——异常的概念及处理标准格式(try、catch、finally、throws、throw)、断言机制 Assertion ~

Java练习题 异常处理篇 1️⃣ 异常处理篇 1️⃣ 异常处理篇 一、填空题 Throwable 下的两个子类是______________ 、______________ 。ArthmeticException 类表示______________ 异常&#xff0c; ArraysIndexOutOfBoundsException 表示______________ 异常。一个 try 代码后…

Linux内核提权漏洞(Dirty-pipe)复现

前言&#xff1a;CVE-2022-0847 是存在于 Linux内核 5.8 及之后版本中的本地提权漏洞。攻击者通过利用此漏洞&#xff0c;可覆盖重写任意可读文件中的数据&#xff0c;从而可将普通权限的用户提升到特权 root。 CVE-2022-0847 的漏洞原理类似于 CVE-2016-5195 脏牛漏洞&#xf…

Vue入门项目——WebApi

Vue入门——WebApi vue3项目搭建组合式API响应式APIreactive()ref() 生命周期钩子computed计算属性函数watch监听函数父子通信模板引用组合选项 vue3项目搭建 简单看下Vue3的优势吧 下载安装npm及node.js16.0以上版本&#xff08;确保安装成功可用如下代码检查版本&#xff0…

YOLOX-PAI 论文学习

1. 解决了什么问题&#xff1f; 对 YOLOX 做加速&#xff0c;在单张 Tesla V100 上取得了 42.8 42.8 42.8mAP&#xff0c;推理速度为 1 毫秒。 2. 提出了什么方法&#xff1f; 2.1 主干网络 YOLOv6 和 PP-YOLOE 都将主干网络从 CSPNet 切换到了 RepVGG。RepVGG 在推理时&a…

PHP在线相册--【强撸项目】

强撸项目系列总目录在000集 PHP要怎么学–【思维导图知识范围】 文章目录 本系列校训本项目使用技术 上效果图phpStudy 设置导数据库项目目录如图&#xff1a;代码部分&#xff1a;主页 配套资源作业&#xff1a; 本系列校训 用免费公开视频&#xff0c;卷飞培训班哈人&…

【深度学习】【Image Inpainting】Free-Form Image Inpainting with Gated Convolution

模型&#xff1a;DeepFillv2 (CVPR’2019) 论文&#xff1a;https://arxiv.org/abs/1806.03589 代码&#xff1a;https://github.com/JiahuiYu/generative_inpainting 文章目录 效果AbstractIntroductionRelated WorkAutomatic Image InpaintingGuided Image Inpainting and Sy…

KaiwuDB 资深解决方案专家周幸骏:打造核心时序引擎,释放数据新价值

以下为浪潮 KaiwuDB 资深解决方案专家周幸骏受邀于7月4日在京举行的可信数据库发展大会发表演讲的实录摘要&#xff0c;欢迎大家点赞、收藏、关注&#xff01; 01 聚焦“时序” 据 IDC 等权威数据统计&#xff0c;预估 2025 年物联网设备产生的数据可达到 79.4ZB &#xff1b;…

ubuntu与windows之间的文件共享

最近在做项目&#xff0c;需要用到ubuntu进行代码编译生成可执行文件&#xff0c;但是我个人阅读和编写代码喜欢用source insight这个软件IDE。安利一下这个软件&#xff0c;阅读代码和编辑代码真的很棒啊&#xff0c;谁用谁知道吧&#xff01; 由于在ubuntu中安装source insig…