TextView(文本框)详解文字跑马灯效果

简介

TextView是Android中最常见的控件之一，常用来显示一段文本。TextView继承于View，我们经常在xml布局文件中对TextView属性进行设置，本文我们将对TextView的常用属性进行讲解。如果想了解更多，也可以查阅官方文档，TextView

常用属性

id ：设置控件的id 用于java代码中找到该控件
layout_width ：控件的宽度常用值 match_parent(填充父容器) wrap_content(包裹内容)
layout_height ：控件的高度常用值 match_parent(填充父容器) wrap_content(包裹内容)
text ：文本内容（建议使用@string/xxx的形式设置）
background : 背景填充（使用背景颜色或drawable资源）
textColor textSize textStyle：字体颜色字体大小字体样式
gravity ：字体或内容的对齐方式
layout_gravity ：控件的对齐方式

效果预览

现在我们使用相关属性实现一些TextView的效果，预览图如下：

textview.gif

基础样式

我们在布局文件中添加一个TextView控件

<TextView
            android:id="@+id/tv_style"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:paddingHorizontal="16dp"
            android:text="示例文本 example"
            android:layout_gravity="center_horizontal"
            android:textColor="#00FA9A"
            android:textSize="16sp"
            android:textStyle="italic|bold"/>

设置字体颜色中绿色：textColor="#00FA9A"
设置字体大小16sp：textSize="16sp"
设置字体形状斜体加粗：textStyle="italic|bold"

背景边框

<TextView
            android:id="@+id/tv_background"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:paddingHorizontal="16dp"
            android:text="示例文本 example"
            android:layout_gravity="center_horizontal"
            android:textColor="#DC143C"
            android:textSize="16dp"
            android:background="@drawable/textview_background"/>

设置控件背景：background="@drawable/textview_background"

background属性可以为控件添加背景，其值既可以是颜色值，也可以是drawable资源。上面我们使用了drawable，并设置了边框，drawable代码如下

textview_background.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 实心 -->
    <solid android:color="#FFFFFF"/>
    <!-- 边框 -->
    <stroke
        android:width="0.5dp"
        android:color="#FFA500"/>
    <!-- 圆角 -->
    <corners android:radius="3dp"/>
    <!-- 边距 -->
    <padding
        android:top="2dp"
        android:bottom="2dp"
        android:left="6dp"
        android:right="6dp"/>
</shape>

背景渐变

我们可以通过修改上面的drawable实现渐变色背景
textview_gradient_background.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:startColor="#FFA500"
        android:endColor="#FF00FF"
        android:angle="360"
        android:centerX="0.5"
        android:centerY="0.5"/>
    <corners
        android:radius="3dp"/>
</shape>

设置背景：background="@drawable/textview_gradient_background"

字体渐变

以下代码实现文本渐变

<TextView
            android:id="@+id/tv_text_gradient"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:paddingHorizontal="16sp"
            android:text="示例文本 example"
            android:layout_gravity="center_horizontal"
            android:textSize="16dp" />

Java

TextView textGradient = (TextView)findViewById(R.id.tv_text_gradient);//找到控件
LinearGradient mLinearGradient = new LinearGradient(0, 0,
   tv_text_gradient.getPaint().getTextSize()* tv_text_gradient.getText().length(),0, 
   Color.parseColor("#FFFF68FF"), 
   Color.parseColor("#FFFED732"),
   Shader.TileMode.CLAMP);//创建线性渐变
   textGradient.getPaint().setShader(mLinearGradient);//设置渐变色
   textGradient.invalidate();

文字跑马灯

<TextView
            android:id="@+id/tv_marquee"
            android:layout_width="220dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="10dp"
            android:background="@drawable/textview_background"
            android:ellipsize="marquee"
            android:scrollHorizontally="true"
            android:marqueeRepeatLimit="marquee_forever"
            android:paddingHorizontal="16dp"
            android:text="当那繁华落尽，剩下的是满地忧伤。"
            android:textColor="@color/crimson"
            android:textSize="16dp"
            android:singleLine="true" />

Java

TextView textView_marquee = (TextView)findViewById(R.id.tv_marquee);
        textView_marquee.setFocusable(true);
        textView_marquee.setSelected(true);
        textView_marquee.setFocusableInTouchMode(true);

想实现文字跑马灯，需要设置如下属性，如果实现不了，可能是缺少了某个属性。marqueeRepeatLimit="marquee_forever"属性控制循环次数

ellipsize="marquee"
scrollHorizontally="true"
marqueeRepeatLimit="marquee_forever"
singleLine="true"
focusable="true"
focusableInTouchMode="true"
textView_marquee.setSelected(true);（Java）

文本环绕图片

单个TextView环绕图片通过drawableXxx很容易实现，当然也可以通过ImageView实现，这里就先不讲了。

TextView
            android:id="@+id/tv_image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:paddingHorizontal="16dp"
            android:text="示例文本"
            android:layout_gravity="center_horizontal"
            android:textSize="16sp"
            android:drawableTop="@mipmap/ic_launcher"
            android:drawableRight="@mipmap/ic_launcher"/>

上环绕drawableTop="@mipmap/ic_launcher"
右环绕drawableRight="@mipmap/ic_launcher"
底环绕drawableBottom="@mipmap/ic_launcher"
左环绕drawableLeft="@mipmap/ic_launcher"

结束语

本文讲解了TextView的一些简单应用，希望能帮到你。如果发现有什么错误的地方，欢迎留言指出，谢谢阅读。

TextView(文本框)详解 文字跑马灯效果

简介