Android 通过Drawable资源自定义编辑框

今天回家有些晚（应该说是昨天，已过零点），但是为了坚定的落实我的计划，补上昨天的。

本文参考资料：1.《疯狂Android 讲义》第六章：Android应用的资源

                         2. ShapeDrawable的应用

效果：

分别为系统默认效果（不同的系统版本不同）、自定义1、自定义2

        系统默认的编辑框是矩形的，没有圆角效果，填充为白色完全不透明，当获得焦点时，边框变为橙色。除了可以通过android:background设置填充背景外，其它属性不能直接通过xml配置文件设置。而且不同的系统版本也不相同，我们需要统一风格，就需要自定义样式。市面上多数软件的编辑框都是自定义过的。

        上图是我自定义的编辑框2，边框为圆角矩形，当获得焦点时边框变为清新的绿色。

        编辑框3，背景填充为半透明的红色，获取焦点时文字为亮白色，失去焦点时文字变为灰色。

方法：

        1.通过ShapeDrawable资源定义形状，shape有四种选择：rectangle、oval、line、ring（矩形、椭圆、线、环）需要先定义形状，在通过background将shape附给组件。

ShapeDrawable的几个标签:

         solid（内填充）、stroke（外边框）、padding（内容间距）、corners（圆角半径）、 gradient（渐变）、       size（大小）

        2.通过StateListDrawable资源设置当组建处于不同状态时的不同布局，android：state_XXX表示一个特定的状                态，每个状态有true和false属性。

           先定义selector的item选项，再在组件的合适地方使用。

android:state_active	是否处于激活状态
android:state_checkable	可勾选
android:state_checked	已勾选
android:state_enable	可用
android:state_first	开始
android:state_focused	已得到焦点
android:state_last	结束
android:state_middle	中间
android:state_pressed	已被按下
android:state_selected	已被选中
android:state_window_focused	窗口已得到焦点

代码：

(下载地址：http://download.csdn.net/detail/chiyiw/7754705 )

1.MainActivity。（不修改）

2.res/layout/activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/bg2"
    android:orientation="vertical"
    tools:context="org.wp.myview02_edittext.MainActivity" >

    <EditText
        android:id="@+id/edit1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="编辑文本框1" />

    <EditText
        android:id="@+id/edit2"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_margin="3dp"
        
        android:background="@drawable/my_selector1"
        
        android:text="编辑文本框2" />

    <EditText
        android:id="@+id/edit3"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_margin="3dp"
        
        android:background="@drawable/my_shape1"
        android:textColor="@drawable/my_selector2" 

        android:text="编辑文本框3" />
</LinearLayout>

3.res/drawable-mdpi/my_shape1

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <!-- 设置内填充颜色为半透明的颜色 -->
    <!-- 颜色值为4个参数时，分别表示alpha、red、green、blue -->
    <solid android:color="#60E04343" />

    <!-- 内容间距 -->
    <padding
        android:bottom="7dp"
        android:left="7dp"
        android:right="7dp"
        android:top="7dp" />

    <!-- 圆角半径 -->
    <corners android:radius="4dp" />

</shape>

4.res/res/drawable-mdpi/my_shape4_2

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <!-- 设置内填充颜色  -->
    <solid android:color="#FFF" />

    <!-- 设置外边框宽度和颜色 -->
    <stroke
        android:width="1.5dp"
        android:color="#3FD335" />
    
	<!-- 设置内容与边框的间距 -->
    <padding
        android:bottom="7dp"
        android:left="7dp"
        android:right="7dp"
        android:top="7dp" />
	
    <!-- 设置圆角矩形效果圆角半径 -->
    <corners android:radius="4dp" />
</shape>

5.res/drawable-mdpi/my_shape4

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <solid android:color="#FFF" />

    <stroke
        android:width=".8dp"
        android:color="#C4C3FD" />

    <padding
        android:bottom="7dp"
        android:left="7dp"
        android:right="7dp"
        android:top="7dp" />
    
    <corners android:radius="3dp"/>
</shape>

6.res/drawable-mdpi/my_selector1

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- 当组件为选中状态时，使用my_shape4_2布局 -->
    <item android:state_focused="true" android:drawable="@drawable/my_shape4_2"/>
    
    <!-- 当组件为未选中状态时，使用my_shape4布局 -->
    <item android:state_focused="false" android:drawable="@drawable/my_shape4"/>

</selector>

7.res/drawable-mdpi/my_selector2

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- 当组件为选中状态时，使用颜色为白色 -->
    <item android:color="#FFF" android:state_focused="true"/>
    
    <!-- 当组件为选中状态时，使用颜色为灰色 -->
    <item android:color="#C4C4CE" android:state_focused="false"/>

</selector>

结语：

        使用Drawable资源可以制作出不同风格样式的组件，不限于编辑框，可以任意发挥自己的创意，使界面更加有特色，更加美观。

        Android中的资源使用十分有用，官方建议所有资源都通过注册后使用，比如我们在使用android:text="text"时就会有警告，建议现在string.xml中定义，再通过@string/id来使用。其它资源同理，资源的使用很灵活，使用style.xml

等可以统一整体风格，提高编程效率。

        同时，资源也是可以继承的，如

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- 定义一个样式，指定字体大小、字体颜色 -->
    <style name="style1">
        <item name="android:textSize">20sp</item>
        <item name="android:textColor">#00d</item>
    </style>
    <!-- 定义一个样式，继承前一个颜色 -->
    <style name="style2" parent="@style/style1">
        <item name="android:background">#ee6</item>
        <item name="android:padding">8dp</item>
        <!-- 覆盖父样式指定的属性 -->
        <item name="android:textColor">#000</item>
    </style>

</resources>

继承的关键字为parent，继承的规则与其它语言一直，也遵循同名覆盖原则。