自定义View--登录界面输入框

效果展示

预览界面.png
效果显示

从图中可以看出这次自定义View的效果。具体功能如下:

  • 设置头部文字的字体大小、字体颜色、文字内容

  • 设置输入框的字体大小、字体颜色、文字内容、提示文字

开始自定义

一、 第一步先新建一个类名为EditTextPlus(可自己命名)继承FrameLayout的文件,因为我们要实现在布局文件中能是用自己的属性,所以我们还要在values目录下新建attrs.xml文件(用于添加自定义的属性)

第1步.png

二、在 attrs.xml 文件中添加如下属性(其中除了字体的基本属性之外,还包括了输入框的输入类型,键盘的类型等)

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="EditTextPlus">
        <attr name="head_title_text" format="string" />
        <attr name="head_titile_text_size" format="dimension" />
        <attr name="head_title_text_color" format="color" />
        <attr name="edit_hint_text" format="string" />
        <attr name="edit_text_size" format="dimension" />
        <attr name="edit_text_color" format="color" />
        <attr name="edit_input_type" format="enum">
            <enum name="Text" value="0" />
            <enum name="Phone" value="1" />
            <enum name="Password" value="2" />
            <enum name="Number" value="3" />
        </attr>
            <!-- 键盘类型 -->
        <attr name="edit_editor_option" format="enum">
            <enum name="IME_ACTION_NONE" value="0" />
            <enum name="IME_ACTION_DONE" value="1" />
            <enum name="IME_ACTION_GO" value="2" />
            <enum name="IME_ACTION_NEXT" value="3" />
            <enum name="IME_ACTION_PREVIOUS" value="4" />
            <enum name="IME_ACTION_SEARCH" value="5" />
            <enum name="IME_ACTION_SEND" value="6" />
            <enum name="IME_ACTION_UNSPECIFIED" value="7" />
        </attr>
    </declare-styleable>
</resources>

那么添加了这些属性之后要如何使用呢?如下图所示:

使用自定义属性.png

其中最重要的是要使用下面那句话,才能使用自定义的属性。(xmlns:app中的app命名可以任意)

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

三、在布局文件中已经使用了自定义的属性,那么我们现在要做的就是如何解析相关属性。所以我们回到EditTextPlus类中。

声明的成员变量.png

上图为类中声明的成员变量。

  • 在解析的时候我们通过 AttributeSet 来获得 TypeArray(注意: 必须要调用 recycle 方法进行回收)

  • 不同类型的属性使用不同的方法来获得,而且必须设置默认值,在用户没有设置属性的时候,使用默认值

  • 其中通过 typedArray.getDimension 方法得到的参数单位为像素(px)。在使用的时候要注意单位的转化,所以在设置默认值得时候,将 sp 转化为 px

  • edit_editor_option 和 edit_input_type 为枚举类型,在 attrs.xml 文件中声明了每个枚举对应的 value

具体解析自定义属性的代码如下:

private void initAttr(AttributeSet attrs) {
    Drawable background = getBackground();
    //当没有设置background时使用默认的background
    if (null == background) {
        setBackgroundResource(R.drawable.drawable_default_edittext_plus);
    }
    TypedArray typedArray = mContext.obtainStyledAttributes(attrs, R.styleable.EditTextPlus);
    //
    mEditTextSize = typedArray.getDimension(R.styleable.EditTextPlus_edit_text_size, sp2px(mEditTextSize));
    mEditHintText = typedArray.getString(R.styleable.EditTextPlus_edit_hint_text);
    if (TextUtils.isEmpty(mEditHintText)) {
        mEditHintText = "";
    }
    mEditTextColor = typedArray.getColor(R.styleable.EditTextPlus_edit_text_color,
            ContextCompat.getColor(mContext, R.color.EditTextPlusDefaultTextColor));
    mInputType = typedArray.getInt(R.styleable.EditTextPlus_edit_input_type, mInputType);
    mEditorOption = typedArray.getInt(R.styleable.EditTextPlus_edit_editor_option, mEditorOption);
    //
    mHeadTextSize = typedArray.getDimension(R.styleable.EditTextPlus_head_titile_text_size, sp2px(mHeadTextSize));
    mHeadText = typedArray.getString(R.styleable.EditTextPlus_head_title_text);
    if (TextUtils.isEmpty(mHeadText)) {
        mHeadText = "未设置";
    }
    mHeadTextColor = typedArray.getColor(R.styleable.EditTextPlus_head_title_text_color, mEditTextColor);
    //
    typedArray.recycle();
}

获取属性方法的调用顺序如下

构造方法以及initAttr 和 initView方法.png
  • 在一个参数构造方法中调用两个参数的构造方法,在两个参数的构造方法中调用三个参数的构造方法。这样子所有的构造方法都会经过三个参数的构造方法

  • 在构造方法中填充布局,调用 initAttr 得到各个属性的值,再调用 initView 设置对应属性的值。


四、既然设置自定义属性的值,并且属性都设置到相应的位置。最后一个问题,就是如何将自定义View中的事件传输出去,如:删除按钮的点击事件。

  • 在类中声明接口
public interface OnDeleteListener {
    void onDelete();
}
  • 在类中声明成员变量 onDeleteListener
声明接口的成员变量.png
  • 声明变量的 set 方法

    public void setOnDeleteListener(OnDeleteListener onDeleteListener) {
           this.onDeleteListener = onDeleteListener;
     }
    
  • 在 initView 中设置点击事件,并判断是否声明的 onDeleteListener 是否为空,不为空则调用接口中的方法

     ivDelete.setOnClickListener(new OnClickListener() {
          @Override
          public void onClick(View view) {
              etInput.setText("");
              if (mHasDeleteAnimator) {
              //为了实现在点击删除时,控件左右抖动的效果
                  EditTextPlus.this.animate().translationX(5).setInterpolator(new CycleInterpolator(3)).setDuration(500).start();
              }
              if (null != onDeleteListener) {
                  onDeleteListener.onDelete();
              }
          }
      });
    
  • 使用该接口的时候就相当于设置系统控件的点击事件一样,调用 setOnDeleteListener 方法。

自定义接口的使用.png

GitHub地址: EditextDemo

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

推荐阅读更多精彩内容