First IOS App

ยท

3 min read

EmojiSelection App

Hey There!

I am currently at my beginner stage of Learning Swift Language.

Built a very basic, simple EmojiSelection App!

Here's a glimpse of what I learnt from this app:

  • Enum: Meaning Enumeration, enum is a List of cases(could be any list of objects like emoji, text, etc) from which we could pick some choices.

    In this case, enum is used for emoji selection, case inside enum.

    Next,

    Emoji: String we want those emojis to be seen on the screen so we have to set its type as String.

    CaseIterable Loop over ever case (emoji) present in the enum.

    We have to hit control+command+space for the emoji to be selected.

      enum Emoji:String, CaseIterable {
          case ๐Ÿ’š,๐Ÿ’›,๐Ÿ‘€,๐Ÿฑ,๐Ÿจ
      }
    
  • For setting the reference to the Emoji :

    Text(selection.rawValue) gives reference to the selection variable(the default emoji which is selected).

    .font(.system(size:150)) It is a modifier that will set the emoji size.

      var selection: Emoji =.๐Ÿจ
    
      var body: some View{
          Text(selection.rawValue)
              .font(.system(size:150))
      }
    
  • The icon at the bottom of the canvas enables you to see the app in a dark /light appearance.

  • VStack:

    Vstack helps to vertically stack the elements in the list (emoji in this case).

      VStack{
                      Text(selection.rawValue)
                          .font(.system(size:150))
      }
    
  • Picker:

    For viewing all the emoji in the list, It takes several parameters:

      Picker(<#T##title: StringProtocol##StringProtocol#>, selection: <#T##Binding<Hashable>#>, content: <#T##() -> View#>)
    

    for the title parameter set any title of your choice, for the selection parameter we'll need to add the following code :

    "@ State " just declares the selection as special and auto-updates any changes happening in the selection on the screen.

      @State var selection: Emoji = .๐Ÿจ
    

    final code for Picker:

      Picker("Select Emoji", selection: $selection)
    

    Adding a ForEach loop for rendering all the emojis in the dropdown format:

      ForEach(Emoji.allCases ,id:\.self){ emoji in
                              Text(emoji.rawValue)
                          }
    

  • For displaying the rest of the emojis on the screen :

      .pickerStyle(.segmented)
    

  • Setting a Title :

      .navigationTitle("EmojiSelectionApp")
    

    padding if required:

      .padding()
    

This whole code is just to show a ContentView preview of what's the result of the code:

struct ContentView_Previews: PreviewProvider{
    static var previews: some View{
        ContentView()
    }
}
  • Entire Code:

    
      import SwiftUI
      enum Emoji:String, CaseIterable {
          case ๐Ÿ’š,๐Ÿ’›,๐Ÿ‘€,๐Ÿฑ,๐Ÿจ
      }
      struct ContentView: View {
          @State var selection: Emoji = .๐Ÿจ
          var body: some View{
              NavigationView{
                  VStack{
                      Text(selection.rawValue)
                          .font(.system(size:150))
                      Picker("Select Emoji", selection: $selection){
                          ForEach(Emoji.allCases ,id:\.self){ emoji in
                              Text(emoji.rawValue)
                          }
                      }
                      .pickerStyle(.segmented)
                  }
                  .navigationTitle("EmojiSelectionApp")
                  .padding()
              }  
          }
      }
      struct ContentView_Previews: PreviewProvider{
          static var previews: some View{
              ContentView()
          }
      }
    
  • Results:

  • Reference :
ย