iOS自定义UITabBar仿今日头条效果

2025-05-29 0 80

动机

关于自定义 tabbar,早就有过很多讨论,开源网站上也有很多造好的轮子,多半是纯代码实现有个性的 tabbar,当然我们可以很方便的使用它。周末闲着没事干,自己也写了一下,模仿今日头条的 tabbar 效果,实现方式是storyboard + 代码。

效果图

iOS自定义UITabBar仿今日头条效果

实现步骤在 storyborad 上搭建项目基础结构

iOS自定义UITabBar仿今日头条效果

在界面上设置每个 tabbaritem 的相关属性

iOS自定义UITabBar仿今日头条效果

需要自定义的 item 不需要在界面上设置。

自定义 uitabbarviewcontroller

目的

替换默认的 uitabbar
处理 发布按钮(中间那个加号按钮)点击事件

主要代码

替换 uitabbar,监听点击事件

?

1

2

3

4

5

6

7

8
override func viewdidload() {

super.viewdidload()

// 替换 tabbar

let _tabbar = tabbar()

// 监听按钮点击事件

_tabbar.handlebtnreleaseclick(self, action: #selector(btnreleaseclick))

setvalue(_tabbar, forkey: "tabbar")

}

自定义 uitabbar

目的

自定义 uitabbar,替换掉 storyboard 上默认生成的 tabbaritem
处理 发布按钮(中间那个加号按钮)点击事件

主要代码

删除占位“按钮”,添加自定义按钮

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15
// mark: 删除占位“按钮”,添加自定义按钮

override func layoutsubviews() {

super.layoutsubviews()

btnrelease.backgroundcolor = uicolor.white

// 过滤掉 _uibarbackground 类型的对象,只保留 uitabbarbutton 类型的对象

let tabbarbuttonlist = iews.filter{nsstringfromclass(type(of: $0)) == abbarbutton"}

// 取出需要删除的“按钮”(经测试,知道中间那个加号按钮的下标是2)

let tmpview = tabbarbuttonlist[safe: 2]

// 把默认生成的从父容器中移除

tmpview?.removefromsuperview()

let x = (innerconst.screenw - btnrelease.w) * 0.5

let y = innerconst.buttonoffsety

btnrelease.origin = cgpoint(x: x, y: y)

addsubview(btnrelease)

}

处理默认情况下,按钮超出 tabbar 以外区域不能点击问题

?

1

2

3

4

5

6

7

8

9

10

11
// mark: 处理默认情况下,按钮超出 tabbar 以外区域不能点击问题

override func hittest(_ point: cgpoint, with event: uievent?) -view? {

if ishidden == false {

let newpoint = convert(point, to: btnrelease)

if btnrelease.point(inside: newpoint, with: event) {

return btnrelease

}

return super.hittest(point, with: event)

}

return super.hittest(point, with: event)

}

按钮点击事件委托给调用方

?

1

2

3
func handlebtnreleaseclick(_ target: anyobject?, action: selector) {

btnrelease.addtarget(target, action: action, for: .touchupinside)

}

代码写到这里,一个类似于今日头条的 uitabbar(主要是中间那个按钮)差不多造出来了。以上部分贴出来的是个人认为比较关键的代码,有问题可以讨论,目的是用最简单的方式、最少的代码实现需求。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持快网idc。

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

快网idc优惠网 建站教程 iOS自定义UITabBar仿今日头条效果 https://www.kuaiidc.com/89585.html

相关文章

发表评论
暂无评论