Customise FAB in BottomAppBar for iOS

1k views Asked by At

Just read an article about customising BottomAppBar in Material Components for Android and now I wonder how to do the same for iOS.

Actually I need to change fabCradleDiameter, fabCradleRoundedCornerRadius, fabCradleVerticalOffset and FAB radius.

Article above shows that on Android it's done via app:* parameters in some layout xml. But there is no such xml in iOS.

1

There are 1 answers

2
Juanes30 On

look to do it in iOS touch to create the component in execution time, to do it you do it in the following way:

 var bottomAppBar: MDCBottomAppBarView {
            let bottomAppBar = MDCBottomAppBarView()
            // background color Bottom App Bar
            bottomAppBar.barTintColor = UIColor(named: "Teal")
            // Image floatingButton
            bottomAppBar.floatingButton.setImage(UIImage(named: "CloudUpload"), for: .normal)
            // Background color floatingButton
            bottomAppBar.floatingButton.backgroundColor = UIColor(named: "Gray600")
            // here you define the size of the bottom app bar, in my case I define the size based on a view that I added to the ViewController
            let size = bottomAppBar.sizeThatFits(self.containerView.bounds.size)
            bottomAppBar.frame = CGRect(x: 0, y: 0, width: size.width, height: size.height) 

            // The following lines of code are to define the buttons on the right and left side
            let barButtonLeadingItem = UIBarButtonItem(
                image: UIImage(named:"IconName"), // Icon
                style: .plain,
                target: self,
                action: #selector(self.onMenuButtonTapped))

            let barButtonTrailingItem = UIBarButtonItem(
                image: UIImage(named: "IconName"), // Icon
                style: .plain,
                target: self,
                action: #selector(self.onNavigationButtonTapped))
            bottomAppBar.leadingBarButtonItems = [barButtonLeadingItem]
            bottomAppBar.trailingBarButtonItems = [barButtonTrailingItem]
            return bottomAppBar
        }
 // Add bottombar to view
 self.containerView.addSubview(bottomAppBar)

NOTE: the above code is tested in Swift 5.0