自定义控件--基础篇（简单的自定义控件实现原理）

最新推荐文章于 2022-03-19 06:05:46 发布
最新推荐文章于 2022-03-19 06:05:46 发布
阅读量150 收藏 1
点赞数
分类专栏： Android Studio 文章标签： android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33502707/article/details/117297759
版权

自定义控件–TextView 实现

1.创建attrs资源文件（main-res-values 下）-用于添加TextView的自定义属性

在这里插入图片描述
定义TextView自定义属性 format-属性类型 string-字符串 color-颜色 dimension-尺寸值

<?xml version="1.0" encoding="utf-8"?>
<resources>
        <declare-styleable name="TextView">
        <attr name="text" format="string" />
        <attr name="textColor" format="color" />
        <attr name="textSize" format="dimension" />

    </declare-styleable>
</resources>

1.新建TextView类

在这里插入图片描述

public class TextView extends View {
    private String mText ;
    private int mTextSize = 15;
    private int mTextColor = Color.BLACK;

    private Paint mPaint;

    int width;
    int height;

    //new的时候调用
    public TextView(Context context) {
        this(context, null);
    }

    //在xml布局中使用
    public TextView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    //xml文件中调用style中使用
    public TextView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        //获取自定义属性
        TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.TextView);
        //获取文本
        mText = array.getString(R.styleable.TextView_text);
        //获取字体颜色
        mTextColor = array.getColor(R.styleable.TextView_textColor, mTextColor);
        //获取字体大小
        mTextSize = array.getDimensionPixelSize(R.styleable.TextView_textSize, mTextSize);
        //回收
        array.recycle();

        //实例化画笔
        mPaint = new Paint();

        //抗锯齿
        mPaint.setAntiAlias(true);
        //设置字体大小和颜色
        mPaint.setTextSize(mTextSize);
        mPaint.setColor(mTextColor);
    }
    }

重写onMeasure 测量控件大小

   /**

     * 自定义view的测量方法
     */
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        //获取宽高的模式
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);

        int width = MeasureSpec.getSize(widthMeasureSpec);
        int height = MeasureSpec.getSize(heightMeasureSpec);
        // MeasureSpec.AT_MOST 在布局种指定了wrap_content
        // MeasureSpec.EXACTLY 在布局种制定了确定值   match_content
        //MeasureSpec.UNSPECIFIED  尽可能的大   listview scrollview测量子布局的时候会用unspecified
        if (widthMode == MeasureSpec.AT_MOST) {
            //计算宽带
            Rect bounds = new Rect();
            //获取文本的Rect
            mPaint.getTextBounds(mText, 0, mText.length(), bounds);
              //文本宽度 = 外矩形高度+padd 左和右距离
            width = bounds.width()+getPaddingLeft()+getPaddingRight();
        }
        if (heightMode == MeasureSpec.AT_MOST) {
            //获取文本的Rect
            Rect bounds = new Rect();
            //计算宽带
            mPaint.getTextBounds(mText, 0, mText.length(), bounds);
            //文本高度 = 外矩形高度+padd 顶部和底部距离
            height = bounds.height()+getPaddingTop()+getPaddingBottom();
        }
        //设置控件 宽 高
        setMeasuredDimension(width, height);


    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //top  bottom的值  是相对于基线来定义
        Paint.FontMetricsInt fontMetricsInt = mPaint.getFontMetricsInt();

        //fontMetricsInt.bottom,fontMetricsInt.top属性是指相对于基线的距离  
        int baseLine = (fontMetricsInt.bottom - fontMetricsInt.top) / 2 - fontMetricsInt.bottom + getHeight() / 2;
        canvas.drawText(mText, getPaddingLeft(), baseLine, mPaint);
    }

基线y点坐标获取，
获取文本框一半的高度，蓝色部分距离如下

 (fontMetricsInt.bottom - fontMetricsInt.top) / 2-fontMetricsInt.bottom

在这里插入图片描述
完整的代码如下：

public class TextView extends View {
    private String mText ;
    private int mTextSize = 15;
    private int mTextColor = Color.BLACK;

    private Paint mPaint;

    int width;
    int height;

    //new的时候调用
    public TextView(Context context) {
        this(context, null);
    }

    //在xml布局中使用
    public TextView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    //xml文件中调用style中使用
    public TextView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        //获取自定义属性
        TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.TextView);
        //获取文本
        mText = array.getString(R.styleable.TextView_text);
        //获取字体颜色
        mTextColor = array.getColor(R.styleable.TextView_textColor, mTextColor);
        //获取字体大小
        mTextSize = array.getDimensionPixelSize(R.styleable.TextView_textSize, mTextSize);
        //回收
        array.recycle();

        //实例化画笔
        mPaint = new Paint();

        //抗锯齿
        mPaint.setAntiAlias(true);
        //设置字体大小和颜色
        mPaint.setTextSize(mTextSize);
        mPaint.setColor(mTextColor);



    }

    public TextView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
    }
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        //获取宽高的模式
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);

        int width = MeasureSpec.getSize(widthMeasureSpec);
        int height = MeasureSpec.getSize(heightMeasureSpec);
        // MeasureSpec.AT_MOST 在布局种指定了wrap_content
        // MeasureSpec.EXACTLY 在布局种制定了确定值   match_content
        //MeasureSpec.UNSPECIFIED  尽可能的大   listview scrollview测量子布局的时候会用unspecified
        if (widthMode == MeasureSpec.AT_MOST) {
            //计算宽带
            Rect bounds = new Rect();
            //获取文本的Rect
            mPaint.getTextBounds(mText, 0, mText.length(), bounds);
            //文本宽度 = 外矩形高度+padd 左和右距离
            width = bounds.width()+getPaddingLeft()+getPaddingRight();
        }
        if (heightMode == MeasureSpec.AT_MOST) {
            //获取文本的Rect
            Rect bounds = new Rect();
            //计算宽带
            mPaint.getTextBounds(mText, 0, mText.length(), bounds);
            //文本高度 = 外矩形高度+padd 顶部和底部距离
            height = bounds.height()+getPaddingTop()+getPaddingBottom();
        }
        //设置控件 宽 高
        setMeasuredDimension(width, height);
    }
    
   @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //top  bottom的值  是相对于基线来定义
        Paint.FontMetricsInt fontMetricsInt = mPaint.getFontMetricsInt();

        //fontMetricsInt.bottom,fontMetricsInt.top属性是指相对于基线的距离  
        int baseLine = (fontMetricsInt.bottom - fontMetricsInt.top) / 2 - fontMetricsInt.bottom + getHeight() / 2;
        canvas.drawText(mText, getPaddingLeft(), baseLine, mPaint);
    }
}

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"
    tools:context=".MainActivity">

    <comp.example.administrator.dragview.TextView
        android:layout_width="260dp"
        android:layout_height="40dp"
        android:padding="10dp"
        app:text="姓名"
        app:textColor="#000000"
        app:textSize="15sp" />

</LinearLayout>
qq_33502707
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
4.1 自定义控件的原理、流程与实现
WillFlow的博客
09-22 891
点此进入：从零快速构建APP系列目录导图点此进入：UI编程系列目录导图点此进入：四大组件系列目录导图点此进入：数据网络和线程系列目录导图本节例程下载地址： WillFLowCustomView WillFlow_FollowBallView首先看一下本篇实现的效果图：圆形百分比例显示控件：跟随手指移动小球控件一、什么是自定义控件？对于Android应用开发者而言，Android 中自带的控件并不
自定义控件——初识自定义控件
阿敏其人的专栏
03-09 869
本文出自 “阿敏其人” 简书博客，转载或引用请注明出处。开发的时候，因为业务需求或者封装需要，我们会进行自定义控件。 说在前面,本篇涉及到一些东西 * onMeasure * onLayout * onDraw * MeasureSpec （32位二进制数，头两位模式（Mode），后两位大小（Size）） * onFinishInflate * ViewGr
自定义控件（一）：View的测量及绘制流程、原理简介
我的Android合伙人是你么
07-12 639
本文简单介绍自定义控件的流程及原理，并从源码角度解读了Measure(),onMeasure(),draw(),onDraw()等方法，并实现了一个简单的显示系统媒体音量变化的自定义控件
Android自定义控件之自定义组合控件
07-29 111
前言： 前两篇介绍了自定义控件的基础原理Android自定义控件之基本原理（一）、自定义属性Android自定义控件之自定义属性（二）。今天重点介绍一下如何通过自定义组合控件来提高布局的复用，降低开发成本，以及维护成本。 自定义控件相关文章地址： Android自定义控件之基本原理 Android自定义控件之自定义属性 Android自定义控件之自定义组合控件 ...
Android自定义控件之基本原理
07-27 130
前言： 在日常的Android开发中会经常和控件打交道，有时Android提供的控件未必能满足业务的需求，这个时候就需要我们实现自定义一些控件，今天先大致了解一下自定义控件的要求和实现的基本原理。 自定义控件相关文章地址： Android自定义控件之基本原理 Android自定义控件之自定义属性 Android自定义控件之自定义组合控件 Android...
QT控件的简单实现---1
cslx97的博客
03-19 251
刚学QT几天，沉迷于一些大佬的学习博客无法自拔，但实际上走马观花，收获甚微。所以想着先把一些控件先基本实现一遍，熟悉之后再结合数据结构或者多线程再实现一下，做点小东西。 https://www.cnblogs.com/tornadomeet/category/374732.html?page=1 信号和槽 信号和槽是Qt 特有的消息传输机制，它能将相互独立的控件关联起来。 QLabel文本框的用法 QLabel是Qt 提供给我们的一种文本控件，它的基础功能是显示一串文本。除了显示一串文本外，QLabel
C#自定义控件---自定义水晶按钮控件完整源码
04-06
1. **创建自定义控件基础** - 首先，我们需要创建一个新的类，继承自`Control`类。这将是自定义控件的基础。 - 在类中，可以定义新的属性，比如`CrystalColor`，用于设置按钮的颜色，或者`TransparencyLevel`，...
C#自定义控件---实现Control阴影源码2019
02-27
1. **自定义控件基础**：在C#中，创建自定义控件通常通过继承已有的System.Windows.Forms.Control类来实现。这样可以获得内置的事件处理、绘图和布局功能。在项目中创建一个新类，然后让它继承自Control类，就可以...
C#自定义控件---实现Control阴影源码{201903}
03-11
1. **自定义控件基础**： 自定义控件是通过继承.NET Framework提供的现有控件（如Control、Button、Label等）并对其进行扩展来实现的。在这个案例中，我们关注的是Control类，它是所有Windows控件的基础类。 2. **...
C#自定义控件---实现Control阴影源码
05-05
本篇文章将详细讲解如何在C#中实现自定义控件，特别是添加阴影效果，使控件看起来更加立体和美观。 首先，我们需要了解Windows Forms或者WPF（Windows Presentation Foundation）中的控件绘制机制。在Windows Forms...
自定义控件---滑动按钮的实现
04-01
NULL 博文链接：https://lichunan-d-163-com.iteye.com/blog/1402885
Android自定义控件基本原理详解（一）
09-01
主要为大家详细介绍了Android自定义控件基本原理，了解一下自定义控件的要求和实现的基本原理,感兴趣的小伙伴们可以参考一下
Android自定义控件之基本原理（一）
09-01
主要介绍了Android自定义控件之基本原理（一）的相关资料,需要的朋友可以参考下
自定义拖动布局首页,像QQ空间那样,拖动布局
07-12
自定义拖动布局首页,像QQ空间一样的东西!
C#自定义控件---自定义水晶按钮控件完整源码.rar
10-22
1. **创建自定义控件基础**： - 选择基类：根据需求，可以选择WinForms的`Control`类或更具体的控件，如`Button`作为基类。 - 重绘控件：通过覆盖`OnPaint`方法，使用`Graphics`对象和`Pen`、`Brush`等绘制控件的...
Android控件架构与自定义控件详解（一）——Android控件架构与View的绘制原理
黄飞的专栏
05-11 2361
Android控件架构在Android中，控件大致被分为两类，即ViewGroup控件与View控件。ViewGroup控件作为父控件可以包含多个View控件，并管理其包含的View控件。
自定义控件实现整个过程，从零到有！
y841349476的博客
08-29 457
前言：自定义控件这技术已经被技术大牛写的很明白了，可我相信还是有好多人当自己实现时还是一头雾水，现在我们来一起学习到底如何才能学会自定义控件！ 自定义控件大多都会说三步走，1.onDraw();2.onMeasure();3.onLayout();，当然这是没错的，可大多都忽略了一点，技术大牛们的基础在那摆着，这样当然无可厚非，可他们却忽略了一些人（包括我）所所欠缺的眼界问题。 在这三步的基础...
自定义控件实现学习
Carrie Zuo的专栏
12-12 198
优酷菜单的实现-利用现有的控件实现
C#自定义控件--美化ComboBox源码(十分经典)
03-01
在C#编程中，自定义控件是一种常见的需求，它允许开发者根据项目需求扩展或定制标准的Windows Forms或WPF控件。本篇将详细探讨如何通过C#来自定义一个美化版的ComboBox控件，使其在功能和视觉效果上超越默认的系统...
用Visual-C.NET编写服务器日期控件.docx
最新发布
12-15
为了开发自定义控件，作者指出服务器控件的基础是System.Web.UI.Control，如果要创建可视化控件，则应从System.Web.UI.WebControls继承。具体到日期控件的实现，文中提到添加HtmlTextWriterAttribute.Name属性和...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值