布局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)
    }
时间: 2024-10-15 16:26:11

布局TabBar的相关文章

android自定义tabbar,并带badgeview消息提示

最早的时候,我用的tab都是在屏幕底端的,后来慢慢的流行在屏幕顶端了,按照用户体验来说,顶部确实比底部好,不仅可以防止按到返回键或者Home等引起误操作,而且tab标题在头顶很显眼很醒目. 一开始朋友推荐使用viewpageindicator,这个可以在github上有例子,大家如果没什么特殊需求,基本可以满足要求.根据项目要求我就使用了viewpageindicator,后来项目要求有消息提示,就像ios的badge一样,因此就对viewpageindicator进行修改,改了之后,就出现了下

百思不得姐记录第二天

*:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } a { color: #4183C4; } a.absent { color: #cc0000; } a.anchor { display: block; padding-left: 30px; margin-left: -30px; cursor: pointer; position: absolute

百思不得姐框架(二)

一 该部分框架效果图和实现思路 框架二的效果图: 实现思路: -- 1> 先完善tabBar(主要是自定义) -- 2> 再完善导航条 -- 3> 其次完善屏幕侧滑(主要是全屏侧滑功能) 二 抽取分类(设置到插件中) 1 抽取分类的思想: 实现复用 --> 1.1 上部分代码中,我们需要设置tabBar中图片成未被渲染的格式,因此我们抽取了一个分类,用分类里面的方法实现了效果. --> 分类代码: //传入一张图片的名称返回一张未被渲染的图片 + (UIImage *)ori

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

隐藏tabBar有2种方式 1,在sourceController中隐藏目的控制器的tabBar - (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender { UIViewController *vc = segue.destinationViewController; vc.hidesBottomBarWhenPushed = YES; } 2,storyboard中勾选Hide Bottom Bar on pus

ios开发-UI-自定义Tabbar 图书布局

#import "ViewController.h" #import "CGTabbar.h" #import "QHCListView.h" #import "QHJavaListView.h" #import "QHOCListView.h" @interface ViewController ()<CGTabbarDelegate> @property(nonatomic,strong)N

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

1:主程序底部TabBar的功能实现 效果图: 主要代码如下: - (UITabBarController*)setRootVC:(BOOL)bShowCart { //创建一个子控制器 用于显示当前的tab TabHomeVC *homeVC = [[TabHomeVC alloc] init]; //每个tab都是一个nav的内容,这样每个都是自个的nav,进行跳转 UINavigationController *homeNav = [[UINavigationController allo

IndicatorTabBar——可滑动的带指示条的TabBar

这篇文字给大家分享一个可以滑动的TabBar,这里叫做IndicatorTabBar.先上效果图: 诸如网易新闻.腾讯新闻.百度新闻等客户端,都使用了类似的TabBar,这玩意儿都快成多页面APP的标配了. 简单说一下实现原理: 1.自定义IndicatorTabBar,继承自HorizontalScrollView. 2.IndicatorTabBar里面放置一个水平方向的LinearLayout,作为Tab的容器(TabContainer). 3.每个Tab可以继承自TextView或者Bu

IOS开发-关于自定义TabBar条

今天在做项目的时候,突然有一个模块需要自定义TabBar条. 在平常很多做项目的时候,都没有去自定义过,大部分都是使用系统自带的.今天整理一个自定义TabBar条的步骤. 首先看下我们最终实现的效果: 首先需要继承UItabBar自定义一个自己的tabBar .h #import <UIKit/UIKit.h> @class THTabBar; @protocol THTabBarDelegate <UITabBarDelegate> @optional - (void)tabBa

中间凸出(百思tabbar上面修改) 按钮范围,nav改色。

// // WMTabBarController.m // 百思不得姐 // // Created by 王蒙 on 15/7/22. // Copyright (c) 2015年 wm. All rights reserved. // #import "WMTabBarController.h" #import "FirstViewController.h" #import "SecondViewController.h" #import &q