如何在Tabbar上选择项目的卡片视图？

Question

enter image description here

TabBar的选定选项卡上的卡片效果。

Answer 1

制作一个UITabBaracontroller的tabbarVC.swift类，并用此给定代码替换内容。在dashBoard的Tabbarcontroller上添加一个UIView并在此视图中分别获取一个图像，高度，宽度为30,30。在此视图中也要加上标签以显示标签名称。享受代码。

//
//  tabbarVC.swift
//  Demo Tabbar
//
//  Created by RANA KUMAR(iOS) on 16/01/20.
//  Copyright © 2020 ....... . All rights reserved.
//

import UIKit

class tabbarVC: UITabBarController {
    @IBOutlet var customView: UIView!

    @IBOutlet weak var selectedTabName: UILabel!
    @IBOutlet weak var selectedImage: UIImageView!
    var selectedImageArray = ["ProductTabSelected","OfferTabUnselect","NotificationTabUnselect","ProfileTabUnselect"]
    var selectedName = ["Products","Offers","Notifications","Profile"]

        override func viewDidLoad() {
            super.viewDidLoad()
            customView.backgroundColor = #colorLiteral(red: 0.8386091321, green: 0.8386091321, blue: 0.8386091321, alpha: 1)
                   customView.frame.size = CGSize(width: UIScreen.main.bounds.width / 5 , height: 120 )
                       customView.layer.cornerRadius = 1
                   customView.caddView()
            selectedImage.image = selectedImage.image?.withRenderingMode(.alwaysTemplate)

            selectedImage.tintColor = #colorLiteral(red: 0.2417676747, green: 0.4927428365, blue: 1, alpha: 1)
 self.customView.center = CGPoint(x: (UIScreen.main.bounds.width / 5)/2 ,y: UIScreen.main.bounds.height-60 )
            tabBar.addSubview(customView)
             self.customView.center = CGPoint(x: (UIScreen.main.bounds.width / 5)/2 ,y: UIScreen.main.bounds.height-60 )
          animate(index: 0)
            self.selectedIndex = 0
            self.delegate = self
        }

        private func animate(index: Int) {
            let buttons = tabBar.subviews
                .filter({ String(describing: $0).contains("Button") })

            guard index < buttons.count else {
                return
            }


            let selectedButton = buttons[index]
            UIView.animate(

                withDuration: 0.20,
                delay: 0.00,
                usingSpringWithDamping: 0.5,
                initialSpringVelocity: 0.5,
                options: [],

                animations: {
                    let xpoint = selectedButton.center.x < (UIScreen.main.bounds.width / 4)/2 ? (UIScreen.main.bounds.width / 4)/2 : selectedButton.center.x
                    print ("xpointb =",xpoint,"button x",selectedButton.center.x, "mytrick : ",(UIScreen.main.bounds.width / 5)/2)
                    let point = CGPoint(
                        x: xpoint,
                        y: selectedButton.frame.maxY - 1
                    )

                    self.customView.center = point

                    //use if you want to darken the background
                      //self.viewDim.alpha = 0.8
                      //go back to original form
                      self.customView.transform = .identity

                    self.selectedImage.image = UIImage(named: self.selectedImageArray[index])
                    self.selectedTabName.text = self.selectedName[index]
                },
                completion: nil
            )
        }

        override func viewDidLayoutSubviews() {
            super.viewDidLayoutSubviews()



        }
    }
extension UIView {


     func caddView() {
        layer.cornerRadius = 2
       // layer.shadowColor = UIColor.lightGray.cgColor
        layer.shadowOffset = CGSize(width: 0, height: 5)
        let shadowPath = UIBezierPath(roundedRect: bounds, cornerRadius: 4)
        layer.shadowPath = shadowPath.cgPath
        layer.shadowOpacity = Float(1)
    }
}

    extension tabbarVC: UITabBarControllerDelegate {
        override func tabBar(_ tabBar: UITabBar, didSelect item: UITabBarItem) {

            guard
                let items = tabBar.items,
                let index = items.firstIndex(of: item)
            else {
                return
            }

            animate(index: index)
        }
}