Android Studio 之 TextView基础

 

•引言

　　在开始本节内容前，先要介绍下几个单位：

  • dp(dip) : device independent pixels(设备独立像素).
    • 不同设备有不同的显示效果,这个和设备硬件有关
    • 一般我们为了支持 WVGA、HVGA和QVGA 推荐使用这个，不依赖像素。
  • sp: scaled pixels(放大像素)
    • 主要用于字体显示 best for textsize 
  • px : pixels(像素)
    • 不同设备显示效果相同
    • 一般我们 HVGA 代表320x480像素，这个用的比较多

•属性介绍

  • id : 为TextView设置一个组件 id

    • 根据 id ，我们可以在 Java 代码中通过 findViewById() 的方法获取到该对象，然后进行相关属性的设置
    • 又或者使用 RelativeLayout 时，参考组件用的也是 id

  • layout_width : 组件的宽度

    • 一般写 wrap_content 或者 match_parent(fill_parent)
    • 前者是控件显示的内容多大，控件就多大，而后者会填满该控件所在的父容器
    • 也可以设置成特定的大小

  • layout_height : 组件的高度，内容同上

  • text : 设置显示的文本内容

    • 一般我们是把字符串写到 string.xml 文件中，然后通过 @string/xxx 取得对应的字符串内容

  • textSize : 字体大小，单位一般是用 sp

  • textColor : 设置字体颜色

    • 一般我们是把颜色写到 color.xml 文件中，然后通过 @color/xxx 取得对应的字符串内容

  • layout_gravity : 设置自身相当于父容器的对齐方式

  • maxLines : 设置文本框最多显示多少行字符

  • textStyle : 设置字体风格

    • 三个可选值 ：normal(无效果)，bold(加粗)，italic(斜体)
    • 多个取值中间可用 | 连接

  • ellipsize : 有多种取值

    • android:ellipsize = "end"　　    省略号在结尾
    • android:ellipsize = "start" 　　  省略号在开头
    • android:ellipsize = "middle"       省略号在中间
    • android:ellipsize = "marquee"    跑马灯（最好加一个约束android:singleline = "true"）

  • textScaleX：控制字体水平方向的缩放，默认值1.0f，值是float

  • lineSpacingExtra : 设置行间距

  • lineSpacingMultiplier : 设置行间距的倍数

  • singleLine : 设置自动换行，默认为 false

•常规属性

<?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:background="@color/white"
    android:gravity="center"
    android:orientation="vertical"
    android:padding="15dp">

    <TextView
        android:id="@+id/tv_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Android Studio Study"
        android:textColor="@color/black"
        android:textSize="20sp" />

</LinearLayout>

 

•运行效果

　　

•textStyle

<?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:background="@color/white"
    android:gravity="center"
    android:orientation="vertical"
    android:padding="15dp">

    <TextView
        android:id="@+id/tv_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Android Studio Study"
        android:textColor="@color/black"
        android:textSize="20sp"
        android:textStyle="bold|italic"/>

</LinearLayout>

 

•运行效果

　　

•带阴影的 TextView

　　涉及到的几个属性：

  • android:shadowColor : 设置阴影颜色,需要与 shadowRadius 一起使用
  • android:shadowRadius : 设置阴影的模糊程度，设为 0.1 就变成字体颜色了，建议使用 3.0
  • android:shadowDx : 设置阴影在水平方向的偏移，就是水平方向阴影开始的横坐标位置
  • android:shadowDy : 设置阴影在竖直方向的偏移，就是竖直方向阴影开始的纵坐标位置
<?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"
    android:orientation="vertical"
    android:padding="15dp">


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="带阴影的 TextView"
        android:textColor="@color/black"
        android:textSize="30sp"
        android:shadowColor="@color/gray"
        android:shadowDx="10.0"
        android:shadowDy="10.0"
        android:shadowRadius="3.0"/>

</LinearLayout>

 

•运行效果

　　

•带图片的 TextView

　　设置图片的核心其实就是 : drawableXxx；

　　可以设置四个方向的图片 : 

    • drawableTop(上)
    • drawableButtom(下)
    • drawableLeft(左)
    • drawableRight(右)

　　另外,你也可以使用 drawablePadding 来设置图片与文字间的间距。

<?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"
    android:orientation="vertical"
    android:padding="15dp">


    <TextView
        android:id="@+id/tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:drawableLeft="@drawable/apple"
        android:drawableTop="@drawable/apple"
        android:drawableRight="@drawable/apple"
        android:drawableBottom="@drawable/apple"
        android:drawablePadding="10dp"
        android:text="苹果"
        android:textSize="20sp" />


</LinearLayout>

 

•运行效果

　　

•调整图片大小

　　我们这样设置的 drawable 并不能在 XML 调整图片大小；

　　需要在通过 Java 代码来进行调整。

public class Test extends AppCompatActivity {

    private TextView mTv;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_test_menu);

        mTv = findViewById(R.id.tv);
        Drawable[] drawable = mTv.getCompoundDrawables();

        //drawable[0,1,2,3] 依次代表 : 左上右下
        drawable[1].setBounds(10, 0, 110, 100);
        mTv.setCompoundDrawables(drawable[0], drawable[1], drawable[2],drawable[3]);
    }
}

　　代码说明：

  • Drawable[] drawable = mTv.getCompoundDrawables( );

    • 获得四个不同方向上的图片资源
    • 数组元素依次是 : 左上右下的图片

  • drawable[1].setBounds(left , top, right, bottom);

    • 接着获得资源后，可以调用 setBounds 设置左上右下坐标点
    • 比如这里设置了代表的是 :长是从离文字最左边开始 10dp 处到 110dp 处
    • 宽是从文字上方0dp处往上延伸 100dp 处
    • 也就是说，长 = right-left ，宽 = bottom-top

  • mTv.setCompoundDrawables(drawable[0], drawable[1], drawable[2], drawable[3]);

    • 为 TextView 重新设置 drawable 数组
    • 没有图片可以用 null 代替

  • 另外，从上面看出我们也可以直接在 Java 代码中调用 setCompoundDrawables 为 TextView设置图片

•运行效果

　　

•使用autoLink属性识别链接类型

　　当文字中出现了 URL，E-Mail，电话号码，地图的时候；

　　我们可以通过设置autoLink属性；

　　当我们点击 文字中对应部分的文字，即可跳转至某默认 APP；

　　比如一串号码，点击后跳转至拨号界面！

<?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:orientation="vertical"
    android:gravity="center">

    <TextView
        android:id="@+id/tv_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="12345678910"
        android:textSize="20sp"
        android:autoLink="phone"
        />

    <TextView
        android:id="@+id/tv_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="12345678910"
        android:textSize="20sp"
        android:autoLink="all"
        />

</LinearLayout>

 

•运行效果

　　

•实现跑马灯效果

<?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:orientation="vertical"
    android:gravity="center"
    android:padding="10dp">

    <TextView
        android:id="@+id/tv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="18sp"
        android:singleLine="true"
        android:ellipsize="marquee"
        android:marqueeRepeatLimit="marquee_forever"
        android:focusable="true"
        android:focusableInTouchMode="true"
        android:text="Test Marguee,Test Marguee,Test Marguee,Test Marguee,Test Marguee"/>

</LinearLayout>

　　需要注意的是，设置的 Text 内容长度需要超出 layout_width 的长度才会滚动。

•运行效果

　　

•参考资料

　　[1] : 视频链接

　　[2] : 菜鸟教程

posted @ 2020-02-15 19:00  MElephant  阅读(828)  评论(0)  编辑  收藏  举报