Swift 超简单底部tabbar 突出圆形按钮实现

1 篇文章 0 订阅

效果是这样
在这里插入图片描述
使用的是大佬的代码,附上链接
https://blog.csdn.net/Boyqicheng/article/details/80367418
(侵删 >_< )

直接把这个拖入工程
在这里插入图片描述
在自己的tabBarController中使用,整个代码⬇️

import UIKit

//正常情况下的tabbaritems 的图片
let itemNameArray:[String] = ["home","location (1)","xj(1)","cart","yonghu-myphoto"]
//选中情况下的tabbaritems 的图片
let itemNameSelectArray:[String] = ["home (1)","location","xj(1)","cart (1)","yonghu (1)"]

class MainTabBarController: UITabBarController {
  
    override func viewDidLoad() {
        super.viewDidLoad()
        //自定义tabbar的背景和选中颜色
        self.tabBar.isTranslucent = false
        self.tabBar.barTintColor = UIColor.white
        self.tabBar.tintColor = UIColor(red: 85/225, green: 214/225, blue: 162/225, alpha: 1)
        
        var items:[UITabBarItem] = self.tabBar.items as! [UITabBarItem]
        
        for i in 0...(items.count - 1){
            //用 .alwaysOriginal 显示原图片
            items[i].image = UIImage.init(named: itemNameArray[i])?.withRenderingMode(.alwaysOriginal)
            //选中状态下显示原图片
            items[i].selectedImage = UIImage.init(named: itemNameSelectArray[i])?.withRenderingMode(.alwaysOriginal)
        }
        //设置tabbar
        tabBar.insertSubview(Utils.drawTabBarImageView(), at: 0)
        tabBar.isOpaque = true
        //获取中间的item
        let tabBarItem: UITabBarItem = self.tabBar.items![2]
        tabBarItem.imageInsets =  UIEdgeInsets(top: -standOutHeight/3.8, left: 0, bottom: standOutHeight/3.8, right: 0)
        
    }

自定义突出tabbaritem的属性,在Utils.swift中的这部分修改

let radius: CGFloat = 48//圆半径
let allFloat: CGFloat = (pow(radius, 2) - pow(radius - standOutHeight, 2))//突出高度

// 开始画弧:CGPointMake:弧的圆心  radius:弧半径 startAngle:开始弧度 endAngle:介绍弧度 clockwise:YES为顺时针,No为逆时针

path.addArc(withCenter: CGPoint(x: (size.width/2), y: radius), radius: radius, startAngle: startAngle, endAngle: endAngle, clockwise: true)

要加一点阴影的话 在后面加

layer.shadowColor = UIColor.init(red: 129/225, green: 129/225, blue: 129/225, alpha: 1).cgColor
layer.shadowOffset = CGSize(width: 0, height: 1)
layer.shadowOpacity = 0.45
layer.shadowRadius = 10

另外求教如何实现这种效果

在这里插入图片描述

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值