Android定制自己的EditText輕松改變底線顏色

更新時間：2015年12月30日 14:57:02 投稿：lijiao

這篇文章主要介紹了Android如何定制自己的EditText，如何輕松改變底線顏色，感興趣的小伙伴們可以參考一下

最近做 android 項目遇到這個問題，為了保持 app 風(fēng)格一致，需要將原生的EditText底線顏色改成橙色。網(wǎng)上搜了一些解決方案，特此記錄總結(jié)一下。

效果圖

默認(rèn)的EditText底線顏色是藍(lán)色的,

我們想實現(xiàn)橙色的效果

實現(xiàn)方法

1、準(zhǔn)備兩個背景圖

一個作為 edittext 的默認(rèn)背景 , 另一個作為輸入時候的背景

Note

使用 9.png, 不要用png, 否則圖片會模糊, 花掉

在文件夾 drawable 用selector 建立一個xml 文件

<!-- drawable/edittext_shape.xml -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">

 <item android:drawable="@drawable/edittext_default" android:state_focused="false"/>
 <item android:drawable="@drawable/edittext_focused" android:state_focused="true"/>

</selector>

在 values 文件夾下面的 styles.xml 新建一個style

此步驟是為了復(fù)用這個樣式, 也可以不用style, 直接在 layout里的布局 xml 里寫代碼

<!-- drawable/values/styles.xml -->

<style name="SmsEditText">
 <item name="android:layout_marginLeft">20dp</item>
 <item name="android:layout_marginRight">20dp</item>
 <item name="android:layout_marginTop">20dp</item>
 <item name="android:layout_width">match_parent</item>
 <item name="android:layout_height">wrap_content</item>
 <item name="android:textSize">16sp</item>
 <item name="android:background">@drawable/edittext_shape</item>
</style>

在layout的布局文件中引用定制的edittext

<!-- drawable/layout/fragment_bomb.xml -->
<LinearLayout
 android:id="@+id/input"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical"
 android:padding="20dp" >

 <EditText
  android:id="@+id/phone"
  style="@style/SmsEditText"
  android:hint="@string/phone_hint"
  android:inputType="phone"
  android:maxLength="11"
  android:maxLines="1" />

 <EditText
  android:id="@+id/times"
  style="@style/SmsEditText"
  android:hint="@string/times_hint"
  android:inputType="number"
  android:maxLines="1" />
</LinearLayout>

在edittext 底部加上一條直線( 仿微信)

原生的效果是edittext底部是一個凹形的線，這樣不是很美觀。微信的輸入框下面是一條直線。如何實現(xiàn)呢？可以將上面的圖片改成直線型的，不過需要美工人員 PS 的幫忙。我們也可以利用 xml 文件來畫出圖形，完成所需的直線效果。

利用xml 畫線

本來想利用xml 畫線, 做出微信輸入框的那種下面是一條直線，發(fā)現(xiàn)純粹用xml不美觀, 這種還是讓美工做一個背景圖可能比較好。

查看這篇文章：android利用xml實現(xiàn)分割線

edittext 去除邊框

android:background="@null"

這個代碼可以去掉 edittext 的邊框
edittext 底部加線

在drawable 新建一個 line.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >

 <solid android:color="@color/orange_normal" />

 <size
  android:height="1dp"
  android:width="1000dp" />

</shape>

在layout 的布局文件中引用

<EditText
  android:id="@+id/phone"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:background="@null"
  android:drawableBottom="@drawable/line"
  android:hint="@string/phone_hint"
  android:inputType="phone"
  android:maxLength="11"
  android:maxLines="1" />

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助。

您可能感興趣的文章: