Android TextView 文本框

上一章节我们学习了如何给 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> 设置渐变色,可选属性有

属性 说明
startColor 起始颜色
endColor 结束颜色
centerColor 中间颜色
angle 方向角度
angle =0 从左到右,然后逆时针方向转
angle = 90 时从下往上
type 设置渐变的类型

范例

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

  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

Android 基础教程

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2022 简单教程 twle.cn All Rights Reserved.