转载请标明出处：http://blog.csdn.net/lmj623565791/article/details/24252901
很多的Android入门程序猿来说对于Android自定义View，可能都是比较恐惧的，但是这又是高手进阶的必经之路，所有准备在自定义View上面花一些功夫，多写一些文章。先总结下自定义View的步骤：
1、自定义View的属性
2、在View的构造方法中获得我们自定义的属性
[ 3、重写onMesure ]
4、重写onDraw
我把3用[]标出了，所以说3不一定是必须的，当然了大部分情况下还是需要重写的。
1、自定义View的属性，首先在res/values/  下建立一个attrs.xml ， 在里面定义我们的属性和声明我们的整个样式。

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <attr name="titleText" format="string" />
    <attr name="titleTextColor" format="color" />
    <attr name="titleTextSize" format="dimension" />

    <declare-styleable name="CustomTitleView">
        <attr name="titleText" />
        <attr name="titleTextColor" />
        <attr name="titleTextSize" />
    </declare-styleable>

</resources>
我们定义了字体，字体颜色，字体大小3个属性，format是值该属性的取值类型:

一共有：string,color,demension,integer,enum,reference,float,boolean,fraction,flag;不清楚的可以google一把。
然后在布局中声明我们的自定义View

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:custom="http://schemas.android.com/apk/res/com.example.customview01"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <com.example.customview01.view.CustomTitleView
        android:layout_width="200dp"
        android:layout_height="100dp"
        custom:titleText="3712"
        custom:titleTextColor="#ff0000"
        custom:titleTextSize="40sp" />

</RelativeLayout>

一定要引入 xmlns:custom="http://schemas.android.com/apk/res/com.example.customview01"我们的命名空间，后面的包路径指的是项目的package

2、在View的构造方法中，获得我们的自定义的样式

/**
	 * 文本
	 */
	private String mTitleText;
	/**
	 * 文本的颜色
	 */
	private int mTitleTextColor;
	/**
	 * 文本的大小
	 */
	private int mTitleTextSize;

	/**
	 * 绘制时控制文本绘制的范围
	 */
	private Rect mBound;
	private Paint mPaint;

	public CustomTitleView(Context context, AttributeSet attrs)
	{
		this(context, attrs, 0);
	}

	public CustomTitleView(Context context)
	{
		this(context, null);
	}

	/**
	 * 获得我自定义的样式属性
	 * 
	 * @param context
	 * @param attrs
	 * @param defStyle
	 */
	public CustomTitleView(Context context, AttributeSet attrs, int defStyle)
	{
		super(context, attrs, defStyle);
		/**
		 * 获得我们所定义的自定义样式属性
		 */
		TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CustomTitleView, defStyle, 0);
		int n = a.getIndexCount();
		for (int i = 0; i < n; i++)
		{
			int attr = a.getIndex(i);
			switch (attr)
			{
			case R.styleable.CustomTitleView_titleText:
				mTitleText = a.getString(attr);
				break;
			case R.styleable.CustomTitleView_titleTextColor:
				// 默认颜色设置为黑色
				mTitleTextColor = a.getColor(attr, Color.BLACK);
				break;
			case R.styleable.CustomTitleView_titleTextSize:
				// 默认设置为16sp，TypeValue也可以把sp转化为px
				mTitleTextSize = a.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(
						TypedValue.COMPLEX_UNIT_SP, 16, getResources().getDisplayMetrics()));
				break;

			}

		}
		a.recycle();

		/**
		 * 获得绘制文本的宽和高
		 */
		mPaint = new Paint();
		mPaint.setTextSize(mTitleTextSize);
		// mPaint.setColor(mTitleTextColor);
		mBound = new Rect();
		mPaint.getTextBounds(mTitleText, 0, mTitleText.length(), mBound);

	}

我们重写了3个构造方法，默认的布局文件调用的是两个参数的构造方法，所以记得让所有的构造调用我们的三个参数的构造，我们在三个参数的构造中获得自定义属性。

3、我们重写onDraw，onMesure调用系统提供的：

@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
	{
		super.onMeasure(widthMeasureSpec, heightMeasureSpec);
	}

	@Override
	protected void onDraw(Canvas canvas)
	{
		mPaint.setColor(Color.YELLOW);
		canvas.drawRect(0, 0, getMeasuredWidth(), getMeasuredHeight(), mPaint);

		mPaint.setColor(mTitleTextColor);
		canvas.drawText(mTitleText, getWidth() / 2 - mBound.width() / 2, getHeight() / 2 + mBound.height() / 2, mPaint);
	}
此时的效果是：




是不是觉得还不错，基本已经实现了自定义View。但是此时如果我们把布局文件的宽和高写成wrap_content，会发现效果并不是我们的预期：


系统帮我们测量的高度和宽度都是MATCH_PARNET，当我们设置明确的宽度和高度时，系统帮我们测量的结果就是我们设置的结果，当我们设置为WRAP_CONTENT,或者MATCH_PARENT系统帮我们测量的结果就是MATCH_PARENT的长度。
所以，当设置了WRAP_CONTENT时，我们需要自己进行测量，即重写onMesure方法”：
重写之前先了解MeasureSpec的specMode,一共三种类型：
EXACTLY：一般是设置了明确的值或者是MATCH_PARENT
AT_MOST：表示子布局限制在一个最大值内，一般为WARP_CONTENT
UNSPECIFIED：表示子布局想要多大就多大，很少使用
下面是我们重写onMeasure代码：

	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
	{
		int widthMode = MeasureSpec.getMode(widthMeasureSpec);
		int widthSize = MeasureSpec.getSize(widthMeasureSpec);
		int heightMode = MeasureSpec.getMode(heightMeasureSpec);
		int heightSize = MeasureSpec.getSize(heightMeasureSpec);
		int width;
		int height ;
		if (widthMode == MeasureSpec.EXACTLY)
		{
			width = widthSize;
		} else
		{
			mPaint.setTextSize(mTitleTextSize);
			mPaint.getTextBounds(mTitle, 0, mTitle.length(), mBounds);
			float textWidth = mBounds.width();
			int desired = (int) (getPaddingLeft() + textWidth + getPaddingRight());
			width = desired;
		}

		if (heightMode == MeasureSpec.EXACTLY)
		{
			height = heightSize;
		} else
		{
			mPaint.setTextSize(mTitleTextSize);
			mPaint.getTextBounds(mTitle, 0, mTitle.length(), mBounds);
			float textHeight = mBounds.height();
			int desired = (int) (getPaddingTop() + textHeight + getPaddingBottom());
			height = desired;
		}
		
		

		setMeasuredDimension(width, height);
	}


现在我们修改下布局文件：


<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:custom="http://schemas.android.com/apk/res/com.example.customview01"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <com.example.customview01.view.CustomTitleView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        custom:titleText="3712"
        android:padding="10dp"
        custom:titleTextColor="#ff0000"
        android:layout_centerInParent="true"
        custom:titleTextSize="40sp" />

</RelativeLayout>

现在的效果是：



完全复合我们的预期，现在我们可以对高度、宽度进行随便的设置了，基本可以满足我们的需求。
当然了，这样下来我们这个自定义View与TextView相比岂不是没什么优势，所有我们觉得给自定义View添加一个事件：
在构造中添加：

this.setOnClickListener(new OnClickListener()
		{

			@Override
			public void onClick(View v)
			{
				mTitleText = randomText();
				postInvalidate();
			}

		});


private String randomText()
	{
		Random random = new Random();
		Set<Integer> set = new HashSet<Integer>();
		while (set.size() < 4)
		{
			int randomInt = random.nextInt(10);
			set.add(randomInt);
		}
		StringBuffer sb = new StringBuffer();
		for (Integer i : set)
		{
			sb.append("" + i);
		}

		return sb.toString();
	}

下面再来运行：



我们添加了一个点击事件，每次让它随机生成一个4位的随机数，有兴趣的可以在onDraw中添加一点噪点，然后改写为验证码，是不是感觉很不错。


好了，各位学习的，打酱油的留个言，顶个呗~


源码点击此处下载

前言：在我从C++转到Android时，就被Android里炫彩斑斓的自定义控件深深折服，想知道如果想利用C++实现这些功能，那是相当困难的。从那时候起，我就想，等我学会了自定义控件，一定要写一篇系列出来，方便后来者能更系统完善地掌握它。今天，这个系列就这样默默地诞生了，希望它能够完成它的使命，在你读完这系列博客时，发现定自义控件也不过如此！如果，顺便能给个评论，加个关注，我将不胜感激——启舰
 
 
 
我的新书《Android自定义控件入门与实战》出版啦:https://blog.csdn.net/harvic880925/article/details/81455073
 
 
 
一、自定义控件三部曲之动画篇
 
1、《自定义控件三部曲之动画篇（一）——alpha、scale、translate、rotate、set的xml属性及用法》
2、《自定义控件三部曲之动画篇（二）——Interpolator插值器》
3、《自定义控件三部曲之动画篇（三）—— 代码生成alpha、scale、translate、rotate、set及插值器动画》
4、《自定义控件三部曲之动画篇(四)——ValueAnimator基本使用》
 
初识ValueAnimator:ofInt,ofFloat以及监听器用法
5、《自定义控件三部曲之动画篇(五)——ValueAnimator高级进阶（一）》
 
这一节非常重要，讲解了插值器与Evaluator的使用与如何自定义知识
这节中有如何做到背景色渐变的特效
6、《自定义控件三部曲之动画篇(六)——ValueAnimator高级进阶（二）》
 
这节着重讲解了ValueAnimator的ofObject函数用法
可以看到自定义弹性圆的伸缩特效
如何给A-Z字母变化添加上插值器效果
7、《自定义控件三部曲之动画篇(七)——ObjectAnimator基本使用》
 
这节讲了ObjectAnimator的用法及如何利用ObjectAnimator来实现前几节的效果
8、《自定义控件三部曲之动画篇(八)——PropertyValuesHolder与Keyframe》
 
这节主要讲了如何自定义关键帧的知识
使用关键帧实现电话振铃效果
9、《自定义控件三部曲之动画篇(九)——联合动画的代码实现》
 
这节讲解了如何实现组合动画的知识包括顺序播放、同时播放和自由定义顺序播放以及动画监听器相关的知识
10、《自定义控件三部曲之动画篇(十)——联合动画的XML实现与使用示例》
 
利用XML来实现组合动画的知识
实现了路径菜单动画
11、《 自定义控件三部曲之动画篇(十一)——layoutAnimation与gridLayoutAnimation》
 
讲解了容器类中控件的进入动画的实现方式
12、《自定义控件三部曲之动画篇(十二)——animateLayoutChanges与LayoutTransition》
 
自定义容器类中控件进入、退出等相关动画的实现方式

13、《自定义控件三部曲之动画篇(十三)——实现ListView Item进入动画》
 
讲解了一个实例：如何实现listview中各个item进场时的动画
 
 
在动画篇中，从一到十篇是必须要掌握的，11-13篇不是必须掌握的，有个印象就行
 
 
 
二、自定义控件三部曲之绘图篇
 
1、《自定义控件三部曲之绘图篇（一）：概述及基本几何图形绘制》
2、《自定义控件三部曲之绘图篇（二）：路径及文字》
3、《自定义控件三部曲之绘图篇（三）：区域（Range）》
4、《自定义控件三部曲之绘图篇（四）：canvas变换与操作》
5、《自定义控件三部曲之绘图篇（ 五）：drawText()详解》
6、《 自定义控件三部曲之绘图篇（六）——Path之贝赛尔曲线和手势轨迹、水波纹效果》
 
本篇将讲述手势轨迹捕捉、波浪纹效果实现的几种方法
7、《 自定义控件三部曲之绘图篇(七)——Paint之函数大汇总》
 
本篇将讲述路径的各种效果，比如铁锈路径、自定义图形路径、虚线路径等
8、《自定义控件三部曲之绘图篇（八）——Paint之ColorMatrix与滤镜效果》
 
本篇将讲述各种滤镜效果的实现方法：包括黑白滤镜、反古滤镜、色彩增强滤镜、色彩替换等
9、《自定义控件三部曲之绘图篇（九）——Paint之setColorFilter》
 
按钮点击时，动态加深图片色彩（简易方法）
可以学到针对不同主题动态设置不同色彩图片的方法(setTint())
10、《自定义控件三部曲之绘图篇（十）——Paint之setXfermode(一)》
 
硬件加速的原理与禁用方法
选区颜色替换、溶合图片、反向选区颜色替换
11、《自定义控件三部曲之绘图篇（十一）——Paint之setXfermode(二)》
 
书架中书本选中灯光效果
Twiter标识中空效果实现
图片圆角实现
图片倒影实现
橡皮擦效果实现
刮刮卡效果实现
12、《自定义控件三部曲之绘图篇（十二）——Paint之setXfermode(三)》
 
区域波纹动画效果
心电图动画
不规则波纹
刷刷卡、图片倒影等另种实现方式
13、《自定义控件三部曲之绘图篇（十三）——Canvas与图层(一)》
 
这篇文章中没有任何特效，但这是绘图篇中非常重要的一篇，对于理解Canvas绘图起着重要作用
14、《自定义控件三部曲之绘图篇（十四）——Canvas与图层（二）》
 
上一篇的续篇，讲解了save、saveLayer、saveLayerAlpha中所使用的FLAG的具体意义
15、《自定义控件三部曲之绘图篇（十五）——QQ红点拖动删除效果实现（基本原理篇）》
 
对以往知识点进行总结复习，涉及有Canvas绘图、SaveLayer图层、贝赛尔曲线、手势监听和逐帧动画等
初步实现了QQ红点拖动效果
16、《自定义控件三部曲之绘图篇（十六）——给控件添加阴影效果与发光效果》
 
传统地给按钮添加阴影的方法
如何给已有控件添加阴影
如何给控件添加发光效果
17、《自定义控件三部曲之绘图篇（十七）——为Bitmap添加阴影并封装控件》
 
如何给图片添加阴影
如何自定义控件属性
控件如何自测量
如何最终封装成控件
18、《自定义控件三部曲之绘图篇（十八）——BitmapShader与望远镜效果》
 
实现望远镜效果
封装不规则头像控件
19、《自定义控件三部曲之绘图篇(十九)——LinearGradient与闪动文字效果》
 
讲解了LinearGradient的意义
实现了闪动文字效果控件
20、《自定义控件三部曲之绘图篇(二十)——RadialGradient与水波纹按钮效果》
 
讲解了RradialGradient知识
实现了按钮水波纹效果
 
 
三、自定义控件三部曲之视图篇
 
1、《自定义控件三部曲视图篇（一）——测量与布局》
 
讲解onMeasure、onLayout的区别与用法
讲解margin的计算方法
2、《自定义控件三部曲视图篇（二）——FlowLayout自适应容器实现》
 
实现了自适应的派生自ViewGroup的容器FlowLayout
3、《自定义控件三部曲视图篇（三）——瀑布流容器WaterFallLayout实现》
 
讲解了自定义LayoutParams并使用的方法
能够了解派生自ViewGroup的控件如何定义与使用的方法
4、《自定义控件三部曲视图篇（四）——RecyclerView系列之一简单使用》
 
讲解了RecyclerView的基本使用方法，为下篇深入讲解做准备
5、《自定义控件三部曲视图篇（五）——RecyclerView系列之二ItemDecoration》
 
讲解了ItemDecoration与Item的关系
ItemDecoration的用法
自定义ItemDecoration与蒙版效果
6、《自定义控件三部曲视图篇（六）——RecyclerView系列之三自定义LayoutManager》
 
讲解了自定义LayoutManager的方法
讲解了如何初始化Item布局，如何实现Item的滚动
7、《自定义控件三部曲视图篇（七）——RecyclerView系列之四实现回收复用》
 
讲解了RecyclerView的回收复用原理
讲解了为自定义LayoutManager添加回收复用的实现方法
8、《自定义控件三部曲视图篇（八）——RecyclerView系统之五回收复用实现方式二》
 
讲解了另一种实现回收复用的方法
实现了针对每个Item布局，同时在布局后更改每个Item的属性的方法
9、《自定义控件三部曲视图篇（九）——RecycerView系列之六实现滚动画廊控件》
 
实现2D画廊
实现fling校正的方法
实现3D画廊的方法
 
 
如果你喜欢我的文章，你可能更喜欢我的公众号
 
 
 
 
 
 
 

 
 
最近没啥事开始正式用Eclipse 转入 idea工具阵营，毕竟有70%的开发者在使用idea开发，所以它的魅力可想而知。刚上手大概有一天，就知道它为啥取名为 intelli（智能化）了，确实很智能，这还是一些小小的细节，当然idea也有它不足之处，就是我们今天要讲的“自定义方法注解模板”，类注解模板可以很简单的设置，这里我就不重复，而网上很多关于自定义方法注解模板的文章大多是抄袭获取转发根本自己就没有验证，本文经过自己亲自验证有效
 
 
 
File->settings->Editor->Live Templates


  
点击右上角的绿色+号，然后选择template group ，然后输入group的name，随便输入就好了：myGroup。然后点ok


  
选中刚才创建的myGroup，然后再次点击右侧的绿色+，这次选择的是第一个1. Live Template。取名为*，取名可以随便，只是个人觉得方便，你可以取别的。
  

  
配置模板，下面是我的模板，大家仔细看我的模板开头是*而不是/*,这就是关键所在。
   
*
 *  
 * 
 * @author chenmc
 * @date $date$ $time$
 * @param $params$
 * @return $returns$
 */
 注意：只有当变量被$$包围时 右侧的Edit variables才可以点击哦。

  
再编辑好模板之后就只为参数添加$$添加变量，点击右侧的 Editor variables，


  
完成之后点击Apply然后点击OK，注意了，重点的地方，在你的方法上输入 /*然后加上模板的名称*，这就是我为什么不取字母而取名为*，因为这样很快速，再按Tab键（注意啊不是按Enter键，而是按Tab键）就会出现你想要的注释了，很多教程是直接输入模板名称按tab键，但是这种方法的@param和@return是获取不到的，再重复一遍正确的方式：/** 然后按Tab键；如果你取名为abc那就是  /*abc 然后按Tab。效果如下：


  
但是还有一个问题，细心的读者会发现在@param这个参数上报错了，这是因为idea强大的检查功能，有两种解决办法:
   
第一种：File->settings->Editor->Inspections->javadoc issues下面第四项将红色 Error改为黄色Warning即可
 
第二种：点击idea的右下角的人头图像，然后选择高亮级别，调为Syntax模式即可
 


 至此已大功告成了，希望能帮到大家！

对本教程如有疑问请关注微信公众号：裸睡的猪，获取帮助！！！

  

 
 
      今天，bug菌为大家带来一期帝王级干货，有关于前端vue的组件教学，深入指引大家在vue中如何创建自定义的组件，并且在vue中引入你自定义的组件；
 
 
      具有很好的教学价值，希望小伙伴们根据这篇文章可以有所收获，建议小伙伴们先收藏后阅读哦。
 
 
      小伙伴们如果觉得文章不错，点赞、收藏、评论，分享走一起呀，记得给bug菌来个一键三连~~
 
 
      好了，我们开始这期的正文吧。
 
 
 
 
#1、在你的项目中专门创建一个放置自定义组件的文件夹（我是放在了components底下的common中，分类好日后方便维护，本文以table.vue为例）
 
 
#2、在你要添加的页中加入要引入的模块,注意驼峰命名的方式（本文为例：<v-table></v-table>，因为我在定义table模块的时候定义了name：v-table，所以引用的时候，也必须得用所在table模块中name定义好的名字）；
 
 
#3、在index.vue中引入table.vue模块 ；如下：
 
//index.vue 页面 ，引入v-table模块
<div class="table">
    <v-table></v-table> //这就是你引入的自定义模块；注意是驼峰命名法
</div>
 
#4、在index.vue页面引入该组件(注意：table.vue，我是在index.vue页面中添加了模块<v-table>,不是html标签，其实就是vue引入新的子组件）
 
//index.vue
<script>
  import vTable from '../../components/common/table'  //table.vue（注意，我在index.vue页面中添加了模块<v-table>,不是html标签，其实就是vue引入新的子组件）
    export default {
        name: "index",
      components: {
            vTable
        },
    }
</script>
 
ps：说白了，自定义组件就好比封装，把一些公共的模块抽取出来，然后写成单独的的工具组件或者页面，在需要的页面中就直接引入即可。
 
#5、另外，为了防止在同一页面写入过多的代码，不方便后期维护，便可以把整个页面分成多个小模块，然后在主页面进行模块引入，创建包括引入步骤都是一样的。
 
比如：
 
 
总结：
 
vue组件命名问题：
 
1、别用驼峰式命名 因为 vue   webpack编译后 ，他统一会变成小写（顾名思义：骆驼式命名法就是当变量名或函数名是由一个或多个单词连结在一起，而构成的唯一识别字时，第一个单词以小写字母开始；从第二个单词开始以后的每个单词的首字母都采用大写字母，例如：myFirstName、myLastName，这就叫驼峰命名；你们学会了吗）
 
2、组件命名最好加个前缀 比如    <v-table></v-table>或者<v_table></v_table>
 

 
 
 
❤如果文章对您有所帮助，就请在文章末尾的左下角把大拇指点亮吧！(#^.^#)；
 
 
❤如果喜欢bug菌分享的文章，就请给bug菌点个关注吧！(๑′ᴗ‵๑)づ╭❤～；
 
 
❤对文章有任何问题欢迎小伙伴们下方留言或者入群探讨【群号：708072830】；
 
 
❤鉴于个人经验有限，所有观点及技术研点，如有异议，请直接回复参与讨论(请勿发表攻击言论，谢谢）；
 
 
❤版权声明：本文为博主原创文章，转载请附上原文出处链接和本文声明，版权所有，盗版必究！(*^▽^*).