CuteContacts-iOS7: Cloning iOS7 Contacts application UI in Qt/QML

As you might know I am interested in figuring out the ways for making native or almost native looking apps for iOS and Android with Qt/QML.

So I have started a project on GitHub for trying one of the ways. CuteContacts-iOS is an attempt to use customized QtQuick Controls for cloning the iOS7 standard Contacts app UI. It is not intended to be a real final application, nor a guidebook for correct coding. It is a proof of concept for the UI level only.

Pasted Image 5 16 14 0 01

Goals

If the projects succeeds in full, it might evolve into a library of controls or framework, but that’s a secondary goal. Primary goals are:

  • To go the edge of what’s possible in looking iOS7 native and to have a working native or almost native looking demo.
  • Evaluate possibility for prototyping iOS7 apps in QML. QML is extremely powerful tool for super-fast UI prototyping, but if 90% of time will be taken by recreating basic controls experience..
  • To identify impossible or particularly difficult UI bits and draw Qt Project team attention to these

How you can help

Well, just join the project and submit pull requests. Most of all it would be great to have some UI-aware mind helping. I have fun solving the principal issues and figuring out the ways for cloning UI and animations precisely, but I have problems with understanding what exactly it should be like: exact color values, exact sizes in pixels and so forth. And most of graphics I just cut out of the popular iOS mockup template Getting advice and contribution in all things UI would be very welcome. Coding contributions would be great too naturally.

Principal difficulties I have uncovered by now

The project is just starting and many discoveries are ahead, but a couple of issues I don’t have easy answers for are uncovered already.

Unpaintable “under status bar area”

Some iOS7 animations such as opening a Search box editor in the title bar require animating and painting under the status bar (area with the phone signal). There is no way to do it in pure QML as this area is either beyond the QML control completely or we have to take the whole screen and somehow paint status bar ourselves. Has anybody got an idea on how to ask iOS paint it’s standard status bar over the QML canvas
expanded-search-background.png

Color of the blinking cursor in the text editor

There seems to be no QML way to control it. Do you know how to adjust it from C++?

cursor-color.png

Your opinion

What do you think? Does the project make sense to you? Would you contribute and how to make it easier for you to do so?

  • http://twitter.com/mkrus/ mkrus

    To put content behind the status bar I think the way to do it is to:
    – setup app to be full screen (in app plist) which will hide the status bar
    – then when it starts up fall back to ObjC land using a combination of notifications and swizzling of the private Qt ObjC class to show the status bar again

    For the cursor, no idea but the whole textfield/textarea are pretty broken. Tried selecting anything? Not native at all. And keyboard avoidance is a pain in the but if you want to override Qt’s default behaviour (which consists in scroll the ENTIRE window out of the way)

    Good luck

    Mike

    • artemmarchenko

      Yeah, plist setting could be the way indeed!

      Text typing could be improved indeed. Okayish for prototyping maybe, but not nearly good for a final app

  • artemmarchenko

    Yeah, plist setting could be the way indeed!

    Text typing could be improved indeed. Okayish for prototyping maybe, but not nearly good for a final app.