第二章 UI组件

2-3 Button

  • 文字大小、颜色
  • 自定义背景形状
  • 自定义按压效果
  • 点击事件

接着之前的文件,新写:

Androidstudio按钮右对齐 android studio按钮布局_android


新建一个activity:

Androidstudio按钮右对齐 android studio按钮布局_ide_02


检查在AndroidManifest.xml中有没有自动添加声明,没有就自己加上:

Androidstudio按钮右对齐 android studio按钮布局_android_03


. 省略的是包名

框起来的代码是新加的:

Androidstudio按钮右对齐 android studio按钮布局_android_04

文字大小、颜色

红框是代码,蓝框是预览:

Androidstudio按钮右对齐 android studio按钮布局_android_05

自定义背景形状

文件夹:res → drawable → new → Drawable resource File

Androidstudio按钮右对齐 android studio按钮布局_xml_06


Androidstudio按钮右对齐 android studio按钮布局_Androidstudio按钮右对齐_07


把半径改大点可以看得更明显

Androidstudio按钮右对齐 android studio按钮布局_Androidstudio按钮右对齐_08


复制粘贴bg_btn2得到一个bg_btn3:

Androidstudio按钮右对齐 android studio按钮布局_android_09


Androidstudio按钮右对齐 android studio按钮布局_android_10


(实际上应该是有一个橙色的边框,里面是白的,不过因为我AS的主题是黑色,所以这里预览会显示灰的)

自定义按压效果

继续new一个Drawable resource File:

Androidstudio按钮右对齐 android studio按钮布局_xml_11


Androidstudio按钮右对齐 android studio按钮布局_ide_12


上面框起来的这个表示,按压的时候要有什么样式就写在这里面

为false的时候就表示不按压的时候是什么样的

Androidstudio按钮右对齐 android studio按钮布局_android_13

Androidstudio按钮右对齐 android studio按钮布局_android_14

运行一下就能看到,鼠标点击按下去之后,按钮变深色

点击事件

设置点击事件有两种方法:

方法一示例:

修改btn_4:

Androidstudio按钮右对齐 android studio按钮布局_ide_15


在ButtonActivity.java中写这个方法:

Androidstudio按钮右对齐 android studio按钮布局_android_16


PS:纠正一下,上图应为:showToast(View view) 不然会出错运行,点击按钮4:

Androidstudio按钮右对齐 android studio按钮布局_xml_17

方法二示例:

(这种常用)

修改btn3:

Androidstudio按钮右对齐 android studio按钮布局_xml_18


运行:

Androidstudio按钮右对齐 android studio按钮布局_xml_19

给textview设置点击事件

Androidstudio按钮右对齐 android studio按钮布局_Androidstudio按钮右对齐_20


Androidstudio按钮右对齐 android studio按钮布局_xml_21


Androidstudio按钮右对齐 android studio按钮布局_android_22

相关完整代码:

ButtonActivity.java

package com.example.helloworld;

import androidx.appcompat.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 {

    private Button mBtn3;
    private TextView mTv1;

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

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

        mTv1 = findViewById(R.id.tv_1);
        mTv1.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();
    }
}

MainActivity.java

package com.example.helloworld;

import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {

    private Button mBtnTextView;  //声明一个Button类型的变量,变量名为mBtnTextView
    // 如果有报错,在出错地方按Alt+Enter键,会自动导入包
    private Button mBtnButton;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mBtnTextView = findViewById(R.id.btn_textview);  //找activity_main文件中设置的id
        mBtnTextView.setOnClickListener(new View.OnClickListener(){  //创建点击事件
            @Override
            public void onClick(View v) {
                //跳转到TextView演示
                Intent intent = new Intent(MainActivity.this,TextViewActivity.class);
                startActivity(intent);
            }
        });
        mBtnButton = findViewById(R.id.btn_button);  //找activity_main文件中设置的id
        mBtnButton.setOnClickListener(new View.OnClickListener(){  //创建点击事件
            @Override
            public void onClick(View v) {
                //跳转到Button演示
                 Intent intent = new Intent(MainActivity.this,ButtonActivity.class);
                startActivity(intent);
            }
        });

    }
}

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="15dp"/>
</shape>

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"/>

    <corners
        android:radius="15dp"/>
</shape>

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="#AA6600"/>
            <corners android:radius="15dp"/>
        </shape>
    </item>

    <item android:state_pressed="false">
        <shape>
            <solid android:color="#FF9900"/>
            <corners android:radius="15dp"/>
        </shape>
    </item>
</selector>

activity_button.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="15dp">

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

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

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

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

    <TextView
        android:id="@+id/tv_1"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:textColor="#000000"
        android:textSize="20sp"
        android:text="文字1"
        android:layout_below="@+id/btn_4"
        android:layout_marginTop="40dp"
        android:background="#FFAD33"
        android:gravity="center"/>


</RelativeLayout>

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <Button
        android:id="@+id/btn_textview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="TextView"/>

    <Button
        android:id="@+id/btn_button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button"/>

</LinearLayout>