布局TabBar中的items

  • Tabbar中应该有5个Item

    • 主页/消息/发布按钮/发现/我
  • 布局TabBar中的Items可以通过下面的方式
    • 通过自定义TabBar的方式
    • 多添加一个控制器,让中间空出位置
  • 注意:如果只是在storyboard中设置item的图片,不能设置选中的图片,因此需要通过代码重新设置
    /// 图片数组
private lazy var imageNames : [String] = {
return ["tabbar_home", "tabbar_message_center", "" ,"tabbar_discover", "tabbar_profile"]
}() private func adjustItems() {
for i in 0..<tabBar.items!.count {
// 1.取出item
let item = tabBar.items![i] // 2.如果是第二个item,则不可以和用户交互.并且不需要设置图片
if i == 2 {
item.enabled = false
continue
} // 2.设置图片
item.image = UIImage(named: imageNames[i])
item.selectedImage = UIImage(named: imageNames[i] + "_highlighted")
}
}

添加'+'按钮

  • 创建UIButton

    • 扩展UIButton的构造函数
    convenience init(imageName : String, bgImageName : String) {
self.init() // 设置相关属性
setBackgroundImage(UIImage(named: bgImageName), forState: .Normal)
setBackgroundImage(UIImage(named: bgImageName + "_highlighted"), forState: .Highlighted)
setImage(UIImage(named: imageName), forState: .Normal)
setImage(UIImage(named: imageName + "_highlighted"), forState: .Highlighted)
sizeToFit()
}
  • 通过懒加载创建UIButton,并且在viewWillAppear中添加按钮
/// 发布微博按钮
private lazy var composeBtn : UIButton = {
// let btn = UIButton.createButton("tabbar_compose_icon_add", bgImageName: "tabbar_compose_button")
let btn = UIButton(imageName: "tabbar_compose_icon_add", bgImageName: "tabbar_compose_button")
btn.center = CGPoint(x: self.tabBar.bounds.width * 0.5, y: self.tabBar.bounds.height * 0.5) // 监听按钮的点击
// Selector("composeBtnClick")
// "composeBtnClick"
btn.addTarget(self, action: Selector("composeBtnClick"), forControlEvents: .TouchUpInside) return btn
}() override func viewWillAppear(animated: Bool) {
super.viewWillAppear(animated) // 1.调整items
adjustItems() // 2.添加`加号`按钮
tabBar.addSubview(composeBtn)
}

布局TabBar的更多相关文章

  1. 隐藏tabBar页面跳转后会再布局一次,

    隐藏tabBar有2种方式 1,在sourceController中隐藏目的控制器的tabBar - (void)prepareForSegue:(UIStoryboardSegue *)segue ...

  2. 总结UIViewController的view在有navBar和tabBar影响下布局区域的问题

    影响 View 布局区域的有以下三个属性: self.edgesForExtendedLayout (影响View布局区域的主要属性) self.navigationController.naviga ...

  3. 主程序底部TabBar功能跟登录页面布局

    1:主程序底部TabBar的功能实现 效果图: 主要代码如下: - (UITabBarController*)setRootVC:(BOOL)bShowCart { //创建一个子控制器 用于显示当前 ...

  4. 自定义tabBar

    ★★★★自定义tabBar★★★★★★★ Demo下载地址:https://github.com/marlonxlj/tabBarCustom.git 前言: 有的时候需求要对tabBar进行自定义的 ...

  5. 微信js框架第二篇(创建完整界面布局)

    接着昨天的继续谈关于微信新出的这个js框架,今天主要谈一个页面的创建到布局的详细步骤. 一.创建一个完整页面       页面你可以创建在项目的任何节点,只要你在入口文件正确引入创建该页面的路径就可使 ...

  6. android FragmentActivity+FragmentTabHost+Fragment框架布局

    这周比较闲,计划系统的学习一下android开发,我本是一名IOS程序员,对手机开发还是有自己的一套思路的, 固这套思路用到我当前学android上了,先选择从Main页面的tabbar部分代码入手, ...

  7. Material Design Lite,简洁惊艳的前端工具箱 之 布局组件。

    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,博客地址为http://www.cnblogs.com/jasonnode/ .网站上有对应每一 ...

  8. UITabBar,UINavigationBar的布局和隐藏问题

    ---恢复内容开始--- 1. 前言 UITabBar,UINavigationBar非常的好用,但是毕竟是系统自带的,不受自己完全掌握,对于布局和隐藏会有一些问题,现在就来谈谈我的想法和一些问题. ...

  9. react native 布局注意点

    一.react native中很多是ES6语法. 1行.表示是js的严格模式. 'use strict';严格模式中变量必须先声明,然后赋值.定义等:还有就是this的绑定. 2行到8行.导入依赖,可 ...

随机推荐

  1. 云南农职 - 互联网技术学院 - 美和易思大一SCME JAVA高级结业考试机试试题

    目录 一.语言和环境 二.实现功能 1.文件复制功能(IO) 2.消息接受站建设 三.评分标准 四.实现代码 一.语言和环境 实现语言:Java. 开发工具:eclipse. 使用技术:IO流+网络编 ...

  2. java知识点链接

    业务复杂=if else?刚来的大神竟然用策略+工厂彻底干掉了他们! 细思极恐-你真的会写java吗? [解锁新姿势] 兄dei,你代码需要优化了 消灭 Java 代码的"坏味道" ...

  3. .net core的配置介绍(三):Options

    前两篇介绍的都是已IConfiguration为基础的配置,这里在说说.net core提供的一种全新的辅助配置机制:Options. Options,翻译成中文就是选项,可选择的意思,它依赖于.ne ...

  4. js 简单版发布留言 案例

    <!DOCTYPE html>   <html lang="en">   <head>       <meta charset=" ...

  5. python日志按天分割,保存近一个月日志,日志自动清理

    python日志按天分割,保存近一个月日志 import os import logging import re from logging.handlers import TimedRotatingF ...

  6. 初识python: 文件下载进度

    (后续待更新...) 使用 request 的 urlretrieve 方法创建"回调函数": 下载进度 详细代码如下: #!/user/bin env python # auth ...

  7. CentOS7中安装pip的方法

    1.安装epel-release [root@localhost ~]# yum -y install epel-release 2.安装python-pip [root@localhost ~]# ...

  8. Vue系列教程(三)之vue-cli脚手架的使用

    一.Vue-cli的环境准备 目的:(1)快速管理依赖 (2)确定项目结构 1.安装node.js Node.js是一个可以让前端运行在服务器上的一个工. 下载:https://nodejs.org/ ...

  9. hal 编码器做用户输入时捕获初值的设置

    uint16_t encoderDirection = __HAL_TIM_IS_TIM_COUNTING_DOWN(&htim3); uint16_t encoderValue = __HA ...

  10. docker安装easymock

    一.准备 参考docker安装mongodb与redis文章 二.拉取 docker pull docker.io/easymock/easymock 三.启动 1.创建配置目录 mkdir -f / ...