当前位置: 首页>C语言>正文

ios自定義UITabBar-仿寫掌上英雄聯盟的UITabBar

ios自定義UITabBar-仿寫掌上英雄聯盟的UITabBar

最近在仿寫這個軟件,發現UITabBar不是使用的原生的。所以,需要自己去自定義

觀察掌盟的UITabBar

觀察官方的軟件下面的tabBar,我們可以發現幾點需要我們注意的
1. 當select一個tabBarItem時,圖片會變大,然后文字也變大,同時字體的顏色也會變成紅色
2. 在圖片變大之前和之后,我們可以看到圖片都已經超出了,tabBar的高度。這一點可以說明這幾個tabBarItem并沒有放在固定了高度的tabBar里面

思路

  1. 如果,我們只放一個UIView在原生的UITabBar里面,然后將這幾個按鈕放在UIView中的話,圖片肯定不能超出這個UIView的高度。所以這樣不行
  2. 然后,我思考既然高度已經超出了,但是這幾個按鈕還是放在一個UIView中,這個高度是能包含這幾個按鈕的最高的高度。
  3. 但是,你可以看到這幾個按鈕的背景UIView的高度是沒有這幾個按鈕高的。所以我們上面創建的UIView的顏色是clearColor

ok,我們在嘗試著做下

  • 既然要創建一個UITabBar,而我們要去管理這個tabBar.所以我們最好創建一個BMCustomTabBarController class繼承于UITabBarController.好,直接上代碼:
//  BMCustomTabBarController.m
//  BMLOL
//
//  Created by donglei on 2/27/16.
//  Copyright ? 2016 donglei. All rights reserved.
//#import "BMCustomTabBarController.h"
#import "BMTabBarBtn.h"@interface BMCustomTabBarController()
@property(nonatomic,strong) UIView *transparenceView; // 透明的view
@property(nonatomic,strong) BMTabBarBtn *previewBtn; // 上一個被選中的按鈕
@end@implementation BMCustomTabBarController-(void) viewDidLoad{[super viewDidLoad];//1>覆蓋原生的tabbarUIView *coverTabBarView = ({UIView *view         = [[UIView alloc] init];view.backgroundColor = [UIColor colorWithRed:242/255.0 green:242/255.0 blue:242/255.0 alpha:1.0];[self.view addSubview:view];[view mas_makeConstraints:^(MASConstraintMaker *make) {make.left.equalTo(self.view.mas_left);make.bottom.equalTo(self.view.mas_bottom);make.width.equalTo(@(self.tabBar.frame.size.width));make.height.equalTo(@(self.tabBar.frame.size.height));}];view;}); //我們把這個view放在UITabBarController的view中,去顯示那個灰色的背景[self.tabBar removeFromSuperview]; // 移除默認的tabbar//2>添加透明的view 方式圖片和文字UIView *transparenceView  = ({UIView *view = [UIView new];[self.view addSubview:view];view.backgroundColor = [UIColor clearColor];[view mas_makeConstraints:^(MASConstraintMaker *make) {make.bottom.equalTo(self.view.mas_bottom);make.left.equalTo(self.view.mas_left);make.right.equalTo(self.view.mas_right);make.height.equalTo(@67);}];view;}); //這個view是clearColor主要的作用去承載那幾個按鈕_transparenceView = transparenceView;//3>創建4個按鈕CGFloat singleBtnW = screenWidth/4;BMTabBarBtn *newsBtn= [BMTabBarBtn createBtnNormalImage:@"theme_spring_tab_news_normal" selectedImageName:@"theme_spring_tab_news_selected" title:@"咨詢"];newsBtn.tag = 0; //設置tag,以便之后,點擊按鈕之后。進行控制器的切換newsBtn.selected = YES;   //默認 第一個是選中的_previewBtn = newsBtn; //保存一個被select的按鈕,以便我們選中另一個按鈕時,可以取消上一個按鈕被選中的狀態[self setBtnLayout:newsBtn marginLeft:0];BMTabBarBtn *friendBtn= [BMTabBarBtn createBtnNormalImage:@"theme_spring_tab_friend_normal" selectedImageName:@"theme_spring_tab_friend_selected" title:@"好友"];friendBtn.tag = 1;[self setBtnLayout:friendBtn marginLeft:1*singleBtnW];BMTabBarBtn *locateBtn= [BMTabBarBtn createBtnNormalImage:@"theme_spring_tab_locate_normal" selectedImageName:@"theme_spring_tab_locate_selected" title:@"發現"];locateBtn.tag = 2;[self setBtnLayout:locateBtn marginLeft:2*singleBtnW];BMTabBarBtn *mineBtn= [BMTabBarBtn createBtnNormalImage:@"theme_spring_tab_mine_normal" selectedImageName:@"theme_spring_tab_mine_selected" title:@"我"];mineBtn.tag = 3;[self setBtnLayout:mineBtn marginLeft:3*singleBtnW];}//設置按鈕的位置
-(void) setBtnLayout:(BMTabBarBtn *)btn marginLeft:(CGFloat) left{[_transparenceView addSubview:btn];//把按鈕放在透明的view上[btn addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchDown]; //添加按鈕的點擊事件[btn mas_makeConstraints:^(MASConstraintMaker *make) {make.left.equalTo(_transparenceView.mas_left).with.offset(left);make.top.equalTo(_transparenceView.mas_top);make.bottom.equalTo(_transparenceView.mas_bottom);make.width.equalTo(_transparenceView.mas_width).multipliedBy(1.0/4);}];
}//按鈕點擊事件
-(void) btnClick:(BMTabBarBtn *)btn{if (_previewBtn.isSelected) {//上一個按鈕,如果是被選中的,就取消選中狀態_previewBtn.selected = NO; }_previewBtn = btn; //將本次選中的按鈕,設置為上一個被選中的按鈕btn.selected = YES; //設置本次被點擊的按鈕為選中狀態self.selectedIndex = btn.tag; //切換控制器}@end


  • 自定義按鈕

自定義的原因是,我們需要去調整按鈕中圖片和文字的位置
代碼:

//
//  BMTabBarBtn.m
//  BMLOL
//
//  Created by donglei on 2/27/16.
//  Copyright ? 2016 donglei. All rights reserved.
//#import "BMTabBarBtn.h"
#define btnWidth self.frame.size.width
#define btnHeight self.frame.size.height#define titlePadding 2@interface BMTabBarBtn ()
@property(nonatomic,assign) CGFloat tittleH;@end@implementation BMTabBarBtn//該類的工廠方法
+(instancetype)createBtnNormalImage:(NSString *)normalName selectedImageName:(NSString*) selectedName title:(NSString *)titileName{BMTabBarBtn *btn = [[self alloc] init]; if (btn) {[btn setImage:[UIImage imageNamed:normalName] forState:UIControlStateNormal];[btn setImage:[UIImage imageNamed:selectedName] forState:UIControlStateSelected];[btn setTitle:titileName forState:UIControlStateNormal];[btn setTitleColor:[UIColor grayColor] forState:UIControlStateNormal];[btn setTitleColor:[UIColor redColor] forState:UIControlStateSelected];btn.titleLabel.textAlignment = NSTextAlignmentCenter;btn.titleLabel.font = [UIFont systemFontOfSize:13];}return btn;
}//更改按鈕標題的位置(這些按鈕的圖片文字 的高度.寬度 x y 需要自己去截圖,然后使用軟件去觀察。我使用的sketch)
-(CGRect)titleRectForContentRect:(CGRect)contentRect{_tittleH =  12.f;CGFloat tittleW = 37;if(self.selected){_tittleH = 14.f;}CGFloat titleY = btnHeight - _tittleH -titlePadding;CGFloat titleX = (btnWidth- tittleW)/2;return  CGRectMake(titleX, titleY, tittleW, _tittleH);}//更改按鈕圖片的位置
-(CGRect)imageRectForContentRect:(CGRect)contentRect{CGFloat imagePadding  = 3;CGFloat imageH = 41;CGFloat imageW = 37;if (self.selected) {imageW = 45;imageH = 52;}CGFloat imageX = (btnWidth - imageW) / 2 ;CGFloat imageY = btnHeight-titlePadding-_tittleH-imagePadding-imageH;return CGRectMake(imageX, imageY, imageW, imageH);
}//禁止高亮
-(BOOL) isHighlighted{return  NO;
}@end

最后上結果圖

這里寫圖片描述
這里寫圖片描述

https://www.zydui.com/af61cUG8CDQ9VAF4I.html
>

相关文章:

  • 詳解PyTorch中的contiguous
  • PyTorch中的contiguous解讀
  • Pytorch中contiguous()函數理解
  • ios自定義UITabBar-仿寫掌上英雄聯盟的UITabBar
  • 基于Cocos2d-x的英雄聯盟皮膚選擇菜單
  • lol-登陸英雄聯盟出錯
  • JS中雙層for循環執行順序
  • 關于for循環執行順序
  • 上古卷軸5boss計算機丟失,上古卷軸5常見BUG解決辦法
  • 上古世紀服務器維護真情禮,4月9日例行維護懷舊服合服公告
  • 塔羅牌張數
  • 工程管理中的工程技術
  • 銳派出品:LOL新年特輯S4各類細節之下路篇
  • 藍城兄弟Q4業績背后,垂直社區具備多少想象力?
  • Mac OS啟動服務優化高級篇(launchd tuning)
  • #Geek Point# 為什么現在要去印度看一看?
  • vm 流程運行mac os_什么是“商務”流程,為什么在我的Mac上運行?
  • # 陌生人社交產品:需求、困境與破局之道
  • mac 不受信任在哪里更改_什么是受信任的,為什么它可以在Mac上運行?
  • 車行軌跡分類實踐
  • 智慧車行預約小程序 v9.1
  • i12藍牙耳機充電倉怎么看充滿電_車行藍牙耳機價格高性價比的選擇
  • 車行平安
  • 論文閱讀——《基于卷積神經網絡的車行環境多類障礙物檢測與識別》
  • 飛槳開發者創意薈:PaddleHub一鍵部署,AI創意實現原來如此簡單
  • eclipse左側欄目即包資源管理器怎么打開
  • 卷毛機器人符文_卷毛S6娜美輔助天賦 娜美輔助符文天賦S6最新
  • 天賦介紹
  • 蘋果怎么沒有4g信號還無服務器,不顯示4g信號怎么回事?蘋果手機不顯示4g信號的解決方法...
  • c4D體積生成和Quad Remesher重新拓撲減面插件