【8】Android UI控件 - TextView

目录

前言

基础应用

进阶

阴影效果

字距&行距

自动换行

跑马灯

文字+icon

识别链接类型

编写drawable资源文件

---

前言

前面学了Android的五大基本布局，在安卓API文档还发现了其他布局。

诸如：PercentRelativeLayout ,CoordinatorLayout , DrawerLayout...

我们可暂做了解，当有实际使用需求的时候再进行进一步的学习。

下面直接快马加鞭进入UI控件 - TextView 的学习。

基础应用

相关属性

id：为TextView设置一个组件id，可在Java代码中通过 findViewById() 方法获取到该对象，前面我们使用相对布局（RelativeLayout）时，参考组件即设置为id。

layout_width / layout_height：组件的宽度/高度，一般设置为 "wrap_content" (大小刚好足够显示当前控件里的内容)、"match_parent (fill_parent)"（填满该控件所在的父容器） ；当然也可以直接设置具体的值。

gravity：设置控件中内容的对齐方向。

text：设置显示的文本内容。

textColor：设置字体颜色。

textStyle：设置字体风格，可设置为 "normal"(无效果)， "bold"(加粗)， "italic"(斜体)

textSize：字体大小，单位一般是用 sp 。

background：控件的背景颜色，可以理解为填充整个控件的颜色，也可以设置图片填充。

示例

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">

    <TextView
        android:id="@+id/text1"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:background="#000000"
        android:gravity="center"
        android:text="Text - test"
        android:textColor="#00f00f"
        android:textSize="40sp"
        android:textStyle="bold|italic" />

</LinearLayout>

效果图

进阶

阴影效果

相关属性

shadowColor:设置阴影颜色,需与shadowRadius搭配使用。

shadowRadius:设置阴影的模糊程度。

shadowDx:设置阴影在水平方向的偏移。

hadowDy:设置阴影在竖直方向的偏移。

示例

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:tools="http://schemas.android.com/tools"
    android:gravity="center"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/text1"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:gravity="center"
        android:shadowColor="#CA1B1B"
        android:shadowDx="10.0"
        android:shadowDy="10.0"
        android:shadowRadius="2.0"
        android:text="Text - test"
        android:textColor="#03A9F4"
        android:textSize="40sp"
        android:textStyle="bold|italic" />
    
</LinearLayout>

效果图

字距&行距

相关属性

textScaleX：控制字体水平方向的缩放。

lineSpacingExtra：设置行间距，通常采用 dp为单位。

lineSpacingMultiplier：设置行间距的倍数。

示例

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context=".MainActivity">

    <TextView
    android:layout_width="100dp"
    android:layout_height="wrap_content"
    android:text="原字距"/>

    <TextView
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:textScaleX="1.5"
        android:text="字距放大"/>

    <TextView
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:textScaleX="0.5"
        android:text="字距缩小"/>

    <TextView
        android:layout_width="100dp"
        android:layout_height="wrap_content" />

    <TextView
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:text="原行距    原行距    原行距    原行距    原行距"/>

    <TextView
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:lineSpacingExtra = "10dp"
        android:text="行距为10           行距为10"/>

    <TextView
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:lineSpacingMultiplier = "2.0"
        android:text="行距倍数2.0     行距倍数2.0"/>

</LinearLayout>

效果

自动换行

相关属性

singleLine：默认为 false，即自动换行模式；如需要一行显示完，则需要设置为 true

当singleLine设置为 true 的时候，我们还可以通过 ellipsize 进行进一步设置

ellipsize = "end"          省略号在结尾
ellipsize = "start"         省略号在开头
ellipsize = "middle"     省略号在中间
ellipsize = "marquee"  跑马灯

示例

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:singleLine = "true"
        android:text="换行关闭  换行关闭  "/>

    <TextView
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:singleLine = "false"
        android:text="自动换行  自动换行"/>

</LinearLayout>

效果图

跑马灯

相关属性

注意：部分属性前面 自动换行 部分已介绍，不再重复

marqueeReatLimit ：滚动次数，设置 marquee_forever （永久滚动）

focusable：设置为ture，允许获得焦点

focusableInTouchMode：设置为ture，可以通过触摸获取焦点。

示例

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:singleLine="true"
        android:ellipsize="marquee"
        android:marqueeRepeatLimit="marquee_forever"
        android:focusable="true"
        android:focusableInTouchMode="true"
        android:text="下雨天留客天留我不留 下雨天留客天留我不留 下雨天留客天留我不留"/>

</LinearLayout>

效果图

文字+icon

相关属性

drawableTop：可绘制到文本上方的图
drawableButtom：可绘制到文本下方的图
drawableLeft：可绘制到文本左侧的图
drawableRight：可绘制到文本右侧的图
drawablePadding：设置图片与文字间的间距

TextView的各种间距

示例

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:drawableTop="@drawable/top"
        android:drawableLeft="@drawable/left"
        android:drawableRight="@drawable/right"
        android:drawableBottom="@drawable/botton"
        android:gravity="center"
        android:drawablePadding="4dp"
        android:text="正在搬砖的你" />

</LinearLayout>

效果图

识别链接类型

相关属性

autoLink：取值如下

none                        无，默认

all                            匹配所有可用类型

email                       匹配邮箱

map                         匹配地理位置

phone                     匹配电话号码手机

webControls          匹配Web URL

示例

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context=".MainActivity">


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:autoLink="web"
        android:gravity="center"
        android:text="www.baidu.com" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:autoLink="email"
        android:gravity="center"
        android:text="email@163.com" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:autoLink="phone"
        android:gravity="center"
        android:text="10086" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:autoLink="map"
        android:gravity="center"
        android:text="1600 Amphitheatre Parkway, Mountain View, CA 94043" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:autoLink="all"
        android:gravity="center"
        android:text="www.baidu.com all@163.com  10086" />
    
</LinearLayout>

效果

编写drawable资源文件

步骤

创建 drawable 文件，root element 记得选择 shape

编写相关设置后，设置为 background 即可生效。

        android:background="@drawable/test_1"

部分相关属性

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

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

<padding androidL:bottom = "xdp"...>                                                 设置边距

<corners android:topLeftRadius="10px"...>                                         设置圆角

<gradient>                                                                                           设置渐变色

startColor:起始颜色

endColor:结束颜色

centerColor:中间颜色

angle:方向角度,等于0时,从左到右,然后逆时针方向转,当angle = 90度时从下往上

type:设置渐变的类型

示例

test_1.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
   
    <!-- 边框 -->
    <stroke android:width="10px" android:color="#0ff0f0"/>

    <!-- 渐变色 -->
    <gradient
        android:angle="270"
        android:endColor="#ffffff"
        android:startColor="#000000" />

    <!-- 弧边 -->
    <corners
        android:bottomLeftRadius="50px"
        android:bottomRightRadius="50px"
        android:topLeftRadius="50px"
        android:topRightRadius="50px" />

    <!-- 边距 -->
    <padding
        android:left="10dp"
        android:top="10dp"
        android:right="10dp"
        android:bottom="10dp"/>
</shape>

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="200dp"
        android:layout_height="300dp"
        android:background="@drawable/test_1"
        android:gravity="center"
        android:text="天黑黑欲下雨" />

</LinearLayout>

效果图

关于shape更详细的教程可戳