Loading [MathJax]/jax/input/TeX/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >自定义 View 实战 01 - TextView

自定义 View 实战 01 - TextView

作者头像
code_horse
发布于 2020-06-16 06:57:34
发布于 2020-06-16 06:57:34
53000
代码可运行
举报
文章被收录于专栏:Android NoteAndroid Note
运行总次数:0
代码可运行

前言

本来主要介绍了系统的textview是如何显示,字体大小、文字颜色如何设置、文字的位置该如何计算

步骤

1、继承 View 重写构造方法

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
class CustomTextView @JvmOverloads constructor(context: Context,attr: AttributeSet?,defStyle:Int=0) :View(context,attr,defStyle)

这里使用的是Kotlin,所以构造函数看起来要简洁很多

2、初始化对象及自定义参数获取

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
    var mPaint: Paint = Paint()
    var mText: String?
    var mTextSize = 0.0f
    var mTextColor = Color.BLACK

    init {
        val ta = context.obtainStyledAttributes(attr, R.styleable.CustomTextView)
        mText = ta.getString(R.styleable.CustomTextView_customText)
        mTextSize = ta.getDimensionPixelSize(
            R.styleable.CustomTextView_customTextSize,
            sp2Px(DEFAULT_TEXT_SIZE)
        ).toFloat()
        mTextColor = ta.getColor(R.styleable.CustomTextView_customTextColor, mTextColor)
        ta.recycle()

        mPaint.isAntiAlias = true
        mPaint.color = mTextColor
        mPaint.textSize = mTextSize
    }

**3、重新 onMeasure() **

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec)
        var widthMode = MeasureSpec.getMode(widthMeasureSpec)
        var heightMode = MeasureSpec.getMode(heightMeasureSpec)
        var widthSize = MeasureSpec.getSize(widthMeasureSpec)
        var heightSize = MeasureSpec.getSize(heightMeasureSpec)

        if (widthMode == MeasureSpec.AT_MOST || widthMode == MeasureSpec.UNSPECIFIED) {//UNSPECIFIED:是为了兼容最外层是 ScrollView
            val rect = Rect()
            mPaint.getTextBounds(mText, 0, mText!!.length, rect)
            //实际宽度 = 文字宽度 + view 的左右 padding 
            widthSize = rect.width() + paddingLeft + paddingRight
        }

        if (heightMode == MeasureSpec.AT_MOST || heightMode == MeasureSpec.UNSPECIFIED) {//UNSPECIFIED:是为了兼容最外层是 ScrollView
            val fontMetricsInt = mPaint.fontMetricsInt
            //实际高度 = 文字高度 + view 的上下 padding
            heightSize  = fontMetricsInt.bottom-fontMetricsInt.top + paddingLeft + paddingRight
        }
        //一定要设置,这步是为了将测量好的宽高设置给 view
        setMeasuredDimension(widthSize, heightSize)
    }

MeasureSpec 包括了 mode(测量模式)、size(测量大小)

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
`mode`                       xml
AT_MOST                  WRAP_CONTENT
EXACTLY                  固定的值(50dp)或 MATCH_PARENT
UNSPECIFIED              无(一般系统内部使用)
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<com.black.multi.customviewsample.demo01.CustomTextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@color/colorAccent"
            android:paddingLeft="10dp"
            android:paddingRight="20dp"
            android:paddingTop="5dp"
            android:paddingBottom="10dp"
            app:customText="我是自定义CustomTextView"
            app:customTextColor="@color/colorPrimary"
            app:customTextSize="16sp" />

自定义TextView

好了,到这里就结束了,简单的几步就可以实现文字的展示了,自定义 View 的基本步骤就如上面介绍的那样。这里总结一下:

  • 重新构造函数(初始化会需要)
  • 对象初始化及自定义属性的获取
  • 重写 onMeasure() 方法(只有重新了该方法,绘制的内容才能正确的显示)
  • 重写 onDraw() 方法(在这里绘制我们需要的内容,调用各种 drawXXX() 方法)
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
自定义View | 基础概述 & 自定义TextView实战 & 基于源码分析自定义View继承自ViewGroup时无法正常绘制的问题
(f.bottom - f.top)/ 2 = View的一半高度(文字底部到View中线的距离) getHeight()是View的一半高度的位置的y坐标; dy = (f.bottom - f.top)/ 2 - f.bottom (基线与View中线间的距离)
凌川江雪
2020/08/31
1.3K0
Android 自定义View之随机数验证码(仿写鸿洋)
本文面向自定义view新手,但是希望你最好有一定的理论知识,或基础概念,有的地方可能会一笔带过并不会细讲,细讲篇幅就太长了。
yechaoa
2022/06/10
3950
Android 自定义View之随机数验证码(仿写鸿洋)
Kotlin 第一弹:自定义 ViewGroup 实现流式标签控件
上周 Google I/O 大会的召开,宣布了 Kotlin 语言正式成为了官方开发语言。一时间 Android 开发者的圈子炸开了锅,各种关于 Kotlin 的资料介绍也如雨后春笋不断的冒出。
Frank909
2019/01/14
1.6K0
自定义 View 实战 02 - 圆弧形进度条
效果图 分析动图可以知道,动画主要由三部分组成: 内圆弧 外圆弧 中间文字 实现过程及注释 自定义属性 <declare-styleable name="ArcProgressbar"> <attr name="progressWidth" format="integer" /> <attr name="outerColor" format="reference|color" /> <attr name="innerColor" format="referen
code_horse
2020/06/19
5800
自定义 View 实战 02 - 圆弧形进度条
自定义View实战--实现一个清新美观的加载按钮
当时在心里问自己能不能做,答案肯定是能做的,不过我比较懒,觉得中间那个伸缩变化要编写很多代码,所以懒得理。后来,为了不让自己那么浮躁,也为了锻炼自己的耐心程度,还是坚持实现它了。这个过程,觉得自己还是有所收获,把握了一些想当然的细节,输理了对于自定义 View 的流程。
Frank909
2019/01/14
6980
自定义 View 实战 04 - 圆形进度条
circle_progress.gif 圆形进度条分析: 圆 圆弧 进度值 所以这里我们先用 drawCircle画出圆,再使用drawArc画出圆弧(这里的圆弧要画整个圆,0°~360°),进度值使用 drawText画出来,x起点值和baseline的值同之前的算法一致。 完整代码 class CircleProgressbar @JvmOverloads constructor( context: Context, attributeSet: AttributeSet,
code_horse
2020/06/28
6550
Android 自定义View中的onMeasure onLayout onDraw
Android自定义View时常重写三个方法onMeasure和onLayout以及onDraw。
码客说
2019/10/22
2.7K0
长谈:关于 View Measure 测量机制,让我一次把话说完
首先声明,这一篇篇幅很长很长很长的文章。目的就是为了把 Android 中关于 View 测量的机制一次性说清楚。算是自己对自己较真。写的时候花了好几天,几次想放弃,想放弃的原因不是我自己没有弄清楚,而是觉得自己叙事脉络已经紊乱了,感觉无法让读者整明白,怕把读者带到沟里面去,怕自己让人觉得罗嗦废话。但最后,我决定还是坚持下去,因为在反复纠结 –> 不甘 –> 探索 –> 论证 –> 质疑的过程循环中,我完成了对自己的升华,弄明白长久以来的一些困惑。所以,此文最大的目的是给自己作为一些学习记录,如果有幸帮助你解决一些困惑,那么我心宽慰。如果有错的地方,也欢迎指出批评。
Frank909
2019/01/14
8030
Android自定义View:为什么自定义View wrap_content不生效?
在使用自定义View时,View宽 / 高的wrap_content属性不起自身应有的作用,而且是起到与match_parent相同作用。
Carson.Ho
2022/03/25
1.1K0
Android自定义View:为什么自定义View wrap_content不生效?
为什么你的自定义View wrap_content不起作用?
在使用自定义View时,View宽 / 高的wrap_content属性不起自身应有的作用,而且是起到与match_parent相同作用。
Carson.Ho
2019/02/22
2.8K0
高级 UI 成长之路 (三) 理解 View 工作原理并带你入自定义 View 门
该篇分为上下结构,上部分主要讲解 View 的工作原理,下部分主要以案例的形式讲解自定义 View。
做个快乐的码农
2021/11/16
9120
高级 UI 成长之路 (三) 理解 View 工作原理并带你入自定义 View 门
android自定义View处理padding和wrap_content和自定义属性
在onMeasure方法中指定一个默认的宽和高,在设置wrap_content属性时设置此默认的宽和高就可以了: setMeasuredDimension() 方法px
tea9
2022/09/08
8220
绘制一个漂亮的弧形 View
怎么样?漂亮吧,上面是一个标题栏,下面是一个弧形的 View,标题栏和弧形 View 从左到右都有一个线性的渐变色,类似于手机 QQ 顶部的渐变效果,关于弧形的这种效果,使用的场景还是比较普遍的,小面我们就一起来看看如何绘制吧。
程序员飞飞
2020/02/27
7960
Android自定义View-入门(明白自定义View和自定义ViewGroup)
主要用来测量布局,其参数 widthMeasureSpec 和 heightMeasureSpec 包含宽和高的信息和测量模式。
Petterp
2022/02/09
1.3K0
Android自定义View-入门(明白自定义View和自定义ViewGroup)
界面无小事(五):自定义TextView
效果图 不多废话, 直接上图, 如果感兴趣再看下去. 效果图 前言 写第四篇滚动选择器的时候, 在自定义视图这里含糊了, 有些地方没说清楚, 这次补上关于自定义视图的部分. 自定义属性
sean_yang
2018/09/04
3220
界面无小事(五):自定义TextView
Android自定义View【实战教程】2⃣️----自定义view那些事
工程地址: https://github.com/libin7278/Factory java –》widget
先知先觉
2019/01/21
5070
笔记51 | Android自定义View(二)
地址 http://blog.csdn.net/xiangyong_1521/article/details/78804104 http://www.jianshu.com/p/c84693096e41 ---- 自定义ViewGroup 自定义View的过程很简单,就那几步,可自定义ViewGroup可就没那么简单啦~,因为它不仅要管好自己的,还要兼顾它的子View。我们都知道ViewGroup是个View容器,它装纳child View并且负责把child View放入指定的位置。我们假象一下,如果是让
项勇
2018/06/19
5800
Android自定义View中的onMeasure、onLayout和onDraw方法解析
在Android开发中,我们经常需要自定义View来实现特定的界面效果。要实现一个自定义View,我们需要了解并掌握onLayout、onMeasure和onDraw这三个关键方法。本文将详细介绍这三个方法的用法和解释,并给出两个自定义View的案例。
陆业聪
2024/07/23
8380
Android自定义View中的onMeasure、onLayout和onDraw方法解析
Android 自定义View 之 圆环进度条
  很多时候我们会使用进度条,而Android默认的进度条是长条的,从左至右。而在日常开发中,有时候UI为了让页面更美观,就需要用到圆环进度条,那么本文就是通过自定义写一个圆环进度条,首先看一下效果图:
晨曦_LLW
2023/04/23
2.4K0
Android 自定义View 之 圆环进度条
听说你想玩RecyclerView嵌套GridView
有很多小伙伴们可能会遇到这样的问题: 为什么不论我传入多大size的List,我的GridView只能显示一行?
代码咖啡
2018/08/28
2.6K0
听说你想玩RecyclerView嵌套GridView
推荐阅读
相关推荐
自定义View | 基础概述 & 自定义TextView实战 & 基于源码分析自定义View继承自ViewGroup时无法正常绘制的问题
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验