Android 利用OnDraw实现自定义View

自定义View的实现方式大概可以分为三种,自绘控件、组合控件、以及继承控件。本文将介绍自绘控件的用法。自绘控件的意思是,这个控件上的内容是用onDraw函数绘制出来的。关于onDraw函数的介绍可参看 Android视图绘制流程完全解析,带你一步步深入了解View(二) 。

例子1:在layout文件中使用自绘控件 

出处:http://blog.csdn.net/guolin_blog/article/details/17357967

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

[java] view plaincopy在CODE上查看代码片派生到我的代码片
  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()方法。通过 Android视图状态及重绘流程分析,带你一步步深入了解View(三) 这篇文章的学习我们都已经知道,调用invalidate()方法会导致视图进行重绘,因此onDraw()方法在稍后就将会得到调用。

在布局文件中加入如下代码:

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  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中。注意,自定义的View在使用的时候一定要写出完整的包名,不然系统将无法找到这个View。

例子2:通过实例化对象的方式使用自定义控件

出处:http://blog.csdn.net/ameyume/article/details/6031024

Android绘图操作,通过继承View实现,在onDraw函数中实现绘图。

下面是一个简单的例子:

[java] view plaincopy
  1. public class AndroidTest extends Activity {  
  2.     /** Called when the activity is first created. */  
  3.     @Override  
  4.     public void onCreate(Bundle savedInstanceState) {  
  5.         super.onCreate(savedInstanceState);  
  6.           
  7.         MyView mv = new MyView(this);  
  8.         setContentView(mv);  
  9.     }  
  10.       
  11.     public class MyView extends View {  
  12.   
  13.         MyView(Context context) {  
  14.             super(context);  
  15.         }  
  16.           
  17.         @Override  
  18.         protected void onDraw(Canvas canvas) {  
  19.             // TODO Auto-generated method stub  
  20.             super.onDraw(canvas);  
  21.               
  22.             // 首先定义一个paint   
  23.             Paint paint = new Paint();   
  24.   
  25.             // 绘制矩形区域-实心矩形   
  26.             // 设置颜色   
  27.             paint.setColor(Color.BLUE);   
  28.             // 设置样式-填充   
  29.             paint.setStyle(Style.FILL);   
  30.             // 绘制一个矩形   
  31.             canvas.drawRect(new Rect(00, getWidth(), getHeight()), paint);   
  32.   
  33.             // 绘空心矩形   
  34.             // 设置颜色   
  35.             paint.setColor(Color.RED);   
  36.             // 设置样式-空心矩形   
  37.             paint.setStyle(Style.STROKE);   
  38.             // 绘制一个矩形   
  39.             canvas.drawRect(new Rect(101010030), paint);   
  40.   
  41.             // 绘文字   
  42.             // 设置颜色   
  43.             paint.setColor(Color.GREEN);   
  44.             // 绘文字   
  45.             canvas.drawText("Hello"1050, paint);   
  46.   
  47.             // 绘图   
  48.             // 从资源文件中生成位图   
  49.             Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.icon);   
  50.             // 绘图   
  51.             canvas.drawBitmap(bitmap, 1060, paint);   
  52.         }  
  53.           
  54.     }  
  55. }  


发布了49 篇原创文章 · 获赞 21 · 访问量 81万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览