logo标签列表

如何在UITabbar中设置带有期望下拉阴影的左上和右上角半径？

swiftuitabbarrounded-cornersxcode10cornerradius
10

我花了将近两个小时来研究这个问题。但是，最终没有成功，所以我不得不来这里求助。需要实现两个功能：

首先，我想在 UITabbar 的顶部（也就是右上角和左上角）拥有一个自然的圆角。

其次，我想在这些圆角上方显示一个阴影（如下图所示）。

请查看下面的图片Tabbar

如果需要更多信息，请告诉我，我一定会提供的。

非常感谢任何帮助。

编辑1

这里还有一个小问题，假设我们真的能够解决这个问题，苹果审核团队会接受这个应用程序吗？ 我有点紧张和好奇。

你可能需要实现自己的TabBar，可以查看这个链接：https://guides.codepath.com/ios/Creating-a-Custom-Tab-Bar - Wojciech Kulik
在这里，您需要实现一个自定义选项卡栏。您可以使用集合视图创建提供的视图UI，并实现选项卡栏的功能。 - Pranavan SP
https://stackoverflow.com/a/48293806/6630644 - SPatel
简单示例：https://github.com/HappyIosDeveloper/SwiftUIAppWithCustomTabBar - Ahmadreza
5个回答
11

问：在这里还出现了一个小问题，假设我们能够完成这个任务，苹果的审核团队会接受这个应用吗？ 答：是的，他们会接受你的应用。我已经添加了这种类型的选项卡栏。

创建自定义选项卡栏

HomeTabController

import UIKit

class HomeTabController: UITabBarController
{
    var viewCustomeTab : CustomeTabView!
    var lastSender : UIButton!

    //MARK:- ViewController Methods
    override func viewDidLoad()
    {
        super.viewDidLoad()

        UITabBar.appearance().shadowImage = UIImage()

        allocateTabItems()
    }

    //MARK:- Prepare Methods
    // Allocate shop controller with tab bar
    func allocateTabItems()
    {

        let vc1 = UIStoryboard.init(name: "Main", bundle: Bundle.main).instantiateViewController(withIdentifier: "Avc") as? Avc
        let item1 = UINavigationController(rootViewController: vc1!)
        self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
        self.navigationController?.navigationBar.shadowImage = UIImage()
        self.viewControllers = [item1]
        createTabBar()
    }

    func createTabBar()
    {
        viewCustomeTab = CustomeTabView.instanceFromNib()
        viewCustomeTab.translatesAutoresizingMaskIntoConstraints = false
        viewCustomeTab.call()

        self.view.addSubview(viewCustomeTab)

        if #available(iOS 11, *)
        {
            let guide = view.safeAreaLayoutGuide
            NSLayoutConstraint.activate([guide.bottomAnchor.constraint(equalToSystemSpacingBelow: viewCustomeTab.bottomAnchor, multiplier: 0), viewCustomeTab.leadingAnchor.constraint(equalToSystemSpacingAfter: guide.leadingAnchor, multiplier: 0), guide.trailingAnchor.constraint(equalToSystemSpacingAfter: viewCustomeTab.trailingAnchor, multiplier: 0), viewCustomeTab.heightAnchor.constraint(equalToConstant: 70) ])
        }
        else
        {
            let standardSpacing: CGFloat = 0
            NSLayoutConstraint.activate([viewCustomeTab.topAnchor.constraint(equalTo: topLayoutGuide.bottomAnchor, constant: standardSpacing), bottomLayoutGuide.topAnchor.constraint(equalTo: viewCustomeTab.bottomAnchor, constant: standardSpacing)
                ])
        }

        viewCustomeTab.btnTab1.addTarget(self, action: #selector(HomeTabController.buttonTabClickAction(sender:)), for: .touchUpInside)
        viewCustomeTab.btnTab2.addTarget(self, action: #selector(HomeTabController.buttonTabClickAction(sender:)), for: .touchUpInside)
        viewCustomeTab.btnTab3.addTarget(self, action: #selector(HomeTabController.buttonTabClickAction(sender:)), for: .touchUpInside)
        viewCustomeTab.btnTab4.addTarget(self, action: #selector(HomeTabController.buttonTabClickAction(sender:)), for: .touchUpInside)
        viewCustomeTab.btnTab5.addTarget(self, action: #selector(HomeTabController.buttonTabClickAction(sender:)), for: .touchUpInside)

        //self.view.layoutIfNeeded()
        viewCustomeTab.layoutIfNeeded()
        viewCustomeTab.btnTab1.alignContentVerticallyByCenter(offset: 3)
        viewCustomeTab.btnTab2.alignContentVerticallyByCenter(offset: 3)
        viewCustomeTab.btnTab3.alignContentVerticallyByCenter(offset: 3)
        viewCustomeTab.btnTab4.alignContentVerticallyByCenter(offset: 3)
        viewCustomeTab.btnTab5.alignContentVerticallyByCenter(offset: 3)
        viewCustomeTab.btnTab1.isSelected = true
    }

    //MARK:- Button Click Actions
    //Manage Tab From Here
    func setSelect(sender:UIButton)
    {
        viewCustomeTab.btnTab1.isSelected = false
        viewCustomeTab.btnTab2.isSelected = false
        viewCustomeTab.btnTab3.isSelected = false
        viewCustomeTab.btnTab4.isSelected = false
        viewCustomeTab.btnTab5.isSelected = false
        sender.isSelected = true
    }

    @objc func buttonTabClickAction(sender:UIButton)
    {
        //self.selectedIndex = sender.tag
        if sender.tag == 0
        {
            let vc1 = UIStoryboard.init(name: "Main", bundle: Bundle.main).instantiateViewController(withIdentifier: "Bvc") as? Bvc

             let item1 = UINavigationController(rootViewController: vc1!)
            item1.navigationBar.isHidden = false
            self.viewControllers = [item1]
            setSelect(sender: viewCustomeTab.btnTab1)
            return
        }

        if sender.tag == 1
        {
            let vc2 = UIStoryboard.init(name: "Main", bundle: Bundle.main).instantiateViewController(withIdentifier: "Cvc") as? Cvc
            let item2 = UINavigationController(rootViewController: vc2!)
            item2.navigationBar.isHidden = false
            item2.navigationBar.isTranslucent = false
            self.viewControllers = [item2]
            setSelect(sender: viewCustomeTab.btnTab2)
            return
        }

        if sender.tag == 2
        {
            let vc3 = UIStoryboard.init(name: "Main", bundle: Bundle.main).instantiateViewController(withIdentifier: "Dvc") as? Dvc
            let item3 = UINavigationController(rootViewController: vc3!)
            item3.navigationBar.isHidden = false
             item3.navigationBar.isTranslucent = false
            self.viewControllers = [item3]
            setSelect(sender: viewCustomeTab.btnTab3)
            return
        }

        if sender.tag == 3
        {

        }

        if sender.tag == 4
        {

        }
    }
}


Create Custom View For Shadow Effect and For + Button. 

import UIKit

class CustomeTabView: UIView
{
    @IBOutlet weak var btnTab5: UIButton!
    @IBOutlet weak var btnTab4: UIButton!
    @IBOutlet weak var btnTab3: UIButton!
    @IBOutlet weak var btnTab2: UIButton!
    @IBOutlet weak var btnTab1: UIButton!
    @IBOutlet weak var vRadius: UIView!


    class func instanceFromNib() -> CustomeTabView
    {
        return UINib(nibName: "CustomeTabView", bundle: nil).instantiate(withOwner: nil, options: nil)[0] as! CustomeTabView
    }

    private var shadowLayer: CAShapeLayer!

    override func layoutSubviews()
    {
        super.layoutSubviews()

        let shadowSize : CGFloat = 2.0

        let shadowPath = UIBezierPath(roundedRect: CGRect(x: -shadowSize / 2,   y: -shadowSize / 2, width: self.vRadius.frame.size.width, height: self.vRadius.frame.size.height), cornerRadius : 20)

        self.vRadius.layer.masksToBounds = false
        self.vRadius.layer.shadowColor = UIColor.black.cgColor
        self.vRadius.layer.shadowOffset = CGSize.zero//(width: self.vRadius.frame.size.width, height: self.vRadius.frame.size.height)
        self.vRadius.layer.shadowOpacity = 0.5
        self.vRadius.layer.shadowPath = shadowPath.cgPath
        self.vRadius.layer.cornerRadius = 20
      }

OpenImg

非常感谢。我会尝试这个并让您知道结果，当然也会投票支持您的答案。 - Vaibhav Limbani
6

Swift 4.2

您可以通过自定义视图和自定义选项卡栏控制器来实现此操作。您只需编辑自定义视图，就可以自定义颜色和阴影。

自定义选项卡栏控制器

import UIKit
class MainTabBarController: UITabBarController{

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
        tabBar.backgroundImage = UIImage.from(color: .clear)
        tabBar.shadowImage = UIImage()

        let tabbarBackgroundView = RoundShadowView(frame: tabBar.frame)
        tabbarBackgroundView.cornerRadius = 25
        tabbarBackgroundView.backgroundColor = .white
        tabbarBackgroundView.frame = tabBar.frame
        view.addSubview(tabbarBackgroundView)

        let fillerView = UIView()
        fillerView.frame = tabBar.frame
        fillerView.roundCorners([.topLeft, .topRight], radius: 25)
        fillerView.backgroundColor = .white
        view.addSubview(fillerView)

        view.bringSubviewToFront(tabBar)
    }

圆角阴影视图

import UIKit

class RoundShadowView: UIView {

    let containerView = UIView()

    override init(frame: CGRect) {
        super.init(frame: frame)
        layoutView()
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    func layoutView() {

        // set the shadow of the view's layer
        layer.backgroundColor = UIColor.clear.cgColor
        layer.shadowColor = UIColor.black.cgColor
        layer.shadowOffset = CGSize(width: 0, height: -8.0)
        layer.shadowOpacity = 0.12
        layer.shadowRadius = 10.0
        containerView.layer.cornerRadius = cornerRadius
        containerView.layer.masksToBounds = true

        addSubview(containerView)
        containerView.translatesAutoresizingMaskIntoConstraints = false

        // pin the containerView to the edges to the view
        containerView.leadingAnchor.constraint(equalTo: leadingAnchor).isActive = true
        containerView.trailingAnchor.constraint(equalTo: trailingAnchor).isActive = true
        containerView.topAnchor.constraint(equalTo: topAnchor).isActive = true
        containerView.bottomAnchor.constraint(equalTo: bottomAnchor).isActive = true
    }
}

UIImage扩展

import UIKit

extension UIImage {
    static func from(color: UIColor) -> UIImage {
        let rect = CGRect(x: 0, y: 0, width: 1, height: 1)
        UIGraphicsBeginImageContext(rect.size)
        let context = UIGraphicsGetCurrentContext()
        context!.setFillColor(color.cgColor)
        context!.fill(rect)
        let img = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return img!
    }
}
你在哪里定义了roundCorners函数？ - Takasur
5

要添加任何半径或形状，您可以使用UIBezierPath。我提供的示例具有带有半径的左侧和右侧角，如果您想要更多可设计个性化，可以使用该方法。

@IBDesignable class TabBarWithCorners: UITabBar {
    @IBInspectable var color: UIColor?
    @IBInspectable var radii: CGFLoat = 15.0

    private var shapeLayer: CALayer?

    override func draw(_ rect: CGRect) {
        addShape()
    }

    private func addShape() {
        let shapeLayer = CAShapeLayer()
    
        shapeLayer.path = createPath()
        shapeLayer.strokeColor = UIColor.gray.withAlphaComponent(0.1).cgColor
        shapeLayer.fillColor = color?.cgColor ?? UIColor.white.cgColor
        shapeLayer.lineWidth = 1
    
        if let oldShapeLayer = self.shapeLayer {
            layer.replaceSublayer(oldShapeLayer, with: shapeLayer)
        } else {
            layer.insertSublayer(shapeLayer, at: 0)
        }
    
        self.shapeLayer = shapeLayer
    }

    private func createPath() -> CGPath {
        let path = UIBezierPath(
            roundedRect: bounds,
            byRoundingCorners: [.topLeft, .topRight],
            cornerRadii: CGSize(width: radii, height: 0.0))
    
        return path.cgPath
    }
}
@jvarela和社区，请记住不鼓励进行琐碎的编辑！ - Guillodacosta
@10109831/rubén-màrquez-fernàndez 和社区，请记住不鼓励微不足道的编辑！ - Guillodacosta
2

Swift 5.3.1，XCode 11+，iOS 14 在storyboard中使用：

import UIKit

class CustomTabBar: UITabBar {
        
     override func awakeFromNib() {
            super.awakeFromNib()
            layer.masksToBounds = true
            layer.cornerRadius = 20
            layer.maskedCorners = [.layerMinXMinYCorner,.layerMaxXMinYCorner]
      }
 }
1
继承UITabBarController，然后重写viewWillLayoutSubviews()方法并添加以下代码。
    override func viewWillLayoutSubviews() {
    super.viewWillLayoutSubviews()
    self.tabBar.layer.masksToBounds = true
    self.tabBar.layer.cornerRadius = 12 // whatever you want
    self.tabBar.layer.maskedCorners = [.layerMinXMinYCorner,.layerMaxXMinYCorner] // only the top right and left corners
}

这将是结果 在此输入图片描述

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接