首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Swift:带有中心圆角按钮的自定义TabBar

在Swift中创建一个带有中心圆角按钮的自定义TabBar,可以通过继承UITabBarController并重写其viewDidLoad()方法来实现

  1. 创建一个新的Swift文件,例如CustomTabBarController.swift
  2. CustomTabBarController类中继承UITabBarController
  3. 重写viewDidLoad()方法。
  4. viewDidLoad()方法中,设置tabBar的背景颜色和圆角。
  5. 创建一个中心圆角按钮,并将其添加到tabBar上。
  6. 实现UITabBarControllerDelegate协议的方法,以便在点击中心按钮时切换视图控制器。

以下是实现这个自定义TabBar的示例代码:

代码语言:javascript
复制
import UIKit

class CustomTabBarController: UITabBarController, UITabBarControllerDelegate {

    let centerButton = UIButton(type: .custom)

    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 设置代理
        self.delegate = self
        
        // 设置tabBar的背景颜色和圆角
        tabBar.backgroundColor = .white
        tabBar.layer.cornerRadius = 25
        tabBar.clipsToBounds = true
        
        // 创建中心圆角按钮
        centerButton.setImage(UIImage(named: "plus"), for: .normal)
        centerButton.backgroundColor = .blue
        centerButton.layer.cornerRadius = 25
        centerButton.clipsToBounds = true
        centerButton.addTarget(self, action: #selector(centerButtonTapped), for: .touchUpInside)
        
        // 将中心按钮添加到tabBar上
        tabBar.addSubview(centerButton)
        tabBar.bringSubviewToFront(centerButton)
        
        // 设置中心按钮的frame
        centerButton.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            centerButton.centerXAnchor.constraint(equalTo: tabBar.centerXAnchor),
            centerButton.bottomAnchor.constraint(equalTo: tabBar.bottomAnchor, constant: -10),
            centerButton.widthAnchor.constraint(equalToConstant: 50),
            centerButton.heightAnchor.constraint(equalToConstant: 50)
        ])
    }
    
    @objc func centerButtonTapped() {
        // 在这里处理中心按钮的点击事件,例如切换到特定的视图控制器
        print("Center button tapped")
    }
    
    // 实现UITabBarControllerDelegate协议的方法
    func tabBarController(_ tabBarController: UITabBarController, didSelect viewController: UIViewController) {
        // 在这里处理视图控制器的切换逻辑
        print("Selected view controller: \(viewController)")
    }
}

在这个示例中,我们创建了一个名为CustomTabBarController的类,它继承自UITabBarController并实现了UITabBarControllerDelegate协议。在viewDidLoad()方法中,我们设置了tabBar的背景颜色和圆角,并创建了一个中心圆角按钮。我们将中心按钮添加到tabBar上,并设置了其位置和大小。我们还实现了centerButtonTapped()方法来处理中心按钮的点击事件,以及tabBarController(_:didSelect:)方法来处理视图控制器的切换逻辑。

要使用这个自定义TabBar,只需在项目的Storyboard中将UITabBarController的类更改为CustomTabBarController,或者通过代码创建一个CustomTabBarController实例并将其设置为应用程序的根视图控制器。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Flutter 的按钮,看这篇文章就够了

: true, title: Text("用户中心"), //定义顶部导航栏的左侧按钮 leading: IconButton( icon...4,floatingActionButton的 child 属性,我们一般是给其配置成Icon,不建议给其配置成其他组件。 接下来,我们来聊一聊如何实现闲鱼底部Tabbar上的凸起按钮的效果。...关于上述代码,有以下几点需要注意: 1,我们需要在带有底部导航的Scaffold里面配置悬浮按钮。...3,如果我们想要修改悬浮按钮的尺寸大小,可以在其外层包一个Container组件。 4,可以通过配置Container的圆角和内边距,来实现悬浮按钮外层的白色不透明圆边的效果。...有些时候悬浮按钮不能将底部Tabbar上处于中间位置的item图标完全覆盖,此时我们就通过设置外边距来调整悬浮按钮的位置(主要是上下调整)。

9.8K31
  • 【Flutter 专题】76 图解基本 TabBar 标签导航栏 (二)

    和尚刚刚学习了 TabBar 标签导航栏的使用,其中对于标签指示器 indicator 的使用较少;和尚今天尝试一下自定义标签指示器; TabBar 提供了 indicator 指示器属性...ACETabBarIndicator 单独出来,并未自定义 TabBar,因此不能直接使用 TabBar 中属性,若需要直接使用 TabBar 中属性可以尝试将 ACETabBarIndicator...放置在 TabBar 源码中进行自定义; 自定义主要是实现各种样式的 paint 绘制过程,和尚简单尝试了如下几种指示器样式; 1....ACETabBarIndicatorType.rrect -> 圆角矩形(整个 Tab) 和尚绘制一个圆角矩形,其中矩形的起始位置为 Offset 对应的 Tab 大小为 ImageConfiguration...ACETabBarIndicatorType.runderline -> 圆角下划线 TabBar 默认的指示器样式为 UnderlineTabIndicator;只需调整 Paint 笔触线样式为

    1.9K31

    我常用的iOS开源库

    前言 OC库和Swift库相似功能的很多 选择的建议是:如果OC库在Swift中完全能用 就优先用OC库 原因是:Swift语言还是不太稳定 语言一更新 程序一大改 实在是太痛苦了 菜单相关 语言 项目名称...ObjectC YBPopupMenu 气泡按钮菜单 ObjectC HMSegmentedControl 自定义SegmentedControl ObjectC YSLContainerViewController...顶部Tabbar ObjectC XLPagerTabStrip Android PagerTabStrip for iOS Swift SwipeMenuViewController swipe-based...Animated-tab-bar 动态TabBar Swift ESTabBarController 动态TabBar 图片相关 语言 项目名称 项目说明 ObjectC YYWebImage 图片缓存与异步加载...转JSON Swift Alamofire-SwiftyJSON 方便以上两个组件的结合使用 Swift ObjectMapper JSON与对象互转 Swift Transporter 文件下载 ObjectC

    2.7K54

    精品资源汇总:(持续更新)

    点击上方蓝字关注我们 引言 欢迎大家来到#公众号:iOS逆向的《精品资源汇总》目录 本文列出最受欢迎的资源,以便供大家快速查找自己所需的资料 文中的蓝字都是超级链接,点击进入即可 I、iOS自定义视图相关热门资源.../103902362 2、功能使用:点击demo的右上架文字进行中英文切换 《用户协议及隐私政策》 弹框的实现步骤: 2.1、自定义TextView,采用富文本属性进行内容设置attributedText...按钮再次点击实现界面刷新 video iOS中tabBar按钮再次点击实现界面刷新(包含完整demo)【特色功能:在更新数据期间旋转tabbar的icon】 iOS中tabBar按钮再次点击实现界面刷新...u011018979/15448928 2、文章:https://kunnan.blog.csdn.net/article/details/114015528 3、、应用场景:使用原生视图UILabel显示服务端返回的带有...5、我已加入CSDN内容合伙人计划,亲爱的各位粉丝,可以添加我的CSDN官方微信号,和我近距离互动聊天,为您答疑解惑 #公众号:iOS逆向 CSDN认证博客专家 Swift SwiftUI Objective-C

    1K30

    iOS导航栏切换界面时隐藏和显示

    引 现如今很多App的一些模块,尤其是个人中心模块,界面设计已经习惯于不保留导航栏,而是直接将界面背景覆盖到状态栏,比如QQ的个人信息界面: 没有传统的导航栏之后会好看很多,但是回到或者去往别的页面时...的代理中去做隐藏,并且分别是有动画和没动画,但是因为 Tabbar所包含的其实是 UINavigationController ,所以在点击 Tabbar 切换界面时两个代理方法都会被调用,无解啊。...这个方法是直接隐藏了整个导航栏,所以如果要保存导航栏的一些返回按钮以及其他自定义的按钮,就需要自己在界面上去模拟添加,如果不想这么麻烦,也可以不隐藏导航栏,而是将导航栏的背景视图设为透明的: [...结 上面的方法可以在只有导航栏控制器时比较好的操作,虽然不能做到像QQ那么好,但也能用,但如果有Tabbar存在,就会有问题。那如何做到QQ那样的效果呢?...这里有一篇文章实现了:传送门:导航栏的平滑显示和隐藏 - 个人页的自我修养(1) ,不过作者使用swift实现的,用到了extension,其实也就是OC下的category,之后我再研究一下OC下的实现好了

    3.9K30

    Swift| 基础语法(五)

    前言 总结下 swift下的基础语法,里面涉及到:常量&变量、Swift中的数据类型、逻辑分支、循环、字符串相关、数组和字典、方法的书写调用等内容,考虑到阅读体验分多篇来展示,希望对大家学习swift...print("按钮点击了: \(butTitle)") } 三、UITableView的使用 var myTb : UITableView?...可以在自定义cell中处理点击状态下的显示 var label1 :UILabel? var label2 :UILabel?...,选中的是蓝色的,下面修改成橙色: //图片文字一起变色 self.tabBar.tintColor = UIColor.orangeColor() 如何显示原始图片的颜色和图案?...因为在Swift中,所有对象的构造器默认都是public,所以需要重写你的init让其成为私有的。 这样就保证像如下的代码编译报错,不能通过。 六、从相册选择照片或者拍照 ?

    2K30

    Swift-MVVM 简单演练(一)

    Swift-MVVM 简单演练(二) Swift-MVVM 简单演练(三) Swift-MVVM 简单演练(四) 前言 最近在学习swift和MVVM架构模式,目的只是将自己的学习笔记记录下来,方便自己日后查找...通过增加tabBarItem的方式,给中间留出一个+按钮的位置 自定义一个UIButton的分类HQButton+Extension,封装快速创建自定义按钮的方法 HQButton.swift extension.../// 设置撰写按钮 fileprivate func setupComposeButton() { tabBar.addSubview(composeButton) //...backImageName: "tabbar_compose_button") ---- 自定义顶部导航栏 系统本身的绝大多数情况下不能满足我们的日常需求 有一些系统的样式本身处理的不好,比如侧滑返回的时候...,导航栏右侧会有一段白色的样式出现 原因是:系统默认的导航栏的透明度太高,自定义设置一个颜色就好了 HQBaseViewController.swift // 设置`navigationBar`的渲染颜色

    10.3K51

    值得一看的小程序 TabBar 创意动画

    为何要使用自定义 TabBar 效果呢?在页面的抽屉动画、TabBar 组件、添加图像素材按钮的多种要求下,我们只能选择使用自定义 TabBar 动画了。...与 tabBar 样式相关的接口,如 wx.setTabBarItem 等将失效 每个 tab 页下的自定义 tabBar 组件实例是不同的,可通过自定义组件下的 getTabBar 接口,获取当前页面的自定义...TabBar 的几篇文章: 小程序自定义底部导航栏组件[3] Taro 3.x 设置自定义 TabBar[4] 基于 Taro 封装微信小程序的 tabBar[5] taro 中自定义 tabbar...号或者“▶”的主按钮 在 TabBar 上 都会有一些微动画,比如爱奇艺 APP 上的气泡动画和京东 APP 上的图标转场动画。...那为何不使用 CSS 圆角矩形呢?因为圆弧与直线的连接处要做“过渡”效果的。 ?

    4.4K42

    iOS OC swift 自定义 popover 泡泡

    环境: Xcode:Xcode 8.2 Swift:swift3+ git 地址:https://github.com/TieShanWang/KKPopover pod 集成:pod 'KKPopover...' 【注意】pod 版本,swift 3 支持,以 3....棕色区域是可以设置的 红色 底层箭头视图的边框 白色 底层箭头视图的背景颜色 蓝色 自定义内容区域,在此区域(contentView)可以添加希望展示的内容 加号按钮 模拟了 sourceView...可以看到当 sourceView(加号按钮) 在不同地方的时候,popover 自动更改方向、调整箭头方向、位置以适应不同的 sourceView 类说明 open class KKPopover: UIView...防止内容覆盖圆角 targetSize: CGSize /// 需要展示内容的大小,此字段一定需要重新设置 /// 并且宽高大小加上 minScreenEdg contentInset 不能大于屏幕宽高

    2.7K70

    Flutter开发-容器类组件

    剪裁Widget 作用 ClipOval 子组件为正方形时剪裁为内贴圆形,为矩形时,剪裁为内贴椭圆 ClipRRect 将子组件剪裁为圆角矩形 ClipRect 剪裁子组件到实际占用的矩形大小(溢出部分剪裁...我们实现一个页面,它包含: 一个导航栏 导航栏右边有一个分享按钮 有一个抽屉菜单 有一个底部导航 右下角有一个悬浮的动作按钮 代码如下: class ScaffoldRoute extends StatefulWidget...下面我们看看AppBar的定义: AppBar({ Key key, this.leading, //导航栏最左侧Widget,常见为抽屉菜单按钮或返回按钮。...下面我们通过“bottom”属性来添加一个导航栏底部Tab按钮组 Material组件库中提供了一个TabBar组件,它可以快速生成Tab菜单,下面是上图对应的源码: class _ScaffoldRouteState...//省略无关代码 } Tab组件有三个可选参数,除了可以指定文字外,还可以指定Tab菜单图标,或者直接自定义组件样式。

    3.6K20

    HarmonyOs开发:导航tabs组件封装与使用

    ,tabs是默认居中模式,目前无法进行居左,在有这样功能的时候,难以满足需求;第二,导航右侧需要展示按钮的时候,tabs也是无法满足的;除此之外,还有很多人都非常关心的问题,底部的指示器可以跟随页面的滑动而滑动...,默认不展示tabMenu回调方法BuilderParam右边展示的按钮视图tabMenuWidthnumbertab右侧按钮的宽度tabMenuMarginRightnumbertab按钮距离右侧的距离...在文章开头的时候已经阐述,目前的tabs是不支持居左的,如果要实现居左的效果,就要自己自定义,这里使用的是横向的List组件实现的,通过Scroller来控制滑动距离。...,如果采用居左的效果,那么系统的tabBar我们就要舍弃,如下代码,如果居左,采用上述自定义tabBar,否则采用系统自定义的。...(this.tabItem(index, item)) }) }至于右侧的按钮布局,其实和自定义tabBar一致,采用的是RelativeContainer组件,包裹住按钮组件和

    19110

    实践 -实现一款中间凸起的TabBar

    效果 实现步骤 自定义一个UITabBar,中心位置放一个按钮,设置按钮的背景图片,按钮一半超出这个自定义的UITabBar。...重写自定义UITabBar 的hitTest 方法,根据点击的位置返回点击的视图是 UITabBar还是 UITabBar上面的按钮。...使用KVC将自定义UITabBar 赋值给 UITabBarController 在UITabBarController中给自定义UITabBar上面的按钮绑定事件,来联动UITabBarController...(图片中心在tabbar的中间最上部,这个时候由于按钮是有一部分超出tabbar的,所以点击无效,要进行处理) _centerBtn.frame = CGRectMake(([UIScreen...:_mcTabbar forKeyPath:@"tabBar"]; 自定义UITabBar上面的按钮绑定事件,来联动UITabBarController的事件。

    2.2K20

    Flutter | 容器组件

    ,他包含 1,导航栏,导航栏的按钮 2,抽屉菜单 3,底部导航 4,右下角悬浮按钮 实现代码如下: class ScaffoldRoute extends StatefulWidget { @override...Material 风格的导航栏,通过他可以设置标题,导航栏菜单,导航底部tab等 AppBar({ Key key, this.leading, //导航栏最左侧Widget,常见为抽屉菜单按钮或返回按钮...TabBar 的 tabs 属性接受一个 Widget 数组,表示每一个 Tab 子菜单,我们可以自定义组件样式,也可以像例子中一样直接使用 Tab 组件 Tab 组件有三个可选参数,除了可以知道文字外..., // 自定义组件样式 }) 复制代码 开发者可根据实际的需求定制 TabBarView 通过 TabBar 我们只能生成一个静态菜单,真正的Tab页面还没有实现。...这个时候可以使用 CustomClipper 来自定义剪裁的区域,如下 1,自定义 CustomClipper: class MyClipper extends CustomClipper

    5.6K10
    领券