How can I animate a series of images in SwiftUI? - ios

I am new to SwiftUI and iOS development (I started learning 2 days ago). Before this I was doing Android apps. I learned some of the basics but I can't figure it out how can I animate several images. I need to display a series of images with 1.2 seconds delay before changing them in a frame.
I found some code here, but they use UIImage which is the old framework and the animation can't be stopped.
import SwiftUI
struct SplashScreen: UIViewRepresentable {
let imageSize: CGSize
let imageNames: [String]
let duration: Double
func makeUIView(context: Self.Context) -> UIView {
let containerView = UIView(frame: CGRect(x: 0, y: 0
, width: imageSize.width, height: imageSize.height))
let animationImageView = UIImageView(frame: CGRect(x: 0, y: 0, width: imageSize.width, height: imageSize.height))
animationImageView.clipsToBounds = true
animationImageView.layer.cornerRadius = 5
animationImageView.autoresizesSubviews = true
animationImageView.animationRepeatCount = 3
animationImageView.contentMode = UIView.ContentMode.scaleAspectFill
var images = [UIImage]()
imageNames.forEach { imageName in
if let img = UIImage(named: imageName) {
images.append(img)
}
}
animationImageView.image = UIImage.animatedImage(with: images, duration: duration)
animationImageView.image = animationImageView.animationImages?.last!
containerView.addSubview(animationImageView)
return containerView
}
func updateUIView(_ uiView: UIView, context: UIViewRepresentableContext<SplashScreen>) {
}
}
This code is from Julio Bailon.
I couldn't find any tutorial which shows how to do this in SwiftUI.
**1. Animate the images like 3 times.
On end, launch another ViewController without the possibility of going back. (I am thinking like activities on Android but I don't know how much that helps)**

Related

Is it possible to use UIKit extensions in SwiftUI?

I have a nice UIImage extension that renders circular images in high quality using less memory. I want to either use this extension or re-create it in SwiftUI so I can use it. The problem is I am very new to SwiftUI and am not sure if it is even possible. Is there a way to use this?
Here's the extension:
extension UIImage {
class func circularImage(from image: UIImage, size: CGSize) -> UIImage? {
let scale = UIScreen.main.scale
let circleRect = CGRect(x: 0, y: 0, width: size.width * scale, height: size.height * scale)
UIGraphicsBeginImageContextWithOptions(circleRect.size, false, scale)
let circlePath = UIBezierPath(roundedRect: circleRect, cornerRadius: circleRect.size.width/2.0)
circlePath.addClip()
image.draw(in: circleRect)
if let roundImage = UIGraphicsGetImageFromCurrentImageContext() {
return roundImage
}
return nil
}
}
You can create your UIImage like normal.
Then, just convert this to a SwiftUI image with:
Image(uiImage: image)
Do not initialize your UIImage in the view body or initializer, as this can be quite expensive - instead do it on appear with onAppear(perform:).
Example:
struct ContentView: View {
#State private var circularImage: UIImage?
var body: some View {
VStack {
Text("Hello world!")
if let circularImage = circularImage {
Image(uiImage: circularImage)
}
}
.onAppear {
guard let image: UIImage = UIImage(named: "background") else { return }
circularImage = UIImage.circularImage(from: image, size: CGSize(width: 100, height: 100))
}
}
}

Swift generate single UIImage out of two UIImages side by side

I found an answer for this same question for Objective-C #
Saving two UIImages side-by-side as one combined image? but not for Swift.
I want to combine two UIImages side-by-side to create one UIImage. Both images would be merged at the border and maintain original resolution(no screen-shots).
How can I save the two images as one image?
ImageA + ImageB = ImageC
You can use the idea from the linked question of using UIGraphicsContext and UIImage.draw to draw the 2 images side-by-side and then create a new UIImage from the context.
extension UIImage {
func mergedSideBySide(with otherImage: UIImage) -> UIImage? {
let mergedWidth = self.size.width + otherImage.size.width
let mergedHeight = max(self.size.height, otherImage.size.height)
let mergedSize = CGSize(width: mergedWidth, height: mergedHeight)
UIGraphicsBeginImageContext(mergedSize)
self.draw(in: CGRect(x: 0, y: 0, width: mergedWidth, height: mergedHeight))
otherImage.draw(in: CGRect(x: self.size.width, y: 0, width: mergedWidth, height: mergedHeight))
let mergedImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return mergedImage
}
}
Usage (assuming leftImage and rightImage are both UIImages):
let mergedImage = leftImage.mergedSideBySide(with: rightImage)
Demo of the function (using SwiftUI for quicker display using previews):
struct Playground_Previews: PreviewProvider {
static let leftImage = UIColor.blue.image(CGSize(width: 128, height: 128))
static let rightImage = UIColor.red.image(CGSize(width: 128, height: 128))
static let mergedImage = leftImage.mergedSideBySide(with: rightImage) ?? UIImage()
static var previews: some View {
VStack(spacing: 10) {
Image(uiImage: leftImage)
Image(uiImage: rightImage)
Image(uiImage: mergedImage)
}
}
}
The UIColor.image function is from Create UIImage with solid color in Swift.

Swift 5: Better way/approach to add image border on photo editing app?

In case the title doesn't make sense, i'm trying to make a photo editing app where user can add border to their photo. For now, i'm testing a white border.
here is a gif sample of the app. (see how slow the slider is. It's meant to be smooth like any other slider.)
Gif sample
My approach was, to render the white background to the image's size, and then render the image n% smaller to shrink it hence the border.
But i have come to a problem where when i'm testing on my device (iphone 7 plus) the slider was so laggy and slow as if it's taking so much time to compute the function.
Here are the codes for the function. This function serves as blend the background with the foreground. Background being plain white colour.
blendImages is a function located on my adjustmentEngine class.
func blendImages(backgroundImg: UIImage,foregroundImg: UIImage) -> Data? {
// size variable
let contentSizeH = foregroundImg.size.height
let contentSizeW = foregroundImg.size.width
// the magic. how the image will scale in the view.
let topImageH = foregroundImg.size.height - (foregroundImg.size.height * imgSizeMultiplier)
let topImageW = foregroundImg.size.width - (foregroundImg.size.width * imgSizeMultiplier)
let bottomImage = backgroundImg
let topImage = foregroundImg
let imgView = UIImageView(frame: CGRect(x: 0, y: 0, width : contentSizeW, height: contentSizeH))
let imgView2 = UIImageView(frame: CGRect(x: 0, y: 0, width: topImageW, height: topImageH))
// - Set Content mode to what you desire
imgView.contentMode = .scaleAspectFill
imgView2.contentMode = .scaleAspectFit
// - Set Images
imgView.image = bottomImage
imgView2.image = topImage
imgView2.center = imgView.center
// - Create UIView
let contentView = UIView(frame: CGRect(x: 0, y: 0, width: contentSizeW, height: contentSizeH))
contentView.addSubview(imgView)
contentView.addSubview(imgView2)
// - Set Size
let size = CGSize(width: contentSizeW, height: contentSizeH)
UIGraphicsBeginImageContextWithOptions(size, true, 0)
contentView.drawHierarchy(in: contentView.bounds, afterScreenUpdates: true)
guard let i = UIGraphicsGetImageFromCurrentImageContext(),
let data = i.jpegData(compressionQuality: 1.0)
else {return nil}
UIGraphicsEndImageContext()
return data
}
Below are the function i called to render it into uiImageView
guard let image = image else { return }
let borderColor = UIColor.white.image()
self.adjustmentEngine.borderColor = borderColor
self.adjustmentEngine.image = image
guard let combinedImageData: Data = self.adjustmentEngine.blendImages(backgroundImg: borderColor, foregroundImg: image) else {return}
let combinedImage = UIImage(data: combinedImageData)
self.imageView.image = combinedImage
This function will get the image and blend it with a new background colour for the border.
And finally, below are the codes for the slider's didChange function.
#IBAction func sliderDidChange(_ sender: UISlider) {
print(sender.value)
let borderColor = adjustmentEngine.borderColor
let image = adjustmentEngine.image
adjustmentEngine.imgSizeMultiplier = CGFloat(sender.value)
guard let combinedImageData: Data = self.adjustmentEngine.blendImages(backgroundImg: borderColor, foregroundImg: image) else {return}
let combinedImage = UIImage(data: combinedImageData)
self.imageView.image = combinedImage
}
So the question is, Is there a better way or optimised way to do this? Or a better approach?

Swift 3 - full width of UITabBarItem for selectionIndicatorImage

i have a UITabBar with three tabs. Now I want to assign or lets say to fill the complete width of one tab to the related selectionIndicatorImage cause currently I got a border if a tab is selected. Like the tab on the left side shows in the following screenshot:
I made a subclass of UITabBar with a new property:
var activeItemBackground:UIColor = UIColor.white {
didSet {
let numberOfItems = CGFloat((items!.count))
let tabBarItemSize = CGSize(width: frame.width / numberOfItems,
height: frame.height)
selectionIndicatorImage = UIImage.imageWithColor(color: activeItemBackground,
size: tabBarItemSize).resizableImage(withCapInsets: .zero)
frame.size.width = frame.width + 4
frame.origin.x = -2
}
}
And the UIImage-Extension in order to have backgroundColor and an image:
extension UIImage
{
class func imageWithColor(color: UIColor, size: CGSize) -> UIImage
{
let rect: CGRect = CGRect(x: 0, y: 0, width: size.width, height: size.height)
UIGraphicsBeginImageContextWithOptions(size, false, 0)
color.setFill()
UIRectFill(rect)
let image: UIImage = UIGraphicsGetImageFromCurrentImageContext()!
UIGraphicsEndImageContext()
return image
}
}
I read much stuff about this problem but unfortunately I can't get it to work. Is something missing in my code?
I think you're taking a couple extra steps...
You are calculating the exact size of the tab bar item, and creating an image of that size, so you shouldn't need the .resizableImage part.
And, since you are setting to exact size, you also shouldn't need to resize the tab bar frame.
This appears to work fine in my testing (using your .imageWithColor func):
class MyTabBar: UITabBar {
var activeItemBackground:UIColor = UIColor.white {
didSet {
let numberOfItems = CGFloat((items!.count))
let tabBarItemSize = CGSize(width: frame.width / numberOfItems,
height: frame.height)
selectionIndicatorImage = UIImage.imageWithColor(color: activeItemBackground,
size: tabBarItemSize)
}
}
}
Then in viewDidLoad of the first VC:
if let tb = self.tabBarController?.tabBar as? MyTabBar {
tb.activeItemBackground = UIColor.red
}

how to make UITabBar selection indicator image fill the whole space? [duplicate]

This question already has answers here:
Set background color of active tab bar item in Swift
(3 answers)
IOS 8 Tab Bar Item Background Colour
(5 answers)
Closed 10 days ago.
I have a UITabBarController where I use this code to set selection indicator image:
let selectedBG = UIImage(named:"tabbarbgtest.png")?.resizableImageWithCapInsets(UIEdgeInsetsMake(0, 0, 0, 0))
UITabBar.appearance().selectionIndicatorImage = selectedBG
But the image does not fill the whole space - see image below:
The image is just a red square with a solution on 82x49px, but with a wider image it still does not fill the whole space. Hope you guys can help - thanks.
As of 2017, the other answers didn't work for me. After a couple of days searching for another solution, I found mine - by subclassing the UITabBarController.
It works for multiple devices even with rotation.
Notes:
Make your images' rendering mode as Original.
Assign this class below to your UITabBarController in your Storyboard or as your base class if you're doing your screen programmatically.
//
// BaseTabBarController.swift
// MyApp
//
// Created by DRC on 1/27/17.
// Copyright © 2017 PrettyITGirl. All rights reserved.
//
import UIKit
class BaseTabBarController: UITabBarController {
let numberOfTabs: CGFloat = 4
let tabBarHeight: CGFloat = 60
override func viewWillAppear(_ animated: Bool) {
super.viewWillAppear(animated)
updateSelectionIndicatorImage()
}
override func viewWillLayoutSubviews() {
super.viewWillLayoutSubviews()
updateSelectionIndicatorImage()
}
func updateSelectionIndicatorImage() {
let width = tabBar.bounds.width
var selectionImage = UIImage(named:"myimage.png")
let tabSize = CGSize(width: width/numberOfTabs, height: tabBarHeight)
UIGraphicsBeginImageContext(tabSize)
selectionImage?.draw(in: CGRect(x: 0, y: 0, width: tabSize.width, height: tabSize.height))
selectionImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
tabBar.selectionIndicatorImage = selectionImage
}
}
To support iPhone X(below code works for all versions), write your code in viewDidLayoutSubviews().
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
let tabWidth = (tabBar.frame.width/CGFloat(tabBar.items!.count))
let tabHeight = tabBar.frame.height
self.tabBar.selectionIndicatorImage = imageWithColor(color: UIColor.white, size: CGSize(width: tabWidth, height: tabHeight)).resizableImage(withCapInsets: UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0))
}
Source: https://github.com/Ramotion/animated-tab-bar/issues/191
This relatively simple solution in objective c worked for me for iPhone X, wouldn't be hard to convert to swift:
CGFloat bottomPadding = 0;
if (#available(iOS 11.0, *)) {
UIWindow *window = UIApplication.sharedApplication.keyWindow;
bottomPadding = window.safeAreaInsets.bottom;
}
[UITabBar.appearance setSelectionIndicatorImage:[UIImage imageWithColor:[UIColor lightGrayColor]
andBounds:CGRectMake(0, 0, self.tabBar.frame.size.width/5, self.tabBar.frame.size.height + bottomPadding)]];
This is an adaptation on Glenn's solution above...
import UIKit
class BaseTabBarController: UITabBarController {
var tabBarBounds: CGRect? {
didSet {
guard tabBarBounds != oldValue else { return }
updateSelectionIndicatorColor(UIColor.green)
}
}
override func viewWillLayoutSubviews() {
super.viewWillLayoutSubviews()
tabBarBounds = tabBar.bounds
}
func updateSelectionIndicatorColor(_ tintColor: UIColor) {
guard let tabBarItems = self.tabBar.items else { return }
let tabWidth = tabBar.bounds.width
let tabHeight = tabBar.bounds.height
let tabSize = CGSize(width: tabWidth / CGFloat(tabBarItems.count), height: tabHeight)
var selectionImage = UIImage(color: tintColor, size: tabSize)
UIGraphicsBeginImageContext(tabSize)
selectionImage?.draw(in: CGRect(x: 0, y: 0, width: tabSize.width, height: tabSize.height))
selectionImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
tabBar.selectionIndicatorImage = selectionImage
}
}
public extension UIImage {
public convenience init?(color: UIColor, size: CGSize = CGSize(width: 1, height: 1)) {
let rect = CGRect(origin: .zero, size: size)
UIGraphicsBeginImageContextWithOptions(rect.size, false, 0.0)
color.setFill()
UIRectFill(rect)
let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
guard let cgImage = image?.cgImage else { return nil }
self.init(cgImage: cgImage)
}
}
you should take a look at this to make the tabbarbgtest.png resizable, then assign the image to selectionIndicatorImage, you can even do this in the storyboard editor.

Resources