How to implement a Modal Navigation Drawer with material.io on iOS - ios

According to the material.io documentation, the Modal Navigation Drawer should be used for sideMenus on mobile device but their api almost only contain drawers for the bottom, MDCBottomDrawerViewController, MDCBottomDrawerPresentationController etc. What about the side drawer? I checked but didn't find a MDCSideDrawerViewController.
The following code uses the MDCBottomDrawerViewController, but the problem is that the MDCBottomDrawerViewController().contentViewController presents my table from the botton instead of the from the side.
Set up for bottomDrawVC:
var bottomDrawerViewController: MDCBottomDrawerViewController = {
let drawer = MDCBottomDrawerViewController()
drawer.isTopHandleHidden = false
drawer.dismissOnBackgroundTap = true
return drawer
}()
The presenting of the bottomDrawVC:
#IBAction func toggleSideMenu() {
let storyBoard = UIStoryboard.init(name: "Main", bundle: nil)
let vc = storyBoard.instantiateViewController(withIdentifier: "TableViewController")
let size = CGSize(width: view.frame.width, height: view.frame.height)
bottomDrawerViewController.contentViewController?.preferredContentSize = size
bottomDrawerViewController.contentViewController = vc
present(bottomDrawerViewController, animated: true, completion: nil)
}
As I can't seem to find info in the docs, how does one present a modal side menu with material.io on iOS?

Related

How to adjust the size of presented view - Swift 5 (Xcode)

I have a button which will lead a to collection view controller drawDetails_VC.
func showController() {
let drawDetails_VC = DrawDetails(collectionViewLayout: UICollectionViewFlowLayout())
navigationController?.navigationBar.tintColor = UIColor.white
let navController = CustomNavigationController(rootViewController: drawDetails_VC)
present(navController, animated: true, completion: nil)
}
After updating to Swift 5, the presented collection view Page Sheet is not covering the full screen.
I tried hours but didn't get what I want.
How can the presented sheet Page Sheet cover the whole screen and not as above image.
And how can I get programmaticlly the width of the presented Controller Page Sheet
Set your view controller's modal presentation style to .fullScreen or .overFullScreen. Try the code example below.
func showController() {
let drawDetails_VC = DrawDetails(collectionViewLayout: UICollectionViewFlowLayout())
navigationController?.navigationBar.tintColor = .white
let navController = CustomNavigationController(rootViewController: drawDetails_VC)
navController.modalPresentationStyle = .fullScreen
present(navController, animated: true, completion: nil)
}

How to present a popup view in full screen

I've following view configuration
Tab bar -> Nav controller -> View: Click on a button -> segue to-> Another view: Click on a button -> Popup view.
This modal view is on a different storyboard.
I want to present this model view in full screen. I've tried this solution mentioned on Presenting modal in iOS 13 fullscreen but it doesn't work. I've also tried few other solutions but the popup view is not showing over full screen, status bar is visible at the top.
How do I present modal view in a full screen?
let storyboard = UIStoryboard(name: "Other", bundle: Bundle.main)
guard let popupVC = storyboard.instantiateViewController(withIdentifier: "PopUpViewController") as? PopUpViewController else {
print("PopUpViewController not found")
return
}
popupVC.modalPresentationStyle = .fullScreen
self.present(popupVC, animated: true, completion: nil)
You could try presenting with the navigation controller.
let storyboard = UIStoryboard(name: "Other", bundle: Bundle.main)
guard let popupVC = storyboard.instantiateViewController(withIdentifier: "PopUpViewController") as? PopUpViewController else {
print("PopUpViewController not found")
return
}
var navigationController = UINavigationController(rootViewController: popupVC)
navigationController.modalPresentationStyle = .fullScreen
self.present(navigationViewController, animated: true, completion: nil)
An alternative would be to use presentViewController but presentViewController will only present one viewController modally over the currently visible viewController whereas presenting with the navigationController will give the flexibility to push further components on top, providing a smoother navigation experience with go back to previous page kind of behaviour.
Maybe try creating the view controller this way:
let popOverVC = UIStoryboard(name: "yourBoard", bundle: nil).instantiateViewController(withIdentifier: "YourViewController") as! YourViewController
self.addChild(popOverVC)
let lSs = UIScreen.main.bounds
popOverVC.view.frame = CGRect(x: 0, y: 0, width: lSs.width, height: lSs.height)
popOverVC.view.tag = tag
self.view.addSubview(popOverVC.view)
popOverVC.didMove(toParent: self)
Within the popup view controller class, add a method for animating its view in viewDidLoad.
Edit: I read your replies. The issue you are having is caused by not handling the status bar properly. Instead of trying to make this veiewcontroller fullscreen, simply hide the status bar
How do I hide the status bar in a Swift iOS app?
and bring it back when you want to see it again.

How to position subview below left bottom corner of a button in view controller?

I have an options button (that 3 vertical dotted button) on top of the view controller.
When I click that button, A list view should appear like in many other apps like WhatsApp...
I really don't know how to position it always near to the button programmatically.
Placing at the left-bottom of an existing view is quite easier:
func placeSubView(existingView: UIView)
{
let desiredWidth = CGFloat(50.0)
let desiredHeight = CGFloat(35.0)
let (x, y) = (existingView.frame.origin.x - desiredWidth, existingView.frame.origin.y + existingView.frame.size.height)
let desiredView = UIView(frame: CGRect(x: x, y: y, width: desiredWidth, height: desiredHeight))
existingView.superview?.addSubview(desiredView)
}
UPDATE:
In case you are looking for popupo menu like view, you should search about UIPopoverPresentationController.
Something like this.
Use this method and make PopoverViewController a table view controller if you want a list.
#IBAction func displayPopover(_ sender: UIBarButtonItem) {
let storyboard : UIStoryboard = UIStoryboard(name: "Main", bundle: nil)
let vc = storyboard.instantiateViewController(withIdentifier: "PopoverViewController")
vc.modalPresentationStyle = .popover
let popover: UIPopoverPresentationController = vc.popoverPresentationController!
popover.barButtonItem = sender
present(vc, animated: true, completion:nil)
}

Best way for custom button on UITabBar to presents modal view

I'm new to Xcode/Swift. I have a center button I want to present a modal view from the current view (tab).
I've implemented a custom class for UITabBar that adds that button according to this guide.
This UITabBar has no view controller in self that I can find, so I get an error when I try to present a view.
Error: Value of type 'MainTabBar' has no member 'present'
Is there a way I can have this button present modal from the current view?
I'm not sure how to reach the current view from this custom class.
Should I point the button's addTarget to a uitabbar Delegate and watch for it in my other views?
Should I stop doing this and just do tabs with a tab that pulls up my modal view in a ViewDidAppear() on a different view?
I think I lose the ability to pop, or dismiss, back to the last view if I do that.
Here's the custom UITabBar class I'm working with.
class MainTabBar: UITabBar {
private var middleButton = UIButton()
override func awakeFromNib() {
super.awakeFromNib()
setupMiddleButton()
}
func setupMiddleButton() {
middleButton.frame.size = CGSize(width: 70, height: 70)
middleButton.backgroundColor = .blue
middleButton.layer.cornerRadius = 35
middleButton.layer.masksToBounds = true
middleButton.center = CGPoint(x: UIScreen.main.bounds.width / 2, y: 0)
middleButton.addTarget(self, action: #selector(test), for: .touchUpInside)
addSubview(middleButton)
}
#objc func test() {
let vc = createController()
vc.modalTransitionStyle = .crossDissolve
self.present(vc, animated: true, completion: nil)
}
}
Found a better implementation.
Created a custom class inherited from UITabBarController and named it MainViewController.
Setup the middle button in that controller instead of in the MainTabBar custom class.
self now has member present.
#objc func test() {
let storyboard = UIStoryboard(name: "Main", bundle: nil)
let vc =
storyboard.instantiateViewController(withIdentifier: "createModal") as! createController
self.present(vc, animated: true, completion: nil)
}
https://github.com/drrost/Custom-Tabbar-Cetner-Button

TabBar is not showing [Moreā€¦] icon while loading tabItems dynamically from view controller

Here i am adding tab items dynamically but its showing only 4 items ( More... tab item is missing). I have gone through a lot of articles and stackOverFlow posts but failed to find any appropriate solution. Here is my code so far...
override func viewWillAppear(_ animated: Bool) {
super.viewWillAppear(animated)
loadDynamicItems()
}
func loadDynamicItems() {
let storyBoard = UIStoryboard(name: "Main", bundle: Bundle.main)
var controllerArray = [UIViewController]()
for i in 1...8 {
let controller = storyBoard.instantiateViewController(withIdentifier: "newsCollection") as! NewsVC
let tabIcon = UIImage.fontAwesomeIcon(name: .addressBook,
textColor: UIColor.black,
size: CGSize(width: 30, height: 30))
controller.tabBarItem = UITabBarItem(title: "item \(i)", image: tabIcon, tag: i)
controllerArray.append(controller)
}
self.setViewControllers(controllerArray, animated: true)
}
But result seems like this IMAGE
why Its showing only 4 items!
It should load a [More...] button as fifth child from where i can access the rest of the items.
But why its not there !?
When using a Storyboard, in order to add a TabBarController to your application you need to drag and drop a UITabBarViewController instead of a plain UIViewController. Otherwise some properties are not correctly derived (like the TabBar - please see my screenshot).
Just make sure you delete the automatically created TabBar items!

Resources