Android UI 组件系列(二):Button 进阶用法

打印 上一主题 下一主题

主题 960|帖子 960|积分 2880

引言

在上一篇博客中,我们先容了 Button 的基本用法和常见属性,掌握了 Button 的底子知识。然而,在实际开发中,Button 远不止于简朴的点击功能,它还可以支持不同的变体、丰富的自定义样式,以及更灵活的状态管理。
本篇博客将深入探讨 Button 的进阶用法,包罗事件处置惩罚、不同范例的 Button 变体、自定义样式,以及怎样使用 StateListDrawable 来管理 Button 的不同状态。此外还会先容一些更高级的用法,如Jerpack Compose 中的 Button 处置惩罚方式,资助各人在不同的场景下灵活使用 Button。
Button的事件处置惩罚

Button 最重要的作用就是响应用户的点击操作。无论是提交表单、跳转页面、还是实行某个功能,阿牛的交互本事都是至关紧张的。
在实际开发中,Button 提供了多种事件监听方式,例如单击(setOnClickListener)、长按(setOnLongClickListener)、触摸监听(setOnTouchListener)等,除此之外,我们还可以控制按钮的点击状态,让它在特定的环境下启用或禁用。
接下来我们就来具体相识 Button 的事件处置惩罚方式,并看看怎样在项目中正确使用它们。
单击事件(setOnClickListener)

用户轻点按钮时触发,是按钮最常用的事件。
  1. /// 设置按钮
  2.     private void setupButton() {
  3.         Button button = findViewById(R.id.button);
  4.         // 单击事件
  5.         button.setOnClickListener(new View.OnClickListener() {
  6.             @Override
  7.             public void onClick(View v) {
  8.                 Toast.makeText(MainActivity.this, "按钮被点击了!", Toast.LENGTH_SHORT).show();
  9.             }
  10.         });
  11.     }
复制代码
长按事件(setOnLongClickListener)

用户按住按钮不放,会触发长按事件,适用于显示弹窗、删除确认等操作。
  1.         // 长按事件
  2.         button.setOnLongClickListener(new View.OnLongClickListener() {
  3.             @Override
  4.             public boolean onLongClick(View v) {
  5.                 Toast.makeText(MainActivity.this, "按钮被长按了!", Toast.LENGTH_SHORT).show();
  6.                 return true;  // 返回 true 表示事件被消费,不会触发 onClick 事件
  7.             }
  8.         });
复制代码
当返回true时,事件被消费,不会再出发onClick事件,当返回false时,长按事件触发,松手后,仍然会触发onClick事件。
触摸事件监听(setOnTouchListener)

可以监听手指的按下、移动、松开等操作,适用于实现拖拽等高级交互。
  1. button.setOnTouchListener(new View.OnTouchListener() {
  2.     @Override
  3.     public boolean onTouch(View v, MotionEvent event) {
  4.         switch (event.getAction()) {
  5.             case MotionEvent.ACTION_DOWN:
  6.                 Toast.makeText(MainActivity.this, "手指按下", Toast.LENGTH_SHORT).show();
  7.                 break;
  8.             case MotionEvent.ACTION_MOVE:
  9.                 Toast.makeText(MainActivity.this, "手指移动", Toast.LENGTH_SHORT).show();
  10.                 break;
  11.             case MotionEvent.ACTION_UP:
  12.                 Toast.makeText(MainActivity.this, "手指松开", Toast.LENGTH_SHORT).show();
  13.                 break;
  14.         }
  15.         return true;  // 返回 true,拦截事件,不触发 onClick
  16.     }
  17. });
复制代码
触摸事件常见的MotionEvent范例:


  • ACTION_DOWN:手指按下时触发。
  • ACTION_MOVE:手指移动时触发。
  • ACTION_UP:手指抬起时触发。
启用/禁用按钮交互(setEnabled(false))

  1. // 禁用按钮(变灰且不可点击)
  2. button.setEnabled(false);
  3. // 启用按钮(恢复可点击)
  4. button.setEnabled(true);
复制代码
通常会搭配StateListDrawable改变按钮颜色。
Button 自定义样式

Android 的 Button 默认样式可能无法满意UI设计需求,我们可以通过 修改背景、圆角、阴影、渐变、字体 等方式来自定义 Button,让它更加雅观和符合应用的设计风格。
自定义圆角按钮

默认的 Button 圆角可能并不能符合设计要求,我们可以使用shape定义一个圆角背景。
   res/drawable/btn_round.xml
  1. <shape xmlns:android="http://schemas.android.com/apk/res/android">
  2.     <corners android:radius="20dp"/>
  3.     <solid android:color="@color/blue"/>
  4. </shape>
复制代码
效果如下:

 
添加点击时的不同状态(StateListDrawable)

让按钮在按下、禁用、默认状态下来显示不同的样式。(注意设置app:backgroundTint="@null")
   res/drawable/button_selector.xml
  1. <selector xmlns:android="http://schemas.android.com/apk/res/android">
  2.     <!-- 按下状态 -->
  3.     <item android:state_pressed="true" android:drawable="@color/teal_200"/>
  4.     <!-- 禁用状态 -->
  5.     <item android:state_enabled="false" android:drawable="@color/purple_700"/>
  6.     <!-- 默认状态 -->
  7.     <item android:drawable="@drawable/btn_round"/>
  8. </selector>
复制代码
效果如下:
默认状态

按下状态

 

按钮支持渐变色

使用自定义shape,让按钮具有渐变色,使其更有质感。
   res/drawable/btn_gradient.xml
  1. <shape xmlns:android="http://schemas.android.com/apk/res/android">
  2.     <gradient
  3.         android:startColor="@color/purple_200"
  4.         android:endColor="@color/purple_500"
  5.         android:angle="45"/>
  6.     <corners android:radius="20dp"/>
  7. </shape>
复制代码
在Button中使用
  1.    <Button
  2.         android:id="@+id/button"
  3.         android:layout_width="wrap_content"
  4.         android:layout_height="wrap_content"
  5.         android:text="圆角按钮"
  6.         android:background="@drawable/btn_gradient"
  7.         app:backgroundTint="@null"/>
复制代码
效果如下:

 

使用StateListDrawable 管理按钮状态

在设置按钮不同状态的时候其实我们已经使用到了StateListDrawable。在 Android 开发中,按钮的交互体验至关紧张。例如,我们渴望按钮在 按下、禁用、获得焦点 等不同状态下显示不同的效果,而不是一直保持相同的外貌。
如果你在代码中手动监听setOnTouchListener 来改变背景颜色,这不仅贫困,而且难以维护。StateListDrawable 允许我们通过XML直接定义不同状态下的按钮外貌,大大简化了状态管理,接下来,我们来看 StateListDrawable 怎样实现按钮的动态变化。
常见的按钮状态:

  • android:state_pressed="true":按下(Pressed)。
  • android:state_selected="true":选中(Selected)。
  • android:state_focused="true":焦点(Focused)。
  • android:state_enabled="true":启用(Enabled)。
  • android:state_enabled="false":禁用(Disabled)。
使用 StateListDrawable 设置不同状态的颜色

  1. <selector xmlns:android="http://schemas.android.com/apk/res/android">
  2.     <!-- 按下状态 -->
  3.     <item android:state_pressed="true" android:drawable="@color/teal_200"/>
  4.     <!-- 禁用状态 -->
  5.     <item android:state_enabled="false" android:drawable="@color/purple_700"/>
  6.     <!-- 默认状态 -->
  7.     <item android:drawable="@color/blue"/>
  8. </selector>
复制代码
在Button中使用
  1.     <Button
  2.         android:layout_width="wrap_content"
  3.         android:layout_height="wrap_content"
  4.         android:text="按钮"
  5.         android:background="@drawable/button_selector"
  6.         app:backgroundTint="@null" />
复制代码
 
使用 StateListDrawable 结合 shape实现圆角按钮

如果你渴望按钮在不同状态下不仅颜色不同,还带有 圆角或阴影,你可以将drawable由颜色更换为shape。
创建button_default.xml 默认样式
  1. <shape xmlns:android="http://schemas.android.com/apk/res/android">
  2.     <solid android:color="@color/blue"/>
  3.     <corners android:radius="20dp"/>
  4. </shape>
复制代码
创建 button_pressed.xml 按下样式
  1. <shape xmlns:android="http://schemas.android.com/apk/res/android">
  2.     <solid android:color="@color/green"/>
  3.     <corners android:radius="20dp"/>
  4. </shape>
复制代码
创建 button_disabled.xml 禁用样式
  1. <shape xmlns:android="http://schemas.android.com/apk/res/android">
  2.     <solid android:color="@color/gray"/>
  3.     <corners android:radius="20dp"/>
  4. </shape>
复制代码
创建button_selector.xml 
  1. <selector xmlns:android="http://schemas.android.com/apk/res/android">
  2.     <item android:state_pressed="true" android:drawable="@drawable/button_pressed"/>
  3.     <item android:state_enabled="false" android:drawable="@drawable/button_disabled"/>
  4.     <item android:drawable="@drawable/button_default"/>
  5. </selector>
复制代码
使用
  1.     <Button
  2.         android:layout_width="wrap_content"
  3.         android:layout_height="wrap_content"
  4.         android:text="按钮"
  5.         android:background="@drawable/button_selector"
  6.         app:backgroundTint="@null" />
复制代码
注意:记得在color内声明颜色嗷!
使用 StateListDrawable 结合 TextColor 实现按钮笔墨颜色变化。
创建text_selector.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <selector xmlns:android="http://schemas.android.com/apk/res/android">
  3.     <item android:state_pressed="true" android:color="@color/white"/>
  4.     <item android:state_enabled="false" android:color="@color/gray"/>
  5.     <item android:color="@color/black"/>
  6. </selector>
复制代码
在Button 中使用
  1.     <Button
  2.         android:layout_width="wrap_content"
  3.         android:layout_height="wrap_content"
  4.         android:text="按钮"
  5.         android:background="@drawable/button_selector"
  6.         android:textColor="@drawable/text_selector"
  7.         app:backgroundTint="@null" />
复制代码
结语

在这篇博客中,我们深入探讨了 Button 的进阶用法,重点先容了怎样通过 事件处置惩罚 来响应用户的操作,怎样使用 自定义样式 来提升按钮的外貌,并使用 StateListDrawable 来管理按钮在不同状态下的表现。这些本事能够资助你打造更具交互性、视觉吸引力和动态响应的按钮,提升用户体验。
无论是通过 Java 代码处置惩罚事件,还是通过 XML 实现样式的切换,这些方法都能让你的应用界面更加生动和灵活。掌握这些本事后,你可以更轻松地定制按钮的行为,打造符合需求的 UI 组件。
渴望这篇博客能够资助你在日常开发中更好地使用和自定义按钮,创造出更加出色的 Android 应用!如有疑问或想法,欢迎在评论区分享。
 
 
 
 
 

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

惊落一身雪

金牌会员
这个人很懒什么都没写!
快速回复 返回顶部 返回列表