Android开发之自定义View(一)

Android常见的自定义控件有三种方式:
  • 继承View
  • 继承原有的控件,在原有控件的基础上进行修改
  • 重新拼装组合

今天先来简单说一说第一种也是最复杂的一种~~ 剩下的下次再说~~

继承View,重写onDraw方法,但是注意采用这种方式需要自己在代码中来支持熟悉的wrap_content、padding属性。

1、想好需要自定义的属性,在values下创建一个attrs.xml,这里我就演示一个简单的颜色,自定义一个属性集合,命名为CustomView,有一个格式为color的属性custom_color

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="CustomView">
        <attr name="custom_color" format="color"></attr>
    </declare-styleable>
</resources>

2、自定义View

public class CustomView extends View {

    private Paint mPaint = new Paint();// 创建一个画笔;
    private int mColor = Color.RED; //默认为红色

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

    public CustomView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

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

        //加载自定义属性集合CustomView
        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.CustomView);
        //解析CustomView中自定义的属性custom_color,id为R.styleable.CustomView_custom_color,如果没有就默认为红色
        mColor = a.getColor(R.styleable.CustomView_custom_color, Color.RED);
        //释放资源,方便下次使用
        a.recycle();

        //初始化画笔的参数
        mPaint.setColor(mColor);// 设置画笔颜色
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawCircle(100, 100, 50, mPaint);// 用画笔在画布上添加一个圆
    }
}

3、布局中使用,注意这里使用的时候一定要用全类名,要想用自定义属性,必须在布局中加入如下代码,这样自定义属性就可以用app打头:

xmlns:app="http://schemas.android.com/apk/res-auto"

设置宽高为match_parent,并设置了背景色和自定颜色

<com.example.administrator.diyview.CustomView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#123456"
        app:custom_color="#000000" />

4、运行效果图

自定义View1.png

显示的是一个青色的背景和一个黑色的圆

5、注意: 这种方式无论怎么设置padding的值或者更改宽和高为wrap_content,执行效果都如上,原因就如开头所说,需要自己处理,那么如何处理呢?

(1) 处理padding 在android:layout_width 和 android:layout_height 都为 match_parent 时,我们考虑一下左边和上边的padding

<com.example.administrator.diyview.CustomView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#123456"
        android:paddingLeft="100dp"
        android:paddingTop="100dp"
        app:custom_color="#000000" />

在onDraw()方法中设置padding

 @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int paddingLeft = getPaddingLeft();
        int paddingTop = getPaddingTop();
        canvas.drawCircle(paddingLeft + 100, paddingTop + 100, 50, mPaint);
    }

运行效果:

自定义View2.png

(2)处理wrap_content 为什么要单独处理wrap_content呢?这和View的工作原理有关,View经过measure、layout和draw显示出来,其中measure时需要用到MeasureSpec的变量(包含SpecMode和SpecSize),其中SpecSize指定了特定测试模式下的大小,SpecMode指定了测量的模式,分为三类:

  • UNSPECIFIED 父容器对View无任何限制,一般用于系统内部
  • EXACTLY View的最终大小就是SpecSize指定的值,适用于指定具体大小和match_parent的形式
  • AT_MOST 父容器指定了一个SpecSize,View不能超过它,适用于wrap_content

当使用wrap_content时,SpecSize其实就是父容器中可用空间的大小,即View的宽和高等于父容器当前剩余的当前剩余空间大小,和使用match_parent一样,那么怎么处理?也很简单,只要重写onMeasure方法,在AT_MOST模式时,设置一个具体的宽高即可:

@Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        //获取宽和高的SpecMode和SpecSize
        int wSpecMode = MeasureSpec.getMode(widthMeasureSpec);
        int wSpecSize = MeasureSpec.getSize(widthMeasureSpec);
        int hSpecMode = MeasureSpec.getMode(heightMeasureSpec);
        int hSpecSize = MeasureSpec.getSize(heightMeasureSpec);

        //分别判断宽高是否设置为wrap_content
        if (wSpecMode == MeasureSpec.AT_MOST && hSpecMode == MeasureSpec.AT_MOST) {
            //宽高都为wrap_content,直接指定为400
            setMeasuredDimension(400, 400);

        } else if (wSpecMode == MeasureSpec.AT_MOST) {
            //只有宽为wrap_content,宽直接指定为400,高为获取的SpecSize
            setMeasuredDimension(400, hSpecSize);

        } else if (hSpecMode == MeasureSpec.AT_MOST) {
            //只有高为wrap_content,高直接指定为400,宽为获取的SpecSize
            setMeasuredDimension(wSpecSize, 400);

        }
    }

此时布局如下:

<com.example.administrator.diyview.CustomView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#123456"
        android:paddingLeft="50dp"
        android:paddingTop="50dp"
        app:custom_color="#000000" />

运行效果:

自定义View3.png

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏余生开发

插件集--页面滚动scrollreveal.js

scrollReveal.js 不依赖其他任何文件。不支持 IE10 以下 基本方法

33640
来自专栏HTML5学堂

2016.04第4周 群问题分享

HTML+CSS img图片下面产生3px间隙问题 2016.4.25~2016.4.29 核心概念 行元素垂直方向的对齐方式和行块元素转换 参考答案 方法一:...

377140
来自专栏闻道于事

JavaScript事件与例子

事件,就是预先设置好的一段代码,等到用户触发的时候执行。 一:常见的事件: 1.关于鼠标的事件   onclick 鼠标单击触发   ondblclick 鼠标...

29170
来自专栏吴裕超

给新生成的节点(动态生成节点)绑定事件方法总结

第一种 jquery写法 $('.father').on('click',',child',function(){}) $(document).on('cli...

37060
来自专栏我的博客

安卓开发之简单组件使用

一、TextView组件(文本框) <TextView android:id=”@+id/firstText” android:text=”第一行“ andro...

29660
来自专栏转载gongluck的CSDN博客

vc中实现控件的隐藏与显示

一、隐藏控件             CWnd *pWnd;         pWnd = GetDlgItem(IDC_EDIT1);        //获...

38950
来自专栏前端小叙

Vue slot简单理解

情形一: 子组件定义了具名的slot,父组件使用具名的slot,slot显示顺序为子组件定义slot的顺序 子组件: Vue.component('child'...

49760
来自专栏黑泽君的专栏

day02_css学习笔记

10220
来自专栏一个爱吃西瓜的程序员

Web前端基础【2】--CSS基础

CSS指层叠样式表,用来定义如何显示HTML元素,一般和HTML配合使用。CSS样式表的目的是为了解决内容与表现分离的问题:即使同一个HTML文档也能表现出外观...

37060
来自专栏Android开发与分享

【React Native】react-native-scrollable-tab-view

611120

扫码关注云+社区

领取腾讯云代金券