自定義View--登錄界面輸入框

效果展示

預(yù)覽界面.png
效果顯示

從圖中可以看出這次自定義View的效果产镐。具體功能如下:

  • 設(shè)置頭部文字的字體大小励堡、字體顏色鼻弧、文字內(nèi)容

  • 設(shè)置輸入框的字體大小涩哟、字體顏色、文字內(nèi)容添履、提示文字

開始自定義

一郁轻、 第一步先新建一個(gè)類名為EditTextPlus(可自己命名)繼承FrameLayout的文件泥兰,因?yàn)槲覀円獙?shí)現(xiàn)在布局文件中能是用自己的屬性庄涡,所以我們還要在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"

三忧风、在布局文件中已經(jīng)使用了自定義的屬性默色,那么我們現(xiàn)在要做的就是如何解析相關(guān)屬性。所以我們回到EditTextPlus類中狮腿。

聲明的成員變量.png

上圖為類中聲明的成員變量腿宰。

  • 在解析的時(shí)候我們通過 AttributeSet 來獲得 TypeArray(注意: 必須要調(diào)用 recycle 方法進(jìn)行回收)

  • 不同類型的屬性使用不同的方法來獲得,而且必須設(shè)置默認(rèn)值蚤霞,在用戶沒有設(shè)置屬性的時(shí)候,使用默認(rèn)值

  • 其中通過 typedArray.getDimension 方法得到的參數(shù)單位為像素(px)义钉。在使用的時(shí)候要注意單位的轉(zhuǎn)化昧绣,所以在設(shè)置默認(rèn)值得時(shí)候,將 sp 轉(zhuǎn)化為 px

  • edit_editor_option 和 edit_input_type 為枚舉類型捶闸,在 attrs.xml 文件中聲明了每個(gè)枚舉對應(yīng)的 value

具體解析自定義屬性的代碼如下:

private void initAttr(AttributeSet attrs) {
    Drawable background = getBackground();
    //當(dāng)沒有設(shè)置background時(shí)使用默認(rèn)的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 = "未設(shè)置";
    }
    mHeadTextColor = typedArray.getColor(R.styleable.EditTextPlus_head_title_text_color, mEditTextColor);
    //
    typedArray.recycle();
}

獲取屬性方法的調(diào)用順序如下

構(gòu)造方法以及initAttr 和 initView方法.png
  • 在一個(gè)參數(shù)構(gòu)造方法中調(diào)用兩個(gè)參數(shù)的構(gòu)造方法夜畴,在兩個(gè)參數(shù)的構(gòu)造方法中調(diào)用三個(gè)參數(shù)的構(gòu)造方法。這樣子所有的構(gòu)造方法都會(huì)經(jīng)過三個(gè)參數(shù)的構(gòu)造方法

  • 在構(gòu)造方法中填充布局删壮,調(diào)用 initAttr 得到各個(gè)屬性的值贪绘,再調(diào)用 initView 設(shè)置對應(yīng)屬性的值。


四央碟、既然設(shè)置自定義屬性的值税灌,并且屬性都設(shè)置到相應(yīng)的位置。最后一個(gè)問題亿虽,就是如何將自定義View中的事件傳輸出去菱涤,如:刪除按鈕的點(diǎn)擊事件。

  • 在類中聲明接口
public interface OnDeleteListener {
    void onDelete();
}
  • 在類中聲明成員變量 onDeleteListener
聲明接口的成員變量.png
  • 聲明變量的 set 方法

    public void setOnDeleteListener(OnDeleteListener onDeleteListener) {
           this.onDeleteListener = onDeleteListener;
     }
    
  • 在 initView 中設(shè)置點(diǎn)擊事件洛勉,并判斷是否聲明的 onDeleteListener 是否為空粘秆,不為空則調(diào)用接口中的方法

     ivDelete.setOnClickListener(new OnClickListener() {
          @Override
          public void onClick(View view) {
              etInput.setText("");
              if (mHasDeleteAnimator) {
              //為了實(shí)現(xiàn)在點(diǎn)擊刪除時(shí),控件左右抖動(dòng)的效果
                  EditTextPlus.this.animate().translationX(5).setInterpolator(new CycleInterpolator(3)).setDuration(500).start();
              }
              if (null != onDeleteListener) {
                  onDeleteListener.onDelete();
              }
          }
      });
    
  • 使用該接口的時(shí)候就相當(dāng)于設(shè)置系統(tǒng)控件的點(diǎn)擊事件一樣收毫,調(diào)用 setOnDeleteListener 方法攻走。

自定義接口的使用.png

GitHub地址: EditextDemo

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市此再,隨后出現(xiàn)的幾起案子昔搂,更是在濱河造成了極大的恐慌,老刑警劉巖输拇,帶你破解...
    沈念sama閱讀 222,729評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件巩趁,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)议慰,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評論 3 399
  • 文/潘曉璐 我一進(jìn)店門蠢古,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人别凹,你說我怎么就攤上這事草讶。” “怎么了炉菲?”我有些...
    開封第一講書人閱讀 169,461評論 0 362
  • 文/不壞的土叔 我叫張陵堕战,是天一觀的道長。 經(jīng)常有香客問我拍霜,道長嘱丢,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,135評論 1 300
  • 正文 為了忘掉前任祠饺,我火速辦了婚禮越驻,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘道偷。我一直安慰自己缀旁,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,130評論 6 398
  • 文/花漫 我一把揭開白布勺鸦。 她就那樣靜靜地躺著并巍,像睡著了一般。 火紅的嫁衣襯著肌膚如雪换途。 梳的紋絲不亂的頭發(fā)上懊渡,一...
    開封第一講書人閱讀 52,736評論 1 312
  • 那天,我揣著相機(jī)與錄音军拟,去河邊找鬼距贷。 笑死,一個(gè)胖子當(dāng)著我的面吹牛吻谋,可吹牛的內(nèi)容都是我干的忠蝗。 我是一名探鬼主播,決...
    沈念sama閱讀 41,179評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼漓拾,長吁一口氣:“原來是場噩夢啊……” “哼阁最!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起骇两,我...
    開封第一講書人閱讀 40,124評論 0 277
  • 序言:老撾萬榮一對情侶失蹤速种,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后低千,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體配阵,經(jīng)...
    沈念sama閱讀 46,657評論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡馏颂,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,723評論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了棋傍。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片救拉。...
    茶點(diǎn)故事閱讀 40,872評論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖瘫拣,靈堂內(nèi)的尸體忽然破棺而出亿絮,到底是詐尸還是另有隱情,我是刑警寧澤麸拄,帶...
    沈念sama閱讀 36,533評論 5 351
  • 正文 年R本政府宣布派昧,位于F島的核電站,受9級特大地震影響拢切,放射性物質(zhì)發(fā)生泄漏蒂萎。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,213評論 3 336
  • 文/蒙蒙 一淮椰、第九天 我趴在偏房一處隱蔽的房頂上張望五慈。 院中可真熱鬧,春花似錦实苞、人聲如沸豺撑。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,700評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至爷肝,卻和暖如春猾浦,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背灯抛。 一陣腳步聲響...
    開封第一講書人閱讀 33,819評論 1 274
  • 我被黑心中介騙來泰國打工金赦, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人对嚼。 一個(gè)月前我還...
    沈念sama閱讀 49,304評論 3 379
  • 正文 我出身青樓夹抗,卻偏偏與公主長得像,于是被迫代替她去往敵國和親纵竖。 傳聞我的和親對象是個(gè)殘疾皇子漠烧,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,876評論 2 361

推薦閱讀更多精彩內(nèi)容