LAND-VEHICLE DESIGN TOOL
Home
About
Bicycle-trailer
InterUnit-UI
Land-vehicle construction
Contact
Open Positions
InterUnit-UI on wxWidgets
InterUnit-UI on Win32
InterUnit-UI on MacOS
InterUnit-UI on Linux
InterUnit-UI on Android
InterUnit-UI on iOS
InterUnit-UI on a Web-app
Events
Appendix A
Appendix B
Appendix C
Privacy Policy
Mobile App UI design
LAND-VEHICLE DESIGN TOOL
Home
About
Bicycle-trailer
InterUnit-UI
Land-vehicle construction
Contact
Open Positions
InterUnit-UI on wxWidgets
InterUnit-UI on Win32
InterUnit-UI on MacOS
InterUnit-UI on Linux
InterUnit-UI on Android
InterUnit-UI on iOS
InterUnit-UI on a Web-app
Events
Appendix A
Appendix B
Appendix C
Privacy Policy
Mobile App UI design
More
  • Home
  • About
  • Bicycle-trailer
  • InterUnit-UI
  • Land-vehicle construction
  • Contact
  • Open Positions
  • InterUnit-UI on wxWidgets
  • InterUnit-UI on Win32
  • InterUnit-UI on MacOS
  • InterUnit-UI on Linux
  • InterUnit-UI on Android
  • InterUnit-UI on iOS
  • InterUnit-UI on a Web-app
  • Events
  • Appendix A
  • Appendix B
  • Appendix C
  • Privacy Policy
  • Mobile App UI design
  • Home
  • About
  • Bicycle-trailer
  • InterUnit-UI
  • Land-vehicle construction
  • Contact
  • Open Positions
  • InterUnit-UI on wxWidgets
  • InterUnit-UI on Win32
  • InterUnit-UI on MacOS
  • InterUnit-UI on Linux
  • InterUnit-UI on Android
  • InterUnit-UI on iOS
  • InterUnit-UI on a Web-app
  • Events
  • Appendix A
  • Appendix B
  • Appendix C
  • Privacy Policy
  • Mobile App UI design

Developing an app-UI for an iPhone or Android phone

Developing for the iPhone: iOS UI front-end + UIKit app-UI

 1. iOS UI front-end.


The status-bar:

iOS displays a single character high strip 

across the top of the screen at all times.

This strip is called the status-bar.

It displays iPhone status information such as

time, cellular (connection and signal-strength) and battery-level.

An app cannot write to the status-bar area of the screen.

It can only control screen-display below the status-bar.


The home-screen:

(A selector).

iOS provides a home-screen that is like a desktop.

It is used to display a set of icons representing applications.

Clicking an icon launches its associated app.

Hence, it acts as a selector.


(An operational-context anchor).

Within the context of any app, 

there is a simple way to get back to the home-screen.

Multiple apps can be running at the same time.

The user can switch between running apps, 

by returning to the home-screen and selecting a different app.

Hence, it acts as an operational-context anchor 

that is needed to manage multiple simultaneously-running apps.


2.  iOS app-UI architecture.


The lowest-level framework for developing an iOS app is UIKit.

The UIKit framework uses the model-view-controller paradigm

in the following way.


Window.

An iOS app is associated with a Window component in UIKit. 

The Window is an OS UI component similar to a Frame in desktop-apps.

Since all iPhone apps run full-screen, the Window never needs to be resized or repositioned. Hence, the developer can ignore it.


ViewController.

A Window is always associated with a ViewController in UIKit.

The ViewController which  is Ike a desktop-app Control.

It is like a packaged MVC style UI-component.


The developer defines an app-specific sub-class of ViewController.

The app initiallty interfaces with a user via the ViewController.

The ViewController is the front-end controller of an app's interface.

When an app loads, this ViewController becomes active.

It accepts user-input events and dispatches them for processing.

It accepts redraw request from the Window and dispatches them.

It controls the loading and unloading of other Views and ViewControllers into the Window, and gives them ability to issue Window redraw requests.


ViewController Library..

UIKit provides a large library of Apple-designed ViewControllers

for commonly used UI-functions 

such as selection, navigation and information-display.


App-UI design.

The developer designs a front-end ViewController, associates it with a Window, then connects other Views and ViewControllers to the front-end ViewController to add more depth to the app-UI.

Developing for an Android Phone: One UI by Samsung, Flutter by Google

 One UI OS-UI front-end.


The status-bar.

This is very similar to iOS.


The navigation-bar.

One UI also displays a navigation bar at the bottom of the screen.

It is about the same size as the status-bar at the top.

An app cannot write to the navigation-bar area.

Since One UI does not use the swipe-up gesture for app to home-screen navigation,

this navigation-bar provides an equivalent (though slightly more complex)

mechanism for app to home-screen navigation.


The home-screen.

This is also very similar to iOS.

It serves as a high-level selector and operational-context anchor.

However, its function as an operational-context anchor 

is slightly more complex than iOS.


Flutter app-UI architecture.


The Flutter framework, design by Google,

is the lowest level framework for designing an Android app.

Flutter is also based on the model-view-controller paradigm.


Window and ViewController —> Navigator and Widget.

A Flutter Android app is not associated with a Window.

It is directly associated with a developer defined Widget (which is similar to a ViewController).

The app interfaces with a user via a Widget.

A special Widget called the Navigator can be used as an app-UI front-end.

A Navigator can manage other Widgets.


Widget Library.

Just like UIKit, Flutter provides a large library of Google-designed Widgets

for commonly used UI functions.


App-UI design.

The developer defines a Navigator widget for the UIs front-end, then adds other Widgets to this Navigator to add depth to the UI.

Copyright Khitchdee Design (OPC) Private Limited 2025

  • Home
  • Bicycle-trailer
  • InterUnit-UI
  • Contact
  • Open Positions