SwiftUI Data Binding with the help of @State and @Binding

-

Data Binding is an approach which binds the data source (i.e provider) to a consumer and vice-versa , so as to keep them synchronized.

UI Data binding is something which we will be interested to learn along with SwiftUI.


UI Data binding is a design pattern to simplify the development of GUI applications. The name itself gives us an idea about the data will be binding to the View and vice-versa. That is , when data updates the view updates or when the view updates so does the data gets updated.

Just to take as an example, there are many javascript framework which support them example ReactNative or Angular JS Framework.



What would be the traditional approach?


UITextField changes will be identified using the UITextFileDelegate or add Target to get notified when UIControlEventEditingChanged.

Once we receive the notification we update the object.


Seems like it will be too much of code to handle such behavior.


Lately with iOS 13 SwiftUI , we are now able to take advantage of this design pattern, without doing much of a work.


SwiftUI maintains the storage of such property. There are two ways to achieve data binding and both depends on the usage:


@State

- Use @State binding when we want a property to be a single source of truth for a view.


- Consider to use @State ,  when binding to a single view and don't want to pass the binding to its subview.



@Binding

- Binding is used to create a two way connection between the property that stores the data (i.e @State) and view that displays and changes the property state.


- This is usually used when you have a state that manages multiple views. 


- Consider to user @Binding, when binding to a the current view and passing the binding to its subview.


Like in case of below example , when we turn on the "Default Switch" , the Switches of "Yellow Hello, World" and "Purple Hello, World" toggles to on state.


It's because of two way binding, when we toggle the switch in either Yellow or Purple View, all the switches turn off too.


To better understand this, you can refer the StateBindingViewHighlighter





The main ContentView which holds the "highlight" state property managed by SwiftUI.


struct ContentView: View {

    @State private var highlight:Bool = false

}


YellowView and PurpleView which has two way binding with "highlight" property of "ContentView"



struct YellowView: View {

    @Binding var highlightView: Bool

}



struct PurpleView: View {

    @Binding var highlightView: Bool

}



Below diagram helps to understand on how Binding works for YellowView and PurpleView  but would not work with BlueView.



- Both YellowView and PurpleView have two way binding with the ContentView.


- Which is why we can pass projected value of the ContentView , to both of these Views

using the below code snippet


YellowView(highlightView: $highlight)

PurpleView(highlightView: $highlight)


- BlueView does not support because the hightView uses @State property wrapper instead of @Binding property wrapper. 


- Which is why we cannot  pass projected value of the ContentView to BlueView, using  the below code snippet


BlueView(highlightView: highlight)


- So when "highlight" changes in contentView  (or Binding property in Yellow or PurpleView) the value would not affect this BlueView.





What exactly is this, @State and @Binding Notation ?


To answer this question it is simply a way to specify a property wrapper. State is a property wrapper which can be applied to a property , by mentioning the wrapper name before the property as an attribute.


To Read more on Property Wrapper , please refer to another blog. 

















Comments

Post a Comment

Popular posts from this blog

hitTest on iOS to identify the view being hit

-
Image
HitTest on iOS Use hitTest, to identify the view being tapped. The below method allows us to identify the view being selected. We can use it, to identify the view from which we would like to hide the touch events or identify the view we are interested into. Example: In the below case when we tap on Black View we can show an alert like "Black View tapped!" , if we tap on Red View , we can show an alert  "You are not allowed to tap on Red View" .  override func hitTest ( _ point: CGPoint , with event: UIEvent ?) -> UIView ? { } Here is a simple implementation of the method, to identify the view being hit. View hierarchy being used is listed below:- Blue(parent) - Red(child) - Green(child) - Yellow (child) - Orange (child) - Black (child) - White (child) So lets' start with override of hitTest method.      override func hitTest ( _ point: CGPoint , with event: UIEvent ?) -> UIView ? {         //1         if let viewAvailable = findPoin
Read more

CMTimeMakeWithSeconds explained

-
Image
CMTime  is structure which has two main components,  timeScale  and  value. CMTIME = VALUE  / TIMESCALE where, TimeScale =  fraction of a second each unit in numerator occupies. CMTIME = Value / TimeScale 1)  public   func  CMTimeMake( _  value:  Int64 ,  _  timescale:  Int32 ) ->  CMTime CMTimeMake ( 6000 ,  10 ) Means, there are 6000 units , each unit occupies 1/10 of a second 2)  public   func  CMTimeMakeWithSeconds( _  seconds:  Float64 ,  _  preferredTimescale:  Int32 ) ->  CMTime CMTimeMakeWithSeconds(10.0,500) 10.0 = VALUE /500 Therefore VALUE = 5000 So, there are 5000 units, each occupy 1/500 of a second
Read more

Custom Editing Control for UITableViewCell , like iPhone Mail Appliation

-
Image
Dear Friends, Today, while I was developing a application, I found that I am in need to a custom Editing control. Custom Editing Control are displayed on the left side of the screen. IOS sdk provides two of such kind which we use most of the time UITableViewCellEditingStyleDelete & UITableViewCellEditingStyleInsert  . I will be now discussing the third one, UITableViewCellEditingStyleNone. This can be used to design our own Editing control. How this is going to look like can be fond from below screen shot. Steps to achieve this can be found below: STEP 1: Create A subclass of UITabelViewCell First create a subclass of UITableViewCell, where when the cell object is initialised we will have to add a UIButton to its view. You will also need a offset variable, whose value will be 32.0 in all iPhones. -( id ) initWithCoder:( NSCoder *)aDecoder{          self =[ super initWithCoder :aDecoder];          if ( self ){         offset =32.0;        
Read more