跨平台移动应用的手势实现-源码交易平台丞旭猿

每日分享最新，最流行的软件开发知识与最新行业趋势，希望大家能够一键三连，多多支持，跪求关注，点赞，留言。

介绍

大家好

在我们连续的 SCADE 系列文章中，今天我们将开发一个 SCADE 应用程序，该应用程序将演示 Android/iOS 平台的手势实现。这个应用程序将包含按下按钮时显示触摸效果的用例。它改善了 SCADE 应用程序的用户体验。好的部分是，相同的代码库用于 Android 和 iOS 平台。

Swift + SCADE = 很棒的应用程序

所以让我们开始吧。

先决条件

如果您尚未安装 SCADE IDE，请下载SCADE IDE 并将其安装在您的 macOS 系统上。SCADE 的唯一先决条件是 Swift 语言（至少是基础）。此外，如果您想在 Android 设备上运行 SCADE 应用程序，请确保 Android 模拟器或物理设备正在运行。

入门

为了简单起见，让我们通过创建一个新的 SCADE 项目来理解概念，然后选择 SCADE 选项，输入项目名称，然后单击创建。我们已准备好编写 SCADE 应用程序。File -> New -> New Project.

我们现在将创建应用程序的用户界面。现在导航到文件夹/sources/main.page，然后单击+编辑器右上角的**按钮并拖动标签、按钮等小部件。

创建一些用户界面

让我们从创建 Pin Code 输入面板用户界面开始。它需要几个用于数字 0-9 的按钮和一些标签来显示输入的数字。

请从标签的设计调色板中选择所需的字体系列、大小和颜色。

1. 标签 1：我们将添加应用标题并分配文本（请选择您的个人 5 位密码）

2. RowView：需要一个 RowView 来保存 5 个标签，这将实际显示用户输入的 5 位数字。它将包含 5 个标签，彼此等距。

3. 标签 2：让我们添加另一个带有文本的标签（请选择 5 位密码）。

4. GridView：添加将包含数字面板的 GridView 小部件。将有 3 列和 4 行。我们将添加 0-9 的按钮和一个退格按钮，并且彼此等距，如上图所示。

让我们深入了解代码

我们已经为应用程序开发了 UI。现在让我们编写逻辑来获取用户输入的密码。

我们将一个变量初始化position为 0 来获取用户输入的数字的位置。然后相应地，我们将根据位置的值将输入数字存储到相应的标签中。如果位置的值超过 5，我们会将所有数字标签初始化为零。相同的逻辑在下面的代码片段中实现。

var position = 0 func updatePin(val: Int) {   if val == -1 {     if position == 1 {       self.digit_1.text = "*"       position -= 1     } else if position == 2 {       self.digit_2.text = "*"       position -= 1     } else if position == 3 {       self.digit_3.text = "*"       position -= 1     } else if position == 4 {       self.digit_4.text = "*"       position -= 1     } else if position == 5 {       self.digit_5.text = "*"       position -= 1     }   } else {     position += 1     if position == 1 {       self.digit_1.text = String(val)     } else if position == 2 {       self.digit_2.text = String(val)     } else if position == 3 {       self.digit_3.text = String(val)     } else if position == 4 {       self.digit_4.text = String(val)     } else if position == 5 {       self.digit_5.text = String(val)       pinString =         "\(self.digit_1.text)\(self.digit_2.text)\(self.digit_3.text)\(self.digit_4.text)\(self.digit_5.text)"       self.callFinalMethod(pin: pinString)     } else {       position = 5       print("Exceeded")     }   } }

让我们实现触摸手势

让我们在按钮被按下时实现触摸效果。为此，让我们首先定义单击按钮时可见的颜色。

// colors  let colorDefaultGreen = SCDGraphicsRGB(red: 211, green: 211, blue: 211, alpha: 255)  let whiteColor = SCDGraphicsRGB(red: 255, green: 255, blue: 255, alpha: 255)

作为下一步，我们现在将使用SCDSvgPanGestureRecognizer将覆盖方法的实例，该方法onPanAction()提供了实现手势处理程序逻辑的接口。

func getUpDownGestureForButton(btn: SCDWidgetsButton, val: Int) -> SCDSvgPanGestureRecognizer {   // Create action*   func onPanAction(recognizer: SCDSvgGestureRecognizer?) {     // depending on whether we are inside or outside of the button,     // we set the button background a different color     switch recognizer!.state {     case .began:       btn.backgroundColor = self.colorDefaultGreen       self.updatePin(val: val)     case .ended:       btn.backgroundColor = self.whiteColor     default:       return     }   }   // create recognizer   let panGestureRecognizer = SCDSvgPanGestureRecognizer(onPanAction)   // Configure gesture --> nothing to configure. Return it   return panGestureRecognizer }

SCDSvgGestureRecognizerinstance 返回事件的状态，例如它返回两个状态began和ended。我们可以通过在按钮状态从变为时立即更改按钮的背景颜色来实现在此处添加触摸效果的逻辑。

最后，让我们将上述方法附加getUpDownGestureForButton到每个按钮上。

// add gesture to button. It changes the background color// of the button when button is pressed (began) and finger is lifted // up (ended)    self.b0.drawing!.gestureRecognizers.append(getUpDownGestureForButton(btn: self.b0, val: 0))    self.b1.drawing!.gestureRecognizers.append(getUpDownGestureForButton(btn: self.b1, val: 1))    self.b2.drawing!.gestureRecognizers.append(getUpDownGestureForButton(btn: self.b2, val: 2))    self.b3.drawing!.gestureRecognizers.append(getUpDownGestureForButton(btn: self.b3, val: 3))    self.b4.drawing!.gestureRecognizers.append(getUpDownGestureForButton(btn: self.b4, val: 4))    self.b5.drawing!.gestureRecognizers.append(getUpDownGestureForButton(btn: self.b5, val: 5))    self.b6.drawing!.gestureRecognizers.append(getUpDownGestureForButton(btn: self.b6, val: 6))    self.b7.drawing!.gestureRecognizers.append(getUpDownGestureForButton(btn: self.b7, val: 7))    self.b8.drawing!.gestureRecognizers.append(getUpDownGestureForButton(btn: self.b8, val: 8))    self.b9.drawing!.gestureRecognizers.append(getUpDownGestureForButton(btn: self.b9, val: 9))    self.b_cancel.drawing!.gestureRecognizers.append(      getUpDownGestureForButton(btn: self.b_cancel, val: -1))

上面的代码片段实现了将手势实现方法作为参数调用的gestureRecognizers方法。

在 iOS/Android 上运行应用程序

为了在 iOS/Android 设备上运行应用程序，请确保物理设备或模拟器/模拟器已启动并运行。SCADE 应用程序可以在 SCADE 模拟器、iOS 和 Android 设备以及 Apple 和 Android 模拟器上运行。

您还可以为 Android (APK/AAB) 或 iOS (IPA)构建应用程序，以将它们发布到相应的应用程序商店。您需要单击 App Name 按钮并相应地选择设备目标。

iOS

动图

安卓

现在我们可以在 Android 设备上测试代码了。将目标设置为您喜欢的任何 Android 设备并测试它是否按预期工作。

动图

瞧！我们已经使用 SCADE 中可用的手势功能成功实现了按钮的触摸效果。这是 SCADE 编辑器使用手势驱动功能的示例之一。您绝对应该尝试使用 SCADE 编辑器来构建一些跨平台应用程序。

我们将发布一系列与 SCADE & swift-android 编译器相关的文章。感谢您的阅读，我们下一篇文章再见！

快乐编码！