Friday, June 28, 2019

How to create Map view in SwiftUI?


Project : https://github.com/EdyLucky/MapView
Open Xcode and either click Create a new Xcode project in Xcode’s startup window, or choose File > New > Project.
In the template selector, select iOS as the platform, select the Single View Apptemplate, and then click Next.

Enter “MapView” as the Product Name, select the Use SwiftUI checkbox, and click Next. Choose a location to save the project on your Mac.

In Canvas on the right click Resume to display the preview. If the canvas is hidden select Editor > Editor and Canvas to show it.

After creating project MapKit needs to be imported and UIViewRepresentable  protocol declared. 


There might be errors regarding the adopted protocol , we will fix them in the next steps. This error is due to UIViewRepresentable protocol which has two requirements you need to add: a makeUIView(context:) method that creates an MKMapView, and an updateUIView(_:context:) method that configures the view and responds to any changes.

Replace the body property with a makeUIView(context:) method that creates and returns an empty MKMapView.


The next step is to create an updateUIView(_:context:) method that sets the map view’s region to the correct coordinates to center the map on Apple’s headquarters. Because MKMapView is a UIView subclass, you’ll need to switch to a live preview to see the map.




CLLocationCoordinate2D - The latitude and longitude associated with a location, specified using the WGS 84 reference frame.


MKCoordinateSpan - Delta values are used in this structure to indicate the desired zoom level of the map, with smaller delta values corresponding to a higher zoom level.

MKCoordinateRegion - A rectangular geographic region centered around a specific latitude and longitude.

Thursday, June 27, 2019

How to create custom Image view in SwiftUI?


Open Xcode and either click Create a new Xcode project in Xcode’s startup window, or
choose File > New > Project.
In the template selector, select iOS as the platform, select the Single View Apptemplate, and then
click Next.

Enter “CustomImage” as the Product Name, select the Use SwiftUI checkbox, and click Next.
Choose a location to save the project on your Mac.

In Canvas on the right click Resume to display the preview. If the canvas is hidden select Editor >
Editor and Canvas to show it.


First we need to add custom image to Assets folder. Drag drop SwiftUi image to mentioned folder.
Image view can be inserted using Image(_:) initializer.  In ContentView replace Text view with Image view and name of Image .
To make image Circular we need to add  a call to clipShape(Circle()) to apply the circular clipping
shape to the image. The Circle type is a shape that you can use as a mask, or as a view by giving the
circle a stroke or fill.
To add a border to our image view, another circle with a black stroke should be created and then add it as
an overlay to give the image a border.
By adding resizeable() property and using frame property we can width , height and alignment of image.


Sunday, June 23, 2019

How to create horizontal and vertical stack views in SwiftUI?


Project files : https://github.com/EdyLucky/HorVerStacks
Open Xcode and either click Create a new Xcode project in Xcode’s startup window, or choose File > New > Project.
In the template selector, select iOS as the platform, select the Single View Apptemplate, and then click Next.


Enter “HorVerStacks” as the Product Name, select the Use SwiftUI checkbox, and click Next. Choose a location to save the project on your Mac.


In Canvas on the right click Resume to display the preview. If the canvas is hidden select Editor > Editor and Canvas to show it.


After resume your screen should look like this:




To customize the Text view select Command+click and from the popover choose Inspect. From the next popover any modification can be done to the Text view. One of the great part of SwiftUI is, as you change anything in the canvas the code part is automatically modified by adding relevant piece of code.




















Change the text to Hello SwiftUi , Font to Headline and Color to Red as shown below on the left and the code will be automatically updated like below on the right.



To create Vertical stack for the view that we modified, Command+Click and from popover Embed in VStack needs to be chosen. The code will be automatically updated.



We can add new Text view to the stack that we create by clicking the plus button (+) at the top right of the Xcode window and then drag a Text view to the place in your code immediately after the Hello SwiftUI text view and change the text inside the view to “Better apps. Less code.”


The canvas and the code will be like this and that is it, we have created Vertical stack for these two views and you can add as many as views or images inside stack by dragging and dropping them inside Vstack.


Next we will add image and create horizontal stack with current vertical stack view.


Drag drop SwiftUI image to Asset Folder. (Image can be downloaded from resources)


Next in ContentView.swift file Command+Click VStack and select Embed in HStack.














This will add VStack into HStack (Horizontal Stack). Next, Image view will be added to HStack by clicking plus (+) and drag drop Image into beginning of HStack above VStack in ContentView.swift file and change Image Name to SwiftUI inside Image View. And resizable() property and height and width of image should be added to make it more visible. 

Monday, June 10, 2019

Dictionaries in Swift, iOS

It is an unordered collection that stores associations between keys and values of same type with no defining ordering. Each value is associated with unique key that acts as an identifier for the value in dictionary. A key is used to store and retrieve values from dictionary. There are two ways of a dictionary declaration. 


If keys and values are consistent types, we do not need to declare the type of dictionary in the declaration.

Adding / Modifying / Removing to a dictionary
For addition subscript notation or updateValue(_:forKey) method can be used.


For removing a pair from a dictionary subscript notation and removeValue(forKey:) method can be used. This method returns the value that was removed.

For retrieving pairs from a dictionary subscript notation can be used. It is possible to use optional binding, forced unwrapping or determine if the value exists to retrieve the pair. If you are absolutely sure that the key exists then only in this case forced unwrapping can be used.






It is possible to iterate through a dictionary and return key pair, which can be decomposed into named constants.

Output


It is possible to retrieve only the keys or values independently.

As mentioned before dictionaries are unordered collections so when you iterate through them there is no guarantee that it will be listed in an order. But there might be occasions that you want iteration in an ordered manner and for those cases sort(_:) method can be used. This will return an array contained sorted elements of a dictionary. In below code $0.0 is first key value pair and $0.1 is second key value pair. These pairs are compared and will be ordered based on this comparison.Then map method is used to retrieve data for key or value.



Output





Output



Saturday, June 8, 2019

Arrays in Swift, iOS


The simplest type of array is the linear array, which also know as one dimensional array. In Swift, arrays are a zero 
based index. One dimensional array can be written simply as ai where i is index between 0 and n.













Another form of array is the multidimensional array which is a typical matrix

There are three forms of syntax for declaring array in Swift.


















If you do not want to define any values at the time of declaration, the following code should be used.


To declare a multidimensional array use nesting pairs of square brackets.


Retrieve , Add and Remove elements
There are multiple ways to retrieve values from array.  We can retrieve using index or loop through using for…in 
syntax.



Output:







We can iterate through the elements in an array.



Output:











Addin elements to array
There are two ways of adding element to array. Append function can be used to add an element at the end of the 
array and Insert function can be used to insert an element at a specific index in an existing array.


Output:



Using Insert



Output:



Removing elements from array
Similarly, there are two ways of removing elements from an array. By using removeLast() function an element at the
end of array can be removed or remove(at:) function can be used to remove an element at a specific index.