1. 程式人生 > >Android——EditText自定義邊框、圓角和其常用屬性總結

Android——EditText自定義邊框、圓角和其常用屬性總結

看下效果圖:


執行步驟:
首先在/res/layout資料夾下建立custom_et_layout.xml佈局檔案,原始碼如下:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content" >
    <EditText
        android:id="@+id/alertDialog_et"
        android:background="@drawable/bg_edittext"
        android:paddingLeft="20dp"
        android:paddingRight="20dp"
        android:layout_marginTop="30dp"
        android:layout_marginLeft="25dp"
        android:layout_marginRight="30dp"
        android:layout_marginBottom="30dp"
        android:textColor="#008A00"
        android:maxLength="3"
        android:inputType="number"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="請輸入一個有效整數..."/>

</RelativeLayout>

屬性總結:

---------------------------------------------------------------------------------------------

id:控制元件的唯一標識,程式碼中通過id來找到控制元件


background:控制元件的背景,可以通過該屬性來自定義控制元件不同狀態下的外觀


padding:控制元件中文字內容距離控制元件邊框的距離。單位:dp


paddingLeft:文字到左邊框的距離


paddingRight文字到有邊框的距離


layout_marginTop:margin指控制元件之間的距離,top指該控制元件與它上方控制元件的間距


layout_marginLeft該控制元件與它左側控制元件的間距


layout_marginRight該控制元件與它右側控制元件的間距


layout_marginBottom該控制元件與它下方控制元件的間距


textColor文字顏色


maxLength文字最大長度,即字元個數


inputType輸入文字的型別,常用的有number:數字;phone:電話號碼;email:電子郵件


layout_width該控制元件的寬度


layout_height該控制元件的高度


hint:提示文字內容,在點選後自動消失

--------------------------------------------------------------------------------------------

再加上以下內容的渲染,才能得到一個有邊框、圓角的EditText。
步驟:
1.在/res/drawable下建立檔案bg_edittext_normal.xml,表示該文字框在常規情況下的樣子,內容如下:

<span style="font-size:18px;"><?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@android:color/transparent" />
    <corners android:radius="10dip"/>
    <stroke
        android:width="1dip"
        android:color="#BDC7D8" />
</shape></span>
2.在/res/drawable下建立檔案bg_edittext_focused.xml,表示該文字框在獲得焦點情況下的樣子,內容如下
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@android:color/transparent" />
    <corners android:radius="10dip"/>
    <stroke
        android:width="1dip"
        android:color="#728ea3" />
</shape>

shape中如果不通過android:shape來指定形狀時,預設是矩形,其中solid代表純色,corners代表角,radius越大,圓角越大,stroke代表邊框線

3.在/res/drawable下建立檔案bg_edittext.xml,在選擇器中應用以上編寫的兩個樣式,內容如下

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_window_focused="false"
        android:drawable="@drawable/bg_edittext_normal" />
    <item
        android:state_focused="true"
        android:drawable="@drawable/bg_edittext_focused" />
</selector>
最後在佈局檔案的指定控制元件中的android:background中應用該選擇器,例如android:background=“@drawable/bg_edittext

大功告成!