article

Friday, October 8, 2021

SwiftUI Simple Social App

SwiftUI Simple Social App

ContentView.swift
//
//  ContentView.swift
//  Swiftuitest
//
//  Created by Cairocoders
//

import SwiftUI

struct ContentView: View {
    
    var body: some View {
        NavigationView {
            List {
                VStack(alignment: .leading) {
                    HStack {
                        Text("Trending")
                            .font(.title.bold())
                        Spacer()
                    }
                    
                    ScrollView(.horizontal, showsIndicators: false) {
                        LazyHStack(spacing: 15) {
                            ForEach(stories) { post in
                                StoryListCell(story: post)
                            }
                        }
                        .frame(height: 145)
                    }
                }
                Section {
                    ForEach(latestpost) { latespost in
                        PostListCell(post: latespost)
                    }
                }
            
            }.padding(.horizontal, -20)
           .navigationTitle(Text("Social App"))
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
       ContentView()
    }
}
StoryListCell.swift
//
//  StoryListCell.swift
//  Swiftuitest
//
//  Created by Cairocoders
//

import SwiftUI

struct StoryListCell : View {
    
    var story: Story
    
    var body: some View {
        ZStack {
            VStack(alignment: .leading) {
                Image(story.image)
                    .resizable()
                    .clipped()
                    .cornerRadius(6)
                
                Text(story.name)
                    .multilineTextAlignment(.center)
                    .lineLimit(nil)
                    .padding(.leading, 0)
                    .font(.caption)
            }.frame(width: 110, height: 140)
            
            Circle().frame(width: 44, height: 44)
                .foregroundColor(Color.white)
                .position(x: 110 - 24, y: 24)
            
            Image("photo2")
                .resizable()
                .frame(width: 40, height: 40)
                .clipped()
                .clipShape(Circle())
                .position(x: (110-24), y: 24)
        }
    }
}
PostListCell.swift
//
//  PostListCell.swift
//  Swiftuitest
//
//  Created by Cairocoders
//

import SwiftUI

struct PostListCell : View {
    
    var post: BlogPosts
    
    var body: some View {
        
        VStack(alignment: .leading) {
            HStack {
                Image("photo1")
                    .resizable()
                    .frame(width: 50, height: 50)
                    .background(Color.yellow)
                    .clipShape(Circle())
                
                VStack(alignment: .leading) {
                    Text(post.name).font(.headline)
                    Text(post.time).font(.subheadline)
                }
            }.padding(.leading, 12).padding(.top, 20)
            
            Text(post.name)
                .lineLimit(nil)
                .padding([.leading, .trailing], 12)
            
            Image(post.image)
                .resizable()
                .frame(height: 200)
                .clipped()
        }.padding([.leading, .trailing], -20).padding(.bottom, -8)
    }
}
Story.swift
//
//  Story.swift
//  Swiftuitest
//
//  Created by Cairocoders
//

import SwiftUI

import Foundation
 
struct Story : Identifiable {
      
    var id : Int
    var name : String
    var image : String
}
  
var stories = [
  
    Story(id: 1, name: "Chicken Adobo", image: "1"),
    Story(id: 2, name: "Afritada", image: "2"),
    Story(id: 3, name: "Asado", image: "3"),
    Story(id: 4, name: "Barbeque", image: "4"),
    Story(id: 5, name: "Curry", image: "5"),
    Story(id: 6, name: "Chicken Inasal", image: "6"),
    Story(id: 4, name: "Menudo", image: "7"),
    Story(id: 8, name: "Sarciado", image: "8"),
]
Post.swift
//
//  Post.swift
//  Swiftuitest
//
//  Created by Cairocoders
//

import Foundation
 
struct BlogPosts : Identifiable {
      
    var id : Int
    var name : String
    var image : String
    var details : String
    var time : String
}
  
var latestpost = [
  
    BlogPosts(id: 0, name: "Bistek Tagalog", image: "1", details: "A dish made of strips of salted and peppered sirloin beef, usually flattened with a meat tenderizing tool, slowly cooked in soy sauce, calamansi juice, garlic and onions, a specialty of the Tagalog region", time: "Posted 3 days ago"),
    BlogPosts(id: 1, name: "Boogie flight", image: "2", details: "A boodle fight is a meal that dispenses with cutlery and dishes. Diners instead practice kamayan, Filipino for eating with the hands" , time: "Posted 3 days ago"),
    BlogPosts(id: 2, name: "Sinigang Na Baboy", image: "3", details: "Sinigang na baboy with Gabi is a Filipino pork soup with taro cooked in a sour broth." , time: "Posted 3 days ago"),
    BlogPosts(id: 3, name: "Ginisang Togue", image: "4", details: "Ginisang Togue is basically Sauteed Mung Bean Sprout with carrots, bell pepper, shrimp, and tofu." , time: "Posted 3 days ago"),
    BlogPosts(id: 4, name: "Ginisang Munggo (Monggo)", image: "5", details: "Munggo or Mung bean (or even green bean to some) is a seed of Vigna radiata, a plant native to India and Pakistan. Since the plant originated in Asia, it was easy to spread along the nearby countries. This seed became a hit when it reached the Philippines." , time: "Posted 3 days ago"),
    BlogPosts(id: 5, name: "Pork Estofado (Sweet Pork Stew)", image: "6", details: "Pork Estofado with saba bananas, carrots, Chinese sausage, and a sweet and savory sauce. Perfect with steamed rice!" , time: "Posted 3 days ago"),
    BlogPosts(id: 6, name: "Pata Tim", image: "7", details: "Brimming in a pork stew infused with aromatic peppercorn, sesame oil and soy sauce, Pata Tim is a classic Filipino dish with traces in Chinese cuisine" , time: "Posted 3 days ago"),
    BlogPosts(id: 7, name: "Pancit Palabok", image: "8", details: "Pancit Palabok is a noodle dish with shrimp sauce and topped with several ingredients such as cooked shrimp, boiled pork, crushed chicharon, tinapa flakes, fried tofu, scallions, and fried garlic." , time: "Posted 3 days ago"),
]

Related Post