如何解决iOS:带有动画 UITabBarItem 的 Curverd AppTabBar
我正在开发一个 iOS 应用程序,它需要 UITabBarItem
下的曲线显示
我遵循了一些教程,并且能够达到使我的 UITabBar
弯曲的代码,
import Foundation
import UIKit
class AppTabBar: UITabBar {
var curvePos : CGFloat = 0
private var shapeLayer: CALayer?
override func draw(_ rect: CGRect) {
curvePos = rect.width / 2
self.addShape(rect: rect)
}
private func addShape(rect: CGRect) {
let shapeLayer = CAShapeLayer()
shapeLayer.path = createPath(in: rect)
shapeLayer.strokeColor = UIColor.lightGray.cgColor
shapeLayer.fillColor = #colorLiteral(red: 0.9782002568,green: 0.9782230258,blue: 0.9782107472,alpha: 1)
shapeLayer.lineWidth = 0.5
shapeLayer.shadowOffset = CGSize(width:0,height:0)
shapeLayer.shadowRadius = 10
shapeLayer.shadowColor = UIColor.gray.cgColor
shapeLayer.shadowOpacity = 0.3
if let oldShapeLayer = self.shapeLayer {
self.layer.replaceSublayer(oldShapeLayer,with: shapeLayer)
} else {
self.layer.insertSublayer(shapeLayer,at: 0)
}
self.shapeLayer = shapeLayer
}
func createPath(in rect: CGRect) -> CGPath {
let path = UIBezierPath()
path.move(to: CGPoint(x: 0,y: 0))
path.addLine(to: CGPoint(x: 0,y: rect.height))
path.addLine(to: CGPoint(x: rect.width,y: 0))
// adding Curve...
path.move(to: CGPoint(x: curvePos + 40,y: 0))
path.addQuadCurve(to: CGPoint(x: curvePos - 40,y: 0),controlPoint: CGPoint(x: curvePos,y: 70))
return path.cgPath
}
}
我现在需要的是:
1-如何在点击 curvePos
的每个项目时更改 UITabBar
值以在所选项目下制作曲线。
2- 如何为 UITabBarItem
或 UITabBarItem 图像设置动画以使其如上图所示。
任何帮助将不胜感激。
解决方法
import UIKit
class MainViewController: UIViewController,UITabBarDelegate {
override func viewDidLoad() {
super.viewDidLoad()
}
func tabBar(_ tabBar: UITabBar,didSelect item: UITabBarItem) {
switch item.title! {
case "Home":
//let oldShapeLayer = CAShapeLayer()
//let shapeLayer = CAShapeLayer()
//tabBar.layer.replaceSublayer(oldShapeLayer,with: shapeLayer)
break
case "Gallery" :
break
case "Settings" :
break
default: break
}
}
}
,
经过多次尝试,我可以得到我想做的事情: 我的 AppTabBar 的波纹管修改代码:
class AppTabBar: UITabBar {
var curvePos : CGFloat = 0
private var shapeLayer: CALayer?
override func draw(_ rect: CGRect) {
let itemIndex = CGFloat(self.items!.firstIndex(of: selectedItem!)!)
let itemWidth = self.frame.width / CGFloat(self.items!.count)
curvePos = (itemWidth / 2) + (itemWidth * itemIndex)
self.addShape(rect: rect)
}
private func addShape(rect: CGRect) {
let shapeLayer = CAShapeLayer()
shapeLayer.path = createPath(in: rect)
shapeLayer.strokeColor = UIColor.lightGray.cgColor
shapeLayer.fillColor = #colorLiteral(red: 0.9782002568,green: 0.9782230258,blue: 0.9782107472,alpha: 1)
shapeLayer.lineWidth = 0.5
shapeLayer.shadowOffset = CGSize(width:0,height:0)
shapeLayer.shadowRadius = 10
shapeLayer.shadowColor = UIColor.gray.cgColor
shapeLayer.shadowOpacity = 0.3
if let oldShapeLayer = self.shapeLayer {
self.layer.replaceSublayer(oldShapeLayer,with: shapeLayer)
} else {
self.layer.insertSublayer(shapeLayer,at: 0)
}
self.shapeLayer = shapeLayer
}
func createPath(in rect: CGRect) -> CGPath {
let path = UIBezierPath()
path.move(to: CGPoint(x: 0,y: 0))
path.addLine(to: CGPoint(x: 0,y: rect.height))
path.addLine(to: CGPoint(x: rect.width,y: 0))
// adding Curve...
path.move(to: CGPoint(x: curvePos + 40,y: 0))
path.addQuadCurve(to: CGPoint(x: curvePos - 40,y: 0),controlPoint: CGPoint(x: curvePos,y: 70))
return path.cgPath
}
}
并为 UITabBarController 创建另一个类,如下所示:
class CustomTabBarController: UITabBarController,UITabBarControllerDelegate {
override func tabBar(_ tabBar: UITabBar,didSelect item: UITabBarItem) {
print("sssss")
tabBar.setNeedsDisplay()
}
}
为 CustomTabBarController
设置 TabBarController
,为 AppTabBar
设置 UITabBar
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。