I'm building an app that needs an image slideshow as the background of the welcome controller. My plan is to import images into a folder in Firebase Storage, set a Service function to download the folder's images and append to a model, then populate the controller's collection view cell with the images. Am I on the correct path to do an image slideshow? Thanks.
// BackgroundImage Model
struct BackgroundImage {
let backgroundImageUrl: String
init(dictionary: [String : Any]) {
self.backgroundImageUrl = dictionary["backgroundImageUrl"] as? String ?? ""
}
}
// Service
struct BgImgs {
let backgroundImage: UIImage
}
static func fetchBackgroundImages(bgImgs: BgImgs, completion: #escaping([BackgroundImage]) -> Void) {
var backgroundImages = [BackgroundImage]()
guard let imageData = bgImgs.backgroundImage.jpegData(compressionQuality: 0.3) else { return }
let filename = NSUUID().uuidString
let storageRef = STORAGE_REF.reference(withPath: "/background_images/\(filename)")
storageRef.putData(imageData, metadata: nil) { (meta, error) in
storageRef.downloadURL { (url, error) in
guard let backgroundImageUrl = url?.absoluteString else { return }
let values = ["backgroundImageUrl" : backgroundImageUrl]
let bgImages = BackgroundImage(dictionary: values)
backgroundImages.append(bgImages)
completion(backgroundImages)
}
}
}
// WelcomeController
private var backgroundImages = [BackgroundImage]()
func fetchBackgroundImages() {
Service.fetchBackgroundImages(bgImgs: backgroundImages) { backgroundImages in
self.backgroundImages = backgroundImages
}
}
You'll have to reload the UICollectionView after fetchBackgroundImages fetch is done.
func fetchBackgroundImages() {
Service.fetchBackgroundImages(bgImgs: backgroundImages) { backgroundImages in
self.backgroundImages = backgroundImages
self.collectionView.reloadData()
}
}
Related
I am using LPLinkView from LinkPresentation module to present rich links in my app. But when I try to change the background color for the LPLinkView it's rendered as below.
When I tried changing the backgroundColor of the subviews of the LPLinkView, there is no element in the array returned from UIView's subviews property. Here is what I tried
let linkView = LPLinkView(metadata: metadata)
linkView.backgroundColor = .red
linkView.subviews.forEach { $0.backgroundColor = .red}
We can't change the design, but we can get the contents from it and create our own view.
import SwiftUI
import LinkPresentation
struct LinkModel { let image: Image, title: String?, linkHost: String?, link: URL? }
class LinksDataModel: ObservableObject {
static func fetchMetadata(for url: URL, completion: #escaping (LinkModel?) -> Void) {
let metadataProvider = LPMetadataProvider()
metadataProvider.startFetchingMetadata(for: url) { (metadata, error) in
if let metadata = metadata {
// load image
metadata.imageProvider?.loadObject(ofClass: UIImage.self, completionHandler: { image, err in
if let uiImage: UIImage = image as? UIImage {
let image = Image(uiImage: uiImage)
completion(LinkModel(image: image, title: metadata.title,
linkHost: metadata.url?.host, link: metadata.url))
} else { completion(nil) }
})
} else { completion(nil) }
}
}
}
You can call the function onAppear
#State private var linkModel: LinkModel? = nil
if let model = linkModel {
LinkView(model: model)
}
.onAppear {
LinksDataModel.fetchMetadata(for: url) { linkModel in
if let model = linkModel {
DispatchQueue.main.async { self.linkModel = model }
}
}
}
I have tableview with label, imageView (for image, gif & video thumbnail). I am sure that doing something wrong and I can't handle its completion handler due to which the app is hanged and gets stuck for a long time.
My model is like,
struct PostiisCollection {
var id :String?
var userID: String?
var leadDetails : NSDictionary?
var company: NSDictionary?
var content: String?
init(Doc: DocumentSnapshot) {
self.id = Doc.documentID
self.userID = Doc.get("userID") as? String ?? ""
self.leadDetails = Doc.get("postiiDetails") as? NSDictionary
self.company = Doc.get("company") as? NSDictionary
self.content = Doc.get("content") as? String ?? ""
}
}
I wrote in my view controller for fetch this,
var postiisCollectionDetails = [PostiisCollection]()
override func viewDidLoad() {
super.viewDidLoad()
let docRef = Firestore.firestore().collection("PostiisCollection").whereField("accessType", isEqualTo: "all_access")
docRef.getDocuments { (querysnapshot, error) in
if let doc = querysnapshot?.documents, !doc.isEmpty {
print("Document is present.")
for document in querysnapshot!.documents {
_ = document.documentID
if let compCode = document.get("company") as? NSDictionary {
do {
let jsonData = try JSONSerialization.data(withJSONObject: compCode)
let companyPost: Company = try! JSONDecoder().decode(Company.self, from: jsonData)
if companyPost.companyCode == AuthService.instance.companyId ?? ""{
print(AuthService.instance.companyId ?? "")
if (document.get("postiiDetails") as? NSDictionary) != nil {
let commentItem = PostiisCollection(Doc: document)
self.postiisCollectionDetails.append(commentItem)
}
}
} catch {
print(error.localizedDescription)
}
DispatchQueue.main.async {
self.tableView.isHidden = false
self.tableView.reloadData()
}
}
}
}
}
}
I need to check for the index path with image view is either image or gif or video with different parameters, I tried with tableview delegate and datasource method by,
extension AllAccessPostiiVC: UITableViewDataSource, UITableViewDelegate {
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return postiisCollectionDetails.count
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "AllAccessCell", for: indexPath)
let label1 = cell.viewWithTag(1) as? UILabel
let imagePointer = cell.viewWithTag(3) as? UIImageView
let getGif = arrPostiisCollectionFilter[indexPath.row].leadDetails?.value(forKey: "gif") as? NSArray
let getPhoto = arrPostiisCollectionFilter[indexPath.row].leadDetails?.value(forKey: "photo") as? NSArray
let getVideo = arrPostiisCollectionFilter[indexPath.row].leadDetails?.value(forKey: "video") as? NSArray
label1?.text = "\(arrPostiisCollectionFilter[indexPath.row].leadDetails?.value(forKey: "title"))"
if getGif != nil {
let arrGif = getGif?.value(forKey: "gifUrl") as! [String]
print(arrGif[0])
let gifURL : String = "\(arrGif[0])"
let imageURL = UIImage.gifImageWithURL(gifURL)
imagePointer?.image = imageURL
playButton?.isHidden = true
}
if getPhoto != nil {
let arrPhoto = getPhoto?.value(forKey: "photoUrl") as! [String]
print(arrPhoto[0])
let storageRef = Storage.storage().reference(forURL: arrPhoto[0])
storageRef.downloadURL(completion: { (url, error) in
do {
let data = try Data(contentsOf: url!)
let image = UIImage(data: data as Data)
DispatchQueue.main.async {
imagePointer?.image = image
playButton?.isHidden = true
}
} catch {
print(error)
}
})
}
if getVideo != nil {
let arrVideo = getVideo?.value(forKey: "videoUrl") as! [String]
let videoURL = URL(string: arrVideo[0])
let asset = AVAsset(url:videoURL!)
if let videoThumbnail = asset.videoThumbnail{
SVProgressHUD.dismiss()
imagePointer?.image = videoThumbnail
playButton?.isHidden = false
}
}
}
}
If I run, the app hangs in this page and data load time is getting more, some cases the preview image is wrongly displayed and not able to handle its completion
As others have mentioned in the comments, you are better of not performing the background loading in cellFroRowAtIndexPath.
Instead, it's better practice to add a new method fetchData(), where you perform all the server interaction.
So for example:
// Add instance variables for fast access to data
private var images = [UIImage]()
private var thumbnails = [UIImage]()
private func fetchData(completion: ()->()) {
// Load storage URLs
var storageURLs = ...
// Load data from firebase
let storageRef = Storage.storage().reference(forURL: arrPhoto[0])
storageRef.downloadURL(completion: { (url, error) in
// Parse data and store resulting image in image array
...
// Call completion handler to indicate that loading has finished
completion()
})
}
Now you can call fetchData() whenever you would like to refresh data and call tableview.reloadData() within the completion handler. That of course must be done on the main thread.
This approach simplifies your cellForRowAtIndexPath method.
There you can just say:
imagePointer?.image = ...Correct image from image array...
Without any background loading.
I suggest using below lightweight extension for image downloading from URL
using NSCache
extension UIImageView {
func downloadImage(urlString: String, success: ((_ image: UIImage?) -> Void)? = nil, failure: ((String) -> Void)? = nil) {
let imageCache = NSCache<NSString, UIImage>()
DispatchQueue.main.async {[weak self] in
self?.image = nil
}
if let image = imageCache.object(forKey: urlString as NSString) {
DispatchQueue.main.async {[weak self] in
self?.image = image
}
success?(image)
} else {
guard let url = URL(string: urlString) else {
print("failed to create url")
return
}
let request = URLRequest(url: url)
let task = URLSession.shared.dataTask(with: request) {(data, response, error) in
// response received, now switch back to main queue
DispatchQueue.main.async {[weak self] in
if let error = error {
failure?(error.localizedDescription)
}
else if let data = data, let image = UIImage(data: data) {
imageCache.setObject(image, forKey: url.absoluteString as NSString)
self?.image = image
success?(image)
} else {
failure?("Image not available")
}
}
}
task.resume()
}
}
}
Usage:
let path = "https://i.stack.imgur.com/o5YNI.jpg"
let imageView = UIImageView() // your imageView, which will download image
imageView.downloadImage(urlString: path)
No need to put imageView.downloadImage(urlString: path) in mainQueue, its handled in extension
In your case:
You can implement following logic in cellForRowAt method
if getGif != nil {
let arrGif = getGif?.value(forKey: "gifUrl") as! [String]
let urlString : String = "\(arrGif[0])"
let image = UIImage.gifImageWithURL(urlString)
imagePointer?.image = image
playButton?.isHidden = true
}
else if getPhoto != nil {
let arrPhoto = getPhoto?.value(forKey: "photoUrl") as! [String]
let urlString = Storage.storage().reference(forURL: arrPhoto[0])
imagePointer?.downloadImage(urlString: urlString)
playButton?.isHidden = true
}
elseif getVideo != nil {
let arrVideo = getVideo?.value(forKey: "videoUrl") as! [String]
let urlString = arrVideo[0]
imagePointer?.downloadImage(urlString: urlString)
playButton?.isHidden = false
}
If you have one imageView to reload in tableView for photo, video and gif. then use one image array to store it prior before reloading. So that your main issue of hang or stuck will be resolved. Here the main issue is each time in table view cell collection data is being called and checked while scrolling.
Now I suggest to get all photo, gifs and video (thumbnail) as one single array prior to table view reload try this,
var cacheImages = [UIImage]()
private func fetchData(completionBlock: () -> ()) {
for (index, _) in postiisCollectionDetails.enumerated() {
let getGif = postiisCollectionDetails[index].leadDetails?.value(forKey: "gif") as? NSArray
let getPhoto = postiisCollectionDetails[index].leadDetails?.value(forKey: "photo") as? NSArray
let getVideo = postiisCollectionDetails[index].leadDetails?.value(forKey: "video") as? NSArray
if getGif != nil {
let arrGif = getGif?.value(forKey: "gifUrl") as! [String]
let gifURL : String = "\(arrGif[0])"
self.randomList.append(gifURL)
/////---------------------------
let imageURL = UIImage.gifImageWithURL(gifURL)
self.cacheImages.append(imageURL!)
//////=================
}
else if getVideo != nil {
let arrVideo = getVideo?.value(forKey: "videoUrl") as! [String]
let videoURL: String = "\(arrVideo[0])"
let videoUrl = URL(string: arrVideo[0])
let asset = AVAsset(url:videoUrl!)
if let videoThumbnail = asset.videoThumbnail{
////--------------
self.cacheImages.append(videoThumbnail)
//-----------
}
self.randomList.append(videoURL)
}else if getPhoto != nil {
let arrPhoto = getPhoto?.value(forKey: "photoUrl") as! [String]
let photoURL : String = "\(arrPhoto[0])"
/////---------------------------
let url = URL(string: photoURL)
let data = try? Data(contentsOf: url!)
if let imageData = data {
let image = UIImage(data: imageData)
if image != nil {
self.cacheImages.append(image!)
}
else {
let defaultImage: UIImage = UIImage(named:"edit-user-80")!
self.cacheImages.append(defaultImage)
}
}
//////=================
}
else {
//-----------------
let defaultImage: UIImage = UIImage(named:"edit-user-80")!
self.cacheImages.append(defaultImage)
//--------------------
}
}
completionBlock()
}
After getting all UIImage as array where loop is being called. Now you call this function inside your viewDidLoad. So after all values in images fetched then try to call tableView like this,
override func viewDidLoad() {
self.fetchData {
DispatchQueue.main.async
self.tableView.reloadData()
}
}
}
Now atlast, you may use SDWebImage or any other background image class or download method to call those in tableView cellforRow method,
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
// your cell idetifier & other stuffs
if getVideo != nil {
imagePointer?.image = cacheImages[indexPath.row]
playButton?.isHidden = false
}else {
imagePointer?.image = cacheImages[indexPath.row]
// or get photo with string via SdWebImage
// imagePointer?.sd_setImage(with: URL(string: photoURL), placeholderImage: UIImage(named: "edit-user-80"))
playButton?.isHidden = true
}
return cell
}
You're handling data in a totally wrong manner. Data(contentsOf: url!) - This is wrong. You should chache the images and should download it to directory. When you convert something into data it takes place into the memory(ram) and it is not good idea when playing with large files. You should use SDWebImage kind of library to set images to imageview.
Second thing if let videoThumbnail = asset.videoThumbnail - This is also wrong. Why you're creating assets and then getting thumbnail from it? You should have separate URL for the thumbnail image for your all videos in the response of the API and then again you can use SDWebImage to load that thumbnail.
You can use SDWebImage for gif as well.
Alternative of SDWebImage is Kingfisher. Just go through both libraries and use whatever suitable for you.
[][!I want load image from download url from firebase using image cache how can I can create an inheritance where my image gets loaded I guess I am missing OOP concept somewhere. my image view is swipe label, how too create an instance where I can display the image on my view.
import UIKit
import Firebase
class swipeLabelViewController: UIViewController {
#IBOutlet weak var UserAgeText: UILabel!
var user:User? {
didSet {
let userNameSwipe = user?.userName
userNameLabel.text = userNameSwipe
let userAgeSwipe = user?.userAge
UserAgeText.text = userAgeSwipe
guard let profileImageUrl = user?.profileImageUrl else {
return }
profileImageView.loadImage(with: profileImageUrl)
print(profileImageUrl)
// let userFetchedImage = user?.profileImageUrl
// swipeLabel.image = userFetchedImage
// self.swipeLabel.image = UIImage(contentsOfFile: profileImageUrl)
}
}
var profileImageView: CustomImageView = {
let iv = CustomImageView()
return iv
}()
var imageI : UIImage!
// var swipepic = CustomImageView()
#IBOutlet weak var swipeLabel: UIImageView!
#IBOutlet weak var userNameLabel: UILabel!
override func viewDidLoad() {
super.viewDidLoad()
swipeLabel.image = imageI
let gesture = UIPanGestureRecognizer(target: self, action:
selector(wasDragged(gestureRecognizer:)))
swipeLabel.addGestureRecognizer(gesture)
fetchCurrentUserData()
}
// user model class``
class User {
// attributes getting users info so i can set up from firebase
var userName:String!
var userAge:String!
var uid:String!
var profileImageUrl: String!
init (uid:String,dictionary:Dictionary) {
self.uid = uid
if let userName = dictionary [ "userName" ] as? String{
self.userName = userName
}
if let userAge = dictionary [ "userAge" ] as? String{
self.userAge = userAge
}
if let profileImageUrl = dictionary["profileImageURL"] as? String {
self.profileImageUrl = profileImageUrl
}
}
}
// and lastly image cache class customImageView
import Foundation
import UIKit
var imageCache = String: UIImage
class CustomImageView: UIImageView {
var lastImgUrlUsedToLoadImage: String?
func loadImage(with urlString: String) {
// set image to nil
self.image = nil
// set lastImgUrlUsedToLoadImage
lastImgUrlUsedToLoadImage = urlString
// check if image exists in cache
if let cachedImage = imageCache[urlString] {
self.image = cachedImage
return
}
// url for image location
guard let url = URL(string: urlString) else { return }
// fetch contents of URL
URLSession.shared.dataTask(with: url) { (data, response, error) in
// handle error
if let error = error {
print("Failed to load image with error",
error.localizedDescription)
}
if self.lastImgUrlUsedToLoadImage != url.absoluteString {
return
}
// image data
guard let imageData = data else { return }
// create image using image data
let photoImage = UIImage(data: imageData)
// set key and value for image cache
imageCache[url.absoluteString] = photoImage
// set image
DispatchQueue.main.async {
self.image = photoImage
}
}.resume()
}
}
no errors I just can't see image on my swipelabel UIImage
You need to make a separate request to download the image from the url that firebase returns. Here is a playground example:
//: A SpriteKit based Playground
import PlaygroundSupport
import UIKit
enum ImageDownloadError: Error {
case failedToConvertDataToImage
}
func dowloadImage(from url: URL, completion: #escaping (Result<UIImage, Error>) -> Void) {
let task = URLSession.shared.dataTask(with: url) { data, response, error in
guard let image = data.flatMap(UIImage.init(data:)) else {
return completion (.failure(error ?? ImageDownloadError.failedToConvertDataToImage))
}
completion(.success(image))
}.resume()
}
let imageView = UIImageView()
dowloadImage(from: URL(string: "https://res.cloudinary.com/demo/image/upload/sample.jpg")!) { [weak imageView] result in
switch result {
case .failure(let error):
print(error.localizedDescription)
case .success(let image):
imageView?.image = image
}
}
imageView.frame = .init(origin: .zero, size: .init(width: 300, height: 300))
PlaygroundPage.current.liveView = imageView
PlaygroundPage.current.needsIndefiniteExecution = true
So I have created a model to download data (images, title, desc) using alamofire. But having problem to pass the data and update it in the viewController. If I put the functions in viewController's viewDidLoad then it is working very fine. But I want to use the MVC model. Here is the code for the model:
class PageControllerView {
var _titleName : String!
var _titleDesc : String!
var _image : UIImage!
var titleName : String {
if _titleName == nil {
_titleName = ""
print("titlename is nil")
}
return _titleName
}
var titleDesc : String {
if _titleDesc == nil {
print("tittledesc is nile")
_titleDesc = ""
}
return _titleDesc
}
var image : UIImage {
if _image == nil {
print("Image view is nill")
_image = UIImage(named: "q")
}
return _image
}
func getPageControllerData(_ page : Int) {
Alamofire.request("\(BASE_URL)movie/now_playing?api_key=\(API_KEY)&language=en-US&page=1").responseJSON { (response) in
if let JSON = response.result.value {
if let json = JSON as? Dictionary<String, Any> {
if let results = json["results"] as? [Dictionary<String, Any>] {
if let overview = results[page]["overview"] as? String {
self._titleDesc = overview
}
if let releaseDate = results[page]["release_date"] as? String {
if let title = results[page]["title"] as? String {
let index = releaseDate.index(releaseDate.startIndex, offsetBy: 4)
self._titleName = "\(title) (\(releaseDate.substring(to: index)))"
}
}
if let image_url = results[page]["poster_path"] as? String{
Alamofire.request("\(BASE_URL_IMAGE)\(IMAGE_SIZE)\(image_url)").downloadProgress(closure: { (progress) in
print(progress.fractionCompleted)
}).responseData(completionHandler: { (response) in
print("completed downloading")
if let imageData = response.result.value {
self._image = UIImage(data: imageData)
}
})
}
}
}
}
}
}
}
And this is the viewControllers code (It is working fine but i want to pass the model. The alamofirefuntion is also present in the viewcontroller):
override func viewDidLoad() {
super.viewDidLoad()
print("viewdidload")
getPageControllerData(13)
self.updatePageControllerUI()
}
func updatePageControllerUI() {
pageControllerMovieLabel.text = pageControllerView.titleName
pageControllerSubLabel.text = pageControllerView.titleDesc
pageControlImageView.image = pageControllerView.image
}
func getPageControllerData(_ page : Int) {
Alamofire.request("\(BASE_URL)movie/now_playing?api_key=\(API_KEY)&language=en-US&page=1").responseJSON { (response) in
if let JSON = response.result.value {
if let json = JSON as? Dictionary<String, Any> {
if let results = json["results"] as? [Dictionary<String, Any>] {
if let overview = results[page]["overview"] as? String {
self.pageControllerSubLabel.text = overview
}
if let releaseDate = results[page]["release_date"] as? String {
if let title = results[page]["title"] as? String {
let index = releaseDate.index(releaseDate.startIndex, offsetBy: 4)
self.pageControllerMovieLabel.text = "\(title) (\(releaseDate.substring(to: index)))"
}
}
if let image_url = results[page]["poster_path"] as? String{
Alamofire.request("\(BASE_URL_IMAGE)\(IMAGE_SIZE)\(image_url)").downloadProgress(closure: { (progress) in
print(progress.fractionCompleted)
}).responseData(completionHandler: { (response) in
if let imageData = response.result.value {
self.pageControlImageView.image = UIImage(data: imageData)
}
})
}
}
}
}
}
}
My question is how to pass the model so that i can use like this, by using the PageControllerView object.
override func viewDidLoad() {
super.viewDidLoad()
print("viewdidload")
pageControllerView.getPageControllerData(13)
self.updatePageControllerUI()
}
Now I have checked that this code works but the image is still not shown at firstgo since it has not been downloaded completely but the title and description is showing.
override func viewDidLoad() {
super.viewDidLoad()
print("viewdidload")
pageControllerView.getPageControllerData(4)
}
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
self.updatePageControllerUI()
}
I currently did for single image which is working fine. But i want to pick multiple images and display in app.Can any one please help me in this. Thank you.
override func didSelectPost() {
if let content = extensionContext!.inputItems[0] as? NSExtensionItem {
let contentType = kUTTypeImage as String
if let contents = content.attachments as? [NSItemProvider] {
for attachment in contents {
if attachment.hasItemConformingToTypeIdentifier(contentType) {
attachment.loadItemForTypeIdentifier(contentType, options: nil) { data, error in
let url = data as! NSURL
if let imageData = NSData(contentsOfURL: url) {
self.saveImage(imageData)
}
}
}
}
}
}
// Unblock the UI.
self.extensionContext!.completeRequestReturningItems([], completionHandler: nil)
}
Saves an image to user defaults
func saveImage(imageData: NSData) {
if let prefs = NSUserDefaults(suiteName: suiteName) {
prefs.setObject(imageData, forKey: keyName)
}
}
Reading in app
if let prefs = NSUserDefaults(suiteName: suiteName) {
if let imageData = prefs.objectForKey(keyName) as? NSData {
drawCard(imageData)
}
}
And i modified this for array, but its not working.
override func didSelectPost() {
if let content = extensionContext!.inputItems[0] as? NSExtensionItem {
let contentType = kUTTypeImage as String
if let contents = content.attachments as? [NSItemProvider] {
for attachment in contents {
if attachment.hasItemConformingToTypeIdentifier(contentType) {
attachment.loadItemForTypeIdentifier(contentType, options: nil) { data, error in
let url = data as! NSURL
if let imageData = NSData(contentsOfURL: url) {
galleryBucket[url] = imageData
self.saveImage(galleryBucket)
}
}
}
}
}
}
// Unblock the UI.
self.extensionContext!.completeRequestReturningItems([], completionHandler: nil)
}
Saves an image to user defaults.
func saveImage(galleryBucket: [NSURL:NSData]) {
if let prefs = NSUserDefaults(suiteName: suiteName) {
prefs.setObject(galleryBucket, forKey: keyName)
}
}
Here I am getting nil for galleryBucket
if let prefs = NSUserDefaults(suiteName: suiteName) {
if let galleryBucket = prefs.objectForKey(keyName) as? [NSURL:NSData] {
for imageData in galleryBucket{
drawCard(imageData.1)
}
}
}
UserDefaults doesn't seem like the best place for saving images..
Take a look at this:
Save An Image To Application Documents Folder From UIView On IOS
And this is how you can search for a specific file extenstion.
Getting list of files in documents folder
And once you have a name, this is how you retrieve it.
Get image from documents directory swift