SuperButton: Arduino平台上的开源多功能按钮

需积分: 50 1 下载量 25 浏览量 更新于2024-11-12 收藏 17KB ZIP 举报
资源摘要信息:"SuperButton是一个开源的多功能Arduino按钮库,它允许开发者在Arduino项目中实现对按钮单次、双次和长按事件的检测。这个库被设计为易于集成和使用,不需要额外的硬件支持,从而降低了项目的复杂性和成本。SuperButton的特性意味着它可以在许多类型的Arduino项目中使用,例如机器人控制、自动化系统、交互式艺术装置等,提供了一个用户友好的交互界面。 这个开源库的使用可能涉及以下几个关键知识点: 1. Arduino编程基础:了解Arduino的基本概念,如输入/输出(I/O)引脚、数字和模拟信号处理、以及如何在Arduino IDE中编写和上传代码。 2. 事件检测机制:学习如何编写代码来检测按钮的不同按压方式,包括单次、双次和长按事件。这通常涉及到使用定时器和中断服务程序(ISR)来精确计时按键动作,以及设置适当的延时来区分不同的按键动作。 3. 编写库代码:对如何创建一个可复用的Arduino库有基本的认识。理解库文件(.h和.cpp文件)的结构和组织,以及如何在Arduino项目中导入和使用库。 4. 权限和开源许可:由于SuperButton是开源的,需要理解开源软件许可条款,例如使用的具体开源许可(虽然未提供,但可能遵循GPL、LGPL、MIT等常见许可)的含义,以及如何遵循相应的许可要求。 5. 硬件接口:虽然SuperButton不需要额外的硬件资源,但是了解如何将物理按钮连接到Arduino的数字输入引脚是基本的硬件知识。 6. 调试和故障排除:能够使用串行监视器或其他调试技术来监视程序的运行状态和行为,以及在出现问题时进行故障排除。 7. 项目集成:了解如何将SuperButton集成到Arduino项目中,包括配置和初始化库,以及如何通过库提供的接口来处理不同的按键事件。 8. 用户文档阅读:阅读和理解SuperButton的文档,了解如何正确地安装和使用库,这对于正确地利用库的功能至关重要。 SuperButton库的开源特性意味着,除了上述技术知识点,用户还可以访问源代码,为自己的项目做自定义修改,或者为库贡献代码以修复bug、添加新功能或优化性能。开发者社区在开源项目中扮演着重要角色,通过协作和分享代码,可以持续改进和扩展库的功能。"
2019-09-23 上传
背景按钮应该是我们的App里面最普遍的组件之一了,特别常用。通常我们写一个按钮的套路很简单也很固定。大概分为以下几个步骤:在xml布局里面按照设计稿的尺寸位置写一个Textview按照设计稿规定的颜色和圆角在drawable目录下创建一个shape文件将这个shape文件作为Textview的背景这样一个很标准的按钮就诞生了,然后就可以继续愉快的开发了。这本来没有什么问题,也比让UI妹纸切图高级了很多,但是随着开发的进行你会发现,UI妹纸的想法很多,不同的界面有各种不同圆角和不同背景颜色的按钮,这个时候你需要把上面的三个步骤再进行N次。最后你会发现你的drawable目录下有各种各样的按钮背景资源,难以管理。特别是假如有的按钮要求有点击效果时需要使用selector,这个时候可能就会产生三个文件用来满足需求,所以总得来说很繁琐。想法基于以上原因以及按钮使用的普遍程度,感觉很有必要写一个使用简单且能满足日常各种需求的按钮。我们先梳理下按钮需要达到的效果:使用简单(即可以利用属性对按钮进行各种设置)可以支持设置按钮文字、按钮文字颜色、按钮文字大小可以支持统一设置圆角大小,也可以单独设置按钮每个圆角的大小可以支持设置按钮背景颜色可以支持selector可以支持圆形按钮可以支持渐变色按钮,可以支持各个方向设置渐变色可以支持设置带边框的按钮,可以设置边框的颜色和宽度可以支持设置按钮是否可以点击可以设置带图标的按钮,支持自定义按钮大小,和自动缩放,图标支持设置在文字上下左右四个方向,支持自定义文字距离图标的距离引入implementation 'top.androidman:superbutton:1.0.1'Github传送门实现效果基本使用单独设置每个圆角Selector圆形按钮渐变背景的按钮有边框按钮按钮不可点击带图标按钮代码解释0x1 基本使用效果代码<top.androidman.SuperButton         android:layout_width="match_parent"         android:layout_height="60dp"         android:layout_margin="20dp"         app:color_normal="@color/color_accent"         app:corner="10dp"         app:text="@string/poetry_1"         app:textColor="@color/color_white"         app:textSize="22sp" />属性解释按钮文字app:text="床前明月光"按钮文字颜色 app:textColor="@color/color_white"按钮文字大小app:textSize="22sp"按钮背景颜色app:color_normal="@color/color_accent"0x2 单独设置每个圆角效果代码<top.androidman.SuperButton     android:layout_width="match_parent"     android:layout_height="60dp"     android:layout_margin="20dp"     app:color_normal="@color/color_6596ff"     app:corner="40dp"     app:corner_left_bottom="0dp"     app:text="单独设置左下角为0dp"     app:textColor="@color/color_white"     app:textSize="22sp" />属性解释单独设置左下角角度app:corner_left_bottom="0dp"单独设置左上角角度app:corner_left_top="5dp"单独设置右上角角度app:corner_right_top="22dp"单独设置右下角角度app:corner_right_bottom="0dp"按钮四个角的圆角角度app:corner="10dp"注意:单独设置角度会覆盖corner属性0x3 Selector效果代码<top.androidman.SuperButton     android:layout_width="match_parent"     android:layout_height="60dp"     android:layout_margin="20dp"     android: 圆形按钮效果代码<top.androidman.SuperButton     android:layout_width="160dp"     android:layout_height="160dp"     android:layout_margin="20dp"     android: 渐变背景的按钮效果代码<top.androidman.superbutton.SuperButton     android:layout_width="match_parent"     android:layout_height="60dp"     android:layout_margin="20dp"     app:color_direction="RIGHT_LEFT"     app:color_end="@color/color_14c7de"     app:color_start="@color/color_red"     app:corner="20dp"     app:text="从右到左渐变"     app:textColor="@color/color_white"     app:textSize="22sp" />属性解释开始颜色app:color_start="@color/color_14c7de"结束颜色app:color_end="@color/color_red"颜色渐变方向app:color_direction="RIGHT_LEFT"TOP_BOTTOM 从上到下BOTTOM_TOP 从下到上LEFT_RIGHT 从左到右RIGHT_LEFT 从右到左TR_BL 从右上到左下BL_TR 从左下到右上BR_TL 从右下到左上TL_BR 从左上到右下注意:当设置颜色渐变时,color_normal,color_pressed设置将失效0x6 有边框按钮效果代码<top.androidman.SuperButton     android:layout_width="match_parent"     android:layout_height="60dp"     android:layout_margin="20dp"     app:border_color="@color/color_red"     app:border_width="2dp"     app:color_normal="@color/color_accent"     app:corner="10dp"     app:text="@string/poetry_1"     app:textColor="@color/color_white"     app:textSize="22sp" />属性解释边框宽度app:border_width="2dp"边框颜色app:border_color="@color/color_red"0x7 按钮不可点击效果代码<top.androidman.SuperButton     android:layout_width="match_parent"     android:layout_height="60dp"     android:layout_margin="20dp"     android: 带图标按钮效果代码<top.androidman.superbutton.SuperButton     android:layout_width="match_parent"     android:layout_height="60dp"     android:layout_margin="20dp"     app:color_normal="@color/color_red"     app:corner="20dp"     app:drawable_padding="20dp"     app:drawable_right="@mipmap/icon_like"     app:text="图标在右边"     app:textColor="@color/color_white"     app:textSize="22sp" />属性解释图标在文字右边app:drawable_right="@mipmap/icon_like"图标在文字左边app:drawable_left="@mipmap/icon_like"图标在文字上边app:drawable_top="@mipmap/icon_like"图标在文字下边app:drawable_bottom="@mipmap/icon_like"图标距文字距离app:drawable_padding="20dp"根据文字大小缩放图标,默认为true,当为false时显示原图标大小app:drawable_auto="true"按钮支持的所有属性<?xml version="1.0" encoding="utf-8"?> <resources>     <declare-styleable name="SuperButton">         <!--默认配置-->         <attr name="text" format="reference|string" />         <!--按钮文字颜色-->         <attr name="textColor" format="reference|color" />         <!--按钮文字大小-->         <attr name="textSize" format="dimension" />         <!--文字是否单行,默认单行-->         <attr name="singleLine" format="boolean" />         <!--默认背景颜色-->         <attr name="color_normal" format="reference|color" />         <!--按压时的背景颜色-->         <attr name="color_pressed" format="reference|color" />         <!--图片在文字左边-->         <attr name="drawable_left" format="reference|color" />         <!--图片在文字右边-->         <attr name="drawable_right" format="reference|color" />         <!--图片在文字上边-->         <attr name="drawable_top" format="reference|color" />         <!--图片在文字下边-->         <attr name="drawable_bottom" format="reference|color" />         <!--图片距文字的距离-->         <attr name="drawable_padding" format="dimension" />         <!--图标根据文字大小自动缩放图标-->         <attr name="drawable_auto" format="boolean" />         <!--只有图片的情况,此时会忽略文字,即便设置-->         <attr name="drawable_middle" format="reference|color" />         <!--图片在中间时宽-->         <attr name="drawable_middle_width" format="dimension" />         <!--图片在中间时高-->         <attr name="drawable_middle_height" format="dimension" />         <!--形状-->         <attr name="shape" format="enum">             <!--圆形-->             <enum name="CIRCLE" value="1" />             <!--矩形-->             <enum name="RECT" value="2" />         </attr>         <!--按钮背景是渐变色时设置-->         <!--开始颜色-->         <attr name="color_start" format="color" />         <!--结束颜色-->         <attr name="color_end" format="color" />         <!--颜色方向-->         <attr name="color_direction" format="enum">             <!--从上到下-->             <enum name="TOP_BOTTOM" value="0x1" />             <!--从右上到左下-->             <enum name="TR_BL" value="0x2" />             <!--从右到左-->             <enum name="RIGHT_LEFT" value="0x3" />             <!--从右下到左上-->             <enum name="BR_TL" value="0x4" />             <!--从下到上-->             <enum name="BOTTOM_TOP" value="0x5" />             <!--从左下到右上-->             <enum name="BL_TR" value="0x6" />             <!--从左到右-->             <enum name="LEFT_RIGHT" value="0x7" />             <!--从左上到右下-->             <enum name="TL_BR" value="0x8" />         </attr>         <!--按钮圆角,如果单独设置会覆盖此设置-->         <attr name="corner" format="dimension" />         <!--左上角圆角半径-->         <attr name="corner_left_top" format="dimension" />         <!--左下角圆角半径-->         <attr name="corner_left_bottom" format="dimension" />         <!--右上角圆角半径-->         <attr name="corner_right_top" format="dimension" />         <!--右下角圆角半径-->         <attr name="corner_right_bottom" format="dimension" />         <!--边框宽度-->         <attr name="border_width" format="dimension" />         <!--边框颜色-->         <attr name="border_color" format="color" />         <!--按钮是否可以点击-->         <attr name="button_click_able" format="boolean" />     </declare-styleable> </resources>高级应用1.想修改按钮相关调用如下方法:/**      * 修改文字      */     superButton.setText(CharSequence text);     /**      * 修改文字颜色      */     superButton.setTextColor(@ColorInt int textColor);     /**      * 修改按钮背景颜色      */     superButton.setColorNormal(@ColorInt int colorNormal);当某些状态下需要代码控制,将按钮置灰然后不可点击,可以直接调用如下方法:/**      * 调用此方法后按钮颜色被改变,按钮无法点击      */     superButton.setUnableColor(@ColorInt int color);如果只是想设置按钮不可点击,不需要改变按钮颜色,可以使用如下方法/**      * 设置按钮是否可以点击      */     superButton.setButtonClickable(boolean buttonClickable);