Making an iOS app look like one

[Devin Asay]

Hi Graham,

TL/DR: It’s doable, but there is a learning curve.

Making your apps look native is doable, but how to get there is a mixed bag. As you’ve discovered, you have to use a range of capabilities.

1. Widgets. They are mostly straightforward to figure out. See my lesson at http://livecode.byu.edu/objects/widgets.php. I also created a sample stack with mobile-appropriate widgets at http://dight310.byu.edu/lesson_materials/13-Mobile_native_controls/mobileAndWidgets.livecode

1.a. Control over SVG icons. You have quite a bit of control over which icons you can use, by using icon families. See my stack SVG Icon Family Maker in Sample Stacks (AKA revOnline). You can go out on the internet and find an SBG icon set you like, import them into your stack, and put them into an icon family. Then you can set the icon family when you’re choosing icons for your SVG widget or Navbar widget.
1.b. Mobile native controls wrapped into widgets. They include the Android Native Button, Android Native Field, and iOS Native Button. The Android ones seem alright, but the iOS button just displays a label in the app, nothing else, no outline or background color. So these widgets seem incomplete. Standard LiveCode buttons using custom icons might be a better choice for now.

2. Mobile Native Controls. See my lesson at http://livecode.byu.edu/mobile/device-specific.php. I divide them into a few different groups.

2.a. Stuff that “just works”. Basically ask and answer dialogs just work right on mobile. Easy. Popup keyboards in fields also appear on mobile without any effort.

2.b. Stuff that’s pretty easy, but use mobile-specific commands.
- mobilePick - this is probably what you want in place of a radio button group.
- mobilePickDate
- mobilePickPhoto

2.c. Mobile native controls. These have to be completely scripted, but are doable. As for sizing and placing, I usually use a place-holder control during development and set the rect of the mobile native control to the place holder, hiding the place holder when running in the mobile environment.

Sample stack for native controls at http://dight310.byu.edu/lesson_materials/13-Mobile_native_controls/testMobileControls.livecode

Hope this helps.

Devin


On Apr 16, 2020, at 9:15 AM, Graham Samuel via use-livecode <use-livecode at lists.runrev.com<mailto:use-livecode at lists.runrev.com>> wrote:

Folks, I know this is a desperately naive question, but as I progress with my first serious attempt at an iOS app, which I’m trying to do in a hurry with only my experience of developing LC desktop apps to go on, I am struck by how un-iOS-like it looks. Richard Gaskin has already suggested that I look for good practice amongst existing apps from all sources, and I’ve tried to do this. Where I come unstuck is how to imitate the ‘look’ of such apps.

I am trying, for example by getting the Native Control Widget pack from the LC store, and by attempting (but not so far succeeding) to understand the LC lesson about Native text controls, especially how I can create such controls in the first place.

My app is not outrageously complicated. What it needs is

 -  Fields to display information, some of which must allow input via keyboard or pasting. Although there is a Native Android Field widget, there isn’t one for iOS, so I don’t know what my options are. I want the kind of fonts and font sizes that are typical of iOS, but so far I haven’t found a reference to these properties in the LC documentation. I found a command, mobileControlCreate, which it appears can only function dynamically in a mobile app, which seems to mean I can’t create and place controls until the app is running. I find that confusing.

 -  Small, tidy icons, for use as the equivalent of menus or menu items, for example acting as links to various settings cards - so typically an image like a cogwheel for example. I would like these to be SVG, but none of LC’s SVG images have the necessary unchunky look. Do I have to create them from scratch (it would not be the end of the world if I did, but I imagine that there’s a library of them somewhere).

 -  “Done” type buttons (there is a built in widget for this but it doesn’t end up looking like the ‘done’ buttons I see on typical apps) and other buttons to start off processes or displays.

 -  Some kind of control that acts like a radio button group, so that one option is chosen to the exclusion of any others in the group (I suppose it’s a picking list, but I don’t know how to implement such a thing in an iOS-compatible way and the widgets on offer are specialised to date and time)

LC Support has been helpful in pointing me at various lessons, but I have obviously missed masses of stuff which must be there somewhere. As usual I am searching for pointers and examples in order to try to fast track this development.

Sorry for asking yet more questions.

Graham



_______________________________________________
use-livecode mailing list
use-livecode at lists.runrev.com<mailto:use-livecode at lists.runrev.com>
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode