Android02之TextView和Button

上一次我们对常用的两种布局方式——线性布局和相对布局进行了详细的讲解，相信大家也对基础的知识有了大概的认知。这一次我们讲解最常用的两种组件TextView和Button。这一次讲解的内容会比上次的内容更多，并且是建立在上一次的基础之上。不清楚布局方式的可以查看我的上一篇博客，链接为https://blog.csdn.net/chenpeixing361/article/details/89028954。

TextView

TextView从字面义理解为文本视图。这里我们主要讲解以下用法：①文字大小、颜色；②当文字显示不下如何处理；③文字+图标；④设置中划线、下划线；⑤跑马灯设计。该项目树目录如下图所示：

我们这里先展示MainActivity的代码，该代码主要作用是实现主界面两个按钮的界面跳转功能，通过Intent组件实现，如下:

package com.autumn;

import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Button button = findViewById(R.id.btn_textview);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //跳转到TextViewActivity界面
                Intent intent = new Intent(MainActivity.this,TextViewActivity.class);
                startActivity(intent);
            }
        });

        Button button1 = findViewById(R.id.btn_button);
        button1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //跳转到ButtonActivity界面
                Intent intent = new Intent(MainActivity.this,ButtonActivity.class);
                startActivity(intent);
            }
        });
    }
}

activity_main.xml文件代码如下所示：

在res/values中，strings.xml文件主要用来存放文本信息，本次练习用到的所有文本代码如下所示：

    Hello,world!
    TextView
    Button
    autumn_leaf
    落叶知秋落叶知秋落叶知秋落叶知秋落叶知秋

主界面的运行截图如下所示：

我们通过点击TextView按钮，会进入TextViewActivity界面,点击Button按钮，则会进入ButtonActivity界面。

我们新建一个Activity,命名为TextViewActivity,然后在layout文件夹下面会自带一个activity_text_view.xml文件，我们先展示该xml文件的代码，如下：

TextViewActivity的代码如下所示：

package com.autumn;

import android.graphics.Paint;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.text.Html;
import android.widget.TextView;


public class TextViewActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_text_view);

        TextView textView = findViewById(R.id.tv_4);
        //添加中划线
        textView.getPaint().setFlags(Paint.STRIKE_THRU_TEXT_FLAG);
        textView.getPaint().setAntiAlias(true);//去除锯齿

        TextView textView2 = findViewById(R.id.tv_5);
        //添加下划线
        textView2.getPaint().setFlags(Paint.UNDERLINE_TEXT_FLAG);

        TextView textView3 = findViewById(R.id.tv_6);
        //用HTML添加下划线
        textView3.setText(Html.fromHtml("lsq,How are you?"));

    }
}

运行效果如下图所示：

接下来我们根据运行结果一行一行的进行说明：

（1）我们采用线性垂直布局样式，第一个TextView的宽和高都设置为了wrap-content,wrap-content表示自适应的大小，该属性会强制性地使视图扩展以便显示其全部内容。主要用于TextView和ImageView控件，通过设置为wrap_content将会完整显示其内部的文本和图像，这里我们设置文本颜色为绿色，字体大小为24sp,sp主要用来Android中字体大小的设置单位；

（2）第二行结果未能完全显示所有文字，后面未能显示出来的用省略号表示，参数maxLines设置为1,代表一行，由于width设置为100dp,加上参数ellipsize设置为end,即代表显示不出的用省略号表示，marginTop设置为20dp,表示与上一个控件相距20dp;

（3）第三行是文字加图标的显示结果，drawableEnd相当于drawableRight,这里是把向下箭头的图标放在了文字的右侧，drawablePadding表示文字与图标的间距为6dp;

（4）第四行我们在文字里加入了中划线，主要代码在TextViewActivity中，我们通过在tv_4控件中添加STRIKE_THRU_TEXT_FLAG,并消除锯齿，即可添加中划线;

（5）第五行我们在文字中加入了下划线，主要代码在TextViewActivity中，我们通过在tv_5控件中添加UNDERLINE_TEXT_FLAG，即可添加下划线；

（6）第六行与第五行效果一样，只不过我们是通过HTML的格式显示下划线的；

（7）第七行是一个跑马灯的循环显示效果，我们点击字体，便会循环移动，在xml文件中，singleLine设置为true，即为单行显示,ellipsize设置为marquee,即表示循环,marqueeRepeatLimit设置为marquee_forever，即表示永久循环,focusable、focusableInTouchMode、clickable均设置为true，表示可聚焦，并且可点击。

Button

button从字面义理解为按钮。这里我们主要讲解以下用法：①文字大小、颜色；②自定义背景形状；③自定义按压效果；④点击事件。

我们新建一个ButtonActivity的Activity类，创建时会附带一个activity_button.xml文件，xml文件代码如下：

ButtonActivity的代码如下所示：

package com.autumn;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
import android.widget.Toast;

public class ButtonActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_button);
        Button button = findViewById(R.id.btn_3);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(ButtonActivity.this,"btn3被点击了!",Toast.LENGTH_SHORT).show();
            }
        });

        TextView textView = findViewById(R.id.tv_1);
        textView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(ButtonActivity.this,"tv1被点击了!",Toast.LENGTH_SHORT).show();
            }
        });

    }

    public void showToast(View view) {
        Toast.makeText(this,"btn4被点击了!",Toast.LENGTH_SHORT).show();
    }
}

运行效果如下图所示：

其中我们点击按钮3，会弹出"btn3被点击了"的字样,点击按钮4,会弹出"btn4被点击了"的字样,同时点击按钮4，按钮颜色由橙色变为红褐色，点击文字1，会弹出"tv1被点击了"的字样。

接下来我们对以上代码进行详细的解释和说明：

（1）这里采用相对布局的样式，并且设置padding为15dp,也就是所有控件内边距均为15dp。按钮1宽度为匹配父容器，高度为根据内容自适应，文字大小为20sp,文字颜色为蓝色;

（2）按钮2与1相比，改动了background的值,我们在res/drawable目录下新建bg_btn2.xml文件，代码如下：

我们设置背景为橙色，并且形状为矩形，并且矩形带有圆角，为10dp;

（3）按钮3与按钮1相比，改动了background的值，我们在res/drawable目录下新建bg_btn3.xml文件，代码如下：

我们设置形状为矩形，矩形带有圆角，为10dp,但是这次是描边为1dp,也就是内部没有填充色，在ButtonActivity中，我们对btn3添加了一个点击事件,通过点击该按钮会弹出"btn3被点击了"的字样；

（4）按钮4与按钮1相比，一个是改动了background的值，其中bg_btn4.xml文件代码如下：

我们设置当按钮被按压时，显示为橙色，圆角10dp;当未被按压时，显示为红褐色,圆角为10dp。

另一个改动是添加了onClick属性，在ButtonActivity中添加了函数showToast,里面设置了点击该按钮会出现"btn4被点击了"的字样；

（5）最后一个是一个TextView的控件，不过也可以当做Button点击使用,gravity属性值为center，即表示文字居中显示，然后在ButtonActivity中，我们同样对tv_1添加了点击事件，当点击该按钮时，会弹出"tv1被点击了"的字样。

好了，这一次关于TextView和Button的讲解就到这里了，我们下期再见！