上一章节我们学习了如何给 TextView (文本框) 的文字添加阴影效果，如果我们想给 TextView 加上边框有没有办法呢？

TextView 的边框

TextView 没有提供任何属性用来添加边框效果，不过提供了另外的变通方法来加边框

想为 TextView 或者子控件设置一个边框背景，普通矩形边框或者圆角边框，可以先写 ShapeDrawable 的资源文件，然后使用 android:background 属性将该资源添加为背景

shapeDrawable 资源文件

我们下来看看 shapeDrawable 资源文件的节点和属性

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

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

    <stroke 
        android:width="2px" 
        android:color="@color/black"/> 

    <padding
        android:left="5dp"
        android:top="5dp"
        android:right="5dp"
        android:bottom="5dp" />  

    <corners android:topLeftRadius="10px" /> 

    <gradient
            android:angle="270"
            android:endColor="@color/green"
            android:startColor="@color/blue" />  


</shape>

<solid android:color = "xxx" /> 设置背景颜色

<stroke android:width = "xdp" android:color="xxx" /> 设置边框的粗细以及边框颜色

<padding android:bottom = "xdp" /> 设置边距

<corners android:topLeftRadius="10px" /> 设置圆角弧度

<gradient> 设置渐变色，可选属性有

范例

我们写一个范例来演示下这些基础属性

1. 创建一个 空的 Android 项目 cn.twle.android.TextView

2. 修改 res/values/strings.xml 为添加几个字符串

   <?xml version="1.0" encoding="utf-8" ?>
   <resources>
       <string name="app_name">TextView</string>
       <string name="hello">矩形边框的 TextView</string>
       <string name="corner">圆角边框的 TextView</string>
   </resources>
   

3. 修改 res/values/colors.xml 添加几个颜色

   <?xml version="1.0" encoding="utf-8" ?>
   <resources>
       <color name="colorPrimary">#3F51B5</color>
       <color name="colorPrimaryDark">#303f9f</color>
       <color name="colorAccent">#FF4081</color>
   
       <color name="red">#ff0000</color>
       <color name="green">#00ff00</color>
       <color name="blue">#0000ff</color>
       <color name="white">#ffffff</color>
       <color name="black">#000000</color>
   
       <color name="c333333">#333333</color>
       <color name="c87CEEB">#87CEEB</color>
       <color name="dddddd">#dddddd</color>
   
       <color name="e2b0ff">#e2b0ff</color>
       <color name="c9f44d3">#9f44d3</color>
       <color name="c000dff">#000dff</color>
   </resources>
   

4. 在 res/drawable 目录下创建文件 txt_rectborder.xml 用于矩形边框的 Drawable

   <?xml version="1.0" encoding="utf-8"?>
   <shape xmlns:android="http://schemas.android.com/apk/res/android" >
   
       <!-- 设置一个边框 -->
       <stroke android:width="2px" android:color="@color/c000dff"/>
   
       <!-- 渐变 -->
       <gradient
           android:angle="270"
           android:endColor="@color/red"
           android:startColor="color/green" />
   
       <!-- 设置一下边距,让空间大一点 -->
   
       <padding
           android:left="5dp"
           android:top="5dp"
           android:right="5dp"
           android:bottom="5dp"/>
   
   </shape>
   

5. 在 res/drawable 目录下创建文件 txt_radiuborder.xml 用于圆角矩形边框的 Drawable

   <?xml version="1.0" encoding="utf-8"?>
   <shape xmlns:android="http://schemas.android.com/apk/res/android">
   
       <!-- 设置透明背景色 -->
       <solid android:color="@color/c87CEEB" />
   
       <!-- 设置一个边框 -->
       <stroke
           android:width="2px"
           android:color="@color/c000dff" />
   
       <!-- 设置四个圆角的半径 -->
       <corners
           android:bottomLeftRadius="10px"
           android:bottomRightRadius="10px"
           android:topLeftRadius="10px"
           android:topRightRadius="10px" />
   
       <!-- 设置一下边距,让空间大一点 -->
       <padding
           android:bottom="5dp"
           android:left="5dp"
           android:right="5dp"
           android:top="5dp" />   
   </shape>
   

6. 修改 activity_main.xml 文件，将 TextView 的 blackground 属性设置成上面这两个 Drawable

   <?xml version="1.0" encoding="utf-8"?>
   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:tools="http://schemas.android.com/tools"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:background="@color/white"
       android:gravity="center"
       android:orientation="vertical"
       tools:context=".MainActivity">
   
       <TextView
           android:id="@+id/txtOne"
           android:layout_width="200dp"
           android:layout_height="64dp"
           android:textSize="18sp"
           android:gravity="center"
           android:background="@drawable/txt_rectborder"
           android:text="@string/hello" />
   
       <TextView
           android:id="@+id/txtTwo"
           android:layout_width="200dp"
           android:layout_height="64dp"
           android:layout_marginTop="10dp"
           android:textSize="18sp"
           android:gravity="center"
           android:background="@drawable/txt_radiuborder"
           android:text="@string/corner" />
   </LinearLayout>
   

运行 APP 显示如下

参考文档

1. TextView API