控件的外边框怎么做,不是内边框

转载请注明出处，谢谢：http://blog.youkuaiyun.com/harryweasley/article/details/46906681

提前声明：本篇博客是基于电视机顶盒的，全部操作是用遥控器。

先看下效果图，选中后，edittext有边框。

如果所示，当ui想让我们做出这样的效果，大家肯定都很容易的做的出来，直接改变背景，就可以了，如下所示：

layout中，editText加入background就可以了。

<EditText
            android:id="@+id/edittext_search"
            android:layout_width="@dimen/edit_text_width"
            android:layout_height="46dp"
            android:layout_marginLeft="@dimen/search_grid_left"
            android:layout_marginRight="@dimen/search_grid_left"
            android:layout_marginTop="@dimen/search_edittext_top"
            android:background="@drawable/background_edittext_selector"
            android:paddingLeft="10dp"
            android:textColor="@color/white"
            android:textSize="@dimen/text_detail_app_name" />

在res/drawable下，建立background_edittext_selector.xml文件，如下所示：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_focused="true"  android:drawable="@drawable/edittext_background"></item>

</selector>

在res/drawable下，edittext_background.xml文件如下所示：

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

    <!-- 内部颜色 -->
    <solid android:color="@color/edittext_bg" />
    <!-- 边缘线条颜色 -->
    <stroke android:width="3dp"
        android:color="@color/selected_bg" />
    <!-- 圆角的幅度 -->
    <corners android:radius="0dp" />

</shape>

这样就做出来效果了。

但是，但是，ui说，你这样做出来的是内边框，我想要的是外边框啊。

那么这应该怎么做呢，还是以上的思路。当editText没有焦点的时候，我们给他设置边缘线条宽度6dp，颜色不设置，当editText获取到焦点是，我们给他边缘线宽度设置为3dp，并且设置颜色。哈哈，这样就解决了。

 <EditText
            android:id="@+id/edittext_search"
            android:layout_width="@dimen/edit_text_width"
            android:layout_height="46dp"
            android:layout_marginLeft="@dimen/search_grid_left"
            android:layout_marginRight="@dimen/search_grid_left"
            android:layout_marginTop="@dimen/search_edittext_top"
            android:background="@drawable/background_edittext_selector"
            android:paddingLeft="10dp"
            android:textColor="@color/white"
            android:textSize="@dimen/text_detail_app_name" />

这里设置两个drawable，宽度和颜色的不同。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_focused="true"  android:drawable="@drawable/selected_edittext_background"></item>
    <item   android:drawable="@drawable/edittext_background"></item>

</selector>

edittext_background没有获取焦点的时候，边缘线条为6dp，并且不设置颜色。

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

    <!-- 内部颜色 -->
    <solid android:color="@color/edittext_bg" />
    <!-- 边缘线条颜色 -->
    <stroke android:width="6dp" />
    <!-- 圆角的幅度 -->
    <corners android:radius="0dp" />

</shape>

selected_edittext_background获取焦点后，如下所示：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <!-- 内部颜色 -->  
    <solid android:color="@color/edittext_bg" />  
    <!-- 边缘线条颜色 -->  
    <stroke  
        android:width="3dp"  
        android:color="@color/selected_bg" />  
    <!-- 圆角的幅度 -->  
    <corners  
        android:radius="0dp" />  

</shape>