为什么80%的码农都做不了架构师？>>>   

 今天 看了好几篇 自定义组件的介绍，加上自己 练习了一把 ，准备 结合 别人的想法以及自己的理解，将自定义组件详细的记录下来，自己学习的同时，希望能帮到大家；

自定义组件，我将从以下3点来介绍；

一、为什么要自定义组件？ why ？

二、自定义组件是什么？ what？

三、如何去做？ how？

接下来我们先看

一、why？

在我们编写UI界面时，会不会遇到这种情况：我想用一个组件，发现 android sdk 没有提供；
这时候就要考虑自定义组件，同时还要思考

a、有没有类似的

b、区别在哪里；

比如 ，我想要一个组件 有button 类似的点击效果；但是我又想要形状不一样；也许大家会想换个图片就好了，我们这里说的是自定义组件，那当然就是想要用用这个功能了；所以我们可以重新绘制形状即可；

或者，我们就是要用 ImageView 但是恰恰 ImageView没有提供我们想要的，但是其他又几本符合，这时候我们会不会 可以 在ImageView添加新的功能；在iOS中这种扩展组件的方式经常用；我想在android 里也是可行的；

c、完全没有

。。。。
以上几种情况，再加上实际项目中遇到的，也就是说，当现有的UI满足不了我们项目需求的时候，我们就可以考虑自定义组件；
这就回答了第一个问题，为什么要自定义组件

接着 回答 第二个问题

二、 what？自定义组件是啥？

  我给的解释是：一种： 在原有的组件上加功能一种：直接继承 自view,在空白的上面绘制自己的；总的来说就是，自己写一View、View Group;实际情况看个人需求；

三、How 如何实现

自定义一个View ，首先想好你的这个View 的作用； 然后在想对策，我这里简单的实现一个验证码；

1、创建一个ZXView 继承自Button ；这样我就不用写单击事件了；

1） 构造方法：

       a、public ZXView(Context context) {this(context,null);}b、 public ZXView(Context context, AttributeSet attrs) {this(context, attrs,0);}c、 public ZXView(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);}

这三个构造方法的区别

 a、这个方法 当你调用  new ZXView(content);   通过代码设置 zxview；  会触发b、这个方法是 在你布局里  用到自定义的组件时  通过xml布局设置； 会触发c、这个方法 上面两种使用 view 的方式 他都不会触发

它的使用 是 前两个构造方法可以调用它；

2）属性

这里我添加 这几个

      private  String mTitleText; //设置验证码文本 比如 “2391”private  int mTitleSize;//设置验证码字体的大小private  int mTitleColor;//设置 验证码 字体的颜色private  Paint mPaint;  //设置绘制本view 形状是使用的笔；private Rect mRect;//验证码的范围

3）setter getter 方法；按照需求自行添加

4）重写 tostring 方法 ；方便调试

前 四部是我们创建一个类 基本的一些设置； 接下来看一下 我们自定义view的绘制：

当你想要绘制自己的view时，下面这三个方法可以很好地帮助到你；我们所看到的view 基本都是图形，可视化，既然是可视化的，他就有有个绘制过程 ；我们分别来看一下

@Override

a、 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

  测量确定 View 的大小根据用户传入的数据定的；这里的 widthMeasureSpec,heightMeasureSpec包含了两个重要的信息

1、mode 及判断用户的宽、或者高的值

 android:layout_width="wrap_content|match_parent"android:layout_height="wrap_content|match_parent"int  widthMode=MeasureSpec.getMode(widthMeasureSpec);int heightMode=MeasureSpec.getMode(heightMeasureSpec);

2、size 及 具体的大小 这个大家可以打印出来查询

  int widthSize=MeasureSpec.getSize(widthMeasureSpec)         int  heightSize=MeasureSpec.getSize(heightMeasureSpec);

3、如果是 填充 父控件、如何处理大小 、如果是自适应又要如何处理；下面是我的处理方式

     if(widthMode==MeasureSpec.EXACTLY（填充父控件）){width=widthSize;}else {自适应width=mRect.width()+20;   //我的view 的宽}if(heightMode==MeasureSpec.EXACTLY){height=heightSize;}else {height=width;}

4、让自定义的宽、高生效

 setMeasuredDimension(width, height);

}

@Override

b、 protected void onLayout(boolean changed, int left, int top, int right, int bottom) {

super.onLayout(changed, left, top, right, bottom);

      定位:这里大家要清楚一件事，在android里这个 ui设计是由ViewGroup 与View组成的； 也就是说，子控件的位置自己决定不了，他由他的父组件决定；也就是 说由ViewGroup决定；  这个不像iOS ,在IOS当中 所有的View是View也是Group；也就是他本是就可以决定子控件的位置；所以，当我们所自定义的View 不是Group的时候，这个方法就没有必要去重写了；}

@Override

c、protected void onDraw(Canvas canvas) {

   绘制这里可以根据需求去绘制你想要的任何形状；Canvas 是画布，你可以在上面任意绘制，没有人管你的； paint 可以设置你想要绘制的颜色、粗细、去锯齿。。。。这个这里就不详细介绍了，有兴趣自己下去学

      mPaint.setColor(Color.YELLOW);canvas.drawCircle(getMeasuredWidth()/2,getMeasuredHeight()/2,getMeasuredWidth()/2,mPaint);mPaint.setColor(mTitleColor);canvas.drawText(mTitleText,0,getMeasuredHeight()/2+mRect.height()/2,mPaint); }

最后我这里在说一下 我们想要在xml 文件里y用这些属性，你就需要：

1）在values 创建attrs文件

      <?xml version="1.0" encoding="utf-8"?>
<resources><attr name="titleText" format="string"/><attr name="titleSize" format="dimension"/><attr name="titleColor" format="color"/><declare-styleable name="ZXView"><attr name="titleText"/><attr name="titleSize"/><attr name="titleColor"/></declare-styleable></resources>

2）在布局文件里引用

  xmlns:custom="http://schemas.android.com/apk/res/com.org.xiuer.androidorg"

下面是我的设置

 <com.org.xiuer.androidorg.view.ZXViewandroid:id="@+id/myView"android:layout_width="wrap_content"android:layout_height="wrap_content"custom:titleColor="@color/colorPrimary"custom:titleText="1233"custom:titleSize="22sp"android:background="#ff00ff"/>

3）在代码中获取到这些值

  public ZXView(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);
TypedArray array=context.getTheme().obtainStyledAttributes(attrs,R.styleable.ZXView,defStyleAttr,0); //获取到属性数组for(int i=0;i<array.getIndexCount();i++){switch (array.getIndex(i)){case R.styleable.ZXView_titleText:mTitleText=array.getString(i);break;case R.styleable.ZXView_titleSize:mTitleSize=array.getDimensionPixelSize(i,16);break;case  R.styleable.ZXView_titleColor:mTitleColor=array.getColor(i,Color.GRAY);break;}}

  这就是我所理解的自定义view，还希望大家多多提出大家的意见