真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

iOSTabbar中間添加凸起可旋轉(zhuǎn)按鈕功能

最近的項(xiàng)目中有需求在tabbar中間添加凸起按鈕,并且點(diǎn)擊時(shí)按鈕要旋轉(zhuǎn),看了仿斗魚的凸起,點(diǎn)擊后是present出來View,而不是像常規(guī)的tabbar上添加一個(gè)頁面,所以不符合要求,經(jīng)過一段摸索最后得的一個(gè)比較好的效果,下面看效果圖

新縣網(wǎng)站制作公司哪家好,找創(chuàng)新互聯(lián)建站!從網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、自適應(yīng)網(wǎng)站建設(shè)等網(wǎng)站項(xiàng)目制作,到程序開發(fā),運(yùn)營維護(hù)。創(chuàng)新互聯(lián)建站2013年至今到現(xiàn)在10年的時(shí)間,我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn),來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)建站。

iOS Tabbar中間添加凸起可旋轉(zhuǎn)按鈕功能

![效果圖.gif]

##需求分析

* tabbar有5個(gè)item,每個(gè)對(duì)應(yīng)一個(gè)頁面

* 中間item為凸起按鈕

* 中間按鈕點(diǎn)擊后旋轉(zhuǎn)

##效果實(shí)現(xiàn)

* 設(shè)置5個(gè)item

我們一步步來解決這個(gè)問題,首先創(chuàng)建MCTabBarController繼承UITabBarController,然后和常規(guī)一樣創(chuàng)建5個(gè)item,中間的按鈕不設(shè)置圖片,代碼如下

//MCTabBarController.m
//添加子控制器
- (void)addChildViewControllers{
 //圖片大小建議32*32
 [self addChildrenViewController:[[ViewController alloc] init] andTitle:@"首頁" andImageName:@"tab1_n" andSelectImage:@"tab1_p"];
 [self addChildrenViewController:[[ViewController alloc] init] andTitle:@"擴(kuò)展" andImageName:@"tab2_n" andSelectImage:@"tab2_p"];
 //中間這個(gè)不設(shè)置東西,只占位
 [self addChildrenViewController:[[ViewController alloc] init] andTitle:@"旋轉(zhuǎn)" andImageName:@"" andSelectImage:@""];
 [self addChildrenViewController:[[ViewController alloc] init] andTitle:@"發(fā)現(xiàn)" andImageName:@"tab3_n" andSelectImage:@"tab3_p"];
 [self addChildrenViewController:[[ViewController alloc] init] andTitle:@"我" andImageName:@"tab4_n" andSelectImage:@"tab4_p"];
}
- (void)addChildrenViewController:(UIViewController *)childVC andTitle:(NSString *)title andImageName:(NSString *)imageName andSelectImage:(NSString *)selectedImage{
 childVC.tabBarItem.image = [UIImage imageNamed:imageName];
 childVC.tabBarItem.selectedImage = [UIImage imageNamed:selectedImage];
 childVC.title = title;
 
 BaseNavigationController *baseNav = [[BaseNavigationController alloc] initWithRootViewController:childVC];
 
 [self addChildViewController:baseNav];
}

這樣實(shí)現(xiàn)的效果如下圖所示

iOS Tabbar中間添加凸起可旋轉(zhuǎn)按鈕功能

[圖一.png]

* 添加凸起按鈕

我們可以在UITabBar上添加我們的凸起按鈕,讓他的位置在沒有設(shè)置的中間按鈕偏上,按鈕的點(diǎn)擊和中間按鈕點(diǎn)擊綁定,這里直接在MCTabBarController.m中添加會(huì)有問題

1、因?yàn)橥蛊鸢粹o的frame超出了UITabBar的frame,這樣超出的區(qū)域點(diǎn)擊按鈕會(huì)沒有響應(yīng)(圖二紅框區(qū)域),原因和解決辦法詳情參考我的這篇[iOS UIButton 點(diǎn)擊無響應(yīng)的解決辦法](https://www.jb51.net/article/131227.htm),由于要在UITabBar上添加凸起按鈕,并且處理點(diǎn)擊無效的問題,所以這里創(chuàng)建了MCTabBar繼承UITabBar

iOS Tabbar中間添加凸起可旋轉(zhuǎn)按鈕功能

[圖二.png]

2、由于UITabBar是readonly的,所以我們不能直接對(duì)他進(jìn)行賦值,這里利用KVC訪問私有變量將MCTabBar賦值給"tabBar"

**具體實(shí)現(xiàn)**

MCTabBar

```

#import
@interface MCTabBar : UITabBar
@property (nonatomic, strong) UIButton *centerBtn; //中間按鈕
@end
```
```
@implementation MCTabBar
- (instancetype)init{
 if (self = [super init]){
 [self initView];
 }
 return self;
}
- (void)initView{
 _centerBtn = [UIButton buttonWithType:UIButtonTypeCustom];
 // 設(shè)定button大小為適應(yīng)圖片
 UIImage *normalImage = [UIImage imageNamed:@"tabbar_add"];
 _centerBtn.frame = CGRectMake(0, 0, normalImage.size.width, normalImage.size.height);
 [_centerBtn setImage:normalImage forState:UIControlStateNormal];
 //去除選擇時(shí)高亮
 _centerBtn.adjustsImageWhenHighlighted = NO;
 //根據(jù)圖片調(diào)整button的位置(圖片中心在tabbar的中間最上部,這個(gè)時(shí)候由于按鈕是有一部分超出tabbar的,所以點(diǎn)擊無效,要進(jìn)行處理)
 _centerBtn.frame = CGRectMake(([UIScreen mainScreen].bounds.size.width - normalImage.size.width)/2.0, - normalImage.size.height/2.0, normalImage.size.width, normalImage.size.height);
 [self addSubview:_centerBtn];
}
//處理超出區(qū)域點(diǎn)擊無效的問題
- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event{
 UIView *view = [super hitTest:point withEvent:event];
 if (view == nil){
 //轉(zhuǎn)換坐標(biāo)
 CGPoint tempPoint = [self.centerBtn convertPoint:point fromView:self];
 //判斷點(diǎn)擊的點(diǎn)是否在按鈕區(qū)域內(nèi)
 if (CGRectContainsPoint(self.centerBtn.bounds, tempPoint)){
  //返回按鈕
  return _centerBtn;
 }
 }
 return view;
}
```

利用KVC賦值

```

//MCTabBarController.m
- (void)viewDidLoad {
 [super viewDidLoad];
 
 _mcTabbar = [[MCTabBar alloc] init];
 [_mcTabbar.centerBtn addTarget:self action:@selector(buttonAction:) forControlEvents:UIControlEventTouchUpInside];
 //選中時(shí)的顏色
 _mcTabbar.tintColor = [UIColor colorWithRed:27.0/255.0 green:118.0/255.0 blue:208/255.0 alpha:1];
 //透明設(shè)置為NO,顯示白色,view的高度到tabbar頂部截止,YES的話到底部
 _mcTabbar.translucent = NO;
 //利用KVC 將自己的tabbar賦給系統(tǒng)tabBar
 [self setValue:_mcTabbar forKeyPath:@"tabBar"];
 
 self.delegate = self;
 [self addChildViewControllers];
}
```

* 點(diǎn)擊旋轉(zhuǎn)

在中間按鈕的點(diǎn)擊事件執(zhí)行時(shí)旋轉(zhuǎn)第二個(gè)index,然后執(zhí)行旋轉(zhuǎn)動(dòng)畫,

在tabbar的代理事件中監(jiān)聽旋中中間按鈕的事件,然后執(zhí)行旋轉(zhuǎn)動(dòng)畫,其他按鈕則移除動(dòng)畫,代碼如下

```

- (void)buttonAction:(UIButton *)button{
 self.selectedIndex = 2;//關(guān)聯(lián)中間按鈕
 [self rotationAnimation];
}
//tabbar選擇時(shí)的代理
- (void)tabBarController:(UITabBarController *)tabBarController didSelectViewController:(UIViewController *)viewController{
 if (tabBarController.selectedIndex == 2){//選中中間的按鈕
 [self rotationAnimation];
 }else {
 [_mcTabbar.centerBtn.layer removeAllAnimations];
 }
}
//旋轉(zhuǎn)動(dòng)畫
- (void)rotationAnimation{
 CABasicAnimation *rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
 rotationAnimation.toValue = [NSNumber numberWithFloat:M_PI*2.0];
 rotationAnimation.duration = 3.0;
 rotationAnimation.repeatCount = HUGE;
 [_mcTabbar.centerBtn.layer addAnimation:rotationAnimation forKey:@"key"];
}

```

* 其他

這里寫了BaseNavigationController繼承自UINavigationController,處理了push后隱藏底部UITabBar的情況,并解決了iPhonX上push時(shí)UITabBar上移的問題。

最后,附上Demo地址,如果對(duì)你有所幫助,不要吝嗇你的Star✨哦![MCTabBarDemo]

(https://github.com/Ccalary/MCTabBarDemo)

總結(jié)

以上所述是小編給大家介紹的iOS Tabbar中間添加凸起可旋轉(zhuǎn)按鈕功能,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持!


當(dāng)前文章:iOSTabbar中間添加凸起可旋轉(zhuǎn)按鈕功能
鏈接URL:http://weahome.cn/article/ipgidj.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部