余老师带你学习智能终端-Android App开发第二章第三节Button

Button

概述

Button继承自TextView，它其实是TextView的子类。这节课主要讲Button的基本属性文字大小、颜色；还有一些自定义背景形状。那我们在实际开发中我们设计师设计出的按钮都不是那些直角的，颜色可以就可以的，都会略带一些圆角，这些我们要如何制作一个Button呐？接下来，我们会通过代码带大家一起制作。还有自定义按压效果，在按钮按下去，会有一个按下去的效果，按下去可能颜色会变深了，这个效果可以通过xml文件制作出来，不需要任何的图片。最后一个是给Button设置一个点击事件，既然Button是继承TextView的，所以TextView也有点击事件，基本上所有的控件都包含点击事件。

演示

1、添加Button按钮，使用的是相对布局，按钮的文字为按钮1，id为btn_1，按钮高度为自身内容的高度，按钮的宽度为父类的宽度，文字的大小为20sp，文字颜色为蓝色，按钮的背景颜色为红色，按钮的高度和宽度可以随意设置大小

<Button 
        android:id="@+id/btn_1"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:text="按钮1"
        android:textSize="20sp"
        android:textColor="#0066FF"
        android:background="#FF0000"/>

2、给按钮添加圆角，在activity_main.xml中添加一个Button组件，id为2，背景可以是xml文件，所以创建一个xml文件，在xml文件设置四个角为圆角，圆角的弧度为5dp，填充颜色为橙色
创建新的xml，在drawable-hdpi点击右键选择new file，命名为bg_btn2.xml
activity_main.xml：

<Button 
        android:id="@+id/btn_2"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:text="按钮2"
        android:textSize="20sp"
        android:textColor="#0066FF"
        android:background="@drawable/bg_btn2"
        android:layout_below="@id/btn_1"
        android:layout_marginTop="10dp"/>

bg_btn2.xml：

<?xml version="1.0" encoding="utf-8"?>


<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid
        android:color="#FF9900"
        />

    <corners
        android:radius="5dp"
        />

</shape>

3、这个按钮是只有描边，中间是空白的，在activity_main.xml先添加一个Button组件，之后创建bg_btn3.xml文件，在xml文件中设置stroke描边为1dp，描边的颜色为橙色，四个角还是为圆角
activity_main.xml：

<Button 
        android:id="@+id/btn_3"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:text="按钮3"
        android:textSize="20sp"
        android:textColor="#0066FF"
        android:background="@drawable/bg_btn3"
        android:layout_below="@id/btn_2"
        android:layout_marginTop="10dp"/>

bg_btn3.xml：

<?xml version="1.0" encoding="utf-8"?>


<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <stroke
        android:width="1dp"
        android:color="#FF9900">

    </stroke>
    
    <corners
        android:radius="5dp"
        />

</shape>

4、添加按压效果，在activity_main.xml中添加Button组件，创建bg_btn4.xml，并在bg_btn4.xml中设置按压效果，android:state_pressed="true"是按压时，按压时颜色为橙色，圆角，android:state_pressed="false"是不按压的效果，不按压时颜色为红色，圆角
activity_main.xml：

<Button 
        android:id="@+id/btn_4"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:text="按钮4"
        android:textSize="20sp"
        android:textColor="#0066FF"
        android:background="@drawable/bg_btn4"
        android:layout_below="@id/btn_3"
        android:layout_marginTop="10dp"/>

bg_btn4.xml：

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="true">
        <shape>
            <solid android:color="#FF9900"/>
            <corners android:radius="5dp"/> 
        </shape>

    </item>

    <item android:state_pressed="false">
        <shape>
            <solid android:color="#FF0000"/>
            <corners android:radius="5dp"/> 
        </shape>

    </item>

</selector>
 

5、添加一个点击事件，先在activity_main.xml中添加一个Button组件，点击效果是bg_btn4，添加点击事件，事件方法为showToast，Toast是在界面上弹出的提示信息，过一两秒之后又会消失；在HelloAndroidActivity.java中的HelloAndroidActivity下添加showToast方法，弹出的信息是松鼠学苑，Toast.LENGTH_SHORT为1秒
activity_main.xml：

<Button 
        android:id="@+id/btn_5"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:text="按钮5"
        android:textSize="20sp"
        android:textColor="#0066FF"
        android:background="@drawable/bg_btn4"
        android:onClick="showToast"
        android:layout_below="@id/btn_4"
        android:layout_marginTop="10dp"/>

HelloAndroidActivity.java：

public void showToast(View view){
        Toast.makeText(this, "松鼠学苑", Toast.LENGTH_SHORT).show();

    }
 

6、还有另一种方式完成点击事件，这个方法是比较常用的，在Button4中进行演示，组件Button不用修改，直接通过java代码实现。
HelloAndroidActivity.java：

private Button mBtn3; //声明控件
mBtn3 = (Button)findViewById(R.id.btn_4); //找到控件
        mBtn3.setOnClickListener(new View.OnClickListener(){
        
            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                Toast.makeText(HelloAndroidActivity.this, "松鼠学苑", Toast.LENGTH_SHORT).show(); //this不在是HelloAndroidActivity了，要改成HelloAndroidActivity.this
            }
        });