A reader asked:
Is there is a way to have a control, such as a button, rotate on the screen?
With a simple trick, the answer is
The trick is to use
ImageSprites that are made to look like buttons. Then, instead of . Click event handler, as used on a Button, we use one of the “touch” events defined for the ImageSprite class. To rotate the sprite, change the sprite’s Heading property. Easy!
If you would like to learn more about
ImageSprites, please read my online tutorial “Using ImageSprites for animated App Inventor Graphics”.
I’ve also written an
inexpensive 227 page e-book all about graphics, animation and charts available from many online e-book outlets. You may find that text helpful to you as well. Tutorial Video
The tutorial is shown here as a video – or page down for a written version of the tutorial.
Watch this video to see what a rotating button looks like:
Creating the user interface is the same as creating other App Inventor user interfaces – except we use a graphical drawing area called the
Canvas and add an ImageSprite to the Canvas.
In the last post, we introduced some concepts for building “creative” App Inventor user interfaces that feature visually appealing user interface controls rather than the usual bland buttons.
In this post, we look at creating an array of toggle switches. Tapping a switch flips the switch from left to right, or right to left.
In developing this user interface, we learn two concepts:
We expand on the previous post and its use of images to create custom buttons.
We see how a user interface control can be stored in a list and referenced like a variable within our apps.
The User Interface
I called my app “Mission Control” because any good mission control panel needs lots of switches!
The user interface features 9 toggle switches in a 3 x 3 array. The purpose of this app is to demonstrate how to implement this type of interface – the app does not otherwise do anything interesting.
Tapping any toggle switch causes the switch lever to move to the other side of the switch. Here is a screen shot showing some toggle switches to the left and some to the right.
The Designer View
Posted in Components, Programming Method, STEM Education, Uncategorized |
Tagged android, app inventor, appinventor, controls, design, layout, mit app inventor, programming, Software, stem, switch, switches, toggle, user interface |