自定义气泡背景View

2024-04-07 07:32
文章标签 自定义 view 背景 气泡

本文主要是介绍自定义气泡背景View,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

今天来实现一个自定义气泡背景:先来张图(那些泡泡会跑的。。。大笑

看起来很高端?你要是这么想那你就输了再见,接下来就看看是怎么实现的。

这个就是一个自定义View,其实自定义View也就是重写那么几个方法,onDraw(),onMeasure()。还是直接来看代码吧,注视里面都有的闭嘴

package com.tianzhao.myapplication;import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;
import java.util.Random;/*** Created by tianzhao on 2015/10/25.* Date 21:38*/
public class CircleView extends View {private int circleSum;//圆的数量private int circleRadio;//圆的半径private int circleColor;//圆的颜色private int backColor;//背景颜色private Paint backPaint;//背景画笔private Paint circlePaint;//圆的画笔private Circle[] circles;private int[] direction = {0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10};private Random random;private float width;private float height;private int[] location = new int[2];private MyThread mMyThread;private boolean running = true;public CircleView(Context context) {super(context);backPaint = new Paint();init();}public CircleView(Context context, AttributeSet attrs) {super(context, attrs);TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.CircleView);circleSum = ta.getInteger(R.styleable.CircleView_circleSum, 10);circleColor = ta.getColor(R.styleable.CircleView_circleColor, Color.parseColor("#7756ffff"));backColor = ta.getColor(R.styleable.CircleView_backColor, Color.parseColor("#21efef"));circleRadio = ta.getInteger(R.styleable.CircleView_circleRadio, 60);ta.recycle();init();}/*** 初始化画笔*/private void init() {backPaint = new Paint();backPaint.setColor(backColor);circlePaint = new Paint();circlePaint.setColor(circleColor);}/*** 比onDraw先执行* <p/>* 一个MeasureSpec封装了父布局传递给子布局的布局要求,每个MeasureSpec代表了一组宽度和高度的要求。* 一个MeasureSpec由大小和模式组成* 它有三种模式:UNSPECIFIED(未指定),父元素部队自元素施加任何束缚,子元素可以得到任意想要的大小;* EXACTLY(完全),父元素决定自元素的确切大小,子元素将被限定在给定的边界里而忽略它本身大小;* AT_MOST(至多),子元素至多达到指定大小的值。* <p/>*   它常用的三个函数:* 1.static int getMode(int measureSpec):根据提供的测量值(格式)提取模式(上述三个模式之一)* 2.static int getSize(int measureSpec):根据提供的测量值(格式)提取大小值(这个大小也就是我们通常所说的大小)* 3.static int makeMeasureSpec(int size,int mode):根据提供的大小值和模式创建一个测量值(格式)*/@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {super.onMeasure(widthMeasureSpec, heightMeasureSpec);//获取控件宽度width = getMeasuredWidth();//获取控件高度height = getMeasuredHeight();//获取控件相对于父控件的位置坐标this.getLocationInWindow(location);//初始化圆initCircle();}/*** 初始化圆*/private void initCircle() {circles = new Circle[circleSum];random = new Random();for (int i = 0; i < circleSum; i++) {int d = random.nextInt(direction.length);int x = random.nextInt((int) width);int y = random.nextInt((int) height);circles[i] = new Circle(x, y, d);}}@Overrideprotected void onDraw(Canvas canvas) {//绘制背景canvas.drawRect(0, 0, location[0] + width, location[1] + height, backPaint);//遍历绘制每一个圆for (Circle c : circles) {canvas.drawCircle(c.getX(), c.getY(), circleRadio, circlePaint);}if (mMyThread == null) {mMyThread = new MyThread();mMyThread.start();}}/*** 不在窗口显示的时候停止线程*/@Overrideprotected void onDetachedFromWindow() {running = false;super.onDetachedFromWindow();}class MyThread extends Thread {@Overridepublic void run() {while (running) {for (int i = 0; i < circleSum; i++) {Circle c = circles[i];changeDirection(c);//超出边界后重置方向if (c.getX() > width || c.getX() < 0 || c.getY() > height || c.getY() < 0) {int d;while (true) {d = random.nextInt(direction.length);int lastD = c.getDirection();if ((lastD == 0 || lastD == 4 || lastD == 6 || lastD == 8 || lastD == 10) && (d == 0 || d == 4 || d == 6 || d == 8 || d == 10)) {//上continue;} else if ((lastD == 1 || lastD == 5 || lastD == 7 || lastD == 9) && (d == 1 || d == 5 || d == 7 || d == 9)) {//下continue;} else if ((lastD == 2 || lastD == 4 || lastD == 5 || lastD == 8 || lastD == 9) && (d == 2 || d == 4 || d == 5 || d == 8 || d == 9)) {//左continue;} else if ((lastD == 3 || lastD == 6 || lastD == 7 || lastD == 10) && (d == 3 || d == 6 || d == 7 || d == 10)) {//右continue;}break;}circles[i].setDirection(d);}}try {Thread.sleep(30);} catch (InterruptedException e) {e.printStackTrace();}postInvalidate();}}private void changeDirection(Circle c) {float dx = 0.3f;switch (c.getDirection()) {case 0://上c.setY(c.getY() - dx);break;case 1://下c.setY(c.getY() + dx);break;case 2://左c.setX(c.getX() - dx);break;case 3://右c.setX(c.getX() + dx);break;case 4://左上c.setX(c.getX() - dx);c.setY(c.getY() - dx);break;case 5://左下c.setX(c.getX() - dx);c.setY(c.getY() + dx);break;case 6://右上c.setX(c.getX() + dx);c.setY(c.getY() - dx);break;case 7://右下c.setX(c.getX() + dx);c.setY(c.getY() + dx);break;case 8://左上c.setX(c.getX() - dx);c.setY(c.getY() - dx * 2);break;case 9://左下c.setX(c.getX() - dx * 2);c.setY(c.getY() + dx);break;case 10://右上c.setX(c.getX() + dx);c.setY(c.getY() - dx * 2);break;}}}class Circle {private float x;private float y;private int direction;public Circle(float x, float y, int d) {this.x = x;this.y = y;this.direction = d;}public float getX() {return x;}public void setX(float x) {this.x = x;}public void setY(float y) {this.y = y;}public float getY() {return y;}public void setDirection(int direction) {this.direction = direction;}public int getDirection() {return direction;}}}
来看看在xml文件中怎么使用
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"><com.tianzhao.myapplication.CircleViewxmlns:cv="http://schemas.android.com/apk/res/com.tianzhao.myapplication"  //自己的命名空间android:layout_width="fill_parent"android:layout_height="200dp"cv:circleSum="10"  //圆的数量cv:circleColor="#7756ffff"  //圆的颜色cv:backColor="#21efef"/> //背景颜色<RelativeLayoutandroid:layout_width="fill_parent"android:layout_height="200dp"><ImageViewandroid:id="@+id/iv"android:layout_width="80dp"android:layout_height="80dp"android:layout_centerInParent="true"android:background="@drawable/user" /><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_below="@id/iv"android:layout_centerHorizontal="true"android:layout_marginTop="5dp"android:text="登录"android:textSize="20dp" /></RelativeLayout><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="40dp"android:layout_centerHorizontal="true"android:layout_marginTop="230dp"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:gravity="center_vertical"android:text="用户名:"android:textSize="20dp" /><EditTextandroid:layout_width="200dp"android:layout_height="wrap_content"android:layout_marginLeft="5dp"android:gravity="center_vertical" /></LinearLayout><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="40dp"android:layout_centerHorizontal="true"android:layout_marginTop="280dp"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:gravity="center_vertical"android:text="密    码:"android:textSize="20dp" /><EditTextandroid:layout_width="200dp"android:layout_height="wrap_content"android:layout_marginLeft="5dp"android:gravity="center_vertical" /></LinearLayout>
</RelativeLayout>
这里会涉及到一个attr.xml
<?xml version="1.0" encoding="utf-8"?>
<resources><declare-styleable name="CircleView"><attr name="circleSum" format="integer"></attr><attr name="circleColor" format="color"></attr><attr name="backColor" format="color"></attr><attr name="circleRadio" format="integer"></attr></declare-styleable>
</resources>
当你看到这时,是不是感觉到不是很难,其实在我刚开始动手做的时候也很难的,但是当你开始做的时候,你就会觉得其实并没有多难大笑,当然,这个CircleView还是有不少Bug的,我写这个就是为了了解一下View的绘制流程的,要是那路大神发现bug的话,给小弟提提。 微笑



这篇关于自定义气泡背景View的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/881990

相关文章

css渐变色背景|<gradient示例详解

《css渐变色背景|<gradient示例详解》CSS渐变是一种从一种颜色平滑过渡到另一种颜色的效果,可以作为元素的背景,它包括线性渐变、径向渐变和锥形渐变,本文介绍css渐变色背景|<gradien... 使用渐变色作为背景可以直接将渐China编程变色用作元素的背景,可以看做是一种特殊的背景图片。(是作为背

CSS自定义浏览器滚动条样式完整代码

《CSS自定义浏览器滚动条样式完整代码》:本文主要介绍了如何使用CSS自定义浏览器滚动条的样式,包括隐藏滚动条的角落、设置滚动条的基本样式、轨道样式和滑块样式,并提供了完整的CSS代码示例,通过这些技巧,你可以为你的网站添加个性化的滚动条样式,从而提升用户体验,详细内容请阅读本文,希望能对你有所帮助...

SpringBoot 自定义消息转换器使用详解

《SpringBoot自定义消息转换器使用详解》本文详细介绍了SpringBoot消息转换器的知识,并通过案例操作演示了如何进行自定义消息转换器的定制开发和使用,感兴趣的朋友一起看看吧... 目录一、前言二、SpringBoot 内容协商介绍2.1 什么是内容协商2.2 内容协商机制深入理解2.2.1 内容

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

自定义类型:结构体(续)

目录 一. 结构体的内存对齐 1.1 为什么存在内存对齐? 1.2 修改默认对齐数 二. 结构体传参 三. 结构体实现位段 一. 结构体的内存对齐 在前面的文章里我们已经讲过一部分的内存对齐的知识,并举出了两个例子,我们再举出两个例子继续说明: struct S3{double a;int b;char c;};int mian(){printf("%zd\n",s

Spring 源码解读:自定义实现Bean定义的注册与解析

引言 在Spring框架中,Bean的注册与解析是整个依赖注入流程的核心步骤。通过Bean定义,Spring容器知道如何创建、配置和管理每个Bean实例。本篇文章将通过实现一个简化版的Bean定义注册与解析机制,帮助你理解Spring框架背后的设计逻辑。我们还将对比Spring中的BeanDefinition和BeanDefinitionRegistry,以全面掌握Bean注册和解析的核心原理。

Oracle type (自定义类型的使用)

oracle - type   type定义: oracle中自定义数据类型 oracle中有基本的数据类型,如number,varchar2,date,numeric,float....但有时候我们需要特殊的格式, 如将name定义为(firstname,lastname)的形式,我们想把这个作为一个表的一列看待,这时候就要我们自己定义一个数据类型 格式 :create or repla

MVC(Model-View-Controller)和MVVM(Model-View-ViewModel)

1、MVC MVC(Model-View-Controller) 是一种常用的架构模式,用于分离应用程序的逻辑、数据和展示。它通过三个核心组件(模型、视图和控制器)将应用程序的业务逻辑与用户界面隔离,促进代码的可维护性、可扩展性和模块化。在 MVC 模式中,各组件可以与多种设计模式结合使用,以增强灵活性和可维护性。以下是 MVC 各组件与常见设计模式的关系和作用: 1. Model(模型)

HTML5自定义属性对象Dataset

原文转自HTML5自定义属性对象Dataset简介 一、html5 自定义属性介绍 之前翻译的“你必须知道的28个HTML5特征、窍门和技术”一文中对于HTML5中自定义合法属性data-已经做过些介绍,就是在HTML5中我们可以使用data-前缀设置我们需要的自定义属性,来进行一些数据的存放,例如我们要在一个文字按钮上存放相对应的id: <a href="javascript:" d

一步一步将PlantUML类图导出为自定义格式的XMI文件

一步一步将PlantUML类图导出为自定义格式的XMI文件 说明: 首次发表日期:2024-09-08PlantUML官网: https://plantuml.com/zh/PlantUML命令行文档: https://plantuml.com/zh/command-line#6a26f548831e6a8cPlantUML XMI文档: https://plantuml.com/zh/xmi