How to handle Asynchronous images and video when adding image as SubView? - ios

I have a collection view where I add either an image or a video depending on the kind of media in a Media() object.
What I am unsure about is how I could use something like SDWebbImage when adding the video or image as a SubView instead of adding it to a UIImage view.
if postArray[indexPath.item].media[0].imageURLString != nil { //its an image
print("display image")
var imageView = UIImageView(image: postArray[indexPath.item].media[0].imageURLString!)
imageView.frame = CGRect(x: 0, y: 0, width: 126, height: 203)//cell.frame
cell.imageOrVideoView//Here I need to add image
//.addSubview(imageView)//Here I would usualy add a UIImage to subview
I have also asked this question regarding the same general topic.

First: you shouldn't add subviews inside cellForItemAt as the cell is dequeud and this will overflow the content and mix them unless you clear it before reuse , but you need to create an outlet or imageView once as an instance var then use it
Second: it's better to have a separete cell for image and another for video
Finally: use SDWebImage for images and VGPlayer for videos

Related

how to change size of customView passed as UICalanderView Decoration?

I could not find much detail about how to add a customView as decoration for UICalenderView. There are many blogs telling how to add images but could not find anyone about CustomView. In images, we can return the decoration item with size parameter however in case of customView there is no option to pass size along with customView that you are adding. So in the end, I was able to add a view with red background, but the size is wrong. I tried to create a view and give it frame but it had no effect. So im confused how to adjust its size. Here is the method in which I add customView that im creating:
func calendarView(_ calendarView: UICalendarView, decorationFor dateComponents: DateComponents) -> UICalendarView.Decoration? {
return .customView(addActivityCircle)
}
And this is my addActivityCircle method which for now just creating a view with red background color:
private func addActivityCircle() -> UIView {
let view = UIView()
view.backgroundColor = .red
view.clipsToBounds = false
view.frame = CGRect(x: 0, y: 0, width: 50, height: 50)
return view
}
When I run this code I do see a view with red color but it's like a small rectangle, not 50x50. If I pass small values like 20x20, I do see a small rectangle but anything above that I see a rectangle of fixed size. I think that's the limit of decoration item but in apps like Fitness app by apple, there are bigger activity rings than that so there should be a way to have bigger sized custom views as this is just too small. The width is fine but the height is just too less. This is what im getting and it does not get any higher than that:

Custom Markers View in Google Map displacing view inside it in Swift

I have made a xib file of marker (Custom Marker), and assigning that xib file to marker.icon property. This xib file have superView and image inside it, But when it renders on Google Map, image inside SuperView displaces from the bottom as shown in attached image.
And it is happening when I give Google Map View bottom constraints from superView of the ViewController. From safeArea, it is working fine. I have tried in iPhoneX.
Assigning Xib file to Google Marker.
marker.iconView = createMarker(projectIndex: i)
Preparing marker method:
private func createMarker(projectIndex: Int) -> UIView {
let marker = MapMarker(frame: CGRect(x: 0, y: 0, width: 50, height: 50))
marker.updateMarker(project: projects[projectIndex])
marker.tag = projectIndex
marker.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(onTapMarker)))
return marker
}
Below is Marker xib file.
I have spent hours on it but unable to find the bug, Please help me solve this. Thanks!

Merging two UIImageViews of different sizes

I am making an iOS app where the user is supposed to be able to overlay one image over another. The user can choose a background image, which would be stored in a UIImageView called imageView. The user can then decided on a image to be overlaid on top of that image, which will be stored in a UIImageView called imageTwo. Then, the user is allowed to move and resize imageTwo. However, I want to then be able to merge those image views into one image and download it.
I am currently using the function below to try to download the image:
#IBAction func downloadImage(_ sender: Any) {
let bottomImage:UIImage = imageView.image!
let topImage:UIImage = imageTwo.image!
let mySize = CGSize(width: (imageView.frame.size.width), height:(imageView.frame.size.height))
UIGraphicsBeginImageContextWithOptions(mySize, false, 1)
bottomImage.draw(in: CGRect(x: 0,y:0,width: mySize.width,height: mySize.height))
topImage.draw(in: CGRect(x: imageTwo.frame.origin.x ,y: imageTwo.frame.origin.y , width: (imageTwo.frame.size.width),height:(imageTwo.frame.size.height)), blendMode:CGBlendMode.normal, alpha:1.0)
let newImage:UIImage = UIGraphicsGetImageFromCurrentImageContext()!
UIImageWriteToSavedPhotosAlbum(newImage, nil,nil,nil)
UIGraphicsEndImageContext()
}
However, it doesn't work very well.
This is how the image looks in my app:
Image viewed from app
However, when I download the image using my function from above, the background image looks stretched and the topImage/bird isn't in the right position: Downloaded image
Anyone have any suggestions for easier ways to accomplish this task or how I should change my code from above? I read someone on here suggested putting the UIImageViews into their own View, but that proved to be quite tricky as well...
The issue is that you are compositing the images that back your image views which are different from what is actually displayed by your imageviews. You can either apply the necessary transform so that the image matches what's show in the imageview or you can be lazy and just capture the image that's on the screen snapshotView(afterScreenUpdates:)

How do I create a new View (or subView) with the tap of a button in swift?

I am currently making a flashcard app, and I am trying to make a button that creates an entirely new View (or subView) for the user to edit. Should I use Container Views? Collection Views? I also want to have these set to only one View Controller, so I can save the "cards" in one "set". Please Help!!
Edit: How can I save these views in a "folder" so the user can look at them later. Is there an efficient way to do this so the app doesn't slow or stop.
Edit #2: Ok, so I'm kind of getting it... collection views. But how would I implement this into my because I am using tvOS. Any thoughts?
If you want to create a new UIView programmatically, it's actually quite simple. You could create a method like this:
func addNewView(to container: UIView) {
let newView = UIView()
container.addSubview(newView)
newView.backgroundColor = UIColor.blue
newView.frame = CGRect(x: 10, y: 50, width: 200, height: 250)
}
That would create a new view inside whichever container view you passed in with a blue background, 10pts from the left (x-axis), 50pts from the top (y-axis, think a normal cartesian coordinate system with the y-axis inverted), width of 200 and height of 250.
You could then call this method on the push of a button by handling a button tap with it's own method like this:
func buttonTapped(_ sender: UIButton) {
addNewView(to: self.view)
}
Obviously all the values for the frame I gave you were just for an example so you could visualize it in your head, you can edit those however you want, or make calculations based on the size of your device's screen. You can get the device's screen size by saying self.view.bounds

How add background image to UIControl

I create 3rd party keyboard and i try add background to my keys. I use UIControl for my keys, without storyboard.
I have several types of buttons and try to add background UIView for my characters.
let img = UIImage(named:"KeyBackground")
var bgImage: UIImageView?
bgImage = UIImageView(image: img)
bgImage!.frame = keyboardKey.frame
keyboardKey.addSubview(bgImage!)
keyboardKey.sendSubviewToBack(bgImage!)
keyboardKey.backgroundColor = UIColor.clearColor()
But is don't work.
I try to add background image like this:
keyboardKey.backgroundColor = UIColor(patternImage: UIImage(named:"KeyBackground")!)
But is looks bad...
What am i doing wrong?
The background looks like that because the size of your image is a little smaller than the size of each key, and the image is being tiled (repeated to fill the space - so each key contains the background image and pieces of the surrounding tiles to the right, bottom, and bottom-right).
The UIColor(patternImage:) docs say that
During drawing, the image in the pattern color is tiled as necessary to cover the given area.
Your first solution probably didn't work because you inserted your UIImageView as the bottom-most subview - I assume another (opaque) view was on top of it. What type of UIControl are you using? UIButton, for example, already provides some "background image" support out of the box.
Oh, it's so easy. My keyboardKey.frame, at the time of the call this method, have frame = 0, 0, 0, 0.
Night a bad time for work:)

Resources