![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b978629db3a44e39b6686bb17a368870~tplv-k3u1fbpfcp-zoom-1.image) *** # 前言 - 自定义View是Android开发者必须了解的基础 - 今天，我将手把手教你写一个自定义View，并理清自定义View所有应该的注意点 *** # 目录 ![示意图](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d178b4275f6b4720897e217a9ccd2b4b~tplv-k3u1fbpfcp-zoom-1.image) *** # 1. 自定义View的分类自定义View一共分为两大类，具体如下图： ![分类](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2dcd2dc2b224449ca8a04aca65886271~tplv-k3u1fbpfcp-zoom-1.image) *** # 2. 具体介绍 & 使用场景对于自定义View的类型介绍及使用场景如下图： ![具体介绍 & 使用场景](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3b480ad72bc84535b22d4756467f8285~tplv-k3u1fbpfcp-zoom-1.image) *** # 3. 使用注意点在使用自定义View时有很多注意点（坑），希望大家要非常留意： ![使用注意点](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6c0fa8b720554a5790c32c919ae8b1b7~tplv-k3u1fbpfcp-zoom-1.image) ### 3.1 支持特殊属性 - 支持wrap_content 如果不在`onMeasure（）`中对`wrap_content`作特殊处理，那么`wrap_content`属性将失效 >具体原因请看文章：[为什么你的自定义View wrap_content不起作用？](http://www.jianshu.com/p/ca118d704b5e) - 支持padding & margin 如果不支持，那么`padding`和`margin`（ViewGroup情况）的属性将失效 >1. 对于继承View的控件，padding是在draw()中处理 >2. 对于继承ViewGroup的控件，padding和margin会直接影响measure和layout过程 ### 3.2 多线程应直接使用post方式 View的内部本身提供了post系列的方法，完全可以替代Handler的作用，使用起来更加方便、直接。 ### 3.3 避免内存泄露主要针对View中含有线程或动画的情况：**当View退出或不可见时，记得及时停止该View包含的线程和动画，否则会造成内存泄露问题**。 >启动或停止线程/ 动画的方式： >1. 启动线程/ 动画：使用`view.onAttachedToWindow（）`，因为该方法调用的时机是当包含View的Activity启动的时刻 >2. 停止线程/ 动画：使用`view.onDetachedFromWindow（）`，因为该方法调用的时机是当包含View的Activity退出或当前View被remove的时刻 ### 3.4 处理好滑动冲突当View带有滑动嵌套情况时，必须要处理好滑动冲突，否则会严重影响View的显示效果。 *** # 4. 具体实例接下来，我将用自定义View中最常用的**继承View**来说明自定义View的具体应用和需要注意的点 ### 4.1 继承VIew的介绍 ![Paste_Image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/65f0bd0f38d74d1585abcd2b8c65654c~tplv-k3u1fbpfcp-zoom-1.image) 在下面的例子中，我将讲解： - 如何实现一个基本的自定义View（继承VIew） - 如何自身支持wrap_content & padding属性 - 如何为自定义View提供自定义属性（如颜色等等） - 实例说明：画一个实心圆 ### 4.2 具体步骤 1. 创建自定义View类（继承View类） 2. 布局文件添加自定义View组件及显示 3. 注意点设置（支持wrap_content & padding属性自定义属性等等）下面我将逐个步骤进行说明： **步骤1：创建自定义View类（继承View类）** ``` /** * CircleView.java * 作用：绘制自定义View的具体内容 * 需复写方法：onDraw() * 复写逻辑：具体绘制逻辑 */ public class CircleView extends View { // 设置画笔变量 Paint mPaint1; // 自定义View有四个构造函数 // 如果View是在Java代码里面new的，则调用第一个构造函数 public CircleView(Context context){ super(context); // 在构造函数里初始化画笔的操作 init(); } // 如果View是在.xml里声明的，则调用第二个构造函数 // 自定义属性是从AttributeSet参数传进来的 public CircleView(Context context,AttributeSet attrs){ super(context, attrs); init(); } // 不会自动调用 // 一般是在第二个构造函数里主动调用 // 如View有style属性时 public CircleView(Context context,AttributeSet attrs,int defStyleAttr ){ super(context, attrs,defStyleAttr); init(); } // API21之后才使用 // 不会自动调用 // 一般是在第二个构造函数里主动调用 // 如View有style属性时 public CircleView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) { super(context, attrs, defStyleAttr, defStyleRes); } // 画笔初始化 private void init() { // 创建画笔 mPaint1 = new Paint (); // 设置画笔颜色为蓝色 mPaint1.setColor(Color.BLUE); // 设置画笔宽度为10px mPaint1.setStrokeWidth(5f); //设置画笔模式为填充 mPaint1.setStyle(Paint.Style.FILL); } // 关键点：复写onDraw()进行绘制 @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); // 获取控件的高度和宽度 int width = getWidth(); int height = getHeight(); // 设置圆的半径 = 宽,高最小值的2分之1 int r = Math.min(width, height)/2; // 画出圆（蓝色） // 圆心 = 控件的中央,半径 = 宽,高最小值的2分之1 canvas.drawCircle(width/2,height/2,r,mPaint1); } } ``` 特别注意： 1. View的构造函数一共有4个，具体使用请看：[深入理解View的构造函数](http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2016/0806/4575.html)和 [理解View的构造函数](http://www.cnblogs.com/angeldevil/p/3479431.html#three) 2. 对于绘制内容为何在复写onDraw()里实现，具体请看我写的文章：[自定义View Draw过程- 最易懂的自定义View原理系列（4）](http://www.jianshu.com/p/95afeb7c8335) **步骤2：在布局文件中添加自定义View类的组件及显示** ``` /** * 1. 在布局文件中添加自定义View类的组件 * activity_main.xml */ /** * 2. 设置显示 * MainActivity.java */ public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); } } ``` 至此，一个基本的自定义View已经实现了，运行效果如下图。 ![效果图](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1a89f046aa3c407eacba43623d921eb9~tplv-k3u1fbpfcp-zoom-1.image) ### 步骤3：注意点设置（支持wrap_content & padding属性自定义属性等等）接下来继续看自定义View关于属性自定义的问题： - 如何手动支持wrap_content属性 - 如何手动支持padding属性 - 如何为自定义View提供自定义属性（如颜色等等） ### a. 手动支持wrap_content属性先来看wrap_content & match_parent属性的区别 ``` // 视图的宽和高被设定成刚好适应视图内容的最小尺寸 android:layout_width="wrap_content" // 视图的宽和高延伸至充满整个父布局 android:layout_width="match_parent" // 在Android API 8之前叫作"fill_parent" ``` 如果不手动设置支持`wrap_content`属性，那么`wrap_content`属性是不会生效（显示效果同`match_parent`） >具体原因 & 解决方案请看我写的文章：[为什么你的自定义View wrap_content不起作用？](http://www.jianshu.com/p/ca118d704b5e) ### b. 支持padding属性 `padding`属性：用于设置控件内容相对控件边缘的边距； >区别与margin属性（同样称为：边距）：控件边缘相对父控件的边距（父控件控制），具体区别如下： ![Paste_Image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2a881ff0d17240edb09d89a9cc57014d~tplv-k3u1fbpfcp-zoom-1.image) 如果不手动设置支持padding属性，那么padding属性在自定义View中是不会生效的。 ``` ``` ### 解决方案绘制时考虑传入的padding属性值（四个方向）。 >在自定义View类的复写onDraw（）进行设置 ``` /** * 复写的onDraw() */ @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); // 获取传入的padding值 final int paddingLeft = getPaddingLeft(); final int paddingRight = getPaddingRight(); final int paddingTop = getPaddingTop(); final int paddingBottom = getPaddingBottom(); // 获取绘制内容的高度和宽度（考虑了四个方向的padding值） int width = getWidth() - paddingLeft - paddingRight ; int height = getHeight() - paddingTop - paddingBottom ; // 设置圆的半径 = 宽,高最小值的2分之1 int r = Math.min(width, height)/2; // 画出圆(蓝色) // 圆心 = 控件的中央,半径 = 宽,高最小值的2分之1 canvas.drawCircle(paddingLeft+width/2,paddingTop+height/2,r,mPaint1); } ``` ![效果图](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/09dbb250b0fc4841a3621f151bba54b9~tplv-k3u1fbpfcp-zoom-1.image) ### c. 提供自定义属性除了常见的以android:开头的系统属性(如下所示)，很多场景下自定义View还需要系统所没有的属性，即自定义属性。 ``` // 基本是以android开头 android:layout_width="match_parent" android:layout_height="match_parent" android:background="#000000" android:padding="30dp" ``` 实现自定义属性的步骤如下： 1. 在values目录下创建自定义属性的xml文件 2. 在自定义View的构造方法中解析自定义属性的值 3. 在布局文件中使用自定义属性下面我将对每个步骤进行具体介绍 ## 步骤1：在values目录下创建自定义属性的xml文件 ``` /** * attrs_circle_view.xml */ // 自定义属性集合:CircleView // 在该集合下,设置不同的自定义属性 // 在attr标签下设置需要的自定义属性 // 此处定义了一个设置图形的颜色:circle_color属性,格式是color,代表颜色 // 格式有很多种,如资源id(reference)等等 ``` 对于自定义属性类型 & 格式如下： ``` <-- 1. reference：使用某一资源ID --> // 使用格式 // 1. Java代码 private int ResID; private Drawable ResDraw; ResID = typedArray.getResourceId(R.styleable.SuperEditText_background, R.drawable.background); // 获得资源ID ResDraw = getResources().getDrawable(ResID); // 获得Drawble对象 // 2. xml代码 <-- 2. color：颜色值 --> // 格式使用 <-- 3. boolean：布尔值 --> // 格式使用