Android自定义View讲解加示例

Android自定义View是工程开发中必不可少的一项技能,项目中通过自定义View的方式造好各种内部需要的View,将会带来极大的使用方便。

一、自定义View的几种使用方式

  1. 自绘控件:使用canvas画出控件的样子
  2. 组合一些Android的控件:通过继承容器,将一些现有的组件组合起来成为一个固定的View
  3. 继承并扩展Android的控件:对原有的Android View进行扩展,在原有功能上添加新的功能。

相对来说,组合和继承比较容易,自绘控件要稍微复杂一点。本次将主要讲解自绘控件的方式,并通过一个具体的例子,展示怎么画出一个控件、怎么自定义属性来控制控件的样式、并为控件添加一些行为特征。

二、使用自定义View

一般需重写以下4个方法,但不是必须都重写,根据需要选择性重写即可。

onMeasure():测量控件本身的大小
onLayout():测量控件在父控件中的位置
onDraw():构建了自定义View的外观形象
onTouchEvent():重载视图的行为

三、示范制作一个自定View

本例子将制作一个自定义View,样式为一张小火箭图片,xml中可以通过自定义属性控制其样式,点击小火箭将开始一个翻转动画。好了,开始上代码。

1. 设计自定义属性

首先在res/values/ 下建立一个attrs.xml , 在里面定义我们的属性和声明我们的整个样式。

<?xml version="1.0" encoding="utf-8"?>
          <resources>
             <declare-styleable name="MyTouchBall">
                 <attr name="imgSampleSize" format="integer" />
                 <attr name="duration" format="integer" />
             </declare-styleable>
         </resources>

2. 在布局文件中使用自定义View

新建一个类MyTouchBall,继承View(代码见下文),布局文件中像用Android自带控件一样使用自定义View,注意引入命名控件(代码第4行),通过命名空间方便使用自定义属性

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:mytouchball="http://schemas.android.com/apk/res-auto](http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.administrator.myapplication.MainActivity"
    >
    <com.example.administrator.myapplication.MyTouchBall
        android:layout_width="500dp"
        android:layout_height="wrap_content"
        mytouchball:duration="1000"
        mytouchball:imgSampleSize="1"
        >
    </com.example.administrator.myapplication.MyTouchBall>
</RelativeLayout>

3. 自定义View

这里会有三个默认的构造方法,android开发者网站上有相关的说明文档:

public View (Context context)是在java代码创建视图的时候被调用,如从xml填充的视图,就不会调用这个 。
public View (Context context, AttributeSet attrs)这个是在xml创建但是没有指定style的时候被调用 
public View (Context context, AttributeSet attrs, int defStyle)给View提供一个基本的style

我们在两个参数的构造方法中,添加逻辑,接受xml布局中的自定义属性。

public class MyTouchBall extends View {

    private int mImgSampleSize = 10;  //火箭缩放比例
    private int mDuration = 500;  //火箭动画的时间

    private Bitmap mBitmap;
    private int mImgHeight; //缩放后,图片的实际高度
    private int mImgWidth;  //缩放后,图片的实际宽度

    private Paint mPaint; //画笔


    public MyTouchBall(Context context) {
        super(context);
    }

    //在这里获取自定义属性,并赋值给成员变量
    public MyTouchBall(Context context, AttributeSet attrs) {
        super(context, attrs);
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.MyTouchBall);
        int count = typedArray.getIndexCount();
        for (int i = 0; i < count; i++) {
            int attr = typedArray.getIndex(i);
            switch (attr) {
                case R.styleable.MyTouchBall_duration:
                    mDuration = typedArray.getInteger(attr, 500);
                    break;
                case R.styleable.MyTouchBall_imgSampleSize:
                    mImgSampleSize = typedArray.getInteger(attr, 30);
                    break;
                default:
                    break;
            }
        }
        setBackgroundColor(getResources().getColor(R.color.sandybrown));//设置背景颜色为浅黄色,方便识别onMeasure计算的对不对
        typedArray.recycle(); //将typedArray清空,循环给下一个调用者使用

        //根据属性计算火箭图片的宽高
        mBitmap = decodeSampledBitmap(getResources(), R.mipmap.roket, mImgSampleSize);
        mImgWidth = mBitmap.getWidth();
        mImgHeight = mBitmap.getHeight();
    }

    public MyTouchBall(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }  }

decodeSampledBitmap方法是根据缩放比例,压缩或放大图片,下面是它的代码。

//加载图片,按比例缩放
    private static Bitmap decodeSampledBitmap(Resources res, int resId, int sampleSize) {
        final BitmapFactory.Options options = new BitmapFactory.Options();
        options.inJustDecodeBounds = false;
        options.inSampleSize = sampleSize;
        // 使用获取到的inSampleSize值解析图片
        return BitmapFactory.decodeResource(res, resId, options);
    }

4. 重写onMeasure方法,根据xml属性来决定控件的宽高。

如下问代码所示,一般自定义控件都会重写View的onMeasure方法,因为该方法指定该控件在屏幕上的大小。

  • onMeasure(int widthMeasureSpec, int heightMeasureSpec)传入的两个参数是由上一层控件传入的大小,有多种情况,重写该方法时需要对计算控件的实际大小,然后调用setMeasuredDimension(int, int)设置实际大小。

  • onMeasure传入的widthMeasureSpec和heightMeasureSpec不是一般的尺寸数值,而是将模式和尺寸组合在一起的数值。
    通过int mode = MeasureSpec.getMode(widthMeasureSpec)得到模式,用int size =?MeasureSpec.getSize(widthMeasureSpec)得到尺寸。

  • 其中,mode共有三种情况,取值分别为MeasureSpec.UNSPECIFIED, MeasureSpec.EXACTLY, MeasureSpec.AT_MOST。

  • MeasureSpec.EXACTLY是精确尺寸,当我们将自定义View的layout_width或layout_height指定为具体数值时如andorid:layout_width="50dip",或者match_parent就会是这个模式。(match_parent也相当于指定了具体尺寸)

  • MeasureSpec.AT_MOST是最大尺寸,当控件的layout_width或layout_height指定为WRAP_CONTENT时,控件大小一般随着控件的子空间或内容进行变化,此时控件尺寸只要不超过父控件允许的最大尺寸即可。因此,此时的mode是AT_MOST,size给出了父控件允许的最大尺寸。

  • MeasureSpec.UNSPECIFIED是未指定尺寸,这种情况不多.

    简单总结,映射关系是:

wrap_parent -> MeasureSpec.AT_MOST
具体数值或者match_parent -> MeasureSpec.EXACTLY

下面正式重写onMeasure方法

    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);

        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);

        int width, height;

        if (widthMode == MeasureSpec.EXACTLY) { //使用者在布局文件里指定了具体的宽度
            width = widthSize;
        } else {  //没有指定,或者设置成了wrap_content
            //这时候要计算具体的数值,宽度取图片的宽度
            width = mImgWidth;
        }

        if (heightMode == MeasureSpec.EXACTLY) { //使用者在布局文件里指定了具体的高度
            height = heightSize;
        } else {  //没有指定,或者设置成了wrap_content
            //宽度取图片的高度
            height = mImgHeight;
        }
        setMeasuredDimension(width, height);
    }

5. 重写onDraw方法,画出具体的界面,这里就是将一张图片画到界面上(当然,你可以根据需要画各种形状)。

    protected void onDraw(Canvas canvas) {
        mPaint = new Paint();
        canvas.drawBitmap(mBitmap, 0, 0, mPaint);//在画布上画出图片
    }

6. 重写onTouchEvent方法,为控件添加一些独特的行为,默认返回值用false,以便事件能回传到上层,不影响原有功能。具体原因请看我的另一篇博客Android事件传递机制详解(嵌套自定义View示例)

public boolean onTouchEvent(MotionEvent event) {
        if (event.getAction() == MotionEvent.ACTION_DOWN) {
            startAnimation();
        }
        return false;
    }

7. 一个简单的旋转动画效果

public void startAnimation() {     //开始动画
        ObjectAnimator.ofFloat(this, "rotationX", 0.0f, 360.0f).setDuration(mDuration).start();
    }

三、结果

好了,大功告成,通过结果来看看效果吧。从之前的布局文件可以看到,因为宽度设置了500dp,整个控件的大小是500dp(通过背景色可以看出来);而高度设置的是wrap_content,所以控件的高度就是图片的高度。这表明onMeasure的效果已经达到了。

image

如果觉得我的文章对你有用,请留言鼓励一下吧!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,372评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,368评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,415评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,157评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,171评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,125评论 1 297
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,028评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,887评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,310评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,533评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,690评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,411评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,004评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,659评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,812评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,693评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,577评论 2 353

推荐阅读更多精彩内容