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

动机

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

效果图

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

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

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

自定义 UITabBarViewController

目的

替换默认的 UITabBar
处理 发布按钮（中间那个加号按钮）点击事件

主要代码

替换 UITabBar，监听点击事件

override func viewDidLoad() {
  super.viewDidLoad()
  // 替换 tabbar
  let _tabBar = TabBar()
  // 监听按钮点击事件
  _tabBar.handleBtnReleaseClick(self, action: #selector(btnReleaseClick))
  setValue(_tabBar, forKey: "tabBar")
}

自定义 UITabBar

目的

自定义 UITabBar，替换掉 Storyboard 上默认生成的 TabBarItem
处理 发布按钮（中间那个加号按钮）点击事件

主要代码

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

// 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 以外区域不能点击问题

// 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)
}

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

func handleBtnReleaseClick(_ target: AnyObject?, action: Selector) {
  btnRelease.addTarget(target, action: action, for: .touchUpInside)
}

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • iOS的UI开发中UITabBarControlle的基本使用教程

    iOS的UI开发中UITabBarControlle的基本使用教程

    UITabBarController的基本使用 一.简单介绍 UITabBarController和UINavigationController类似,UITabBarController也可以轻松地管理多个控制器,轻松完成控制器之间的切换,典型的例子就是QQ.微信等应⽤. 二.UITabBarController的使用 1.使用步骤: (1)初始化UITabBarController (2)设置UIWindow的rootViewController为UITabBarController (3)创

  • iOS应用开发中UITabBarController标签栏控制器使用进阶

    iOS应用开发中UITabBarController标签栏控制器使用进阶

    做了这么长时间的ios开发了,最基本的UITabBarController和UINavigationController都用了好长时间了,总是改现成的代码,或者各种自定义控件的修改,用的都有些混乱了,呵呵.还是自己做个demo再复习一下吧,记录下来以备后续翻查. 一.UITabBarController和UINavigationController的联合使用 这种方法最常见,好像一般有tabbar都会有naviBar.一般使用, 1. 在appDelegate里面创建UITabBarContro

  • 详解iOS App中UiTabBarController组件的基本用法

    详解iOS App中UiTabBarController组件的基本用法

    UiTabBarController这个控制器绝对是项目架构时做常用的一个控件. 我们大致看下控件的效果,我们就知道为什么说他常见了. 这就是最简单的一个雏形,想必现在基本70%的应用界面结构都会是这样的. 在Android中我们以ActivityGroup或是现在的fragment来实现,一个容器中包含多个子控制器. 下面我们还是以建立xib文件的形式来实现一个这样的整体布局的例子. 当然在 xcode中我们会发现其实直接有这么一个模板了 但是直接使用模板后会发现是直接在代码里实现了子布局得添

  • iOS开发中UITabBarController的使用示例

    iOS开发中UITabBarController的使用示例

    首先我们看一下它的view层级图: 复制代码 代码如下: - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions  {      self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];      // Override point fo

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

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

    动机 关于自定义 TabBar,早就有过很多讨论,开源网站上也有很多造好的轮子,多半是纯代码实现有个性的 TabBar,当然我们可以很方便的使用它.周末闲着没事干,自己也写了一下,模仿今日头条的 TabBar 效果,实现方式是Storyboard + 代码. 效果图 实现步骤在 Storyborad 上搭建项目基础结构 在界面上设置每个 TabBarItem 的相关属性 需要自定义的 item 不需要在界面上设置. 自定义 UITabBarViewController 目的 替换默认的 UITa

  • android自定义view仿今日头条加载文字变色效果

    本文实例为大家分享了android自定义view加载文字变色效果的具体代码,供大家参考,具体内容如下 不分析了,很简单,直接贴代码: package com.loading; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.Rect; import

  • 详解iOS自定义UITabBar与布局

    在小编整理过的文章iOS项目基本框架搭建中,我们详细说明了如何对TabBarItem的图片属性以及文字属性进行一些自定义配置.但是,很多时候,我们需要修改TabBarItem的图片和文字属性之外,还需要自定义TabBarItem的位置,这样系统自带的TabBar的样式并不能满足我们的项目需求,所以我们需要对系统的UITabBar进行自定义,以达到我们的项目需求.例如新浪微博App的底部tab的item就无法用自带的TabBarItem进行实现,最中间那个[+]发布微博并不是用来切换tab的,而是

  • IOS仿今日头条滑动导航栏

    IOS仿今日头条滑动导航栏

    之前在我们平台给大家分享了网易首页导航封装类.网易首页导航封装类优化,今天在前两个的基础上仿下今日头条. 1.网易首页导航封装类中主要解决了上面导航的ScrollView和下面的页面的ScrollView联动的问题,以及上面导航栏的便宜量. 2.网易首页导航封装类优化中主要解决iOS7以上滑动返回功能中UIScreenEdgePanGestureRecognizer与ScrollView的滑动的手势冲突问题. 今天仿今日头条滑动导航和网易首页导航封装类优化相似,这个也是解决手势冲突,UIPanG

  • Android实现仿今日头条点赞动画效果实例

    Android实现仿今日头条点赞动画效果实例

    目录 一.前言 二.需求拆分 三.实现方案 1.点赞控件触摸事件处理 2.点赞动画的实现 2.1.点赞效果图片的获取和存储管理 2.2.点赞表情图标动画实现 2.3.点赞次数和点赞文案的绘制 3.存放点赞动画的容器 4.启动动画 四.遇到的问题 五.实现效果 六.完整代码获取 七.参考和感谢 总结 一.前言 我们在今日头条APP上会看到点赞动画效果,感觉非常不错,正好公司有点赞动画的需求,所以有了接下来的对此功能的实现的探索. 二.需求拆分 仔细观察点赞交互,看出大概以下几个步骤: 1:点赞控件

  • Android 仿今日头条简单的刷新效果实例代码

    Android 仿今日头条简单的刷新效果实例代码

    点击按钮,先自动进行下拉刷新,也可以手动刷新,刷新完后,最后就多一行数据.有四个选项卡. 前两天导师要求做一个给本科学生预定机房座位的app,出发点来自这里.做着做着遇到很多问题,都解决了.这个效果感觉还不错,整理一下. MainActivity package com.example.fragmentmytest; import android.content.DialogInterface; import android.graphics.Color; import android.os.B

  • Android 仿今日头条评论时键盘自动弹出的效果(推荐)

    Android 仿今日头条评论时键盘自动弹出的效果(推荐)

    Android 仿今日头条评论时键盘自动弹出的效果:当点击评论时,弹出对话框,同时弹出软键盘,当点击返回键时,将对话框关闭,不只是关闭软键盘. 效果图: 对这个对话框设置一个style效果: <style name="inputDialog" parent="@android:style/Theme.Holo.Light.Dialog"> <item name="android:windowBackground">@col

  • Android仿今日头条多个fragment懒加载的实现

    Android仿今日头条多个fragment懒加载的实现

    前言 最近有时间,所以我又双叒叕推新一篇文章了,fragment懒加载实现虽然是个小模块,但做过的人都有体会,通常并不会轻易就成功了的,让你辗转反侧,彻夜难眠,绵绵无绝期.我就按照今日头条的样式做了一个懒加载功能.文章到一半会解释大家可能遇到的不加载数据了的坑,先不剧透. Fragment的生命周期回顾 github代码直通车 (本地下载) 这里是今日头条效果: 自制效果,有图有真相: 实现思路: 使用Fragment类自带方法setUserVisibleHint()判断当前fragment是否

  • iOS自定义UITabBar中间按钮

    iOS自定义UITabBar中间按钮的具体代码,供大家参考,具体内容如下 自定义YLTbaBar继承自UITabBar git地址 YLTbaBar.h // // YLTabBar.h // 自定义tabbar // // Created by nyl on 2018/10/15. // Copyright © 2018年 nieyinlong. All rights reserved. // #import <UIKit/UIKit.h> //tab页面个数 typedef NS_ENUM

  • Android仿今日头条顶部导航栏效果的实例代码

    随着时间的推移现在的软件要求显示的内容越来越多,所以要在小的屏幕上能够更好的显示更多的内容,首先我们会想到底部菜单栏,但是有时候像今日头条新闻客户端要显示的内容太多,而且又想在主界面全部显示出来,所以有加了顶部导航栏. 今日头条顶部导航栏区域的主要部分是一个导航菜单.导航菜单是一组标签的集合,在新闻客户端中,每个标签标示一个新闻类别,对应下面ViewPager控件的一个分页面.当用户在ViewPager区域滑动页面时,对应的导航菜单标签也会相应的被选中,选中的标签通过一个矩形红框高亮显示,红框背

随机推荐