SwiftUI - Making a Cell in SwiftUI

CellView.swift

import SwiftUI
import PlaygroundSupport

/*:
 
 # Making TableView / CollectionView Cell in SwiftUI
 
 Let us try to make a Cell with Image, Title and Subtitle
 
 
 */

struct Cell1: View {
  var body: some View {
    HStack {
      Image(systemName: "music.house")
      VStack {
        Text("Title")
        Text("Subtitle")
      }
    }
  }
}
PlaygroundPage.current.setLiveView(Cell1())

/*:
 
 Now let us give a shadow to the view
 
 
 */

struct Cell2: View {
  var body: some View {
    HStack {
      Image(systemName: "music.house")
      VStack(alignment: .leading) {
        Text("Title")
        Text("Subtitle")
      }
    }
    .background(
      RoundedRectangle(cornerRadius: 5)
        .stroke(Color.yellow)
        .shadow(color: .gray, radius: 2.5, x: 0.6, y: 0)
        .foregroundColor(.white)
    )
  }
}

PlaygroundPage.current.setLiveView(Cell2())

/*:

 Interesting!
 
 Now let us widen the view by increasing the text

 Also let's fix our Image


*/


struct Cell3: View {
  var body: some View {
    HStack(spacing: 0) {
      Image(systemName: "music.house")
        .resizable()
        .aspectRatio(1, contentMode: .fit)
        .frame(height: 50)
        .padding()
      
      VStack(alignment: .leading) {
        Text("Title")
        Text("A long subtitle which extends more than a line")
      }
    }
    .background(
      RoundedRectangle(cornerRadius: 5)
        .stroke(Color.yellow)
        .shadow(color: .gray, radius: 2.5, x: 0.6, y: 0)
        .foregroundColor(.white)
    )
  }
}

PlaygroundPage.current.setLiveView(Cell3())


/*:

 Great!
 
 Let's fix the Title Text and make it have a green background

*/


struct Cell4: View {
  var body: some View {
    HStack(spacing: 0) {
      Image(systemName: "music.house")
        .resizable()
        .aspectRatio(1, contentMode: .fit)
        .frame(height: 50)
        .padding()
      
      VStack(alignment: .leading) {
        Text("Title")
          .bold()
          .italic()
          .lineLimit(1)
          .minimumScaleFactor(0.8)
          .padding(.horizontal, 10)
          .padding(.vertical, 2)
          .background(
            Capsule()
              .foregroundColor(.green)
        )
          .padding(.bottom, 5)
        Text("A long subtitle which extends more than a line")
      }
    }
    .background(
      RoundedRectangle(cornerRadius: 5)
        .stroke(Color.yellow)
        .shadow(color: .gray, radius: 2.5, x: 0.6, y: 0)
        .foregroundColor(.white)
    )
  }
}

PlaygroundPage.current.setLiveView(Cell4())


/*:

 You're doing good!
 
 Now, let's modify the subtitle

*/


struct Cell5: View {
  var body: some View {
    HStack(spacing: 0) {
      Image(systemName: "music.house")
        .resizable()
        .aspectRatio(1, contentMode: .fit)
        .frame(height: 50)
        .padding()
      
      VStack(alignment: .leading) {
        Text("Title")
          .bold()
          .italic()
          .lineLimit(1)
          .minimumScaleFactor(0.8)
          .padding(.horizontal, 10)
          .padding(.vertical, 2)
          .background(
            Capsule()
              .foregroundColor(.green)
        )
          .padding(.bottom, 5)
        Text("A long subtitle which extends more than a line")
          .lineLimit(2)
          .multilineTextAlignment(.leading)
          .truncationMode(.tail)
          .fixedSize(horizontal: false, vertical: true)
      }
    }
    .background(
      RoundedRectangle(cornerRadius: 5)
        .stroke(Color.yellow)
        .shadow(color: .gray, radius: 2.5, x: 0.6, y: 0)
        .foregroundColor(.white)
    )
  }
}

PlaygroundPage.current.setLiveView(Cell5())


/*:

 Good so far.
 
 Let us battle test our Cell with a variety of String Lengths

 
*/


struct Cell6: View {
  @State private var titleLength: CGFloat = 1
  @State private var subtitleLength: CGFloat = 1
  
  
  var body: some View {
    VStack {

      
      HStack(spacing: 0) {
        Image(systemName: "music.house")
          .resizable()
          .aspectRatio(1, contentMode: .fit)
          .frame(height: 50)
          .padding()
        
        VStack(alignment: .leading) {
          Text(String.init(repeating: "T", count: Int(self.titleLength)))
            .bold()
            .italic()
            .lineLimit(1)
            .minimumScaleFactor(0.8)
            .padding(.horizontal, 10)
            .padding(.vertical, 2)
            .background(
              Capsule()
                .foregroundColor(.green)
          )
            .padding(.bottom, 5)
          Text(String.init(repeating: "S", count: Int(self.subtitleLength)))
            .lineLimit(2)
            .multilineTextAlignment(.leading)
            .truncationMode(.tail)
            .fixedSize(horizontal: false, vertical: true)
            .minimumScaleFactor(0.7)
        }
      }
      .background(
        RoundedRectangle(cornerRadius: 5)
          .stroke(Color.yellow)
          .shadow(color: .gray, radius: 2.5, x: 0.6, y: 0)
          .foregroundColor(.white)
      )
      
      HStack {
        Text("Title length")
        Slider(value: $titleLength, in: 1...40) {
          Text("Title")
        }
      }
      
      HStack {
        Text("Subtitle length")
        Slider(value: $subtitleLength, in: 1...100) {
          Text("Subtitle")
        }
      }
    }
  }
}

PlaygroundPage.current.setLiveView(Cell6())


/*:

 We can now make the view's frame of fixed size.
 
 Instead, we will leave it to the consuming View to give our view any fixed sizes, and alignments
 
*/