Android 定制EditText 改變 底線顏色

Hugo.Wang 8年前發布 | 38K 次閱讀 Android開發 移動開發

來自： http://blog.csdn.net//never_cxb/article/details/47664111


項目需求

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

效果圖

默認的 EditText 底線顏色 是藍色的,

android默認的edittext效果

我們 想 實現 橙色的 效果

橙色的底線顏色

實現方法

準備兩個背景圖

一個作為 edittext 的默認背景 , 另一個作為 輸入時候的背景

Note

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

edittext_default.9.png

edittext_focused.9.png

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

<!-- drawable/edittext_shape.xml -->
<selector xmlns:android=";



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




</selector></pre> 
 
在 values 文件夾 下面的 styles.xml 新建一個style


此步驟是為了復用這個樣式, 也可以不用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></pre> 
 
在 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></pre> 
 
在 edittext 底部 加上一條 直線 ( 仿微信)


原生的效果是edittext底部是一個凹形的線，這樣不是很美觀。微信的輸入框下面是一條直線。如何實現呢？可以將上面的圖片改成直線型的，不過需要美工人員 PS 的幫忙。我們也可以利用 xml 文件來畫出圖形，完成所需的直線效果。
 edittext 底部加線
利用 xml 畫線
本來想利用xml 畫線, 做出微信 輸入框 的那種下面是一條直線.
發現純粹用 xml 不美觀, 這種還是讓美工做一個背景圖可能比較好
查看這篇博客
android利用xml實現分割線
edittext 去除邊框
 android:background="@null"
 
 
 
  
這個代碼可以去掉 edittext 的邊框


</blockquote>


edittext 底部加線
在 drawable 新建一個 line.xml
<shape xmlns:android="


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

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




</shape></pre> 
 
在 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" />
 </div>
 本文由用戶 Hugo.Wang 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

相關經驗

相關資訊

相關文檔