Android开发入门组件（二）——Button

今天来写Button组件，先放一下图大概就知道今天要总结button使用的哪些要点了

 

1.按钮的文字、文字的大小以及颜色、背景颜色

（1）按钮1

<Button
        android:id="@+id/bt1"
        android:layout_width="80dp"//组件的宽度
        android:layout_height="60dp"//组件的高度
        android:text="按钮1"//组件的文字
        android:textSize="20sp"//组件的文字大小
        android:textColor="#22B8DD"//组件的文字颜色
        android:background="#FFFF00"//组件的背景颜色
        android:layout_marginBottom="15dp"/>

（2）按钮2

<Button
        android:id="@+id/bt2"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:text="按钮2"
        android:textSize="20sp"
        android:textColor="#22B8DD"
        android:background="#FFFF00"
        android:layout_marginBottom="15dp"/>

两个按钮的定义效果如图所示

2.自定义背景形状、图片

（1）自定义形状（圆角按钮）

需要在按钮的 android:background="@drawable/bg_bt2" 用来设置样式，而样式需要定义

按钮的3的样式文件定义步骤如下：在drawable文件目录下创建新的drawable file，

然后在新建的bg_bt2文件中编码

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">//形状定义为矩形
    <solid
        android:color="#3A3AF9"></solid>//是否充实整个矩形
    <corners
        android:radius="15dp"></corners>//四个角的度数
</shape>

按钮3的定义

<Button
        android:id="@+id/bt3"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:text="按钮3"
        android:textSize="20sp"
        android:textColor="#22B8DD"
        android:background="@drawable/bg_bt2"//使用制作的样式做背景
        android:layout_marginBottom="15dp"/>

效果如图所示

（2）透明形状（在preview中看到的是背景色，运行之后会是透明色）

样式文件

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <stroke
        android:color="#0968F7"
        android:width="1dp"></stroke>//用来定义线，宽度等
    <corners
        android:radius="15dp"></corners>
</shape>

按钮4

<Button
        android:id="@+id/bt4"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:text="按钮4"
        android:textSize="20sp"
        android:textColor="#0968F7"
        android:background="@drawable/bg_bt3"//使用制作的样式做背景
        android:layout_marginBottom="15dp"/>

效果如图所示

（3）使用自定义的图片作为背景

首先需要下载好文件copy到drawable文件目录下，然后在 android:background="@drawable/button"中声明自己的背景图片即可

按钮5

<Button
        android:id="@+id/bt5"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:text="按钮5"
        android:textSize="20sp"
        android:textColor="#0968F7"
        android:background="@drawable/button" //使用图片作为背景
        android:layout_marginBottom="15dp"/>

效果如下图所示

3.自定义按压效果

按压效果的显示需要判定按钮此时的状态，也是定义在样式文件中

样式文件

<?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="#7000BB"></solid>//颜色
            <corners android:radius="5dp"></corners>//角度
        </shape>
       </item>
    <item android:state_pressed="false">//未检测到按压时
        <shape>
            <solid android:color="#DDAAFF"></solid>
            <corners android:radius="5dp"></corners>
        </shape>
    </item>
</selector>

按钮6

 <Button
        android:id="@+id/bt6"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:text="按钮6"
        android:textSize="20sp"
        android:textColor="#0968F7"
        android:background="@drawable/bg_bt4"//引用定义好的样式
        android:layout_marginBottom="15dp"/>

效果图省略了，具体自己实验，点击的时候会颜色加深

4.设置点击事件，监控等等

在按钮上设置点击事件和在其他组件上设置点击事件的手法都是一样的，有两种方式

（1）在xml中设置

android:onClick="showToast"  设置点击和点击对应的函数，然后再Activity中实现对应的函数即可

按钮7

<Button
        android:id="@+id/bt7"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:text="按钮7"
        android:textSize="20sp"
        android:textColor="#0968F7"
        android:background="@drawable/bg_bt4"
        android:onClick="showToast"   //设置点击事件源
        android:layout_marginBottom="15dp"/>

对应的Activity中的函数声明

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

效果图放上，当点击按钮7时会出现Toast提示

（2）设置监听事件在对应的按钮的ID中

主要是在Activity中声明函数

按钮4

<Button
        android:id="@+id/bt4"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:text="按钮4"
        android:textSize="20sp"
        android:textColor="#0968F7"
        android:background="@drawable/bg_bt3"
        android:layout_marginBottom="15dp"/>

对应的Activity文件

 Button bt4; //声明按钮组件
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_button);
        bt4=findViewById(R.id.bt4); //用来获取对应的ID组件
        bt4.setOnClickListener(new View.OnClickListener() { //设置监听事件
            @Override
            public void onClick(View view) {
                Toast.makeText(ButtonActivity.this,"按钮4被点击了",Toast.LENGTH_SHORT).show();
            }
        });
    }

效果图如下。