I'm trying to get SwiftUI Previews working (with already downloaded API data) so that I don't need to run the app in simulator. Not sure what is wrong/how to go about it.
I've seen a few YouTube and (a lot) of SO on how to get this done but still hitting a wall. Appreciate pointers. (Note: 1st time trying to learn SwiftUI by porting a view of my app)
The data is going to be read-only, so there's no use for #State or #Bindings I believe and shouldn't be part of the #EnvironmentObject as well?
The YouTube's I've seen and google links are mainly using (locally stored) JSON files and they work.
eg: https://www.youtube.com/watch?v=hfjZNwayXfg and https://www.youtube.com/watch?v=EycwLxTU-EA
#available(iOS 13, *)
struct avatarView: View {
let weeklySummary: [HelperIntervalsIcu.icuWeeklyData]
func getAvatarPic() -> UIImage? {
if let avatarUrl = weeklySummary.last?.icuAvatar {
let avatarPicName = URL(fileURLWithPath: avatarUrl).lastPathComponent
let avatarPicImage = HelperIntervalsIcu.loadAvatarPic(fileName: avatarPicName)
return avatarPicImage
}
return nil
}
func getUserName() -> String {
if let userName = weeklySummary.last?.icuName {
return userName.prefix(1).capitalized + userName.dropFirst()
}
return "User Name Placeholder"
}
var body: some View {
HStack {
if let image = getAvatarPic() {
Image(uiImage: image)
} else {
Image("profile-200x200")
}
Text(getUserName())
Spacer()
}
}
}
#available(iOS 13.0, *)
struct IntervalsWeeklyView_Previews: PreviewProvider {
static var previews: some View {
let weeklySummary = HelperIntervalsIcu.loadWeeklySummaryFromFile()
avatarView(weeklySummary: weeklySummary)
}
}
The Preview just shows this
But when running in the simulator, it will work.
The data within HelperIntervalsIcu.icuWeeklyData is from a struct
struct icuWeeklyData : Codable {
var icuName : String
var icuAvatar : String
}
Related
I want to make it so you can favourite a "landmark" in one view (LandmarkDetail), and access a list of all the "landmarks" in another view with the ones I've favourited highlighted. First I used "#AppStorrage" but I was told too to use Core Data for it instead. So far I have the favourite button working in the LandmarkDetail view with "#AppStorage" but apparently I need to change that so it uses Core Data.
I've look around to get an understanding of how to do it with Core Data but I could really use a helping hand if anyone can help. I've already seen and read some tutorials about core data and how to set it up, but I can't find anything for my specific problem where I pull in data from a JSON and I need Core Data to handle the favourite feature.
Here is my code for the favourite button
struct FavoriteButton: View {
#AppStorage ("isFavorite") var isFavorite: Bool = false
var body: some View {
Button {
isFavorite.toggle()
} label: {
Label("Toggle Favorite", systemImage: isFavorite ? "star.fill" : "star")
.labelStyle(.iconOnly)
.foregroundColor(isFavorite ? .yellow : .gray)
}
}
}
Code from the landmark detail view
struct LandmarkDetail: View {
var body: some View {
ScrollView {
VStack(alignment: .leading) {
HStack {
Text(landmark.name)
.font(.title)
FavoriteButton()
}
}
}
}
}
Code for the rows in the list view
This is the one not working yet, so far it just pulls the data from a JSON.
MODEL
import Foundation
import SwiftUI
import CoreLocation
struct Landmark: Hashable, Codable, Identifiable {
var id: Int
var name: String
var park: String
var state: String
var description: String
var isFavorite: Bool
var isFeatured: Bool
var category: Category
enum Category: String, CaseIterable, Codable {
case lakes = "Lakes"
case rivers = "Rivers"
case mountains = "Mountains"
}
private var imageName: String
var image: Image{
Image(imageName)
}
var featureImage: Image? {
isFeatured ? Image(imageName + "_feature") : nil
}
private var coordinates: Coordinates
var locationCoordinate: CLLocationCoordinate2D {
CLLocationCoordinate2D(
latitude: coordinates.latitude,
longitude: coordinates.longitude)
}
struct Coordinates: Hashable, Codable {
var latitude: Double
var longitude: Double
}
}
import Foundation
import Combine
final class ModelData: ObservableObject {
#Published var landmarks: [Landmark] = load("landmarkData.json")
var hikes: [Hike] = load("hikeData.json")
#Published var profile = Profile.default
var features: [Landmark] {
landmarks.filter { $0.isFeatured }
}
var categories: [String: [Landmark]] {
Dictionary(
grouping: landmarks,
by: { $0.category.rawValue }
)
}
}
func load<T: Decodable>(_ filename: String) -> T {
let data: Data
guard let file = Bundle.main.url(forResource: filename, withExtension: nil)
else {
fatalError("Couldn't find \(filename) in main bundle.")
}
do {
data = try Data(contentsOf: file)
} catch {
fatalError("Couldn't load \(filename) from main bundle:\n\(error)")
}
do {
let decoder = JSONDecoder()
return try decoder.decode(T.self, from: data)
} catch {
fatalError("Couldn't parse \(filename) as \(T.self):\n\(error)")
}
}
First of all you need to create a .xcdatamodeld file named Landmarks. You can create it by pressing right button on the principal folder of your project and searching Data Model. After you need to create a new Entity named Landmark. You can add attributes showed in your model like id, name, park, etc... with their types. After you need to create a new Swift file in which you can create you Core Data Controller like this:
class DataController: ObservableObject {
let container = NSPersistentContainer(name: "Landmarks")
init() {
container.loadPersistentStores { description, error in
if let error = error {
print("Core Data failed to load: \(error.localizedDescription)")
}
}
}
}
Successively, you need to add to your LandmarksApp.swift file the following code:
struct LandmarksApp: App {
#StateObject private var dataController = DataController()
var body: some Scene {
WindowGroup {
ContentView()
.environment(\.managedObjectContext, dataController.container.viewContext)
}
}
}
Continue adding this to your LandmarkDetail view:
struct LandmarkDetail: View {
#Environment(\.managedObjectContext) var moc
var body: some View {
ScrollView {
VStack(alignment: .leading) {
HStack {
Text(landmark.name)
.font(.title)
FavoriteButton()
}
}
}
}
}
To create a new item and add to Core Data you can write:
let landmark = Landmark(context: moc)
landmark.id = id
landmark.name = name
landmark.park = park
etc...
try? moc.save()
For your JSON data you can create a function that convert all JSON data in Core Data following these steps.
I'm building an app, which displays PDFs, but I don't know how to display a PDF file using SwiftUI. I found tutorials on how to display a PDF file using UIKit, but there are no tutorials about SwiftUI. Can anyone help me?
I'm also trying to do that using MVVM design pattern. If there's someone, who can help me, I will be extremely grateful!
Code:
HomeView.swift
import SwiftUI
struct HomeView: View {
var deeds: [Deed] = deedsData
var body: some View {
NavigationView {
List(deeds) { item in
Button(action: {
}) {
HStack {
Image(systemName: "doc.fill")
Text(item.title)
}
}
}
.navigationTitle("title")
}
}
}
struct HomeView_Previews: PreviewProvider {
static var previews: some View {
HomeView(deeds: deedsData)
}
}
DeedModel.swift
import SwiftUI
struct Deed: Identifiable {
var id = UUID()
var title: String
var URL: String
}
let deedsData: [Deed] = [
Deed(title: NSLocalizedString("civilCode", comment: "Civil code"), URL: "https://isap.sejm.gov.pl/isap.nsf/download.xsp/WDU19640160093/U/D19640093Lj.pdf"),
Deed(title: NSLocalizedString("penalCode", comment: "Penal code"), URL: "https://isap.sejm.gov.pl/isap.nsf/download.xsp/WDU19970880553/U/D19970553Lj.pdf"),
Deed(title: NSLocalizedString("civilProcedureCode", comment: "Code of civil procedure"), URL: "https://isap.sejm.gov.pl/isap.nsf/download.xsp/WDU19640430296/U/D19640296Lj.pdf"),
Deed(title: NSLocalizedString("familyAndGuardianshipCode", comment: "Family and guardianship code"), URL: "http://isap.sejm.gov.pl/isap.nsf/download.xsp/WDU19640090059/U/D19640059Lj.pdf"),
Deed(title: NSLocalizedString("laborCode", comment: "Labor code"), URL: "https://isap.sejm.gov.pl/isap.nsf/download.xsp/WDU19740240141/U/D19740141Lj.pdf"),
]
Anyone knows how can I do that in MVVM pattern?
To display a PDF with Apple-only frameworks, you'll need to use UIKit, via a UIViewRepresentable:
import PDFKit
import SwiftUI
struct PDFKitRepresentedView: UIViewRepresentable {
typealias UIViewType = PDFView
let data: Data
let singlePage: Bool
init(_ data: Data, singlePage: Bool = false) {
self.data = data
self.singlePage = singlePage
}
func makeUIView(context _: UIViewRepresentableContext<PDFKitRepresentedView>) -> UIViewType {
// Create a `PDFView` and set its `PDFDocument`.
let pdfView = PDFView()
pdfView.document = PDFDocument(data: data)
pdfView.autoScales = true
if singlePage {
pdfView.displayMode = .singlePage
}
return pdfView
}
func updateUIView(_ pdfView: UIViewType, context _: UIViewRepresentableContext<PDFKitRepresentedView>) {
pdfView.document = PDFDocument(data: data)
}
}
then PDFKitRepresentedView can be used in your view hierarchy.
This takes a Data object as input, so you'll need to convert those URL objects you have to Data via a network call first. So, you might do something like:
#State var data : Data?
...
.onAppear {
self.data = try? Data(contentsOf: url)
}
Keep in mind this is vastly simplified -- you'll want to do some error handling, etc. Might want to do some searching on SwiftUI network calls.
So I am learning how to use SwiftUI with a json api. I am currently generating views through a list and a ForEach Loop. I am wondering how I can make it so that it only generates the first, say 10 elements in the posts array, instead of generating the entire list from the api. Basically I want to use RandomElement() to display 10 random posts from the entire array. I am just beginning here and learning so any help woul dbe appreicated.
Below is the code for my main view that is displaying the list
import SwiftUI
struct postList: View {
//state variable of the posts
#State var posts: [Post] = []
var array = [Post]()
var body: some View {
List {
ForEach(posts) { post in
VStack(alignment: .leading) {
Text(post.title)
.font(.headline)
Text(post.body)
.font(.callout)
}
.padding()
}
}
.onAppear() {
Api().getPosts { (posts) in
self.posts = posts
}
}
}
}
struct postList_Previews: PreviewProvider {
static var previews: some View {
postList()
}
}
Down here is the Data file I use to retrieve the json data
import SwiftUI
struct Post: Codable, Identifiable {
let id = UUID()
var title: String
var body: String
}
class Api {
func getPosts(completion: #escaping ([Post]) -> ()) {
guard let url = URL(string: "http://jsonplaceholder.typicode.com/posts") else { return }
URLSession.shared.dataTask(with: url) { (data, _, _) in
let posts = try! JSONDecoder().decode([Post].self, from: data!)
DispatchQueue.main.async {
completion(posts)
}
}
.resume()
}
}
I have written a List with SwiftUI. I also have a TextField object which is used as a search bar. My code looks like this:
import SwiftUI
struct MyListView: View {
#ObservedObject var viewModel: MyViewModel
#State private var query = ""
var body: some View {
NavigationView {
List {
// how to listen for changes here?
// if I add onEditingChange here, Get the value only after the user finish search (by pressing enter on the keyboard)
TextField(String.localizedString(forKey: "search_bar_hint"), text: self.$query) {
self.fetchListing()
}
ForEach(viewModel.myArray, id: \.id) { arrayObject in
NavigationLink(destination: MyDetailView(MyDetailViewModel(arrayObj: arrayObject))) {
MyRow(arrayObj: arrayObject)
}
}
}
.navigationBarTitle(navigationBarTitle())
}
.onAppear(perform: fetchListing)
}
private func fetchListing() {
query.isEmpty ? viewModel.fetchRequest(for: nil) : viewModel.fetchRequest(for: query)
}
private func navigationBarTitle() -> String {
return query.isEmpty ? String.localizedString(forKey: "my_title") : query
}
}
The problem I have now is that the List remains behind the keyboard :(. How can I set the list padding bottom or edge insets (or whatever else works, I am totally open) so that the scrolling of the list ends above the keyboard? The list „size“ should also adjust automatically depending on if keyboard will be opened or closed.
Problem looks like this:
Please help me with any advice on this, I really have no idea how to do this :(. I am a SwiftUI beginner who is trying to learn it :).
You may try the following and add detailed animations by yourself.
#ObservedObject var keyboard = KeyboardResponder()
var body: some View {
NavigationView {
List {
// how to listen for changes here?
// if I add onEditingChange here, Get the value only after the user finish search (by pressing enter on the keyboard)
TextField("search_bar_hint", text: self.$query) {
self.fetchListing()
}
ForEach(self.viewModel, id: \.self) { arrayObject in
Text(arrayObject)
}
}.padding(.bottom, self.keyboard.currentHeight).animation(.easeIn(duration: self.keyboard.keyboardDuration))
.navigationBarTitle(self.navigationBarTitle())
}
.onAppear(perform: fetchListing)
}
class KeyboardResponder: ObservableObject {
#Published var currentHeight: CGFloat = 0
#Published var keyboardDuration: TimeInterval = 0
private var anyCancellable: Set<AnyCancellable> = Set<AnyCancellable>()
init() {
let publisher1 = NotificationCenter.Publisher(center: .default, name: UIResponder.keyboardWillShowNotification).map{ notification -> Just<(CGFloat, TimeInterval)> in
guard let keyboardSize = (notification.userInfo?[UIResponder.keyboardFrameEndUserInfoKey] as? NSValue)?.cgRectValue else {return Just((CGFloat(0.0), 0.0)) }
guard let duration:TimeInterval = notification.userInfo?[UIResponder.keyboardAnimationDurationUserInfoKey] as? Double else { return Just((CGFloat(0.0), 0.0)) }
return Just((keyboardSize.height, duration))}
let publisher2 = NotificationCenter.Publisher(center: .default, name: UIResponder.keyboardWillHideNotification) .map{ notification -> Just<(CGFloat, TimeInterval)> in
guard let duration:TimeInterval = notification.userInfo?[UIResponder.keyboardAnimationDurationUserInfoKey] as? Double else { return Just((CGFloat(0.0), 0.0)) }
return Just((0.0, duration))}
Publishers.Merge(publisher1, publisher2).switchToLatest().subscribe(on: RunLoop.main).sink(receiveValue: {
if $0.1 > 1e-6 { self.currentHeight = $0.0 }
self.keyboardDuration = $0.1
}).store(in: &anyCancellable)
}
}
The resolution for the problem with the keyboard padding is like E.coms suggested. Also the class written here by kontiki can be used:
How to make the bottom button follow the keyboard display in SwiftUI
The problems I had was because of state changes in my view hierarchy due to multiple instances of reference types publishing similar state changes.
My view models are reference types, which publish changes to its models, which are value types. However, these view models also contain reference types which handle network requests. For each view I render (each row), I assign a new view model instance, which also creates a new network service instance. Continuing this pattern, each of these network services also create and assign new network managers.
I followed this https://www.youtube.com/watch?v=_N10q1iR2HQ&t=328s tutorial; however, adjusted for some changes made to Xcode 11 GM seed 2 syntax and terms, because some stuff is obsolete now. Build is successful, but crashes for some reason.
I would appreciate any help and suggestions, tried all trial and error I could think of.
Here is the code below (pasting all of it since GM seed 2 has many command changes):
import SwiftUI
import Combine
import FirebaseFirestore
struct dataset : Identifiable {
var id = ""
var name = ""
var phone = ""
var services = ""
}
class getData : ObservableObject {
var didChange = PassthroughSubject<getData, Never>()
var data = [dataset](){
didSet{
didChange.send(self)
}
}
init(){
let db = Firestore.firestore()
let settings = db.settings
settings.areTimestampsInSnapshotsEnabled = true
db.settings = settings
db.collection("venues").addSnapshotListener {(snap,err) in
if err != nil{
print((err?.localizedDescription)!)
return
}
for i in (snap?.documentChanges)!{
let name = i.document.data()["name"] as! String
let phone = i.document.data()["phone"] as! String
let services = i.document.data()["services"] as! String
let id = i.document.documentID
DispatchQueue.main.async {
self.data.append(dataset(id: id, name: name, phone: phone, services:services))
}
}
}
}
}
struct ContentView: View {
#ObservedObject var data1 = getData()
var body: some View {
VStack {
Text("Hello World")
List(data1.data){ i in
cellView(name: i.name, phone: i.phone, services: i.services)
}
}
}
}
struct cellView : View {
#State var name = ""
#State var phone = ""
#State var services = ""
var body : some View{
VStack{
Text(name)
Text(phone)
Text(services)
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
These are the results
2019-09-19 20:30:34.724594+0600 Venue[16661:712640] - [I-ACS036002] Analytics screen reporting is enabled. Call +[FIRAnalytics setScreenName:setScreenClass:] to set the screen name or override the default screen class name. To disable screen reporting, set the flag FirebaseScreenReportingEnabled to NO (boolean) in the Info.plist
2019-09-19 20:30:34.975422+0600 Venue[16661:712648] 5.12.0 - [Firebase/Analytics][I-ACS023007] Analytics v.50300000 started
2019-09-19 20:30:34.975634+0600 Venue[16661:712648] 5.12.0 - [Firebase/Analytics][I-ACS023008] To enable debug logging set the following application argument: -FIRAnalyticsDebugEnabled
Could not cast value of type '__NSCFNumber' (0x10b8a8610) to 'NSString' (0x10954f978).
2019-09-19 20:30:35.073897+0600 Venue[16661:711704] Could not cast value of type '__NSCFNumber' (0x10b8a8610) to 'NSString' (0x10954f978).
(lldb)
As mentioned in the first comment, it looks like you have a cast issue between types.
I tried the same example and was able to build and run successfully, but no data was shown on the screen. After some investigation, I re-wrote some parts of the code and was finally able to get results.
Instead of the video's dataset, I used the following structure:
struct Profile : Identifiable {
var id: Int
var name: String
var phoneNumber: String
init(id: Int, name: String, phoneNumber: String) {
self.id = id
self.name = name
self.phoneNumber = phoneNumber
}
}
And these are the SwiftUI views:
import SwiftUI
import FirebaseFirestore
struct ContentView: View {
#State var data1 = [Profile]()
var body: some View {
return VStack {
HStack {
Text("Penya").font(.largeTitle)
}
Divider()
List(data1) { i in
cellView(name: i.name, phoneNumber: i.phoneNumber)
}
}.onAppear {
self.getData()
}
}
func getData() {
var data = [Profile]()
let db = Firestore.firestore()
db.collection("patients").addSnapshotListener { (snap, err) in
if err != nil {
print((err?.localizedDescription)!)
return
}
for doc in (snap?.documentChanges)! {
let name = doc.document.data()["name"] as! String
let phoneNumber = doc.document.data()["phoneNumber"] as! String
print (name)
print (phoneNumber)
DispatchQueue.main.async {
data.append(Profile(id: 0,
name: name,
phoneNumber: phoneNumber))
self.data1 = data
}
}
}
}
}
struct cellView : View {
#State var name = ""
#State var phoneNumber = ""
var body: some View {
VStack {
Text("Valors:")
Text(name)
Text(phoneNumber)
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
Whenever a record is changed in Firestore, an update is automatically performed on the simulator screen. There is only one thing I am still working on: the updated values are correctly shown in the console (I included two print()), but I always see the same original value on the simulator screen even I change the record in Firestore.
Works with Sergi's Code but he was missing the following:
let id = doc.document.documentID
DispatchQueue.main.async {
data.append(Profile(id: id,
name: name,
phoneNumber: phoneNumber))
self.data1 = data
and change all values for id to be String instead of Int.
I suggest using CombineFirebase
with pod 'FirebaseFirestoreSwift'
Then you can use pure combine pattern for Firestore in your project