系统学习android自定义View

最新推荐文章于 2024-07-15 23:56:49 发布
最新推荐文章于 2024-07-15 23:56:49 发布
阅读量450 收藏 1
点赞数
分类专栏： 自定义控件view 文章标签： 自定义view
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zpcrobot/article/details/109284674
版权

自定义view绘制基础

添加链接描述

自定义绘制概述
  • 自定义绘制的方式是重写绘制方法，其中最常用的是 onDraw()
  • 绘制的关键是 Canvas 的使用
    Canvas 的绘制类方法： drawXXX() （关键参数：Paint）
    Canvas 的辅助类方法：范围裁切和几何变换
  • 可以使用不同的绘制方法来控制遮盖关系
自定义绘制四个级别

1.Canvas 的 drawXXX() 系列方法及 Paint 最常见的使用
2.Paint 的完全攻略
3.文字的绘制
4.Canvas 对绘制的辅助——范围裁切和几何变换。
5.使用不同的绘制方法来控制绘制顺序

学完上面得课程链接，我们来个实战运用。
模仿淘宝得banner轮播图效果
淘宝现在搞活动banner图下掉了，我们把最后实现得效果呈现上来
在这里插入图片描述

看图，四个角是需要圆角得，然后中间内容是banner轮播。

1.首先我们要画一个圆角矩形来实现这个圆角效果，但是圆角矩形填充没办法满足我们得需求。我们需要取矩形和圆角矩形不相交得部分，这里就要用到path和path的FillType。

我们来温习一下前面学习的知识点：
在这里插入图片描述

在这里插入图片描述
WINDING 非零环绕数原则
EVEN_ODD 奇偶原则
我们可以使用
如果你看到上面的三张图还是不能理解的画，建议看一下文章顶上的链接内容第一条

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
我们来看一下代码：

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int width = getMeasuredWidth();//得到测量的高度
        int height = getMeasuredHeight();//得到测量的宽度

        //保存画布
        canvas.save();

        //创建绘制矩形
        RectF rectF=new RectF(0,0,width,height);
        //绘制矩形，顺时针
        path1.addRect(rectF, Path.Direction.CW);
        //绘制圆角矩形，顺时针
        path1.addRoundRect(rectF,50,50, Path.Direction.CW);
        //设置填充模式，
        path1.setFillType(Path.FillType.EVEN_ODD);
		//设置填充颜色
        paint1.setColor(Color.RED);
        //在canvas上绘制填充对象
        canvas.drawPath(path1,paint1);
        //还原画布
        canvas.restore();

		//这个很重要，没次画完之后要重置以下path，paint不用重置。这里可以试一下
		//如果不添加这个的话，从后台返回前台的时候，绘制会有问题。有知道的小伙伴可以在评论区回复一下
        paint1.reset();
        path1.reset();
    }

最后这里还有一个非常重要的方法调用
避免性能优化，导致绘制不上去

 setWillNotDraw(false);

在这里插入图片描述
完整代码

public class RadiusLayout extends LinearLayout {
    public RadiusLayout(@NonNull Context context) {
        super(context);
        initView();
    }

    public RadiusLayout(@NonNull Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        initView();

    }

    public RadiusLayout(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView();
    }

    public RadiusLayout(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        initView();

    }

    private void initView() {
        setWillNotDraw(false);
    }

    Paint paint1 = new Paint(Paint.ANTI_ALIAS_FLAG);
    Path path1 = new Path();


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int width = getMeasuredWidth();//得到测量的高度
        int height = getMeasuredHeight();//得到测量的宽度

        //保存画布
        canvas.save();

        //创建绘制矩形
        RectF rectF=new RectF(0,0,width,height);
        //绘制矩形，顺时针
        path1.addRect(rectF, Path.Direction.CW);
        //绘制圆角矩形，顺时针
        path1.addRoundRect(rectF,50,50, Path.Direction.CW);
        //设置填充模式，
        path1.setFillType(Path.FillType.EVEN_ODD);

        paint1.setColor(Color.RED);
        canvas.drawPath(path1,paint1);
        //还原画布
        canvas.restore();

        paint1.reset();
        path1.reset();
    }


}


public class RadiusLayout extends LinearLayout {
    public RadiusLayout(@NonNull Context context) {
        super(context);
        initView();
    }

    public RadiusLayout(@NonNull Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        initView();

    }

    public RadiusLayout(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView();
    }

    public RadiusLayout(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        initView();

    }

    private void initView() {
        setWillNotDraw(false);
    }

    Paint paint1 = new Paint(Paint.ANTI_ALIAS_FLAG);
    Path path1 = new Path();


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int width = getMeasuredWidth();//得到测量的高度
        int height = getMeasuredHeight();//得到测量的宽度

        //保存画布
        canvas.save();

        //创建绘制矩形
        RectF rectF=new RectF(0,0,width,height);
        //绘制矩形，顺时针
        path1.addRect(rectF, Path.Direction.CW);
        //绘制圆角矩形，顺时针
        path1.addRoundRect(rectF,50,50, Path.Direction.CW);
        //设置填充模式，
        path1.setFillType(Path.FillType.EVEN_ODD);

        paint1.setColor(Color.RED);
        canvas.drawPath(path1,paint1);
        //还原画布
        canvas.restore();

        paint1.reset();
        path1.reset();
    }
    

}

这种方式需要我们把效果添加到顶层进行遮罩，那有没有更好的办法呢？
这里就要用到第五节课的内容了，绘制顺序。

这里我们拿出关键的点给大家进行讲解，然后奉上源码
在这里插入图片描述
在这里插入图片描述
于是我们就有了下面的代码：

public class RadiusLayout extends LinearLayout {
    public RadiusLayout(@NonNull Context context) {
        super(context);
        initView();
    }

    public RadiusLayout(@NonNull Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        initView();

    }

    public RadiusLayout(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView();
    }

    public RadiusLayout(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        initView();

    }

    private void initView() {
        setWillNotDraw(false);
    }

    Paint paint1 = new Paint(Paint.ANTI_ALIAS_FLAG);
    Path path1 = new Path();


//    @Override
//    protected void onDraw(Canvas canvas) {
//        super.onDraw(canvas);
//
//    }


    @Override
    public void onDrawForeground(Canvas canvas) {
        super.onDrawForeground(canvas);
        int width = getMeasuredWidth();//得到测量的高度
        int height = getMeasuredHeight();//得到测量的宽度

        //保存画布
        canvas.save();

        //创建绘制矩形
        RectF rectF=new RectF(0,0,width,height);
        //绘制矩形，顺时针
        path1.addRect(rectF, Path.Direction.CW);
        //绘制圆角矩形，顺时针
        path1.addRoundRect(rectF,50,50, Path.Direction.CW);
        //设置填充模式，
        path1.setFillType(Path.FillType.EVEN_ODD);

        paint1.setColor(Color.RED);
        canvas.drawPath(path1,paint1);
        //还原画布
        canvas.restore();

        paint1.reset();
        path1.reset();
    }
}

我们把绘制这块的代码移到了onDrawForeground钩子函数中进行绘制

到这里基本上讲解完啦。
上面的两种方式，明现第二种能省掉一个view。所以效果也更加

<?xml version="1.0" encoding="utf-8"?>
<com.tudou.source.RadiusLayout 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="200dp"
    tools:context=".MainActivity">

    <com.stx.xhb.androidx.XBanner
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/xbanner"
        android:layout_width="match_parent"
        android:background="@color/colorPrimary"
        android:layout_height="match_parent"
        app:AutoPlayTime="3000"
        app:pointsContainerBackground="#44aaaaaa"
        app:pointsPosition="RIGHT"
        app:tipTextSize="12sp"
        app:isShowNumberIndicator="true"
        app:isShowIndicatorOnlyOne="true"
        app:pageChangeDuration="800"/>

</com.tudou.source.RadiusLayout>

在这里插入图片描述

像一只小蜗牛
关注
专栏目录
[源码和文档分享]基于QT实现的基础图形绘图系统
qq_38474647的博客
12-17 1318
摘 要 PaintWorks实现了图形数据的输入、编辑、填充、裁剪、变换、显示与保存功能。可绘制图形包括直线、圆、椭圆、多边形、曲线和3D六面体。交互界面简洁美观，操作实用方便。 本绘图系统采用了面向对象设计，以C++11为基础，交互使用了Qt，基础图形的绘制使用了OpenGL，直线绘制使用了Bresenham算法，圆的绘制使用了中点圆生成算法...
QT 基础图形绘制（一）
qq_36147009的博客
04-29 1169
Qt图形系统中的关键角色 -- QPainter Qt中的画家，能够绘制各种基础图形 拥有绘图所需的画笔（QPen），画刷（QBrush），字体（QFont） -- QPaintDevice Qt 中的画布，画家（QPainter）的绘图板 所有的 QWidget 类都继承自 QPaintDevice 图片 ...
Android：创建自定义View
最新发布
ChinaDragon10的博客
07-15 873
Android 框架中定义的所有视图类都会扩展 View。您的自定义视图还可以直接扩展 View，或者您可以通过扩展某个现有视图子类（如 Button）来节省时间。 如需允许 Android Studio 与视图交互，您必须至少提供一个接受 Context 和 AttributeSet 对象作为参数的构造函数。此构造函数允许布局编辑器创建和编辑视图的实例。
Qt绘图基础教程
yinsizhilian的博客
11-05 1839
QPainter基本绘图 QPainter是用来进行绘图的操作类，QPaintDevice是一个可以使用QPainter进行绘图的抽象的二维界面。 一般的绘图设备包括QWidget、Qpixmap\QImage等，这些设备为QPainter提供了一个“画布” 在QWidget上进行绘图，只需要重新定义paintEvent()事件，编写响应代码。基本操作是：创建一个QPainter对象获取绘图设备的接口，然后使用QPainter对象来绘图。 QPainter绘图的基本属性 pen属性：QPen对象，画笔。
Qt--基础图形绘制
u011555996的博客
08-17 924
一.基础图形绘制 A.Qt图形系统中的关键角色QPainter--Qt中的画家，能够绘制各种基础图形 ，拥有绘图所需的画笔、画刷、字体QPaintDevice--Qt中的画布，画家的绘图板，所有的QWidget类都继承自QPaintDeviceQt图形系统中的关键角色Qt中所使用的工具 1.QPen-用于绘制几何图形的边缘，由颜色、宽度、线风格等参数组成 2.QBrush-用于填充几何图形的调色板，由颜色和填充风格组成 3.QFont-用于文本绘制，由字体属性组成 需要注意的是--只能在QWidget::
qt 混合 绘图_Qt绘图的方法
weixin_35740545的博客
01-30 475
简介QPainter是Qt的画图类，在其中封装了很多底层的绘图函数。使用QPainter可以在多种类型的设备上画图，如：Qt的窗口、QPixmap或者是打印设备上。但是怎么使用它，在哪个地方使用它才能够满足我们的画图要求，却不是仅仅看一个QPainter类说明就行的。以下为在Qt中画图的一些常见方法，有些需要使用到QPainter绘制，而有些则不需要。在paintEvent函数中绘图在一个窗口上画...
Android自定义View控件实现刷新效果
01-05
三种得到LinearInflater的方法 a. LayoutInflater inflater = getLayoutInflater(); b....(LayoutInflater)context.getSystemService (Context.LAYOUT_INFLATER_SERVICE); c....onDraw 方法绘图，invalidate刷新界面。...
Android自定义View实现自动转圈效果
08-27
Android自定义View实现自动转圈效果 Android自定义View实现自动转圈效果是Android开发中的一种常见需求，通过自定义View可以实现各种复杂的UI效果。本文将详细介绍如何通过自定义View实现自动转圈效果。 一、...
Android自定义View实例：深度剖析 水晶/水滴 波浪球 实现步骤详解
03-25
在Android开发中，自定义View是一项重要的技能，它允许开发者创造出独特且富有表现力的UI元素，提升用户体验。本文将深度剖析如何实现一个名为“水晶/水滴 波浪球”的自定义View，并通过详细步骤讲解，帮助你掌握...
Android 自定义View实现单击和双击事件的方法
01-05
自定义View, 1. 自定义一个Runnable线程TouchEventCountThread , 用来统计500ms内的点击次数 2. 在MyView中的 onTouchEvent 中调用 上面的线程 3. 自定义一个Handler, 在TouchEventHandler 中 处理 统计到的点击...
Android自定义view渐变圆形动画
08-26
"Android自定义view渐变圆形动画" Android自定义view渐变圆形动画是Android开发中的一种常见需求，通过自定义View来实现渐变圆形动画，可以满足用户_Interface的需求。下面我们将详细介绍Android自定义view渐变圆形...
QT开发（十四）——QT绘图系统
weixin_33755554的博客
11-02 2030
QT开发（十四）——QT绘图系统一、QT绘图原理Qt4中的2D绘图系统称为Arthur绘图系统，可以使用相同的API在屏幕上和绘图设备上进行绘制，主要基于QPainter、QPainterDevice和 QPainterEngine。QPainter执行绘图操作，QPainterDevice提供绘图设备，是一个二维空间的抽象，QPainterEngine提供一些接口。...
qt 混合 绘图_QT 绘图
weixin_39608300的博客
01-17 221
Figure8.1. QPainter's most frequently useddraw...()functionsFigure 8.2. Cap and joinstylesFigure 8.3. Pen stylesFigure 8.4. Predefined brushstyles现在来看看具体的例子。下面的代码是绘制图8.5(a)中椭圆的代码：QPainter painter(this...
qt 绘图
baidu_16370559的博客
08-10 877
绘图系统 QPainter 绘图操作的类,绘图设备一般包括Qwidget、Qpixmap、QImage.他们提供给QPainter画布。 从QWidget类继承的类都有paintEvent()事件，该函数是虚函数，重写该函数。 QPainter 重要的属性 1.pen属性：Qpen对象，控制线条的颜色、宽度、线性。 void setPen(const QPen &pen); const QPen &pen() const; 2.brush属性：QBrush,区域填充特性，填充的颜
实现Qt和OpenGL混合渲染
架构设计
01-12 748
&lt;style type="text/css"&gt; &lt;!-- @page {margin:2cm} pre {font-family:"DejaVu Sans Mono",monospace} p {margin-bottom:0.21cm} --&gt; &lt;/style&gt; 实现Qt和OpenGL混合渲染 Qt自有一个混图的引擎，这个引擎的核心就...
Qt5版NeHe OpenGL教程之七：混色
草上爬的博客
05-15 3291
简单的透明       OpenGL中的绝大多数特效都与某些类型的(色彩)混合有关。混色的定义为，将某个象素的颜色和已绘制在屏幕上与其对应的象素颜色相互结合。至于如何结合这两个颜色则依赖于颜色的alpha通道的分量值，以及/或者所使用的混色函数。Alpha通常是位于颜色值末尾的第4个颜色组成分量。前面这些课我们都是用GL_RGB来指定颜色的三个分量。相应的GL_RGBA可以指定alpha分量的值。...
Qt 基本绘图技术
wuchalilun的专栏
06-29 1229
Qt 基本绘图关于Qt基本绘图简单介绍一下，也算是给自己加深印象，mark一下 首先要重写基类的paintEvent(QPaintEvent*) 事件，在paintEvent函数中就可以开始自己的绘图，如果需要对鼠标事件处理就重写相应的鼠标事件函数如：mouseMoveEvent(QMouseMoveEvent*)，好了，废话不多说，这里只是简单的展示绘图，不涉及鼠标 下面是自己的一个示例代码，
渐变颜色Qt学习：QPainter之渐变填充
weixin_34055787的博客
05-12 922
今天一直在研究渐变颜色之类的问题,下午正好有机会和大家分享一下.         后面说了有关反走样的相干知识，下面来讲一下渐变。渐变是绘图中很罕见的一种功能，它是利用颜色插值使得两个或更多颜色之间能够平滑过渡，简单来讲就是可以把几种颜色混合在一起，让它们能够自然地过渡，而不是一下子酿成另一种颜色。它们常被用来创立二维图形的三维效果。渐变的算法比较复杂，写得欠好的话效率会很低，好在很多绘图系统都...
Qt开发总结（18）——Graphics View绘图架构
学习雷锋好榜样
12-15 3294
通过上篇笔记我们知道可以采用QPainter在绘图设备的paintEvent事件里编写绘图的程序，这种绘图方式效率相对较低，绘制的图形比较简单。Qt为绘制复杂的可交互图形提供了Graphics View绘图架构，是一种基于图形选项（Graphics Item）Model/View框架（可参见本人博客Qt开发总结（14）——Model/View框架），而且其核心试图组件QGraphicsView也作...
Android自定义View深度解析
"这篇教程详细介绍了Android自定义View的概念、步骤和重要性，旨在帮助初级开发者克服对自定义View的恐惧。作者通过自身的学习经历，讲述了如何从零开始创建一个自定义View，强调了面向对象的封装、继承和多态在...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值