iOS 自定制TabBar(中间是一个大按钮)

24 篇文章 0 订阅

许多APP中都有这个效果,点击中间的大按钮就会present一个页面出来,关闭这个页面就返回到之前的页面
这个功能看起来很神奇,其实实现起来也相当简单
实现方式:创建一个类继承自UITabBar,在view上添加一个大的按钮 放到中间,然后需要写一个代理 用来实现按钮的点击事件
效果如下图:github地址https://github.com/ColdChains/LAXTabBarController
这里写图片描述

这是用Swift写的demo
一、创建自定制TabBar的类
二、创建协议,声明点击按钮的事件
三、在按钮点击事件里调用代理方法

//
//  LAXTabBar.swift
//  MeiLiTV
//
//  Created by 冰凉的枷锁 on 2017/3/9.
//  Copyright © 2017年 冰凉的枷锁. All rights reserved.
//

import UIKit

protocol LAXTabBarDelegate : UITabBarDelegate {
    func tabBarDidClickPlusButton(_: LAXTabBar)
}

class LAXTabBar: UITabBar {

    init() {
        super.init(frame: CGRect.init(x: 0, y: ScreenHeight - 49, width: ScreenWidth, height: 49))
        plusButton.center = CGPoint.init(x: ScreenWidth / 2, y: 49 - plusButton.bounds.size.height / 2)
        self.addSubview(plusButton)
    }

    convenience init(delegate: LAXTabBarDelegate) {
        self.init()
        self.tabbarDelegate = delegate
    }

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

    lazy var plusButton: UIButton = {
        let btn = UIButton.init(frame: CGRect.init(x: 0, y: 0, width: 55, height: 55))
        btn.setImage(UIImage.init(named: PlusButtonImage), for: .normal)
        btn.addTarget(self, action: #selector(plusButtonAction(sender:)), for: .touchUpInside)

        return btn
    }()

    var tabbarDelegate: LAXTabBarDelegate?

    func plusButtonAction(sender: UIButton) {
        self.tabbarDelegate?.tabBarDidClickPlusButton(self)
    }

}

四、创建一个类,继承UITabBarController,设置tabbar为自定制的tabbar
五、实现协议方法

class RootViewController: UITabBarController, LAXTabBarDelegate {

    override func viewDidLoad() {
        super.viewDidLoad()

        let tabBar = LAXTabBar.init(delegate: self)
        self.setValue(tabBar, forKey: "tabBar")

        self.tabBar.barTintColor = TabBarColor
        self.tabBar.tintColor = OrangeColor
        if #available(iOS 10.0, *) {
            self.tabBar.unselectedItemTintColor = WhiteColor
        } else {
            // Fallback on earlier versions
        }

    }

    func tabBarDidClickPlusButton(_: LAXTabBar) {
        let vc = LiveViewController()
        self.present(vc, animated: true, completion: nil)
    }

}

最后在控制器中添加五个个页面,第三个item只是一个占位的作用,不要设置title和image。这里的代码我就不写了,想看效果的去github上下载吧https://github.com/ColdChains/LAXTabBarController

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值