time 
设为首页】【收藏本站
当前位置: 主页 > 电脑网络 > 操作系统 > 嵌入式 > Android > Android View(四)自定义View的实现方法

Android View(四)自定义View的实现方法

时间:2014-06-20 14:35 点击:3403次 字体:[ ]




不知不觉中,带你一步步深入了解View系列的文章已经写到第四篇了,回顾一下,我们一共学习了LayoutInflater的原理分析、视图的绘制流程、视图的状态及重绘等知识,算是把View中很多重要的知识点都涉及到了。如果你还没有看过我前面的几篇文章,建议先去阅读一下,多了解一些原理方面的东西。

之前我有承诺过,会在View这个话题上多写几篇博客,讲一讲View的工作原理,以及自定义View的方法。现在前半部分的承诺已经如约兑现了,那么今天我就要来兑现后面部分的承诺,讲一讲自定义View的实现方法,同时这也是带你一步步深入了解View系列的完结篇。

一些接触Android不久的朋友对自定义View都有一丝畏惧感,总感觉这是一个比较高级的技术,但其实自定义View并不复杂,有时候只需要简单几行代码就可以完成了。

如果说要按类型来划分的话,自定义View的实现方式大概可以分为三种,自绘控件、组合控件、以及继承控件。那么下面我们就来依次学习一下,每种方式分别是如何自定义View的。

一、自绘控件

自绘控件的意思就是,这个View上所展现的内容全部都是我们自己绘制出来的。绘制的代码是写在onDraw()方法中的,而这部分内容我们已经在http://www.fengfly.com/plus/view-215112-1.html中学习过了。

下面我们准备来自定义一个计数器View,这个View可以响应用户的点击事件,并自动记录一共点击了多少次。新建一个CounterView继承自View,代码如下所示:

  1. public class CounterView extends View implements OnClickListener {  
  2.  
  3.     private Paint mPaint;  
  4.       
  5.     private Rect mBounds;  
  6.  
  7.     private int mCount;  
  8.       
  9.     public CounterView(Context context, AttributeSet attrs) {  
  10.         super(context, attrs);  
  11.         mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);  
  12.         mBounds = new Rect();  
  13.         setOnClickListener(this);  
  14.     }  
  15.  
  16.     @Override 
  17.     protected void onDraw(Canvas canvas) {  
  18.         super.onDraw(canvas);  
  19.         mPaint.setColor(Color.BLUE);  
  20.         canvas.drawRect(00, getWidth(), getHeight(), mPaint);  
  21.         mPaint.setColor(Color.YELLOW);  
  22.         mPaint.setTextSize(30);  
  23.         String text = String.valueOf(mCount);  
  24.         mPaint.getTextBounds(text, 0, text.length(), mBounds);  
  25.         float textWidth = mBounds.width();  
  26.         float textHeight = mBounds.height();  
  27.         canvas.drawText(text, getWidth() / 2 - textWidth / 2, getHeight() / 2 
  28.                 + textHeight / 2, mPaint);  
  29.     }  
  30.  
  31.     @Override 
  32.     public void onClick(View v) {  
  33.         mCount++;  
  34.         invalidate();  
  35.     }  
  36.  
  37. }  

可以看到,首先我们在CounterView的构造函数中初始化了一些数据,并给这个View的本身注册了点击事件,这样当CounterView被点击的时候,onClick()方法就会得到调用。而onClick()方法中的逻辑就更加简单了,只是对mCount这个计数器加1,然后调用invalidate()方法。通过http://www.fengfly.com/plus/view-215114-1.html这篇文章的学习我们都已经知道,调用invalidate()方法会导致视图进行重绘,因此onDraw()方法在稍后就将会得到调用。

 

既然CounterView是一个自绘视图,那么最主要的逻辑当然就是写在onDraw()方法里的了,下面我们就来仔细看一下。这里首先是将Paint画笔设置为蓝色,然后调用Canvas的drawRect()方法绘制了一个矩形,这个矩形也就可以当作是CounterView的背景图吧。接着将画笔设置为黄色,准备在背景上面绘制当前的计数,注意这里先是调用了getTextBounds()方法来获取到文字的宽度和高度,然后调用了drawText()方法去进行绘制就可以了。

这样,一个自定义的View就已经完成了,并且目前这个CounterView是具备自动计数功能的。那么剩下的问题就是如何让这个View在界面上显示出来了,其实这也非常简单,我们只需要像使用普通的控件一样来使用CounterView就可以了。比如在布局文件中加入如下代码:

  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
  2.     android:layout_width="match_parent" 
  3.     android:layout_height="match_parent" > 
  4.  
  5.     <com.example.customview.CounterView 
  6.         android:layout_width="100dp" 
  7.         android:layout_height="100dp" 
  8.         android:layout_centerInParent="true" /> 
  9.  
  10. </RelativeLayout> 

可以看到,这里我们将CounterView放入了一个RelativeLayout中,然后可以像使用普通控件来给CounterView指定各种属性,比如通过layout_width和layout_height来指定CounterView的宽高,通过android:layout_centerInParent来指定它在布局里居中显示。只不过需要注意,自定义的View在使用的时候一定要写出完整的包名,不然系统将无法找到这个View。

 

好了,就是这么简单,接下来我们可以运行一下程序,并不停地点击CounterView,效果如下图所示。

Android View(四)自定义View的实现方法_www.fengfly.com
 

怎么样?是不是感觉自定义View也并不是什么高级的技术,简单几行代码就可以实现了。当然了,这个CounterView功能非常简陋,只有一个计数功能,因此只需几行代码就足够了,当你需要绘制比较复杂的View时,还是需要很多技巧的。



本文地址 : http://www.fengfly.com/plus/view-215115-1.html
标签: Android 自定义 View
------分隔线----------------------------
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码:
本栏分类