今天 看了好几篇 自定义组件的介绍,加上自己 练习了一把 ,准备 结合 别人的想法以及自己的理解,将自定义组件详细的记录下来,自己学习的同时,希望能帮到大家;
自定义组件,我将从以下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.ZXView
android: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,还希望大家多多提出大家的意见