如何使用Android App Inventor构建自己的Soundboard应用程序

image

Today we’re going to show you how to use the Android App Inventor tool to create your own Android app, without having to write a lot of complicated code. It’s a really simple process that only requires some dragging and dropping.

今天,我们将向您展示如何使用Android App Inventor工具来创建自己的Android应用程序,而无需编写大量复杂的代码。 这是一个非常简单的过程,只需要拖放即可。

Soundboards are among the simplest apps to create using App Inventor, so today we’ll show you how to get started creating your own application.

音板是使用App Inventor创建的最简单的应用程序之一,因此今天我们将向您展示如何开始创建自己的应用程序。

This guest article was written by Mitch Bartlett from Technipages, where he covers lots of in-depth smartphone tips.

这篇客座文章由Technipages的Mitch Bartlett 撰写 ,他在其中涵盖了许多深入的智能手机技巧。

安装和使用App Inventor创建应用 (Installing and Using App Inventor to Create an App)

First, you’ll need to make sure that you install Java 1.6 or higher. You can download it at http://www.java.com. Once you’re done with that, install the App Inventor using the instructions for your operating system.

首先,您需要确保安装Java 1.6或更高版本。 您可以从http://www.java.com下载它。 完成此操作后,请根据您的操作系统说明安装App Inventor。

  • Mac OS X

    Mac OS X
  • GNU/Linux

    GNU / Linux
  • Windows

    视窗
App-Inventor-New-button[1]

Visit the My Projects section of the App Inventor site. Login and agree to the terms of service if prompted. Select the New button to start a new app.

访问App Inventor网站的“我的项目”部分。 如果出现提示,请登录并同意服务条款。 选择“新建”按钮以启动新应用。

Give your app a unique name, then click OK.

为您的应用指定一个唯一的名称,然后单击“确定”。

App-name[1]

The App Inventor viewer will appear. This screen shows what your app will look like as you build it. First we’ll want to make a title for this screen. Over on the Components pane, Screen1 should be selected. Under the Properties section, we can change the Title field to the name of our app.

App Inventor查看器将出现。 该屏幕显示您的应用在构建时的外观。 首先,我们要为此屏幕命名。 在“组件”窗格上,应选择“ Screen1”。 在“属性”部分下,我们可以将“标题”字段更改为应用程序的名称。

Change-screen-title[1]

Now we can start arranging items on the screen. We’re going to make columns and rows for our soundboard buttons. We can do this by selecting Screen Arrangement on the Palette and dragging the TableArrangement item to the Viewer.

现在我们可以开始在屏幕上排列项目了。 我们将为音板按钮创建列和行。 我们可以通过选择面板上的Screen Arrangement并将TableArrangement项目拖动到Viewer来实现。

Add-TableArrangement[1]

Set the Properties for the TableArrangement1 component on the Properties pane. Here, we’ll change it to 3 columns and 3 rows.

在“属性”窗格上为TableArrangement1组件设置属性。 在这里,我们将其更改为3列3行。

Change-TableArrangement1-Properties[1]

We’ll need a component to play our sounds. Select Media on the Palette, and drag the Player component to the Viewer. It will appear as Player1 in the Non-visible components section.

我们需要一个组件来播放声音。 在面板上选择媒体,然后将播放器组件拖到查看器中。 它将在不可见组件部分中显示为Player1。

Add-Player1-to-Viewer[1]

Let’s add some sounds to our project. App Inventor will support MP3 or WAV files that are under 3MB in size. We add them to our project by selecting the Player1 component, then selecting the Source field. Click the Add… button and select Browse… to upload sound files from your PC. Repeat these steps to add multiple sounds.

让我们在项目中添加一些声音。 App Inventor将支持大小小于3MB的MP3或WAV文件。 我们通过选择Player1组件,然后选择“源”字段将它们添加到我们的项目中。 单击添加...按钮,然后选择浏览...以从您的PC上传声音文件。 重复这些步骤以添加多种声音。

Adding-sounds-to-Player1[1]

Add a button for each sound by selecting the Basic Palette and dragging them over to the TableArrangement1 box in the Viewer. You will be able to place each button within a specific row and column.

通过选择“基本面板”并将其拖到“查看器”中的“ TableArrangement1”框,为每种声音添加一个按钮。 您将能够将每个按钮放在特定的行和列中。

Adding-buttons-to-viewer[1]

Select each button in the Components area and change the Text fields to represent the sounds they will play.

选择“组件”区域中的每个按钮,然后更改“文本”字段以表示它们将播放的声音。

Naming-buttons[1]

We’re finished with the Viewer screen. This is what our app currently looks like.

我们已经完成了查看器屏幕。 这是我们的应用程序当前的外观。

Finished-with-viewer[1]

It’s time to control the behavior of the items on the screen. Click Open the Blocks Editor to get started. Choose to open the file or grant access if prompted.

现在该控制屏幕上项目的行为了。 单击打开块编辑器以开始使用。 选择打开文件或在出现提示时授予访问权限。

Open-blocks-editor[1]

Click the My Blocks tab. Select Button1 and drag the “Button1.Click” box over to the right side of the screen. Do this for every button you’ve added to your app (Button2, Button3, etc.)

点击我的阻止标签。 选择Button1并将“ Button1.Click”框拖到屏幕右侧。 对您添加到应用中的每个按钮(Button2,Button3等)执行此操作

Drag-button-click-blocks[1]

Select Player1 under the My Blocks tab and drag the “Player1.Source” block to the “Button1.Click” block. The block should connect into place. Add a “Player1.Source” block to each of the other button click blocks as well (Button2.Click, Button3.Click, etc.)

在“我的块”选项卡下选择Player1,然后将“ Player1.Source”块拖动到“ Button1.Click”块。 块应连接到位。 也向每个其他按钮单击块添加一个“ Player1.Source”块(Button2.Click,Button3.Click等)

Player1-source-block[1]

Click the Built-In tab and select Text. Drag a “text” block over to the right and connect it to the “Player1.Source” block.

单击“内置”选项卡,然后选择“文本”。 将“文本”块拖到右侧,然后将其连接到“ Player1.Source”块。

Add-text-block[1]

The “text” box will control which sound is played. Click the text in the block and change it to match the name of the sound file for Button1. In our example, Button1 is “Punch”, so we set the text to Punch.mp3.

“文本”框将控制播放哪种声音。 单击块中的文本,然后更改它以使其与Button1的声音文件的名称匹配。 在我们的示例中,Button1是“ Punch”,因此我们将文本设置为Punch.mp3。

Change-text-block-to-name-of-sound-file[1]

Drag a “text” box to each “Player1.Source” block and change each one to match the name of the sound for each button.

将一个“文本”框拖到每个“ Player1.Source”块,然后更改每个以与每个按钮的声音名称匹配。

Sounds-added-for-button-blocks[1]

Now that the sounds are set for each button, we just need to tell our app to play the sound whenever we click the button. To do that, click the My Blocks tab and select Player1. Drag the “Player1.Start” block to the “Button1.Click”. Repeat these steps for each of the button click event blocks.

现在已经为每个按钮设置了声音,我们只需要告诉我们的应用程序,只要单击按钮就可以播放声音。 为此,请单击“我的块”选项卡,然后选择“ Player1”。 将“ Player1.Start”块拖到“ Button1.Click”。 对每个按钮单击事件块重复这些步骤。

Add-Player1-Start-button[1]

You’re done! You have created a fully functioning soundboard app. See the app in action by doing one of the following:

你完成了! 您已经创建了功能齐全的音板应用程序。 通过执行以下任一操作来查看运行中的应用程序:

  • Connect-to-device-button[1]

    Test out the app on your Android device by enabling USB Debugging on the device under Settings > Applications > Development and connecting it to your computer. You can then click the Connect to Device… button in the Blocks Editor to display the app on the device.

    通过在设备上的“设置”>“应用程序”>“开发”下启用USB调试并将其连接到计算机,以在Android设备上测试该应用。 然后,您可以在块编辑器中单击“连接到设备…”按钮,以在设备上显示该应用程序。

  • Install the Android SDK and click the New emulator button to view it on your computer in an emulator screen.

    安装Android SDK,然后单击“新建仿真器”按钮以在仿真器屏幕上的计算机上查看它。
  • Click the Package for Phone option on the App Inventor screen. Then you can Show Barcode, Download the app to the computer as an APK file, or download to a connected phone.

    单击“ App Inventor”屏幕上的“电话打包”选项。 然后,您可以显示条形码,将应用程序以APK文件的形式下载到计算机,或下载到连接的手机。

    Package-for-phone-button[1]

Enjoy your customized soundboard app on your Android device.

在Android设备上享受自定义的音板应用程序。

image

There’s lots of apps you can create with this tool—what are you going to make?

您可以使用此工具创建许多应用程序-您要制作什么?

翻译自: https://www.howtogeek.com/63397/how-to-build-your-own-soundboard-app-with-android-app-inventor/

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值