Android中自定义视图View之---前奏篇

               

前言

好长时间没写blog了,心里感觉有点空荡荡的,今天有时间就来写一个关于自定义视图的的blog吧。关于这篇blog,网上已经有很多案例了,其实没什么难度的。但是我们在开发的过程中有时候会用到一些自定义的View以达到我们所需要的效果。其实网上的很多案例我们看完之后,发现这部分没什么难度的,我总结了两点:

1、准备纸和笔,计算坐标

2、在onDraw方法中开始画图,invalidate方法刷新,onTouchEvent方法监听触摸事件

对于绘图相关的知识,之前在弄JavaSE相关的知识的时候,写过俄罗斯方块,也是用画笔绘制的,然后在刷新。原理都一样的。

在这个过程中,我们需要了解两个很重要的东西:

画笔:Paint

画布:Canvas


引用资料

http://blog.csdn.net/t12x3456/article/details/10473225


讲解内容

那么下面我们就开始来介绍相关的内容了。我主要分一下步骤来讲解一下:

1、介绍Android中的Paint和Canvas的概念和使用方法

2、介绍Android中重要的概念渲染对象Shader

3、自定义一个LabelView(和Android中的TextView差不多)

4、自定义渐变的圆形和长条的SeekBar

5、自定义颜色选择器

6、自定义闪烁的TextView

7、实现360手机卫士中的流量监控的折线图

那么我们也知道今天的文章内容应该会很多,所以大家要有耐心的看完。这篇文章如果看懂了,也耐心的看完了,相信对自定义View的相关知识了解的应该也差不多了,自己在开发的过程中实现自己想要的简单的View应该是没有问题的。


内容讲解

下面开始正式介绍内容

一、介绍Android中的Paint和Canvas的概念和使用方法

Android中的Paint和Canvas的概念是很简单的,就是我们用画笔在画布上进行绘制没什么难度的,我们只要拿到画笔Paint和画布Canvas对象就可以进行操作了。当然Canvas对象提供了很多绘制图形的方法,下面来看一下代码吧:

package com.example.drawpathdemo;import android.annotation.SuppressLint;import android.content.Context;import android.graphics.Bitmap;import android.graphics.BitmapFactory;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.LinearGradient;import android.graphics.Paint;import android.graphics.Path;import android.graphics.RectF;import android.graphics.Shader;import android.util.AttributeSet;import android.view.View;public class DrawView extends View public DrawView(Context context) {  super(context); }  public DrawView(Context context, AttributeSet attributeSet) {       super(context, attributeSet);   } @SuppressLint("DrawAllocation"@Override protected void onDraw(Canvas canvas) {  super.onDraw(canvas);  /*   * 方法 说明 drawRect 绘制矩形 drawCircle 绘制圆形 drawOval 绘制椭圆 drawPath 绘制任意多边形   * drawLine 绘制直线 drawPoin 绘制点   */  // 创建画笔  Paint p = new Paint();  p.setColor(Color.RED);// 设置红色  canvas.drawText("画圆:", 10, 20, p);// 画文本  canvas.drawCircle(60, 20, 10, p);// 小圆  p.setAntiAlias(true);// 设置画笔的锯齿效果。 true是去除,大家一看效果就明白了  canvas.drawCircle(120, 20, 20, p);// 大圆  canvas.drawText("画线及弧线:", 10, 60, p);  p.setColor(Color.GREEN);// 设置绿色  canvas.drawLine(60, 40, 100, 40, p);// 画线  canvas.drawLine(110, 40, 190, 80, p);// 斜线  //画笑脸弧线  p.setStyle(Paint.Style.STROKE);//设置空心  RectF oval1=new RectF(150,20,180,40);  canvas.drawArc(oval1, 180, 180, false, p);//小弧形  oval1.set(190, 20, 220, 40);  canvas.drawArc(oval1, 180, 180, false, p);//小弧形  oval1.set(160, 30, 210, 60);  canvas.drawArc(oval1, 0, 180, false, p);//小弧形  canvas.drawText("画矩形:", 10, 80, p);  p.setColor(Color.GRAY);// 设置灰色  p.setStyle(Paint.Style.FILL);//设置填满  canvas.drawRect(60, 60, 80, 80, p);// 正方形  canvas.drawRect(60, 90, 160, 100, p);// 长方形  canvas.drawText("画扇形和椭圆:", 10, 120, p);  /* 设置渐变色 这个正方形的颜色是改变的 */  Shader mShader = new LinearGradient(0, 0, 100, 100,    new int[] { Color.RED, Color.GREEN, Color.BLUE, Color.YELLOW,      Color.LTGRAY }, null, Shader.TileMode.REPEAT); // 一个材质,打造出一个线性梯度沿著一条线。  p.setShader(mShader);  // p.setColor(Color.BLUE);  RectF oval2 = new RectF(60, 100, 200, 240);// 设置个新的长方形,扫描测量  canvas.drawArc(oval2, 200, 130, true, p);  // 画弧,第一个参数是RectF:该类是第二个参数是角度的开始,第三个参数是多少度,第四个参数是真的时候画扇形,是假的时候画弧线  //画椭圆,把oval改一下  oval2.set(210,100,250,130);  canvas.drawOval(oval2, p);  canvas.drawText("画三角形:", 10, 200, p);  // 绘制这个三角形,你可以绘制任意多边形  Path path = new Path();  path.moveTo(80, 200);// 此点为多边形的起点  path.lineTo(120, 250);  path.lineTo(80, 250);  path.close(); // 使这些点构成封闭的多边形  canvas.drawPath(path, p);  // 你可以绘制很多任意多边形,比如下面画六连形  p.reset();//重置  p.setColor(Color.LTGRAY);  p.setStyle(Paint.Style.STROKE);//设置空心  Path path1=new Path();  path1.moveTo(180, 200);  path1.lineTo(200, 200);  path1.lineTo(210, 210);  path1.lineTo(200, 220);  path1.lineTo(180, 220);  path1.lineTo(170, 210);  path1.close();//封闭  canvas.drawPath(path1, p);  /*   * Path类封装复合(多轮廓几何图形的路径   * 由直线段*、二次曲线,和三次方曲线,也可画以油画。drawPath(路径、油漆),要么已填充的或抚摸   * (基于油漆的风格),或者可以用于剪断或画画的文本在路径。   */    //画圆角矩形  p.setStyle(Paint.Style.FILL);//充满  p.setColor(Color.LTGRAY);  p.setAntiAlias(true);// 设置画笔的锯齿效果  canvas.drawText("画圆角矩形:", 10, 260, p);  RectF oval3 = new RectF(80, 260, 200, 300);// 设置个新的长方形  canvas.drawRoundRect(oval3, 20, 15, p);//第二个参数是x半径,第三个参数是y半径    //画贝塞尔曲线  canvas.drawText("画贝塞尔曲线:", 10, 310, p);  p.reset();  p.setStyle(Paint.Style.STROKE);  p.setColor(Color.GREEN);  Path path2=new Path();  path2.moveTo(100, 320);//设置Path的起点  path2.quadTo(150, 310, 170, 400); //设置贝塞尔曲线的控制点坐标和终点坐标  canvas.drawPath(path2, p);//画出贝塞尔曲线    //画点  p.setStyle(Paint.Style.FILL);  canvas.drawText("画点:", 10, 390, p);  canvas.drawPoint(60, 390, p);//画一个点  canvas.drawPoints(new float[]{60,400,65,400,70,400}, p);//画多个点    //画图片,就是贴图  Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.ic_launcher);  canvas.drawBitmap(bitmap, 250,360, p); }}
运行一下看效果图:

猜你喜欢

转载自blog.csdn.net/hgfujffg/article/details/86552673
今日推荐