tabBar





//

//  AppDelegate.m

//  tabBarChang

//

//  Created by CJW on 16/12/29.

//  Copyright © 2016 cjw. All rights reserved.

//


#import "AppDelegate.h"



#import "OneViewController.h"

#import "TwoViewController.h"

#import "ThreeViewController.h"

#import "FourViewController.h"


@interface AppDelegate ()


@end


@implementation AppDelegate



- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {

    // Override point for customization after application launch.

    

    //创建window

    self.window=[[UIWindow alloc]initWithFrame:[UIScreen mainScreen].bounds];

    self.window.backgroundColor=[UIColor whiteColor];

    [self.window makeKeyAndVisible];

    //创建tabBarController;它是一个容器,承装viewController

    UITabBarController * tabBarC=[[UITabBarController alloc]init];

    self.window.rootViewController=tabBarC;

    

    //创建tabBarControllerviewControllrs

    OneViewController * oneVC=[[OneViewController alloc]init];

    //设置按钮的图片和标题

    oneVC.tabBarItem=[[UITabBarItem alloc]initWithTitle:@"首页" image:[UIImage imageNamed:@"tab_0"] selectedImage:[UIImage imageNamed:@"tab_c0"]];

    

    TwoViewController * twoVC=[[TwoViewController alloc]init];

    twoVC.tabBarItem=[[UITabBarItem alloc]initWithTitle:@"收藏" image:[UIImage imageNamed:@"tab_1"] selectedImage:[UIImage imageNamed:@"tab_c1"]];

    

    ThreeViewController * threeVC=[[ThreeViewController alloc]init];

    threeVC.tabBarItem=[[UITabBarItem alloc]initWithTitle:@"位置" image:[UIImage imageNamed:@"tab_2"] selectedImage:[UIImage imageNamed:@"tab_c2"]];

    

    FourViewController * fourVC=[[FourViewController alloc]init];

    fourVC.tabBarItem=[[UITabBarItem alloc]initWithTitle:@"设置" image:[UIImage imageNamed:@"tab_3"] selectedImage:[UIImage imageNamed:@"tab_c3"]];

    

    

    tabBarC.viewControllers=@[oneVC,twoVC,threeVC,fourVC];

    tabBarC.selectedIndex=0;

    [UITabBar appearance].tintColor = [UIColor orangeColor];


    

    

    return YES;

}



@end







AxcAE_TabBar language Build Status MIT License Platform CocoaPods Axc AxcAE_TabBar 简介: AxcAE_TabBar,以开放为封装核心的TabBar组件,尽量将属性、API等参数全部开放给使用者去自定义,能够方便快速使用的一个TabBar选项卡组件 框架支持 最低支持:iOS 8.0 IDE:Xcode 9.0 及以上版本 (由于适配iPhone X使用iOS11api,所以请使用Xcode 9.0及以上版本) 使用/安装 第一种:手动 1.找到包含: AxcAE_TabBar.h.m、 AxcAE_TabBarBadge.h.m、 AxcAE_TabBarItem.h.m、 AxcAE_TabBarDefine.h 的AxcAE_TabBar文件夹; 2.直接把AxcAE_TabBar文件夹拖入到您的工程中; 3.导入 "AxcAE_TabBar.h" 第二种:Cocoapods 1.在Podfile 中添加 pod 'AxcAE_TabBar' 2.执行 pod setup 3.执行 pod install 或 pod update 4.导入 #import <AxcAE_TabBar/AxcAE_TabBar.h> 功能介绍 支持横竖屏 (已适配iPhone X) 支持自定义Item背景图 支持自定义Item图标的自定义渲染颜色(tingColor,某种情况再不需要两套TabBar图标啦) 支持自定义Item的触发动画(预设有弹簧、放大缩小、渐变) 支持自定义Item的内部布局 支持自定义Item的内部组件(组件全开放指针,可以直接外部操作属性,如创建之初就能定义个别Item的字体等) 支持自定义Item的内部组件大小 支持自定义Item的内部组件的相关属性(点语法可能会有点长,比如item.iconImageView.ContentMode = ...) 支持自定义TabBar的背景图 支持自定义TabBar的背景图的模糊毛玻璃遮罩 支持自定义TabBar上Item相对在各自单元格内的排布方式以及对齐方式 支持自定义TabBar上Item小气泡(徽标)的左中右排布 支持自定义TabBar的凸起按钮 支持自定义TabBar的凸起按钮触发事件,包括能切换视图 支持自定义TabBar的凸起按钮的位置,只要你想,凸起按钮也可以不一定在中间 支持自定义TabBar的多重凸起按钮,如果遇到奇葩多个凸起按钮的需求,别慌 支持自定义TabBar的多重复合凸起按钮,有圆有方怎么办,循环遍历特殊对待(还能再奇葩么) 支持自定义TabBar的Item自定义大小等 支持TabBar中控制器可获取对应Item的方式 支持TabBar与系统TabBar隐藏的同步 支持TabBar在Push的时候与系统同步Hidden的效果(因为父视图就是系统的TabBar) 支持并不依赖其他三方库,适配由自行计算Frame GitHub:https://github.com/axclogo/AxcAE_TabBar
tabBar 是用于实现底部导航栏的一种常见 UI 组件,广泛应用于移动端和前端框架中,帮助用户在多个页面之间快速切换。其核心功能是提供一种直观的导航方式,通常显示在屏幕底部,包含多个标签项,每个标签可以代表一个页面或功能模块。 ### 实现方法 #### 1. 原生 iOS 实现 在原生 iOS 开发中,可以通过 `UITabBarController` 来实现 tabBar。开发者可以自定义 tabBar 的背景颜色或图片,以及每个标签项的图标和文字。例如,设置 tabBar 的背景为图片: ```objective-c _tabbarView.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"tab_bar.png"]]; ``` 这种方式适用于使用 Objective-C 或 Swift 编写的原生 iOS 应用程序 [^1]。 #### 2. 小程序中的 tabBar 在微信小程序等环境中,tabBar 的配置通常在 `app.json` 文件中完成,指定页面路径、图标和选中状态图标: ```json { "tabBar": { "list": [ { "pagePath": "pages/index/index", "text": "首页", "iconPath": "/images/tabbar/home.png", "selectedIconPath": "/images/tabbar/home-active.png" } ] } } ``` 上述配置定义了一个包含首页标签的 tabBar,每个标签都有未选中和选中时的不同图标 [^2]。 #### 3. Vue.js 实现 在 Vue.js 中,可以创建一个 `TabBar.vue` 组件,使用 `<slot>` 插槽机制来动态插入标签项,并通过 CSS 样式控制其外观: ```vue <template> <div id="tab-bar"> <slot></slot> </div> </template> <script> export default { name: "TabBar" } </script> <style scoped> #tab-bar { display: flex; background-color: #ff6666; position: fixed; left: 0; right: 0; bottom: 0; box-shadow: 0 -1px 1px rgba(100, 100, 100, .2); } </style> ``` 该组件可以灵活地嵌套其他标签项组件,实现自定义的底部导航栏 [^3]。 #### 4. 微信小程序中的搜索组件 在微信小程序中,可以结合 tabBar 实现搜索功能,例如通过 `SearchInput.wxml` 创建一个跳转到搜索页面的按钮: ```html <view class="search_input"> <navigator url="/pages/search/index" open-type="navigate">搜索</navigator> </view> ``` 此方法可以在 tabBar 的某个标签中嵌入搜索入口,提升用户体验 [^4]。 #### 5. 路由配置 在 Vue.js 项目中,若使用 `vue-router` 进行路由管理,可以通过修改 `Router.prototype.push` 来避免重复导航时的报错: ```javascript const originalPush = Router.prototype.push; Router.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err); } ``` 此配置确保了在点击 tabBar 标签时,即使当前已在目标页面,也不会引发错误 [^5]。 ### 技术文档参考 - [微信小程序官方文档 - tabBar](https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#tabBar) - [Vue.js 官方文档](https://v3.cn.vuejs.org/guide/) - [iOS 官方文档 - UITabBarController](https://developer.apple.com/documentation/uikit/uitabbarcontroller)
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值