安卓学习 Day26：使用自定义视图绘制文本、图像与图形

已于 2022-07-17 19:10:35 修改
阅读量557 收藏 1
点赞数
分类专栏： 安卓编程基础 文章标签： android 学习 android studio
于 2022-07-13 17:11:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zs18384022951/article/details/125751342
版权

文章目录

一、案例演示——使用自定义视图绘制圆

1、创建安卓应用

  • 选择模板在这里插入图片描述
  • 完善项目信息
    在这里插入图片描述

2、创建自定义视图

在这里插入图片描述

  • 命名为CustomView
    在这里插入图片描述
  • 源代码
package net.zs.draw_circle;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.view.View;

public class CustomView extends View {
    private Paint paint; // 画笔

    /**
     * 构造方法 - 初始化画笔
     */
    public CustomView(Context context) {
        super(context);
        // 创建画笔对象
        paint = new Paint();
        // 设置画笔为红色
        paint.setColor(Color.RED);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // 绘制一个圆
        canvas.drawCircle(500, 500, 450, paint);
    }
}

3、主界面类

  • 源代码
package net.zs.draw_circle;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    private CustomView mCustomView; // 声明自定义视图

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // 实例化自定义视图
        mCustomView = new CustomView(this);
        // 将自定义视图设置为用户界面
        setContentView(mCustomView);
    }
}

4、运行程序，查看效果

在这里插入图片描述

（1）设置画笔样式

在这里插入图片描述

  • 运行结果
    在这里插入图片描述

（2）设置画笔粗细

在这里插入图片描述

  • 运行结果
    在这里插入图片描述

二、案例演示——绘制文本、图形和图像

1、创建安卓应用

  • 选择模板
    在这里插入图片描述
  • 完善项目信息
    在这里插入图片描述

2、创建自定义视图

在这里插入图片描述

  • 基础代码
package net.zs.draw_text_graph_image;

import android.content.Context;
import android.graphics.Canvas;
import android.view.View;

public class CustomView extends View {

    /**
     * 构造方法
     */
    public CustomView(Context context) {
        super(context);
    }

    /**
     * 绘制方法
     */
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
    }
}

3、主界面类

  • 将自定义视图设置为用户界面
    在这里插入图片描述

4、修改自定义视图

（1）初始化

在这里插入图片描述

（2）设置画布底色

在这里插入图片描述

  • 运行效果
    在这里插入图片描述

（3）绘制直线

在这里插入图片描述

  • 运行效果
    在这里插入图片描述

（4）绘制空心多边形（三角形）

在这里插入图片描述

  • 运行效果
    在这里插入图片描述

（5）绘制实心多边形

在这里插入图片描述

  • 运行效果
    在这里插入图片描述

（6）绘制实心圆和空心圆

在这里插入图片描述

  • 运行效果
    在这里插入图片描述

（7）绘制实心矩形

在这里插入图片描述

  • 运行效果
    在这里插入图片描述

（8）绘制空心椭圆

在这里插入图片描述

  • 运行结果
    在这里插入图片描述

（9）绘制笑脸

在这里插入图片描述

  • 运行效果
    在这里插入图片描述

（10）绘制图像

  • 添加图片到drawable目录下
    在这里插入图片描述
  • 编写代码
    在这里插入图片描述
  • 运行效果
    在这里插入图片描述

5、自定义视图完整源代码

package net.zs.draw_text_graph_image;

import android.app.Activity;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Rect;
import android.graphics.RectF;
import android.graphics.drawable.Drawable;
import android.view.View;
import android.widget.Toast;

public class CustomView extends View {

    private Paint paint; // 画笔
    private int screenWidth; // 屏幕宽度
    private int screenHeight; // 屏幕高度

    /**
     * 构造方法
     */
    public CustomView(Context context) {
        super(context);
        // 实例化画笔
        paint = new Paint();
        // 设置画笔放锯齿形
        paint.setAntiAlias(true);
        // 获取屏幕宽度
        screenWidth = ((Activity) context).getWindowManager().getDefaultDisplay().getWidth();
        // 获取屏幕高度
        screenHeight = ((Activity) context).getWindowManager().getDefaultDisplay().getHeight();
    }

    /**
     * 绘制方法
     */
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        /* 任务1.设置画布底色 */
        // 设置画笔颜色
        paint.setColor(Color.rgb(200, 200, 240));
        // 绘制实心矩形填充整个手机屏幕
        canvas.drawRect(0, 0, screenWidth, screenHeight, paint);

        /* 任务2.绘制直线 */
        // 设置画笔颜色为红色
        paint.setColor(Color.RED);
        // 绘制横向、纵向、倾斜的直线
        canvas.drawLine(50, 50, 1000, 50, paint);
        canvas.drawLine(50, 200, 1000, 200, paint);
        canvas.drawLine(100, 0, 100, 250, paint);
        canvas.drawLine(950, 0, 950, 250, paint);
        canvas.drawLine(100, 50, 950, 200, paint);
        canvas.drawLine(100, 200, 950, 50, paint);
        // 绘制说明文本
        paint.setColor(Color.BLACK);
        paint.setTextSize(30);
        canvas.drawText("直线", 480, 35, paint);

        /* 任务3.绘制空心多边形（三角形） */
        // 设置画笔颜色为蓝色
        paint.setColor(Color.BLUE);
        // 绘制多条线段、首尾相连
        canvas.drawLine(50, 350, 370, 320, paint);
        canvas.drawLine(370, 320, 550, 500, paint);
        canvas.drawLine(550, 500, 50, 350, paint);
        // 绘制说明文本
        paint.setColor(Color.BLACK);
        paint.setTextSize(30);
        canvas.drawText("空心三角形", 250, 400, paint);

        /* 任务4.绘制实心多边形 */
        // 设置画笔颜色
        paint.setColor(Color.YELLOW);
        // 定义路径
        Path path = new Path();
        path.moveTo(600, 300); // 路径的起点
        path.lineTo(750, 250);
        path.lineTo(950, 400);
        path.lineTo(600, 600);
        path.lineTo(600, 370);
        path.close(); // 封闭路径
        // 按路径绘制图像
        canvas.drawPath(path, paint);
        // 绘制说明文本
        paint.setColor(Color.BLACK);
        paint.setTextSize(30);
        canvas.drawText("实心多边形", 650, 400, paint);

        /* 任务5.绘制实心圆和空心圆 */
        paint.setColor(Color.RED);
        canvas.drawCircle(300, 600, 100, paint);
        paint.setStyle(Paint.Style.STROKE);
        canvas.drawCircle(300, 800, 100, paint);
        // 绘制说明文本
        paint.setColor(Color.BLACK);
        paint.setTextSize(30);
        canvas.drawText("实心圆", 100, 610, paint);
        canvas.drawText("空心圆", 100, 810, paint);

        /* 任务6.绘制实心矩形 */
        paint.setColor(Color.GREEN);
        paint.setStyle(Paint.Style.FILL);
        canvas.drawRect(new Rect(460, 650, 960, 860), paint);
        // 绘制说明文本
        paint.setColor(Color.BLACK);
        paint.setTextSize(30);
        canvas.drawText("实心矩形", 650, 750, paint);

        /* 任务7.绘制空心椭圆 */
        paint.setColor(Color.BLUE);
        paint.setStyle(Paint.Style.STROKE);
        canvas.drawArc(new RectF(50, 920, 500, 1050), 0, 360, true, paint);
        // 绘制说明文本
        paint.setColor(Color.BLACK);
        paint.setTextSize(30);
        canvas.drawText("空心椭圆", 240, 1000, paint);

        /* 任务8.绘制笑脸 */
        paint.setColor(Color.RED);
        paint.setStyle(Paint.Style.FILL);
        canvas.drawArc(new RectF(550, 920, 650, 1020), 30, 300, true, paint);
        paint.setColor(Color.BLUE);
        canvas.drawArc(new RectF(700, 920, 800, 1020), 210, 300, true, paint);
        // 绘制说明文本
        paint.setColor(Color.BLACK);
        paint.setTextSize(30);
        canvas.drawText("笑脸相迎", 820, 970, paint);

        /* 任务9.绘制图像 */
        // 方法一、绘制位图
        Bitmap bitmap = BitmapFactory.decodeStream(getResources()
                .openRawResource(R.drawable.img1));
        canvas.drawBitmap(bitmap, 50, 1100, paint);
        // 方法二、利用可绘制对象
        Drawable drawable = getResources().getDrawable(R.drawable.img1);
        drawable.setBounds(new Rect(870, 1200, 1160, 1400));
        drawable.draw(canvas);
    }
}

三、案例演示——View动画（闪烁满天星）

1、创建安卓应用

  • 选择模板
    在这里插入图片描述
  • 完善项目信息
    在这里插入图片描述

2、添加月亮图片

在这里插入图片描述

3、创建自定义视图

在这里插入图片描述

  • 源代码
package net.zs.twinkling_stars;

import android.app.Activity;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.drawable.Drawable;
import android.view.View;

public class CustomView extends View {

    private Paint paint; // 画笔
    private int screenWidth; // 屏幕宽度
    private int screenHeight; // 屏幕高度
    private int count; // 刷屏次数

    /**
     * 构造方法
     */
    public CustomView(Context context) {
        super(context);
        // 实例化画笔
        paint = new Paint();
        // 获取屏幕宽度
        screenWidth = ((Activity) context).getWindowManager().getDefaultDisplay().getWidth();
        // 获取屏幕高度
        screenHeight = ((Activity) context).getWindowManager().getDefaultDisplay().getHeight();
    }

    /**
     * 绘制方法
     */
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        /* 将画布底色设置为黑色 —— 夜空 */
        paint.setColor(Color.BLACK);
        canvas.drawRect(0, 0, screenWidth, screenHeight, paint);

        // 确保count只能取0、1、2
        count = ++count % 3;

        // 根据刷屏次数来设置画笔颜色
        switch (count) {
            case 0:
                paint.setColor(Color.GREEN); // 设置为绿色画笔
                break;
            case 1:
                paint.setColor(Color.WHITE); // 设置为白色画笔
                break;
            case 2:
                paint.setColor(Color.YELLOW); // 设置为黄色画笔
                break;
        }

        // 绘制月亮位图
        Drawable drawable = getResources().getDrawable(R.drawable.moon);
        drawable.setBounds(220, 90, 380, 250);
        drawable.draw(canvas);

        // 绘制星星
        paint.setTextSize(20);
        for (int i = 0; i < 100; i++) {
            canvas.drawText("★", (int)(Math.random() * screenWidth),
                    (int) (Math.random() * screenHeight), paint);
        }
    }
}

4、主界面类

  • 源代码
package net.zs.twinkling_stars;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

import java.util.Timer;
import java.util.TimerTask;

public class MainActivity extends AppCompatActivity {

    private CustomView mCustomView; // 自定义视图
    private Timer timer; // 定时器
    private TimerTask task; // 定时器任务

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // 实例化自定义视图
        mCustomView = new CustomView(this);
        // 将自定义视图设置为用户界面
        setContentView(mCustomView);

        // 创建定时器
        timer = new Timer();
        // 创建定时器任务
        task = new TimerTask() {
            @Override
            public void run() {
                // 刷新自定义视图
                mCustomView.postInvalidate();
            }
        };
        // 对定时器任务进行调度
        timer.schedule(task, 0, 100);
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        // 取消定时器任务
        timer.cancel();
    }
}

5、运行程序，查看效果

在这里插入图片描述

越来越不懂！
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android开发笔记（十三）视图绘制的几个方法
aqi00的博客
12-08 3368
三个可进行绘制的方法 在自定义视图中，有三个函数可以重写用于界面绘制，在视图创建过程中，三个函数的执行顺序依次是：onLayout、onDraw、dispatchDraw。 1、onLayout(boolean changed, int left, int top, int right, int bottom) :  onLayout用于定位该视图在上级视图中的位置，从其参数中就可以看出来。
Android使用GridLayout绘制自定义日历控件
09-01
在Android开发中，自定义视图是提升应用界面个性化和功能扩展性的重要手段。本篇将详细介绍如何使用GridLayout来绘制一个自定义的日历控件。GridLayout是一种布局管理器，它允许我们在网格中组织子视图，非常适合...
创建自定义控件2-自定义绘制
thinkinwm的专栏
04-04 652
自定义视图最重要的部分是它的外观.你可以根据应用的需求简单或复杂的实现它. 这个教程包含了最常见的操作. 重写onDraw() 绘制自定义视图里最重要的一步是重写onDraw()方法. onDraw()的参数是视图可以用来绘制自己的Canvas对象. Canvas定义用来绘制文本、线条、位图和其他图像单元. 你可以在onDraw()里使用这些方法创建你的自定义用户界面(UI).
Android 自定义View-文字绘制
xiangxiongfly
04-11 1221
文章目录文字绘制绘制文字的方式drawText 绘制文字setTextSize 设置文字大小setTypeface 设置字体setFakeBoldText 是否使用伪粗体setStrikeThruText 设置删除线setUnderlineTex 设置下划线setTextSkewX 设置文字倾斜角度setTextScaleX 设置文字横向缩放setLetterSpacing 设置字符间距setTextAlign 设置文字对齐方式drawTextOnPath 沿着Path绘制文字StaticLayout文字的
Android自定义View之Paint绘制文本
老头儿ii的博客
01-01 411
FontMetrics
Android 自定义View学习之文字绘制
jxq1994的博客
03-16 1321
自定义组件通常来说有三种定义方式： 组件类继承自View，这是定义一个自己想要的效果的组件； 从已有组件扩展，比如，从ImageView扩展出功能更强、更有个性化的组件； 将多个已有组件合成一个新的组件，比如侧边带字母索引的ListView ; 我们先从第一种说起：我们需要知道的第一件事 是View的生命周期。继承一个View在自定义组件的时候，先要继承现有的View，并为其提供三个构造方法：Fi
Android学习笔记17：中级视图组件DatePicker和TimePicker
04-15
在Android应用开发中，中级视图组件如DatePicker和TimePicker是构建用户界面的重要部分，用于获取用户的日期和时间输入。这两个组件提供了用户友好的界面，让用户可以方便地选择日期和时间，常见于日历应用、事件...
WhatDay:选择器视图示例，包括其设置、行选择和日期选择器用法
06-28
日期选择器使用 // Grab date from DatePicker var chosenDate = datePicker.date // Create an NSDateFormatter var formatter = NSDateFormatter() formatter.dateFormat = "EEEE" // Grab the day and ...
Day26:“ Axios GetPostPutDelete”
04-03
在今天的主题"Day26: Axios GetPostPutDelete"中，我们将深入探讨如何使用Axios进行GET、POST、PUT和DELETE这四种基本的HTTP操作。这些操作是Web API交互的核心，对于开发任何涉及网络数据交换的前端应用来说都至关...
Halcon学习之一：查询图像参数.doc
01-22
Halcon学习之一：查询图像参数 Halcon是一款功能强大且广泛应用的机器视觉软件平台，能够实现图像处理、图像识别、机器视觉等多种功能。在机器视觉应用中，查询图像参数是非常重要的一步骤，能够帮助开发者获取图像...
自定义View——绘制文字
hoho的博客
12-18 609
1. Canvas文字的绘制方式 Canvas 的文字绘制方式有三种：drawText() drawTextRun() 和 drawTextOnPayth() 。 1.1drawText(String text, float x, float y, Paint paint) drawText() 是 Canvas 最基本的绘制文字的方法：给出文字的内容和位置，Canvas 按要求去绘制文字，大概就像这样： 方法的参数很简单：text是文字内容，x和y是文字的坐标。而如果你像绘制其他...
Android 自定义绘制之文字测量知识点
最新发布
不再烦恼
08-17 224
上面的写法只是针对静态文字的绝对居中，但如果文字换成“abcq”，那么其中的“abc”就会略微向上移动，如果是动态变化的文字，就会造成文字的高低动态变化，显得很乱，那么动态变化的文字如何居中呢。上端贴边有三种方式，分别是利用TextBounds的top、FontMatrics的top或者ascent 三个值，来去掉边。Bottom：最低字符到baseline的值，即descent的最大值，为正数。Top：最高字符到baseline的值，即ascent的最大值，为负数。
精通Android自定义View(八)绘制篇Canvas分析之绘制文本
代码小疯子
03-12 523
1 简述 绘制文字分为三种应用场景： 情况1：指定文本开始的位置 即指定文本基线位置 基线x默认在字符串左侧，基线y默认在字符串下方 情况2：指定每个文字的位置 情况3：指定路径，并根据路径绘制文字 下面分别细说： 文字的样式（大小,颜色,字体等）具体由画笔Paint控制，详细请会看上面基础的介绍 2 绘制 2.1指定文本开始的位置 //从点（300，400）处...
android 自定义画图片格式,Android 自定义View之自定义绘制（Custom Drawing）
weixin_30960995的博客
05-25 119
自定义View根据你App的不同需要可以简单，也可以很复杂。重写onDraw()自定义View需要重写 onDraw()方法，Canvas对象就可以用来绘制View本身。Canvas定义了绘制文本、线、图片、以及各种图形操作的方法。你可以通过Canvas中定义的方法来自定义你的UI。在你调用任意一个drawing相关的方法之前你还需要一个Paint对象。创建Paint对象Canvas：绘制什么？P...
Android自定义控件入门到精通--Text文本
Jhone_csdn的专栏
06-22 491
文章目录TextdrawText(String text, float x, float y, Paint paint)Paint.setTextAlign(Paint.Align)Align.LEFTAlign.CENTERAlign.RIGHTdrawTextOnPath(String text, Path path, float hOffset,float vOffset, Paint paint)drawPosText (char[] text, int index, int count, floa
安卓Paint绘制文字以及文字矩形区域位置确定
qq_40346244的博客
12-11 492
安卓Paint绘制文字以及文字矩形区域位置确定
Android自定义View实现HTML图文环绕效果
qjbagu的专栏
11-13 771
Android中并没有提供HTML图文环绕效果的View，最接近的算是TextView中的ImageSpan了，但并未完全实现图文环绕（图文混排）的效果。 1、Android系统TextView的ImageSpan实现图文环绕 代码如下： TextView tv = new TextView ( this ) ;         SpannableString spanStr
Android：利用基本模块实现一个包含图片，文字，链接按钮的展示页面
weixin_45976751的博客
05-21 632
Android：利用基本模块实现一个包含图片，文字，链接按钮的展示页面 实现效果 如图所示，整个页面包含四个部分，标题，可横向滑动的图片，可竖向滑动的文本和可以指向包含目标网址的按钮，分别使用的组件为 标题：TextView 图片：XBanner 文本: ScrollView 按钮：Button 下面分别介绍各组件的实现： 标题 TextView是一个文本控件，可以通过其属性控制显示的文字，文字的格式，是基本的控件。 在Activity的layout文件中输入下列代码，即可添加TextView控件
"苏国勇 C语言学习笔记Day11：编程环境介绍与Linux常用命令
苏国勇是一位热爱学习C语言的学生，他对于学习C语言的态度非常认真，始终保持着学习的热情和勤奋。在学习过程中，他养成了一些良好的学习习惯，比如认真听课、下课梳理每天的课程内容以及早睡早起等。这些习惯不仅...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值