Now that iOS 7 is out, take a look at how you can simulate some of its fancy new controls in your own web apps.
If you’ve used any prior version of iOS before, you are undoubtedly aware of the significant UI changes in iOS 7. I’m still getting used to the new look on my iPhone and iPad, but I thought it might be a good exercise to see if I could simulate some of the new iOS 7 controls in a web app. In particular, the controls that caught my eye are the new “borderless” button, circle icon button, roundrect icon button and switch control.
Borderless Button
The borderless button is all over the place in iOS 7. Essentially, it looks like clickable text. You can easily create this type of button by applying a WebStyle to a normal WebButton. Just set all the border properties to “None” and set the background opacity to 0.
To see what it would look like, I also created a button using a WebLabel and a WebStyle, adding an Action event.
Rounded Buttons
These are actually two buttons: a circle button and a round rectangle button. I decided to use a WebImageView for this with a separate style for each button type. There are properties to specify the picture/icon to display in both normal and selected form, plus an Action event handler.
Switch Control
The switch control is an on/off switch that flips its position when clicked. I used a WebCanvas for this control and draw everything using the Paint event handler. There is a Value property to set the switch position and a Clicked event handler to know when it is clicked.
Try Creating Your Own
I’m not a graphics design expert, so I’m sure others could do a better job of tweaking the layout of these controls and getting the colors exactly right. But these should give you an idea of the things you can do in your own web apps. Download the sample project and improve on them or add your own!