安卓之自定义UI(画布Canvas)

1.什么是画布?

画布(Canvas)是图形编程中一个很普通的概念,通常由三个基本的绘图组件组成:

       1.Canvas  提供了绘图方法,可以向底层的位图绘制基本图形。 
       2.Paint  也称为"刷子",Paint可以指定如何将基本图形绘制到位图上。 
       3.Bitmap  绘图的表面。


Android绘图API支持透明度、渐变填充、圆边矩形和抗锯齿。遗憾的是,由于资源限制,它还不支持矢量图形,它使用的是传统光栅样式的重新绘图

这种光栅方法的结果是提高了效率,但是改变一个Paint对象不会影响已经画好的基本图形,它只会影响新的元素。


2.可以画什么?

Canvas类封装了用作绘图表面的位图;它还提供了draw*方法来实现设计。

下面的列表提供了对可用的基本图形的简要说明,但并没有深入地探讨每一个draw方法的详细内容:

         drawARGB / drawRGB / drawColor   使用单一的颜色填充画布。 
          drawArc   在一个矩形区域的两个角之间绘制一个弧。 
          drawBitmap   在画布上绘制一个位图。可以通过指定目标大小或者使用一个矩阵来改变目标位图的外观。 
          drawBitmapMesh   使用一个mesh(网)来绘制一个位图,它可以通过移动网中的点来操作目标的外观。 
          drawCircle   以给定的点为圆心,绘制一个指定半径的圆。 
          drawLine(s)   在两个点之间画一条(多条)直线。 
          drawOval   以指定的矩形为边界,画一个椭圆。 
          drawPaint   使用指定的Paint填充整个Canvas 
          drawPath   绘制指定的Path。Path对象经常用来保存一个对象中基本图形的集合。 
          drawPicture   在指定的矩形中绘制一个Picture对象。 
          drawPosText   绘制指定了每一个字符的偏移量的文本字符串。 
          drawRect   绘制一个矩形。 
          drawRoundRect   绘制一个圆角矩形。 
          drawText   在Canvas上绘制一个文本串。文本的字体、大小和渲染属性都设置在用来渲染文本的Paint对象中。 
          drawTextOnPath   在一个指定的path上绘制文本。 
          drawVertices   绘制一系列三角形面片,通过一系列顶点来指定它们。 

          这些绘图方法中的每一个都需要指定一个Paint对象来渲染它。在下面的部分中,将学习如何创建和修改Paint对象,从而在绘图中完成大部分工作。


3. 从Paint中完成工作

        Paint 类相当于一个笔刷和调色板。它可以选择如何使用上面描述的draw方法来渲染绘制在画布上的基本图形。通过修改Paint对象,可以在绘图的时候控制颜色、样式、字体和特殊效果。最简单地,setColor可以让你选择一个Paint的颜色,而Paint对象的样式(使用setStyle控制)则可以决定是绘制绘图对象的轮廓(STROKE),还是只填充每一部分(FILL),或者是两者都做(STROKE_AND_FILL) 

          除了这些简单的控制之外,Paint类还支持透明度,另外,它也可以通过使用各种各样的阴影、过滤器和效果进行修改,从而提供由更丰富的、复杂的画笔和颜料组成的调色板。


效果图如下:

安卓之自定义UI(画布Canvas)


首先写一个自定义的myButton的Java类继承View

(注意:设置文字要写在最后面)

代码如下:

[html] view plain copy
  1. <pre code_snippet_id="2475233" snippet_file_name="blog_20170708_1_7333294" name="code" class="html">public class MyButton extends View {  
  2.   
  3.     public MyButton(Context context) {  
  4.         super(context);  
  5.     }  
  6.   
  7.     public MyButton(Context context, @Nullable AttributeSet attrs) {  
  8.         super(context, attrs);  
  9.     }  
  10.   
  11.     public MyButton(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {  
  12.         super(context, attrs, defStyleAttr);  
  13.     }  
  14.   
  15.     public MyButton(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {  
  16.         super(context, attrs, defStyleAttr, defStyleRes);  
  17.     }  
  18.   
  19.   
  20.     @Override  
  21.     protected void onDraw(Canvas canvas) {  
  22.         super.onDraw(canvas);  
  23.         //实例化路径  
  24.         Path path=new Path();  
  25.         path.moveTo(95,100);  
  26.         path.lineTo(305,100);  
  27.         path.lineTo(130,240);  
  28.         path.lineTo(200,20);  
  29.         path.lineTo(270,240);  
  30.         path.lineTo(95,100);  
  31.         //实例化一个画笔  
  32.         Paint paint=new Paint();  
  33.         //设置空心  
  34.         paint.setStyle(Paint.Style.STROKE);  
  35.         //设置画笔的粗细  
  36.         paint.setStrokeWidth(1);  
  37.         paint.setColor(Color.GREEN);  
  38.         //设置字的大小  
  39.         paint.setTextSize(20);  
  40.         //设置画布的颜色  
  41.         canvas.drawColor(Color.BLUE);  
  42.         canvas.drawPath(path,paint);  
  43.         //画文字  
  44.         canvas.drawText("加油哈",170,140,paint);  
  45.     }  
  46.   
  47.   
  48.     //自定义画布的宽和高  
  49.     @Override  
  50.     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {  
  51.         super.onMeasure(widthMeasureSpec, heightMeasureSpec);  
  52.        // int height=View.MeasureSpec.getSize(heightMeasureSpec);  
  53.         int height=400;  
  54.         Log.i("test",height+":  height");  
  55. //        int width=View.MeasureSpec.getSize(widthMeasureSpec);  
  56.        int width=400;  
  57.         Log.i("test",width+":  width");  
  58.         setMeasuredDimension(width,height);  
  59.     }  
  60. }</pre><br>  
  61. <br>  
  62. <br>  
  63. <p></p>  
  64. <pre></pre>  
  65. <br>  
  66. <p></p>  
  67. <p><span style="font-size:18px">再写一个布局文件</span></p>  
  68. <p></p><pre code_snippet_id="2475233" snippet_file_name="blog_20170708_2_681365" name="code" class="html"><?xml version="1.0" encoding="utf-8"?>  
  69. <LinearLayout  
  70.     xmlns:android="http://schemas.android.com/apk/res/android"  
  71.     xmlns:app="http://schemas.android.com/apk/res-auto"  
  72.     xmlns:tools="http://schemas.android.com/tools"  
  73.     android:layout_width="match_parent"  
  74.     android:layout_height="match_parent"  
  75.     android:id="@+id/root"  
  76.     tools:context="com.example.cookie.android0708diyui.MainActivity">  
  77.   
  78.     <com.example.cookie.android0708diyui.MyButton  
  79.         android:layout_width="wrap_content"  
  80.         android:layout_height="wrap_content"  
  81.         android:id="@+id/mbtn_myButton"/>  
  82.   
  83.     <Button  
  84.         android:layout_width="wrap_content"  
  85.         android:layout_height="wrap_content"  
  86.         android:text="系统自带的按钮"/>  
  87.   
  88. </LinearLayout>  
  89. </pre><br>  
  90. <span style="font-size:18px"><br>  
  91. </span><p></p>  
  92. <p><span style="font-size:18px">使用的java代码如下:</span></p>  
  93. <p><span style="font-size:18px"></span></p><pre code_snippet_id="2475233" snippet_file_name="blog_20170708_3_9951015" name="code" class="html">public class MainActivity extends AppCompatActivity {  
  94.   
  95.     private MyButton mbtn_myButton;  
  96.      private LinearLayout root;  
  97.   
  98.      @Override  
  99.     protected void onCreate(Bundle savedInstanceState) {  
  100.         super.onCreate(savedInstanceState);  
  101.         setContentView(R.layout.activity_main);  
  102. }</pre><br>  
  103. <br>  
  104. <p></p>  
  105. <p><br>  
  106. </p>  
  107. <p><br>  
  108. </p>  
  109.