1.獲取圖片素材
方法有很多,我采用的是一款開源框架iOS-Images-Extractor, 直接下載安裝,把映客的.ipa文件拖進(jìn)去,點(diǎn)擊star按鈕完成點(diǎn)擊Output Dir按鈕就可以到輸出獲取所有圖片素材
Paste_Image.png
Paste_Image.png
2.基本骨架的搭建
基本都是采用UITabBarController + UINavigationController 架構(gòu),不過從獲取的新版映客app圖片資源里并沒有看到 tabBar的背景圖片和 tabBar中間那個(gè)攝像按鈕的 hightlighted 狀態(tài)下圖片,從這里可以推斷出映客采用的是系統(tǒng)的效果來實(shí)現(xiàn)的,比較簡(jiǎn)單,下面只說說細(xì)節(jié)部分
- 2.1 修改系統(tǒng)tabBar的前景色
系統(tǒng)tabBar默認(rèn)前景色是亮灰色的,這里需要將它設(shè)置為白色.
在tabBarController的 viewDidLoad 的方法里設(shè)置如下代碼:
[[UITabBar appearance] setBarTintColor:[UIColor whiteColor]];
[[UITabBar appearance] setTranslucent:NO];
- 2.2 設(shè)置tabBar中間攝像機(jī)按鈕
通過拿到中間按鈕的控制器,來拿到其tabBarItem 屬性,設(shè)置tabBarItem 的 enable 值為 NO,再在 tabBar上面添加一個(gè)普通按鈕
- 2.3 通過以上方法設(shè)置出來的tabBarbuton 的圖片不是居中的,設(shè)置tabBar的 imageInsets 屬性,我是自定義tabBar的 所以重寫 layoutSubViews 方法,在里面作設(shè)置
- 這里有處細(xì)節(jié)需要特別注意: imageInsets 的 top 和 bottom , left 和 right 絕對(duì)值必須相同,否則 tabBarItem 的圖片重復(fù)點(diǎn)擊會(huì)被拉伸變形,如圖
tabBarItem被重復(fù)點(diǎn)擊.png
- (void)layoutSubviews {
[super layoutSubviews];
// 設(shè)置中間按鈕
CGFloat centerX = QYScreenWidth * 0.5;
CGFloat centerY = 10;
self.centerBtn.center = CGPointMake(centerX, centerY);
[self.centerBtn addTarget:self action:@selector(centerBtnClick) forControlEvents:UIControlEventTouchUpInside];
// 設(shè)置item 內(nèi)邊距
CGFloat top = 4;
CGFloat left = 0;
CGFloat bottom = -top; // bottom 和 top 絕對(duì)值必須相等,否則會(huì)出現(xiàn)重復(fù)點(diǎn)擊該tabBarButton圖片被拉伸的bug
CGFloat right = -left;
UIEdgeInsets edgeInsets = UIEdgeInsetsMake(top, left, bottom, right);
for (UITabBarItem *item in self.items) {
NSLog(@"=====%@",item);
item.imageInsets = edgeInsets;
}
}
這樣基本骨架搭建完成了看下效果吧
Paste_Image.png
