ios 顶部tab滑动实现_iOS 自定义滑动切换TabBar

貌似经常会用到,自己整理收藏起来,方便日后查找备用。

效果如图:

由于制作gif,调整了属性,所以看起来的效果不好。如果用默认配置,生成的gif会很大。

制作gif:

1.使用QuickTimePlayer ,mac上插上iPhone, 然后进行屏幕录制,但是要选择插上的iPhone,然后会自动在Mac弹出同步的iPhone屏幕,点击录制。

2.使用GIFBrewery,选中录制文件*.mov, 进行生成gif。

代码如下:

#import "XPBaseView.h"

@protocol XPDetailTabBarViewDelegate;

@interface XPDetailTabBarView : XPBaseView

@property (nonatomic,weak) id delegate;

/**

* 是否是双语

*/

@property (nonatomic,assign) BOOL isBilingual;

/**

* 是否点赞

*/

@property (nonatomic,assign) BOOL isLike;

@end

@protocol XPDetailTabBarViewDelegate

@optional

- (void)XPDetailTabBarView:(XPDetailTabBarView*)view clickIndex:(NSInteger)index;

@end

#import "XPDetailTabBarView.h"

@interface XPDetailTabBarView ()

@property (nonatomic,strong) NSArray *dataImages;

@property (nonatomic,strong) UIView *moveView;

@property (nonatomic,assign) NSInteger moveIndex;

@end

@implementation XPDetailTabBarView

-(void)initData{

}

-(void)initSubViews{

self.dataImages = @[@"detail_tab_english",@"icon_like",@"detail_tab_recording",@"detail_tab_quiz",@"detail_tab_myrecord"];

CGFloat itemWidth = SCREEN_WIDTH / self.dataImages.count;

CGFloat itemHeight = 44;

self.moveView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, itemWidth, itemWidth)];

self.moveView.backgroundColor = AppStyleThemeOrangeColor;

[self addSubview:self.moveView];

for (int i = 0; i

{

UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];

button.tag = 20000+i;

button.frame = CGRectMake(i*itemWidth, 0, itemWidth, itemHeight);

button.backgroundColor = [UIColor clearColor];

[button setImage:[UIImage imageNamed:[self.dataImages objectAtIndex:i]] forState:UIControlStateNormal];

[button addTarget:self action:@selector(buttonClicked:) forControlEvents:UIControlEventTouchUpInside];

[self addSubview:button];

}

}

-(void)setMoveIndex:(NSInteger)moveIndex{

NSInteger animationType = 1;//1左,2右

if(moveIndex > _moveIndex){

animationType = 2;

}

_moveIndex = moveIndex;

CGFloat itemWidth = SCREEN_WIDTH / self.dataImages.count;

CGFloat itemHeight = 44;

CGRect rect = CGRectMake(moveIndex*itemWidth, 0, itemWidth, itemHeight);

WS(weakSelf)

[UIView animateWithDuration:0.2 animations:^{

if (animationType == 2){//右

weakSelf.moveView.frame = CGRectMake(rect.origin.x+2, rect.origin.y, rect.size.width, rect.size.height);

} else if (animationType == 1){//左

weakSelf.moveView.frame = CGRectMake(rect.origin.x-2, rect.origin.y, rect.size.width, rect.size.height);

}

} completion:^(BOOL finished) {

[UIView animateWithDuration:0.3 animations:^{

if (animationType == 2){//右

weakSelf.moveView.frame = CGRectMake(rect.origin.x-5, rect.origin.y, rect.size.width, rect.size.height);

} else if (animationType == 1){//左

weakSelf.moveView.frame = CGRectMake(rect.origin.x+5, rect.origin.y, rect.size.width, rect.size.height);

}

} completion:^(BOOL finished) {

[UIView animateWithDuration:0.4 animations:^{

weakSelf.moveView.frame = rect;

} completion:^(BOOL finished) {

}];

}];

}];

}

- (void)setIsBilingual:(BOOL)isBilingual{

_isBilingual = isBilingual;

UIButton *button = [self viewWithTag:20000];

if(isBilingual){

[button setImage:[UIImage imageNamed:@"detail_tab_english"] forState:UIControlStateNormal];

}else{

[button setImage:[UIImage imageNamed:@"detail_tab_bilingual"] forState:UIControlStateNormal];

}

}

- (void)setIsLike:(BOOL)isLike{

_isLike = isLike;

UIButton *button = [self viewWithTag:20001];

if(isLike){

[button setImage:[UIImage imageNamed:@"icon_like_selected"] forState:UIControlStateNormal];

}else{

[button setImage:[UIImage imageNamed:@"icon_like"] forState:UIControlStateNormal];

}

}

- (void)buttonClicked:(UIButton*)button{

NSInteger index = button.tag - 20000;

self.moveIndex = index;

if(self.delegate && [self.delegate respondsToSelector:@selector(XPDetailTabBarView:clickIndex:)]){

[self.delegate XPDetailTabBarView:self clickIndex:index];

}

}

@end

  • 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、付费专栏及课程。

余额充值