首页 > 解决方案 > 在 iOS 的 BottomAppBar 中自定义 FAB

问题描述

刚刚阅读了一篇关于在 Android 的 Material Components 中自定义 BottomAppBar 的文章,现在我想知道如何为 iOS 做同样的事情。

实际上我需要更改fabCradleDiameter,fabCradleRoundedCornerRadiusfabCradleVerticalOffsetFAB 半径。

上面的文章显示,在 Android 上,它是通过一些布局 xml 中的 app:* 参数完成的。但是iOS中没有这样的xml。

标签: iosfloating-action-buttonmaterial-components-ios

解决方案


在 iOS touch 中寻找在执行时创建组件,要做到这一点,你可以通过以下方式进行:

 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)

注意:以上代码在Swift 5.0中测试


推荐阅读