学习Android的第九天
目录
Android Button 按钮
基本的按钮
StateListDrawable
范例
使用颜色值绘制圆角按钮
自制水波纹效果
Android ImageButton 图片按钮
ImageButton
不同状态下的 ImageButton
Android RadioButton 单选按钮
RadioButton
获得选中的值
Android Button 按钮
在 Android 中,Button 是用于创建一个按钮的组件,它具有正常状态和点击状态,并且继承自 TextView,因此可以使用 TextView 的属性以及一些其他的属性。
基本的按钮
我们可以直接使用 XML 语法创建一个 Button
<?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 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>
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 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 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 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 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 设置默认图像资源。
<ImageButton
android:id="@+id/imageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/background_image" />
2、使用 setImageResource(int) 方法在代码中动态地设置 ImageButton 的图像资源。
<ImageButton
android:id="@+id/imageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
ImageButton imageButton = findViewById(R.id.imageButton);
imageButton.setImageResource(R.drawable.background_image);
注意:要移除 ImageButton 的背景图像,可以使用 android:background 属性定义自定义的背景图像,或者将背景颜色设置为透明。
以下是一个示例,演示如何将 ImageButton 的背景颜色设置为透明:
<?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 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 的背景:
<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 并设置其选中状态:
<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 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>
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);
}
}