Tuesday, 22 November 2022

phone, laptop

iOS applications and Swift

An example of developing iOS applications in the Swift language

As an example, let’s take a simple application that calculates body mass index and the number of calories required to maintain weight. The calculation will be carried out using the standard BMI formula and the Harissa Benedict formula.

First of all, you need to create a project in the Xcode environment. Do this by pressing the key combination Cmd + Shift + N or by selecting the File – New menu item Project.

Select the Tabbed Application option and click Next.

Come up with a name for the application in accordance with the given criteria and enter it in the Product Name field. Click Next and save the project in a specific folder. The Organization Name and Organization Identifier parameters can be left as is. It is important to make sure Swift is selected in the Language field.

After saving the project, you will see the development environment workspace. On the left and right are the Navigator and Utilites panels, respectively. They have a set of tabs that allow you to use various functions. For example, the first tab of the Navigator panel displays a list of project files

In the first tab of the Navigator, find Main.storyboard and click on it. This file defines the screens (controllers) available in the application to which elements can be added. Links can also be set between screens. The selected controller is highlighted with a blue border, and the Utilites panel displays its properties (eg size). To change the screen size, simply select a different value in the Size field.

Run the finished application template and evaluate its appearance in the simulator by selecting the device type at the top left and pressing Play (or Cmd + R). You will see an application of two screens, you can switch between them using the tab bar.

These tabs need to be renamed. First click on each tab or select it from the hierarchical list of controls. The selected element should be highlighted in green.

Next, you need to select the Attributes Inspector function in the Utilites panel. Rename the tabs by changing the value of the first tab to “BMR/BMI” and the second tab to “kcal”. At this stage, the first screen contains various inscriptions. They need to be deleted by selecting them with the mouse and pressing the Delete key.

Add your own controls to the scene. To do this, select the required objects from the Object Library located at the bottom of the Utilites panel. Find the Label object and drag it to the BMR/BMI screen. Double-click on the scene beforehand to bring it to the standard scale. The Utilites panel contains, among other things, functions for changing text, font, etc.

Move a few other labels, write them the text as in the image. In the last label, you need to set the Lines parameter to 2 to automatically wrap the text to a new line.

Next, add 3 Text Fields by setting their Keyboard type to Number Pad. Leave the text as default.

The next step is to add controls that allow users to select gender and the number of workouts per week. This can be done by adding a Segmented Control from the Object Library to the screen. This element has the ability to change the number of segments and set the text for each segment.

Add a button to the project and give it a title. This element is called button. Then add another label with Lines set to 4.

Open the Assistant Editor by selecting the BMI/BMR controller and clicking on the two intersecting rings at the top right. The code for the selected controller will be displayed.

Add controls. Click on the first text field to enter the age, hold down Ctrl and click on this field again. Hold down the mouse button and drag the element inside the class. The prompt “Insert Outlet, Action, …” should pop up. As soon as it appears, release the mouse button. The link creation window will be displayed. Enter ageTextField in the name field and click Connect.

Thus, you have created the ageTextField variable. Repeat this operation for the remaining text fields, labels, and segmented controls that assume a result text value. Next, move the button. The connection type should be specified as Action, and calculateTapped should be entered in the name field.

Then, in the calculateTapped method, you need to copy the code below, which is intended directly for calculating the target values and displaying the result on the screen.

Perform a final health check of the application by running it.

Differences in mobile app development for iOS and Android

To create a native application with an ideal design, you need to take into account the fundamental differences between iOS and Android systems. These platforms differ not only in the appearance of applications, but also in the structure.

Knowing the hallmarks below will provide a better user experience through better design.

Navigation patterns. Mobile app users move between screens quite often. And the templates for this action, recommended when developing applications, differ for both operating systems.

This is important for developers to consider. Let’s say all Android devices have a common navigation bar located at the bottom and containing a back button. Using this button, users can easily return to the previous screen or step. Almost all Android applications support this feature.

Apple’s design approach is different in this regard. iOS mobile devices do not have a global navigation bar, and therefore there is no back button. Therefore, users of native applications for this system, by default, cannot return to the previous screen in this way.

This means that when creating a design as part of developing iOS applications from scratch, it is necessary to provide such an opportunity by creating a separate navigation bar for each application. The “Back” button is located in the upper left corner.