当前位置:   article > 正文

学习Android的第九天

学习Android的第九天

目录

Android Button 按钮

基本的按钮

StateListDrawable

范例

使用颜色值绘制圆角按钮

自制水波纹效果

Android ImageButton 图片按钮

ImageButton

不同状态下的 ImageButton

Android RadioButton 单选按钮

RadioButton

获得选中的值


Android Button 按钮

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

基本的按钮

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

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout
  3. xmlns:android="http://schemas.android.com/apk/res/android"
  4. android:layout_width="match_parent"
  5. android:layout_height="match_parent"
  6. android:orientation="horizontal"
  7. android:gravity="center">
  8. <Button
  9. android:layout_width="wrap_content"
  10. android:layout_height="wrap_content"
  11. android:text="基本的按钮"/>
  12. </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,可以根据控件的状态来设置不同的样式或效果,从而提升用户交互体验。例如,在按钮的背景中,可以定义按下时的背景颜色,从而在用户按下按钮时提供视觉反馈。

范例

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout
  3. xmlns:android="http://schemas.android.com/apk/res/android"
  4. android:layout_width="match_parent"
  5. android:layout_height="match_parent"
  6. android:orientation="horizontal"
  7. android:gravity="center">
  8. <!-- 第一个按钮 -->
  9. <Button
  10. android:id="@+id/myButton"
  11. android:layout_width="wrap_content"
  12. android:layout_height="wrap_content"
  13. android:text="我的按钮" />
  14. <!-- 第二个按钮 -->
  15. <Button
  16. android:id="@+id/monitorButton"
  17. android:layout_width="wrap_content"
  18. android:layout_height="wrap_content"
  19. android:text="监视器按钮"
  20. android:background="@color/black"/>
  21. </LinearLayout>
  1. package com.example.myapplication;
  2. import android.graphics.Bitmap;
  3. import android.graphics.BitmapFactory;
  4. import android.graphics.drawable.BitmapDrawable;
  5. import android.os.Bundle;
  6. import android.view.MotionEvent;
  7. import android.view.View;
  8. import android.widget.Button;
  9. import android.widget.ImageView;
  10. import android.widget.LinearLayout;
  11. import androidx.appcompat.app.AppCompatActivity;
  12. public class MainActivity extends AppCompatActivity {
  13. @Override
  14. protected void onCreate(Bundle savedInstanceState) {
  15. super.onCreate(savedInstanceState);
  16. setContentView(R.layout.activity_main);
  17. final Button myButton = findViewById(R.id.myButton);
  18. final Button monitorButton = findViewById(R.id.monitorButton);
  19. // 设置 monitorButton 的状态变化监听器
  20. myButton.setOnTouchListener(new View.OnTouchListener() {
  21. @Override
  22. public boolean onTouch(View v, MotionEvent event) {
  23. if (event.getAction() == MotionEvent.ACTION_DOWN) {
  24. monitorButton.setText("监视器按钮111");
  25. } else if (event.getAction() == MotionEvent.ACTION_UP) {
  26. monitorButton.setText("我的按钮已按下");
  27. }
  28. return true;
  29. }
  30. });
  31. // 设置 myButton 的禁用状态监听器
  32. monitorButton.setOnClickListener(new View.OnClickListener() {
  33. @Override
  34. public void onClick(View v) {
  35. if (myButton.isEnabled()) {
  36. myButton.setEnabled(false);
  37. monitorButton.setText("我的按钮已禁用");
  38. } else {
  39. myButton.setEnabled(true);
  40. monitorButton.setText("我的按钮已启用");
  41. }
  42. }
  43. });
  44. }
  45. }

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

使用颜色值绘制圆角按钮

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

以下是一个示例:

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

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

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

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout
  3. xmlns:android="http://schemas.android.com/apk/res/android"
  4. android:layout_width="match_parent"
  5. android:layout_height="match_parent"
  6. android:orientation="horizontal"
  7. android:gravity="center">
  8. <Button
  9. android:id="@+id/roundedButton"
  10. android:layout_width="wrap_content"
  11. android:layout_height="wrap_content"
  12. android:text="圆形按钮"
  13. android:background="@drawable/rounded_button"/>
  14. </LinearLayout>

自制水波纹效果

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

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <ripple xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:color="#F60F0F"> <!-- 水波纹的颜色 -->
  4. <item android:id="@android:id/background">
  5. <shape android:shape="rectangle">
  6. <solid android:color="#9318DA"/> <!-- 背景颜色 -->
  7. <corners android:radius="8dp"/> <!-- 圆角半径 -->
  8. </shape>
  9. </item>
  10. <item android:id="@android:id/mask">
  11. <shape android:shape="rectangle">
  12. <solid android:color="#F60F0F"/> <!-- 背景颜色 -->
  13. <corners android:radius="8dp"/> <!-- 圆角半径 -->
  14. </shape>
  15. </item>
  16. </ripple>

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

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout
  3. xmlns:android="http://schemas.android.com/apk/res/android"
  4. android:layout_width="match_parent"
  5. android:layout_height="match_parent"
  6. android:orientation="horizontal"
  7. android:gravity="center">
  8. <Button
  9. android:id="@+id/customButton"
  10. android:layout_width="wrap_content"
  11. android:layout_height="wrap_content"
  12. android:background="@drawable/ripple_effect"
  13. android:text="自定义波纹按钮" />
  14. </LinearLayout>

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

Android ImageButton 图片按钮

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

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

ImageButton

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

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

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

  1. <ImageButton
  2. android:id="@+id/imageButton"
  3. android:layout_width="wrap_content"
  4. android:layout_height="wrap_content"
  5. android:src="@drawable/background_image" />

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

  1. <ImageButton
  2. android:id="@+id/imageButton"
  3. android:layout_width="wrap_content"
  4. android:layout_height="wrap_content" />
  1. ImageButton imageButton = findViewById(R.id.imageButton);
  2. imageButton.setImageResource(R.drawable.background_image);

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

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

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout
  3. xmlns:android="http://schemas.android.com/apk/res/android"
  4. android:layout_width="match_parent"
  5. android:layout_height="match_parent"
  6. android:orientation="horizontal"
  7. android:gravity="center">
  8. <ImageButton
  9. android:id="@+id/imageButton"
  10. android:layout_width="wrap_content"
  11. android:layout_height="wrap_content"
  12. android:src="@drawable/background_image"
  13. android:background="@android:color/transparent" />
  14. </LinearLayout>

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

不同状态下的 ImageButton

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

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

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

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <selector xmlns:android="http://schemas.android.com/apk/res/android">
  3. <!-- 聚焦时的图像 -->
  4. <item android:drawable="@drawable/orange_image" android:state_focused="true"/>
  5. <!-- 按下时的图像 -->
  6. <item android:drawable="@drawable/yellow_image" android:state_pressed="true"/>
  7. <!-- 默认的图像 -->
  8. <item android:drawable="@drawable/blue_image"/>
  9. </selector>

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

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

  1. <ImageButton
  2. android:id="@+id/imageButton"
  3. android:layout_width="wrap_content"
  4. android:layout_height="wrap_content"
  5. android:src="@drawable/button_states"/>

Android RadioButton 单选按钮

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

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

RadioButton

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

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

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

  1. <RadioButton
  2. android:id="@+id/radioButton"
  3. android:layout_width="wrap_content"
  4. android:layout_height="wrap_content"
  5. android:text="特殊的按钮"
  6. android:checked="true"/> <!-- 设置 RadioButton 初始为选中状态 -->

获得选中的值

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

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

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

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout
  3. xmlns:android="http://schemas.android.com/apk/res/android"
  4. android:layout_width="match_parent"
  5. android:layout_height="match_parent"
  6. android:orientation="horizontal"
  7. android:gravity="center">
  8. <RadioGroup
  9. android:id="@+id/radioGroup"
  10. android:layout_width="wrap_content"
  11. android:layout_height="wrap_content"
  12. android:orientation="vertical">
  13. <RadioButton
  14. android:id="@+id/Java"
  15. android:text="我要学习Java"
  16. android:onClick="onRadioButtonClicked"
  17. android:layout_width="wrap_content"
  18. android:layout_height="wrap_content"
  19. android:checked="true"/>
  20. <RadioButton
  21. android:id="@+id/Go"
  22. android:text="我要学习go"
  23. android:onClick="onRadioButtonClicked"
  24. android:layout_width="wrap_content"
  25. android:layout_height="wrap_content" />
  26. <RadioButton
  27. android:id="@+id/Python"
  28. android:text="我要学习Python"
  29. android:onClick="onRadioButtonClicked"
  30. android:layout_width="wrap_content"
  31. android:layout_height="wrap_content" />
  32. </RadioGroup>
  33. </LinearLayout>
  1. package com.example.myapplication;
  2. import android.graphics.Bitmap;
  3. import android.graphics.BitmapFactory;
  4. import android.graphics.drawable.BitmapDrawable;
  5. import android.os.Bundle;
  6. import android.view.View;
  7. import android.widget.Button;
  8. import android.widget.ImageButton;
  9. import android.widget.ImageView;
  10. import android.widget.LinearLayout;
  11. import android.widget.RadioButton;
  12. import android.widget.TextView;
  13. import android.widget.Toast;
  14. import androidx.appcompat.app.AppCompatActivity;
  15. public class MainActivity extends AppCompatActivity {
  16. public void onRadioButtonClicked(View view) {
  17. // 判断是否在 RadioButton 上单击
  18. boolean checked = ((RadioButton) view).isChecked();
  19. // 判断是哪个 RadioButton 被单击
  20. if (view.getId() == R.id.Java || view.getId() == R.id.Go || view.getId() == R.id.Python) {
  21. if (checked)
  22. Toast.makeText(getApplicationContext(), "你选择了:" + ((RadioButton) view).getText(), Toast.LENGTH_LONG).show();
  23. }
  24. }
  25. @Override
  26. protected void onCreate(Bundle savedInstanceState) {
  27. super.onCreate(savedInstanceState);
  28. setContentView(R.layout.activity_main);
  29. }
  30. }
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/盐析白兔/article/detail/83699
推荐阅读
相关标签
  

闽ICP备14008679号