布局TabBar
布局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的更多相关文章
- 隐藏tabBar页面跳转后会再布局一次,
隐藏tabBar有2种方式 1,在sourceController中隐藏目的控制器的tabBar - (void)prepareForSegue:(UIStoryboardSegue *)segue ...
- 总结UIViewController的view在有navBar和tabBar影响下布局区域的问题
影响 View 布局区域的有以下三个属性: self.edgesForExtendedLayout (影响View布局区域的主要属性) self.navigationController.naviga ...
- 主程序底部TabBar功能跟登录页面布局
1:主程序底部TabBar的功能实现 效果图: 主要代码如下: - (UITabBarController*)setRootVC:(BOOL)bShowCart { //创建一个子控制器 用于显示当前 ...
- 自定义tabBar
★★★★自定义tabBar★★★★★★★ Demo下载地址:https://github.com/marlonxlj/tabBarCustom.git 前言: 有的时候需求要对tabBar进行自定义的 ...
- 微信js框架第二篇(创建完整界面布局)
接着昨天的继续谈关于微信新出的这个js框架,今天主要谈一个页面的创建到布局的详细步骤. 一.创建一个完整页面 页面你可以创建在项目的任何节点,只要你在入口文件正确引入创建该页面的路径就可使 ...
- android FragmentActivity+FragmentTabHost+Fragment框架布局
这周比较闲,计划系统的学习一下android开发,我本是一名IOS程序员,对手机开发还是有自己的一套思路的, 固这套思路用到我当前学android上了,先选择从Main页面的tabbar部分代码入手, ...
- Material Design Lite,简洁惊艳的前端工具箱 之 布局组件。
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,博客地址为http://www.cnblogs.com/jasonnode/ .网站上有对应每一 ...
- UITabBar,UINavigationBar的布局和隐藏问题
---恢复内容开始--- 1. 前言 UITabBar,UINavigationBar非常的好用,但是毕竟是系统自带的,不受自己完全掌握,对于布局和隐藏会有一些问题,现在就来谈谈我的想法和一些问题. ...
- react native 布局注意点
一.react native中很多是ES6语法. 1行.表示是js的严格模式. 'use strict';严格模式中变量必须先声明,然后赋值.定义等:还有就是this的绑定. 2行到8行.导入依赖,可 ...
随机推荐
- Java面向对象笔记 • 【第9章 JDBC编程】
全部章节 >>>> 本章目录 9.1 JDBC基础 9.1.1 JDBC简介 9.1.2 JDBC常用API简介 JDBC 常用API功能说明 9.1.3 JDBC编程步骤 ...
- PIC18 bootloader之CAN bootloader
了解更多关于bootloader 的C语言实现,请加我Q扣: 1273623966 (验证信息请填 bootloader),欢迎咨询或定制bootloader(在线升级程序). PIC18 ...
- C# UTF8的BOM导致XML序列化与反序列化报错:Data at the root level is invalid. Line 1, position 1.
最近在写一个xml序列化及反序列化实现时碰到个问题,大致类似下面的代码: class Program { static void Main1(string[] args) { var test = n ...
- CSS基础-5 伪类
一.伪类 我们以a标签为例 伪类标签分为4类 1. 设置超链接默认的样式 a:link {属性:值;.....} 或者 a { 属性: 值;} 推荐使用这种方式 2 ...
- Word2010格式化可爱的家乡
原文链接:https://www.toutiao.com/i6487795632349118990/ 准备样文 选中"可爱的家乡",选择"开始"选项卡,&quo ...
- vue2.0与vue3.0项目创建
脚手架安装与卸载 安装 npm install -g vue-cli //or npm install -g @vue/cli 卸载 npm uninstall -g vue-cli //or npm ...
- Vue下路由History mode 出现404,无法正常刷新
在History mode下,如果直接通过地址栏访问路径,那么会出现404错误,这是因为这是单页应用(废话)-其实是因为调用了history.pushState API 所以所有的跳转之类的操作都是通 ...
- ADO.NET数据访问基础与综合应用2020年10月31日20:17:09学习笔记
四.创建数据表 1.数据表的名称. 2.表中的字段名.数据类型.是否可以为空.字段的约束.必备的字段(通常会有一个ID,表示实体的唯一性:可以直接手写,也可以使用种子标识自动生成,给定起始值,给定增长 ...
- 【PTA】6-2 读文章(*) (31 分)
请编写函数,从文件中读出文章,将其输出到屏幕上. 函数原型 void ReadArticle(FILE *f); 说明:参数 f 为文件指针.函数读出 f 所指示文件中的文章,将其输出到屏幕上. 裁判 ...
- Pytorch之Spatial-Shift-Operation的5种实现策略
Pytorch之Spatial-Shift-Operation的5种实现策略 本文已授权极市平台, 并首发于极市平台公众号. 未经允许不得二次转载. 原始文档(可能会进一步更新): https://w ...