How To Transition Between Subviews While Being In The Same viewController without Navigation Controller?

Question

I am new in iOS development. I would like to code a page with help of UIKit that I can switch between subviews (by clicking radio button)with decent animation (like shown in this video: https://www.youtube.com/watch?v=ZXXWkieFzN8). However, I have no idea how to do something like this. I am trying to implement this logic in my reset passowrd page that user can select best option to reset their password.

Answer 1

From the standard SDK there is UIPageViewController https://developer.apple.com/documentation/uikit/uipageviewcontroller

But in case you need custom animations / views it is much easier to:

1. Create holder UIView, where you will change your content

2. Create different UIView's (or UIViewControllers) for your custom content

3. When you need to change a content - you remove a previous UIView from the holder and insert a new UIView (thus swapping them).

I try to use UIViewControllers instead of UIView's for content, since it's more reusable.

Here's an example for you

class DynamicViewManager {
    
    private weak var contentView: UIView?
    private(set) weak var currentShownVC: UIViewController?
    
    
    init(contentView: UIView) {
   
        self.contentView = contentView
    }
    
    
    func show(viewController: UIViewController) {
        
        guard let contentView = self.contentView else {
            
            return
        }
        
        viewController.view.translatesAutoresizingMaskIntoConstraints = false
        
        self.removePresentedVC()
        self.currentShownVC = viewController
        
        contentView.addSubview(viewController.view)
        contentView.sendSubviewToBack(viewController.view)
        NSLayoutConstraint.activate(self.pinningConstraints(view: viewController.view, to: contentView))
    }
    
    
    @discardableResult
    func removePresentedVC() -> UIViewController? {
        
        let cached = self.currentShownVC
        self.currentShownVC?.view.removeFromSuperview()
        self.currentShownVC = nil
        return cached
    }

    private func pinningConstraints(view: UIView, to anotherView: UIView) -> [NSLayoutConstraint] {
    
      return [
            view.leadingAnchor.constraint(equalTo: anotherView.safeAreaLayoutGuide.leadingAnchor),
            view.trailingAnchor.constraint(equalTo: anotherView.safeAreaLayoutGuide.trailingAnchor),
            view.topAnchor.constraint(equalTo: anotherView.safeAreaLayoutGuide.topAnchor),
            view.bottomAnchor.constraint(equalTo: anotherView.safeAreaLayoutGuide.bottomAnchor)
        ]
    }
}

In your case it would look something like this

let manager = DynamicViewManager(contentView: self.contentView)
let left = LeftViewController()
let right = RightViewController()
.onLeftClick {
    manager.show(left) 
    self.changeHeight(for: contentView, toPercentage: 15)
}

.onRightClick {
    manager.show(right)
    self.changeHeight(for: contentView, toPercentage: 30)
}

You can also adjust the height for the ContentView, so all your content below (reset password is also moved to the top)

You change a height by deactivating a previous constraint and activating a new one (to make self.changeHeight work)