安卓常用控件 - 标签

发布于:2022-11-07 ⋅ 阅读:(372) ⋅ 点赞:(0)

一、继承关系图

  • TextView是View的子类
  • Button和EditText都是TextView的子类

二、 标签常用属性

属性 作用
text 标签文本内容
textColor 标签文本颜色
textSize 标签文本字号
textStyle 标签文本样式
autoLink 自动连接
background 背景
textAllCaps 字母全部大写
drawable Top 图片在上
drawableButton 图片在下
drawbaleLeft 图片在左
drawableRight 图片在右

三、 教学案例:标签演示

1、创建安卓应用

  • 基于 Empty Activity模板创建安卓应用 - TextViewDemo
    在这里插入图片描述
  • 单击【finish】按钮
    在这里插入图片描述

2、字符串资源文件

  • 字符串资源文件 - string.xml
    在这里插入图片描述
  • 更改内容
<resources>
    <string name="app_name">标签演示</string>
    <string name="normal">常规:Welcome to Android World</string>
    <string name="bold">粗体:Welcome to Android World</string>
    <string name="italic">斜体:Welcome to Android World</string>
    <string name="bold_italic">粗斜:Welcome to Android World</string>
    <string name="all_caps">全大写:Welcome to Android World</string>
    <string name="theorem">勾股定理:</string>
    <string name="equation">化学方程式:</string>
    <string name="android">安卓</string>
</resources>

3、自定义边框文件

  • drawable自定义边框配置文件 - custom_border.xml
    在这里插入图片描述
  • 编写参数
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <corners android:radius="5dp" /><!--圆角-->
    <solid android:color="#dddddd" /><!--填充色-->
    <stroke
        android:width="1dp"
        android:color="#555555" /><!--边界宽度及颜色-->

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

    <gradient
        android:centerColor="#ffff00"
        android:endColor="#00ff00"
        android:startColor="#aaaaaa" /><!--渐变色-->

</shape>

4、布局资源文件

  • activity_main.xml
    在这里插入图片描述
<?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="#000000"
    android:orientation="vertical"
    android:textStyle=""
    android:padding="10dp">

    <TextView
        android:id="@+id/tv_Normal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/normal"
        android:textColor="@android:color/holo_blue_bright"
        android:textSize="15sp"
        android:textStyle="normal" />

    <TextView
        android:id="@+id/tv_Bold"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/bold"
        android:textColor="@android:color/holo_green_light"
        android:textSize="15sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/tv_Italic"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/italic"
        android:textColor="@android:color/holo_orange_light"
        android:textSize="15sp"
        android:textStyle="italic" />

    <TextView
        android:id="@+id/tv_BoldItalic"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/bold_italic"
        android:textColor="@android:color/holo_purple"
        android:textSize="15sp"
        android:textStyle="bold|italic" />

    <!--分割线-->
    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_marginTop="5dp"
        android:layout_marginBottom="5dp"
        android:background="#aaaaaa" />

    <TextView
        android:id="@+id/tvAllCaps"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/all_caps"
        android:textAllCaps="true"
        android:textColor="#ffffff"
        android:textSize="15sp"
        android:textStyle="normal" />

    <TextView
        android:id="@+id/tv_Theorem"
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:gravity="center_vertical"
        android:layout_marginTop="10dp"
        android:text="@string/theorem"
        android:textColor="@android:color/holo_red_light"
        android:textSize="20sp" />

    <TextView
        android:id="@+id/tv_Equation"
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:layout_marginTop="10dp"
        android:gravity="center_vertical"
        android:text="@string/equation"
        android:textColor="@android:color/holo_green_dark"
        android:textSize="20sp" />

    <!-- 分隔线 -->
    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_marginTop="5dp"
        android:layout_marginBottom="5dp"
        android:background="#aaaaaa" />

    <TextView
        android:id="@+id/tv_Web"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:autoLink="web"
        android:text="网址:http://www.baidu.com"
        android:textColor="@android:color/holo_orange_light"
        android:textSize="15sp" />

    <TextView
        android:id="@+id/tv_Email"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:autoLink="email"
        android:text="邮箱:maths007@163.com"
        android:textColor="@android:color/holo_green_light"
        android:textSize="15sp" />

    <TextView
        android:id="@+id/tv_Phone"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:autoLink="phone"
        android:text="电话:15892921170"
        android:textColor="@android:color/holo_red_light"
        android:textSize="15sp" />

    <!-- 分隔线 -->
    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_marginTop="5dp"
        android:layout_marginBottom="5dp"
        android:background="#aaaaaa" />

    <TextView
        android:id="@+id/tv_BorderedText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:background="@drawable/custom_border"
        android:text="带边框的文本:永不放弃的梦想"
        android:textColor="#ff0000"
        android:textSize="15sp" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="160dp"
        android:orientation="horizontal"
        android:gravity="center">

        <!--图片标签-->
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:drawableLeft="@mipmap/ic_launcher"
            android:gravity="center"
            android:text="@string/android"
            android:layout_marginRight="10dp"
            android:textColor="#ffffff"
            android:textSize="18sp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:drawableTop="@mipmap/ic_launcher"
            android:gravity="center"
            android:text="@string/android"
            android:layout_marginRight="10dp"
            android:textColor="#ffffff"
            android:textSize="18sp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:drawableBottom="@mipmap/ic_launcher"
            android:gravity="center"
            android:text="@string/android"
            android:layout_marginRight="10dp"
            android:textColor="#ffffff"
            android:textSize="18sp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:drawableRight="@mipmap/ic_launcher"
            android:gravity="center"
            android:text="@string/android"
            android:textColor="#ffffff"
            android:textSize="18sp" />
    </LinearLayout>
</LinearLayout>

  • 查看预览效果
    在这里插入图片描述

5、主界面类

  • 主界面类 - MainActivity
    在这里插入图片描述
  • 声明变量
    在这里插入图片描述
  • 通过资源标识符获取控件实例
    在这里插入图片描述
  • 显示勾股定理
    在这里插入图片描述
  • 显示化学方程式
    在这里插入图片描述
  • 查看完整代码
package net.xyx.textview;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.text.Html;
import android.widget.TextView;

import org.w3c.dom.Text;

public class MainActivity extends AppCompatActivity {

    private TextView tvTheorem;
    private TextView tvEquation;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //利用布局资源文件设置用户界面
        setContentView(R.layout.activity_main);
        //通过资源标识符获取控件实例
        tvTheorem = findViewById(R.id.tv_Theorem);
        tvEquation = findViewById(R.id.tv_Equation);
        //显示勾股定理
        tvTheorem.setText(Html.fromHtml("勾股定理:a<sup>2</sup> + b <sup>2</sup> = c<sup>2</sup>"));
        //显示化学方程式
        tvEquation.setText(Html.fromHtml("化学方程式:2H<sub>2</sub> + O<sub>2</sub> = 2H<sub>2</sub>O"));
    }
}

6、启动应用,查看效果

在这里插入图片描述

本文含有隐藏内容,请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到