iOS 自定义滑动切换TabbarItem 觉得设计丑也要做出来的UI效果。。。

UI丑却要继续做的感言:

对UI不满意的时候,就会觉得丑爆了,时间长了,却丑习惯了。

论前一阵子Tabbar 多丑,丑得最后不要tabbar了...但是自定义tabbar 和遇到的问题解决的过程可以记录一下

目标效果:

    

并有切换效果,但是并没说清楚,具体切换效果,比如粘滞,弹性?

于是我做了一个弹性的。

看实现效果

 

一. 原理:

(1)普通切换选择效果,直接贴在了tabbar上,tabbar再自定义处理图层

(2)触发事件是tabbar上的,没有图片而已。这么处理也是取巧了,降低了整体自定义难度

二.遇到的问题

- (void)tabBarController:(UITabBarController *)tabBarController didSelectViewController:(UINavigationController *)viewController

代理方法里,如何区分选中视图控制器?

- (void)tabBarController:(UITabBarController *)tabBarController didSelectViewController:(UINavigationController *)viewController
{
    UIViewController *vc = viewController.viewControllers.firstObject;
    NSInteger tag = vc.tabBarItem.tag;
    NSLog(@"点击了 第 %ld 个 tab",tag);//tag来自于视图初始化时候的赋值
}
 
 
- (UIViewController *)mineVC
{
    if (!_mineVC) {
        _mineVC = [[UIViewController alloc]init];
        NSString *title = nil;
        _mineVC.tabBarItem = [[UITabBarItem alloc] initWithTitle:title image:nil selectedImage:nil];
        _mineVC.tabBarItem.tag = 2;//这里对不同的视图的根控制器进行标记区分
        _mineVC.view.backgroundColor = [UIColor redColor];
    }
    return _mineVC;
}

在应用不断交互中,tabbar的合理显示和隐藏?

 

 //显示是在主界面上的视图控制器显示tabbar其他情况都隐藏,处理方案:
//在视图控制器基类HFBaseViewController里对tabbar做显示隐藏的逻辑判断,并在交互过程自然显示隐藏不突兀处理

 

#import <UIKit/UIKit.h>

@interface HFBaseViewController : UIViewController

@end
//

@interface HFBaseViewController ()

@end

@implementation HFBaseViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor colorWithConfigKey:@"bg_white"];
    if (!self.fd_prefersNavigationBarHidden) {
        [self setDefaultBackButtonItem];
    }
    if (@available(iOS 11.0, *)) {
        [UIScrollView appearance].contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;
    } else {
        self.automaticallyAdjustsScrollViewInsets = NO;
    }
    self.edgesForExtendedLayout = UIRectEdgeNone; //防止tabbar遮挡视图
}
#pragma mark - 显示tabbar动画
- (void)viewWillAppear:(BOOL)animated
{
    [super viewWillAppear:animated];
if ([FIRWalletHomeVC isTypeLegal:self] || [FIRMarketVC isTypeLegal:self] || [FIRMineVC isTypeLegal:self]) { self.tabBarController.tabBar.alpha = 1.0; self.tabBarController.tabBar.hidden = NO; return ; } [UIView animateWithDuration:0.5 animations:^{ self.tabBarController.tabBar.alpha = 0.0; self.tabBarController.tabBar.hidden = YES; } completion:^(BOOL finished) { //none }]; }

以上。

github 上放了源码:clone后 直接pod update 就能运行

地址: HFCustomTabbarDemo

 

转载于:https://www.cnblogs.com/someonelikeyou/p/9589074.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
iOS自定义 TabBar 主要分为以下几个步骤: 1. 创建自定义 TabBar 创建一个继承于 UITabBar 的类,重写初始化方法和 layoutSubviews 方法,实现自定义 TabBar 的样式和布局。 2. 实现自定义 TabBarItem 创建一个继承于 UIButton 的类,用于实现自定义TabBarItem 样式,例如添加图片、文字等。 3. 设置自定义 TabBarItem自定义 TabBar 的初始化方法中,添加自定义TabBarItem,将其添加到 TabBar 上。 4. 替换系统 TabBar 在 AppDelegate 中,找到 TabBarController 的 tabBar 属性,将其替换为自定义TabBar。 示例代码: 自定义 TabBar 类: ``` class CustomTabBar: UITabBar { var items: [CustomTabBarItem] = [] override init(frame: CGRect) { super.init(frame: frame) setup() } required init?(coder: NSCoder) { fatalError("init(coder:) has not been implemented") } private func setup() { // 隐藏默认的 TabBar self.tintColor = .clear self.backgroundImage = UIImage() self.shadowImage = UIImage() self.backgroundColor = .white } override func layoutSubviews() { super.layoutSubviews() // 设置自定义 TabBarItem 的布局 let itemWidth = self.frame.size.width / CGFloat(items.count) var itemIndex: CGFloat = 0 for item in items { item.frame = CGRect(x: itemWidth * itemIndex, y: 0, width: itemWidth, height: self.frame.size.height) itemIndex += 1 } } } ``` 自定义 TabBarItem 类: ``` class CustomTabBarItem: UIButton { var title: String? var normalImage: UIImage? var selectedImage: UIImage? override init(frame: CGRect) { super.init(frame: frame) setup() } required init?(coder: NSCoder) { fatalError("init(coder:) has not been implemented") } private func setup() { // 设置 TabBarItem 的样式 self.imageView?.contentMode = .scaleAspectFit self.titleLabel?.font = UIFont.systemFont(ofSize: 12) self.setTitleColor(.gray, for: .normal) self.setTitleColor(.black, for: .selected) } override func layoutSubviews() { super.layoutSubviews() // 设置 TabBarItem 的布局 let imageHeight = self.frame.size.height * 0.6 self.imageView?.frame = CGRect(x: (self.frame.size.width - imageHeight) / 2, y: 5, width: imageHeight, height: imageHeight) self.titleLabel?.frame = CGRect(x: 0, y: self.frame.size.height - 20, width: self.frame.size.width, height: 20) } func set(title: String?, normalImage: UIImage?, selectedImage: UIImage?) { self.title = title self.normalImage = normalImage self.selectedImage = selectedImage // 设置 TabBarItem 的标题和图片 self.setTitle(title, for: .normal) self.setImage(normalImage, for: .normal) self.setImage(selectedImage, for: .selected) } } ``` 在自定义 TabBar 的初始化方法中,添加自定义TabBarItem: ``` class CustomTabBar: UITabBar { var items: [CustomTabBarItem] = [] override init(frame: CGRect) { super.init(frame: frame) setup() // 添加 TabBarItem let item1 = CustomTabBarItem() item1.set(title: "首页", normalImage: UIImage(named: "home_normal"), selectedImage: UIImage(named: "home_selected")) self.addSubview(item1) items.append(item1) let item2 = CustomTabBarItem() item2.set(title: "消息", normalImage: UIImage(named: "message_normal"), selectedImage: UIImage(named: "message_selected")) self.addSubview(item2) items.append(item2) let item3 = CustomTabBarItem() item3.set(title: "我的", normalImage: UIImage(named: "mine_normal"), selectedImage: UIImage(named: "mine_selected")) self.addSubview(item3) items.append(item3) } // ... } ``` 在 AppDelegate 中,找到 TabBarController 的 tabBar 属性,将其替换为自定义TabBar: ``` func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool { // ... let tabBarController = UITabBarController() tabBarController.viewControllers = [viewController1, viewController2, viewController3] // 替换为自定义 TabBar let customTabBar = CustomTabBar(frame: tabBarController.tabBar.frame) tabBarController.setValue(customTabBar, forKey: "tabBar") // ... return true } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值