TabBar的选定选项卡上的卡片效果。
制作一个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)
}
}