学习Android的第九天

世俗ˊ2024-02-11 10:37

目录

[Android Button 按钮](#Android Button 按钮)

基本的按钮

StateListDrawable

范例

使用颜色值绘制圆角按钮

自制水波纹效果

[Android ImageButton 图片按钮](#Android ImageButton 图片按钮)

ImageButton

[不同状态下的 ImageButton](#不同状态下的 ImageButton)

[Android RadioButton 单选按钮](#Android RadioButton 单选按钮)

RadioButton

获得选中的值

Android Button 按钮

在 Android 中，Button 是用于创建一个按钮的组件，它具有正常状态和点击状态，并且继承自 TextView，因此可以使用 TextView 的属性以及一些其他的属性。

基本的按钮

我们可以直接使用 XML 语法创建一个 Button

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:orientation="horizontal"
    android:gravity="center">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="基本的按钮"/>

</LinearLayout>

StateListDrawable

StateListDrawable 是一种 Drawable 资源，它可以根据控件的不同状态（例如按下、获取焦点、可用等）设置不同的图片或效果。关键在于 <selector> 元素，它可以定义不同状态下的不同 Drawable。

以下是一些常用的 StateListDrawable 属性及其说明：

  • drawable：引用的 Drawable 位图，放在最前面表示组件的正常状态。
  • android:state_focused：控件是否获得焦点。
  • android:state_window_focused：控件是否获得窗口焦点。
  • android:state_enabled：控件是否可用。
  • android:state_checkable：控件是否可勾选，例如，checkbox。
  • android:state_checked：控件是否被勾选。
  • android:state_selected：控件是否被选择，针对有滚轮的情况。
  • android:state_pressed：控件是否被按下。
  • android:state_active：控件是否处于活动状态，例如，SlidingTab。
  • android:state_single：控件是否只显示一个子控件，用于多个子控件的情况。
  • android:state_first：控件是否包含多个子控件时，确定第一个子控件是否处于显示状态。
  • android:state_middle：控件是否包含多个子控件时，确定中间一个子控件是否处于显示状态。
  • android:state_last：控件是否包含多个子控件时，确定最后一个子控件是否处于显示状态。

通过定义 StateListDrawable，可以根据控件的状态来设置不同的样式或效果，从而提升用户交互体验。例如，在按钮的背景中，可以定义按下时的背景颜色，从而在用户按下按钮时提供视觉反馈。

范例

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:orientation="horizontal"
    android:gravity="center">

        <!-- 第一个按钮 -->
        <Button
            android:id="@+id/myButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="我的按钮" />

        <!-- 第二个按钮 -->
        <Button
            android:id="@+id/monitorButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="监视器按钮"
            android:background="@color/black"/>

</LinearLayout>
java 复制代码 
package com.example.myapplication;

import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.drawable.BitmapDrawable;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

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

        final Button myButton = findViewById(R.id.myButton);
        final Button monitorButton = findViewById(R.id.monitorButton);

        // 设置 monitorButton 的状态变化监听器
        myButton.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                if (event.getAction() == MotionEvent.ACTION_DOWN) {
                    monitorButton.setText("监视器按钮111");
                } else if (event.getAction() == MotionEvent.ACTION_UP) {
                    monitorButton.setText("我的按钮已按下");
                }
                return true;
            }
        });

        // 设置 myButton 的禁用状态监听器
        monitorButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (myButton.isEnabled()) {
                    myButton.setEnabled(false);
                    monitorButton.setText("我的按钮已禁用");
                } else {
                    myButton.setEnabled(true);
                    monitorButton.setText("我的按钮已启用");
                }
            }
        });
    }

}

这样，当按下 第一个按钮 时，第二个按钮 的文本会变为 "监视器按钮111"；松开按钮后，文本会变为 "我的按钮已按下"。而当点击 第二个按钮 切换其禁用状态时，第二个按钮 的文本会相应地变化为 "我的按钮已禁用"，第一个按钮则处于禁用状态。

使用颜色值绘制圆角按钮

要使用颜色值绘制圆角按钮，可以创建一个圆角矩形的 ShapeDrawable，并将其设置为按钮的背景。

以下是一个示例：

1、创建一个名为 rounded_button.xml 的 Drawable 资源文件，定义一个圆角矩形形状：

XML 复制代码 
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="50dp"/> <!-- 设置圆角半径 -->
    <solid android:color="#14EAD6"/> <!-- 设置背景颜色 -->
</shape>

2、在布局文件中使用这个 Drawable 资源作为按钮的背景：

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:orientation="horizontal"
    android:gravity="center">

        <Button
            android:id="@+id/roundedButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="圆形按钮"
            android:background="@drawable/rounded_button"/>


</LinearLayout>

自制水波纹效果

1、创建一个名为 ripple_effect.xml 的 RippleDrawable 资源文件，定义按钮的水波效果：

XML 复制代码 
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#F60F0F"> <!-- 水波纹的颜色 -->

    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <solid android:color="#9318DA"/> <!-- 背景颜色 -->
            <corners android:radius="8dp"/> <!-- 圆角半径 -->
        </shape>
    </item>

    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="#F60F0F"/> <!-- 背景颜色 -->
            <corners android:radius="8dp"/> <!-- 圆角半径 -->
        </shape>
    </item>
</ripple>

2、在布局文件中，使用 RippleDrawable 和 ShapeDrawable 组合作为按钮的背景：

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:orientation="horizontal"
    android:gravity="center">

        <Button
            android:id="@+id/customButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/ripple_effect"
            android:text="自定义波纹按钮" />


</LinearLayout>

这样，就创建了一个具有背景颜色和水波效果的自定义按钮。当用户点击按钮时，会显示出定义的水波纹效果，并且按钮的背景颜色也会根据设置的颜色进行显示。

Android ImageButton 图片按钮

ImageButton 是 Android 中的一个 View，与 Button 类似，但是它显示的是一张图片而不是文字。

ImageButton 继承自 ImageView，因此可以像 ImageView 一样使用 android:src 属性来设置图片资源。这使得可以在按钮中显示图像而不是文本，从而增强用户界面的交互性和可视化效果。

ImageButton

ImageButton 可以根据用户的交互动作显示不同的图像。默认情况下，ImageButton 看起来像一个普通的按钮，但可以根据需要设置不同的图像资源，使其在不同的交互状态下显示不同的图像。

可以通过以下方式为 ImageButton 设置不同的图像资源：

1、使用 android:src 属性在布局文件中为 ImageButton 设置默认图像资源。

XML 复制代码 
 <ImageButton
            android:id="@+id/imageButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/background_image" />

2、使用 setImageResource(int) 方法在代码中动态地设置 ImageButton 的图像资源。

XML 复制代码 
<ImageButton
            android:id="@+id/imageButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
java 复制代码 
ImageButton imageButton = findViewById(R.id.imageButton);
imageButton.setImageResource(R.drawable.background_image);

注意：要移除 ImageButton 的背景图像，可以使用 android:background 属性定义自定义的背景图像，或者将背景颜色设置为透明。

以下是一个示例，演示如何将 ImageButton 的背景颜色设置为透明：

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:orientation="horizontal"
    android:gravity="center">

        <ImageButton
            android:id="@+id/imageButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/background_image"
            android:background="@android:color/transparent" />

</LinearLayout>

这样，ImageButton 的背景颜色将会是透明的，不会显示任何图像或颜色。

不同状态下的 ImageButton

要为 ImageButton 指示不同的按钮状态（例如按下、选定等），可以使用 StateListDrawable。StateListDrawable 是一种 Drawable 类型，允许根据 View 的状态选择不同的 Drawable 来显示。

以下是一个示例，演示如何为 ImageButton 定义不同状态下的图像：

1、创建一个名为 button_states.xml 的 StateListDrawable 资源文件，定义不同状态下的图像：

XML 复制代码 
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 聚焦时的图像 -->
    <item android:drawable="@drawable/orange_image" android:state_focused="true"/>
    <!-- 按下时的图像 -->
    <item android:drawable="@drawable/yellow_image" android:state_pressed="true"/>
    <!-- 默认的图像 -->
    <item android:drawable="@drawable/blue_image"/>
</selector>

注意： <item> 的顺序很重要，一定要把 正常 的图片放在最后， 因为它们是按照顺序来进行匹配的

2、在布局文件中使用这个 StateListDrawable 资源作为 ImageButton 的背景：

XML 复制代码 
<ImageButton
    android:id="@+id/imageButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/button_states"/>

Android RadioButton 单选按钮

RadioButton 是一种用于实现单选功能的按钮。

注意：通常情况下，得将多个 RadioButton 放置在一个 RadioGroup 中，以确保只能选择一个 RadioButton。

RadioButton

RadioButton 是一种特殊的按钮，它继承自 Button，并且只有两个状态：选中和未选中。

因此，它只有一个属性 android:checked 用于设置或获取 RadioButton 的选中状态。

以下是一个示例，演示如何在布局文件中创建一个 RadioButton 并设置其选中状态：

XML 复制代码 
<RadioButton
    android:id="@+id/radioButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="特殊的按钮"
    android:checked="true"/> <!-- 设置 RadioButton 初始为选中状态 -->

获得选中的值

要获取 RadioButton 的选中状态，可以为 RadioButton 添加一个单击事件并在事件中调用 isChecked() 方法来判断 RadioButton 是否选中。

Android 快捷键生成onClick()点击事件方法：将光标移到myOnclick上，按快捷键Alt+Enter。

以下是一个示例，演示如何在布局文件中为 RadioButton 添加单击事件并捕获其选中状态：

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:orientation="horizontal"
    android:gravity="center">

        <RadioGroup
            android:id="@+id/radioGroup"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical">
                <RadioButton
                    android:id="@+id/Java"
                    android:text="我要学习Java"
                    android:onClick="onRadioButtonClicked"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:checked="true"/>

                <RadioButton
                    android:id="@+id/Go"
                    android:text="我要学习go"
                    android:onClick="onRadioButtonClicked"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content" />
                <RadioButton
                    android:id="@+id/Python"
                    android:text="我要学习Python"
                    android:onClick="onRadioButtonClicked"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content" />
        </RadioGroup>
</LinearLayout>
java 复制代码 
package com.example.myapplication;

import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.drawable.BitmapDrawable;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageButton;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RadioButton;
import android.widget.TextView;
import android.widget.Toast;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    public void onRadioButtonClicked(View view) {
        // 判断是否在 RadioButton 上单击
        boolean checked = ((RadioButton) view).isChecked();

        // 判断是哪个 RadioButton 被单击
        if (view.getId() == R.id.Java || view.getId() == R.id.Go || view.getId() == R.id.Python) {
            if (checked)
                Toast.makeText(getApplicationContext(), "你选择了：" + ((RadioButton) view).getText(), Toast.LENGTH_LONG).show();
        }
    }


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

}
相关推荐
eybk11 分钟前
Pytorch+Mumu模拟器+萤石摄像头实现对小孩学习的监控
学习
6.9412 分钟前
Scala学习记录 递归调用 练习
开发语言·学习·scala
众拾达人1 小时前
Android自动化测试实战 Java篇 主流工具 框架 脚本
android·java·开发语言
守护者1702 小时前
JAVA学习-练习试用Java实现“使用Arrays.toString方法将数组转换为字符串并打印出来”
java·学习
学会沉淀。2 小时前
Docker学习
java·开发语言·学习
Rinai_R2 小时前
计算机组成原理的学习笔记(7)-- 存储器·其二 容量扩展/多模块存储系统/外存/Cache/虚拟存储器
笔记·物联网·学习
吃着火锅x唱着歌2 小时前
PHP7内核剖析 学习笔记 第四章 内存管理（1）
android·笔记·学习
ragnwang2 小时前
C++ Eigen常见的高级用法 [学习笔记]
c++·笔记·学习
_Shirley3 小时前
鸿蒙设置app更新跳转华为市场
android·华为·kotlin·harmonyos·鸿蒙
热门推荐
01【一文读懂】NTN（非地面网络）技术介绍02优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间03玄机平台应急响应—webshell查杀04Cube-Studio：开源大模型全链路一站式中台05基于大语言模型（LLM）的合成数据生成、策展和评估的综述06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明0719个Web前端交互式3D JavaScript框架和库08HCIA-datacom数通题库和录播视频资料09Docker 夺命连环 15 问10Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO