- 在許多我們?nèi)粘J褂玫膽弥卸巯溃覀儠l(fā)現(xiàn)倍奢,他們的界面骨架(或者說樣子)基本相同
-
像QQ,簡書煮纵,微博等
-
- 他們有一個相似的基本界面骨架是這樣子的:
- 首先懂鸵,界面有一些什么組成
TabBar上切換不同的導航控制器(界面),NavigationBar上點擊BarButtonItem跳轉(zhuǎn)(push)到下一個界面
那么這樣的基本界面骨架行疏,我們?nèi)绾稳ゴ罱兀?/p>
iPhone項目開始時候要處理注意的地方
-
APP的名稱設置
搭建流程思考
-
1.自定義TabBarController
- 添加四個子控制器
- 設置好四個子控制器的相關屬性(TabBarItem內(nèi)部圖片和文字的設置)
-
2.自定義NavigationController(重寫push:方法匆光,封裝返回鍵)
- 這里的返回鍵的封裝(設置)是很有用也很常見的,也很方便酿联,掌握了终息,今后直接在項目中拿出來用就可以了
- 但這里是先搭建基本骨架。有關總結(jié)在我的另外一篇文章《項目開發(fā)中封裝一個返回鍵--很實用》《項目開發(fā)中封裝一個BarButtonItem類別-很實用》
我們這里界面的搭建可以選擇storyboard搭建贞让,但這種情況一般是界面比較少的情況下選用周崭。
當我們的界面很多,到時候要各種進行界面間跳轉(zhuǎn)的時候喳张,我們?nèi)匀皇褂胹toryboard搭建的話续镇,要是幾十個控制器之間的跳轉(zhuǎn),眼睛都看花你的销部。
所以界面多得時候摸航,我們選擇代碼創(chuàng)建
這里我將選擇代碼創(chuàng)建,讓大家知道一個大概的思路
- 在AppDelegate.m文件中重新創(chuàng)建舅桩,而不會使用Main.storyboard.
- 先創(chuàng)建根控制器
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
// 1.創(chuàng)建窗口
self.window = [[UIWindow alloc] init];
self.window.frame = [UIScreen mainScreen].bounds;
// 2.設置窗口的根控制器
self.window.rootViewController = [[CYTabbarController alloc] init];
// 3.顯示窗口
[self.window makeKeyAndVisible];
return YES;
}
- 新建一個(自定義)TabBarController
#import "CYTabbarController.h"
@interface CYTabbarController ()
@end
@implementation CYTabbarController
- (void)viewDidLoad {
[super viewDidLoad];
// UIControlStateNormal情況下的文字屬性
NSMutableDictionary *normalAtrrs = [NSMutableDictionary dictionary];
// 文字顏色
normalAtrrs[NSForegroundColorAttributeName] = [UIColor grayColor];
// UIControlStateSelected情況的文字屬性
NSMutableDictionary *selectedAtrrs = [NSMutableDictionary dictionary];
// 文字顏色
selectedAtrrs[NSForegroundColorAttributeName] = [UIColor darkGrayColor];
UITabBarItem *item = [UITabBarItem appearance];
[item setTitleTextAttributes:normalAtrrs forState:UIControlStateNormal];
[item setTitleTextAttributes:selectedAtrrs forState:UIControlStateSelected];
// 添加四個子控制器
UIViewController *vc1 = [[UIViewController alloc] init];
vc1.tabBarItem.title = @"精華";
vc1.tabBarItem.image = [UIImage imageNamed:@"tabBar_essence_icon"];
vc1.tabBarItem.selectedImage = [UIImage imageNamed:@"tabBar_essence_click_icon"];
vc1.view.backgroundColor = [UIColor greenColor];
[self addChildViewController:vc1];
UIViewController *vc2 = [[UIViewController alloc] init];
vc2.tabBarItem.title = @"新帖";
vc2.tabBarItem.image = [UIImage imageNamed:@"tabBar_new_icon"];
vc2.tabBarItem.selectedImage = [UIImage imageNamed:@"tabBar_new_click_icon"];
vc2.view.backgroundColor = [UIColor grayColor];
[self addChildViewController:vc2];
UIViewController *vc3 = [[UIViewController alloc] init];
vc3.tabBarItem.title = @"關注";
vc3.tabBarItem.image = [UIImage imageNamed:@"tabBar_friendTrends_icon"];
vc3.tabBarItem.selectedImage = [UIImage imageNamed:@"tabBar_friendTrends_click_icon"];
vc3.view.backgroundColor = [UIColor blueColor];
[self addChildViewController:vc3];
UIViewController *vc4 = [[UIViewController alloc] init];
vc4.tabBarItem.title = @"我";
vc4.tabBarItem.image = [UIImage imageNamed:@"tabBar_me_icon"];
vc4.tabBarItem.selectedImage = [UIImage imageNamed:@"tabBar_me_click_icon"];
vc4.view.backgroundColor = [UIColor yellowColor];
[self addChildViewController:vc4];
}
@end
- 這樣就創(chuàng)建成功了酱虎,你說快不快!
- 當然不可能代碼這么多擂涛,下面我會進行抽取
- 運行式樣:
代碼的抽取
#import "CYTabbarController.h"
@interface CYTabbarController ()
@end
@implementation CYTabbarController
- (void)viewDidLoad {
[super viewDidLoad];
// 開始抽取代碼了:
[self setUpItem];
[self setUpChildVc];
/**
* 設置Item的屬性
*/
- (void)setUpItem
{
// UIControlStateNormal情況下的文字屬性
NSMutableDictionary *normalAtrrs = [NSMutableDictionary dictionary];
// 文字顏色
normalAtrrs[NSForegroundColorAttributeName] = [UIColor grayColor];
// UIControlStateSelected情況的文字屬性
NSMutableDictionary *selectedAtrrs = [NSMutableDictionary dictionary];
// 文字顏色
selectedAtrrs[NSForegroundColorAttributeName] = [UIColor darkGrayColor];
// 統(tǒng)一給所有的UITabBatItem設置文字屬性
// 只有后面帶有UI_APPEARANCE_SELECTOR方法的才可以通過appearance來設置
UITabBarItem *item = [UITabBarItem appearance];
[item setTitleTextAttributes:normalAtrrs forState:UIControlStateNormal];
[item setTitleTextAttributes:selectedAtrrs forState:UIControlStateSelected];
}
/**
* 設置setUpChildVc的屬性读串,添加所有的子控件
*/
- (void)setUpChildVc
{
[self setUpChildVc:[UIViewController class] title:@"精華" image:@"tabBar_essence_icon" selectedImage:@"tabBar_essence_click_icon"];
[self setUpChildVc:[UIViewController class] title:@"新帖" image:@"tabBar_new_icon" selectedImage:@"tabBar_new_click_icon"];
[self setUpChildVc:[UIViewController class] title:@"關注" image:@"tabBar_friendTrends_icon" selectedImage:@"tabBar_friendTrends_click_icon"];
[self setUpChildVc:[UIViewController class] title:@"我" image:@"tabBar_me_icon" selectedImage:@"tabBar_me_click_icon"];
// // 添加四個子控制器
// UIViewController *vc1 = [[UIViewController alloc] init];
// vc1.tabBarItem.title = @"精華";
// vc1.tabBarItem.image = [UIImage imageNamed:@"tabBar_essence_icon"];
// vc1.tabBarItem.selectedImage = [UIImage imageNamed:@"tabBar_essence_click_icon"];
// vc1.view.backgroundColor = [UIColor greenColor];
// [self addChildViewController:vc1];
//
// UIViewController *vc2 = [[UIViewController alloc] init];
// vc2.tabBarItem.title = @"新帖";
// vc2.tabBarItem.image = [UIImage imageNamed:@"tabBar_new_icon"];
// vc2.tabBarItem.selectedImage = [UIImage imageNamed:@"tabBar_new_click_icon"];
// vc2.view.backgroundColor = [UIColor grayColor];
// [self addChildViewController:vc2];
//
// UIViewController *vc3 = [[UIViewController alloc] init];
// vc3.tabBarItem.title = @"關注";
// vc3.tabBarItem.image = [UIImage imageNamed:@"tabBar_friendTrends_icon"];
// vc3.tabBarItem.selectedImage = [UIImage imageNamed:@"tabBar_friendTrends_click_icon"];
// vc3.view.backgroundColor = [UIColor blueColor];
// [self addChildViewController:vc3];
//
// UIViewController *vc4 = [[UIViewController alloc] init];
// vc4.tabBarItem.title = @"我";
// vc4.tabBarItem.image = [UIImage imageNamed:@"tabBar_me_icon"];
// vc4.tabBarItem.selectedImage = [UIImage imageNamed:@"tabBar_me_click_icon"];
// vc4.view.backgroundColor = [UIColor yellowColor];
// [self addChildViewController:vc4];
}
- (void)setUpChildVc:(Class)vcClass title:(NSString *)title image:(NSString *)image selectedImage:(NSString *)selectedImage
{
UIViewController *vc = [[UIViewController alloc] init];
vc.tabBarItem.title = title;
vc.tabBarItem.image = [UIImage imageNamed:image];
vc.tabBarItem.selectedImage = [UIImage imageNamed:selectedImage];
// 創(chuàng)建一個隨機色
vc.view.backgroundColor = [UIColor colorWithRed:arc4random_uniform(100)/100.0 green:arc4random_uniform(100)/100.0 blue:arc4random_uniform(100)/100.0 alpha:1.0];
[self addChildViewController:vc];
}
@end
- 在微博和簡書APP中在TabBar中間有一個加號按鈕,用于發(fā)布或者別的功能
- 那么這么重要的一個按鈕撒妈,我們?nèi)绾螌崿F(xiàn)呢恢暖?
- 首先,上面系統(tǒng)的TabBar是滿足不了我們了踩身,所以我們只能自定義一個TabBar
- 自定義TabBar后胀茵,就要開始在上面進行子控件的布局,修改他們的位置了
- 重寫initWithFrame:方法以及LayoutSubViews:方法挟阻,布局子控件
- 在自定義的CYTabBarController中
//
// CYTabbarController.m
// 聰穎不聰穎
// Copyright (c) 2015年 congying. All rights reserved.
//
#import "CYTabbarController.h"
#import "CYEssenceViewController.h"
#import "CYFocusViewController.h"
#import "CYPublishViewController.h"
#import "CYNewPostViewController.h"
#import "CYMeViewController.h"
#import "CYTabBar.h"
#import "CYNavigationController.h"
@interface CYTabbarController ()
@end
@implementation CYTabbarController
- (void)viewDidLoad {
[super viewDidLoad];
// 開始抽取代碼了:
// 抽取Item屬性
[self setUpItem];
// 布局子控件
[self setUpChildVc];
// 處理tabBar
[self setUpTabBar];
}
/**
* 處理tabBar
*/
- (void)setUpTabBar
{
[self setValue:[[CYTabBar alloc] init] forKey:@"tabBar"];
}
/**
* 設置Item的屬性
*/
- (void)setUpItem
{
// UIControlStateNormal情況下的文字屬性
NSMutableDictionary *normalAtrrs = [NSMutableDictionary dictionary];
// 文字顏色
normalAtrrs[NSForegroundColorAttributeName] = [UIColor grayColor];
// UIControlStateSelected情況的文字屬性
NSMutableDictionary *selectedAtrrs = [NSMutableDictionary dictionary];
// 文字顏色
selectedAtrrs[NSForegroundColorAttributeName] = [UIColor darkGrayColor];
// 統(tǒng)一給所有的UITabBatItem設置文字屬性
// 只有后面帶有UI_APPEARANCE_SELECTOR方法的才可以通過appearance來設置
UITabBarItem *item = [UITabBarItem appearance];
[item setTitleTextAttributes:normalAtrrs forState:UIControlStateNormal];
[item setTitleTextAttributes:selectedAtrrs forState:UIControlStateSelected];
}
/**
* 設置setUpChildVc的屬性,添加所有的子控件
*/
- (void)setUpChildVc
{
[self setUpChildVc:[[CYEssenceViewController alloc] init] title:@"精華" image:@"tabBar_essence_icon" selectedImage:@"tabBar_essence_click_icon"];
[self setUpChildVc:[[CYNewPostViewController alloc] init] title:@"新帖" image:@"tabBar_new_icon" selectedImage:@"tabBar_new_click_icon"];
[self setUpChildVc:[[CYFocusViewController alloc] init] title:@"關注" image:@"tabBar_friendTrends_icon" selectedImage:@"tabBar_friendTrends_click_icon"];
[self setUpChildVc:[[CYMeViewController alloc] init] title:@"我" image:@"tabBar_me_icon" selectedImage:@"tabBar_me_click_icon"];
}
- (void)setUpChildVc:(UIViewController *)vc title:(NSString *)title image:(NSString *)image selectedImage:(NSString *)selectedImage
{
// 包裝一個導航控制器
CYNavigationController *nav = [[CYNavigationController alloc] initWithRootViewController:vc];
[self addChildViewController:nav];
// 設置子控制器的tabBarItem
nav.tabBarItem.title = title;
nav.tabBarItem.image = [UIImage imageNamed:image];
nav.tabBarItem.selectedImage = [UIImage imageNamed:selectedImage];
nav.view.backgroundColor = [UIColor colorWithRed:arc4random_uniform(100)/100.0 green:arc4random_uniform(100)/100.0 blue:arc4random_uniform(100)/100.0 alpha:1.0];
}
@end
- 自定義一個TabBar
#import "CYTabBar.h"
@interface CYTabBar()
/** 增加發(fā)布按鈕*/
@property (nonatomic, weak) UIButton *publishButton;
@end
@implementation CYTabBar
- (instancetype) initWithFrame:(CGRect)frame
{
if (self = [super initWithFrame:frame]) {
// 設置背景圖片
self.backgroundImage = [UIImage imageNamed:@"tabbar-light"];
UIButton *publishButton = [UIButton buttonWithType:UIButtonTypeCustom];
[publishButton setBackgroundImage:[UIImage imageNamed:@"tabBar_publish_icon"] forState:UIControlStateNormal];
[publishButton setBackgroundImage:[UIImage imageNamed:@"tabBar_publish_click_icon"] forState:UIControlStateHighlighted];
[publishButton sizeToFit];
// 監(jiān)聽按鈕點擊(發(fā)布按鈕)
[publishButton addTarget:self action:@selector(publishClick) forControlEvents:UIControlEventTouchUpInside];
// publishButton.center = CGPointMake(self.frame.size.width * 0.5, self.frame.size.height * 0.5);
[self addSubview:publishButton];
self.publishButton = publishButton;
}
return self;
}
- (void)publishClick
{
NSLog(@"%s",__func__);
}
/**
* 重寫layoutSubviews方法,布局子控件
*/
- (void)layoutSubviews
{
[super layoutSubviews];
// TabBar的尺寸
CGFloat width = self.frame.size.width;
CGFloat height = self.frame.size.height;
// 設置發(fā)布按鈕的位置
self.publishButton.center = CGPointMake(width * 0.5, height * 0.5);
// 設置索引
int index = 0;
// 按鈕的尺寸
CGFloat tabBarButtonW = self.frame.size.width / 5;
CGFloat tabBarButtonH = self.frame.size.height;
CGFloat tabBarButtonY = 0;
// 設置四個TabBarButton的frame
for (UIView *tabBarButton in self.subviews) {
if (![NSStringFromClass(tabBarButton.class) isEqualToString:@"UITabBarButton"]) continue;
// 計算按鈕X的值
CGFloat tabBarButtonX = index * tabBarButtonW;
if (index >= 2) {
tabBarButtonX += tabBarButtonW; // 給后面2個button增加一個寬度的X值
}
tabBarButton.frame = CGRectMake(tabBarButtonX, tabBarButtonY, tabBarButtonW, tabBarButtonH);
index++;
}
}
一些細節(jié)方面的注意處理以及一些補充:
- TabBarItem內(nèi)部圖片和文字的設置
- 為什么要設置呢:
- 因為不設置的話附鸽,蘋果就會自動將它渲染成藍色脱拼,而不是我們(客戶)想要的樣式
- 圖標高亮和正常狀態(tài)是如何設置它本身的顏色
- Xcode中設置,一勞永逸
- 代碼實現(xiàn)方式(了解一下坷备,知道的辦法多一點畢竟不是壞事):
// UIImage *tempImage = [UIImage imageNamed:@"tabBar_essence_click_icon"];
// UIImage *selectedImage = [tempImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
// vc1.tabBarItem.selectedImage = selectedImage;
vc1.tabBarItem.selectedImage = [[UIImage imageNamed:@"tabBar_essence_click_icon" ]imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
// 這里的設置可以不讓系統(tǒng)給圖片渲染成藍色
- 如何設置TabBarItem的文字顏色呢熄浓?只能代碼了
// UIControlStateNormal情況下的文字屬性
NSMutableDictionary *normalAtrrs = [NSMutableDictionary dictionary];
// 文字顏色
normalAtrrs[NSForegroundColorAttributeName] = [UIColor grayColor];
// UIControlStateSelected情況的文字屬性
NSMutableDictionary *selectedAtrrs = [NSMutableDictionary dictionary];
// 文字顏色
selectedAtrrs[NSForegroundColorAttributeName] = [UIColor darkGrayColor];
UITabBarItem *item = [UITabBarItem appearance];
[item setTitleTextAttributes:normalAtrrs forState:UIControlStateNormal];
[item setTitleTextAttributes:selectedAtrrs forState:UIControlStateSelected];
換膚
- 通過設置appearance來進行換膚,一設置省撑,全部控件都跟著變
- 但是有條件:
// 統(tǒng)一給所有的UITabBatItem設置文字屬性
// 只有后面帶有UI_APPEARANCE_SELECTOR方法的才可以通過appearance來設置
UITabBarItem *item = [UITabBarItem appearance];
[item setTitleTextAttributes:normalAtrrs forState:UIControlStateNormal];
[item setTitleTextAttributes:selectedAtrrs forState:UIControlStateSelected];
- 控制器之間的關系
- 由上圖的關系可以知道下面注釋的代碼與沒注釋的代碼效果是一樣的
// 包裝一個導航控制器
UINavigationController *nav = [[UINavigationController alloc] initWithRootViewController:vc];
[self addChildViewController:nav];
nav.tabBarItem.title = title;
nav.tabBarItem.image = [UIImage imageNamed:image];
nav.tabBarItem.selectedImage = [UIImage imageNamed:selectedImage];
nav.view.backgroundColor = [UIColor colorWithRed:arc4random_uniform(100)/100.0 green:arc4random_uniform(100)/100.0 blue:arc4random_uniform(100)/100.0 alpha:1.0];
// vc.tabBarItem.title = title;
// vc.tabBarItem.image = [UIImage imageNamed:image];
// vc.tabBarItem.selectedImage = [UIImage imageNamed:selectedImage];
// vc.view.backgroundColor = [UIColor
colorWithRed:arc4random_uniform(100)/100.0 green:arc4random_uniform(100)/100.0 blue:arc4random_uniform(100)/100.0 alpha:1.0];
- 代碼抽取里的代碼嚴謹點替換成下面的代碼
/**
* 設置setUpChildVc的屬性赌蔑,添加所有的子控件
*/
- (void)setupChildVc:(UIViewController *)vc title:(NSString *)title image:(NSString *)image selectedImage:(NSString *)selectedImage
{
[self setUpChildVc:[[CYEssenceViewController alloc] init] title:@"精華" image:@"tabBar_essence_icon" selectedImage:@"tabBar_essence_click_icon"];
[self setUpChildVc:[[CYNewPostViewController alloc] init] title:@"新帖" image:@"tabBar_new_icon" selectedImage:@"tabBar_new_click_icon"];
[self setUpChildVc:[[CYFocusViewController alloc] init] title:@"關注" image:@"tabBar_friendTrends_icon" selectedImage:@"tabBar_friendTrends_click_icon"];
[self setUpChildVc:[CYMeViewController alloc] title:@"我" image:@"tabBar_me_icon" selectedImage:@"tabBar_me_click_icon"];
}
// 包裝一個導航控制器
UINavigationController *nav = [[UINavigationController alloc] initWithRootViewController:vc];
[self addChildViewController:nav];
nav.tabBarItem.title = title;
nav.tabBarItem.image = [UIImage imageNamed:image];
nav.tabBarItem.selectedImage = [UIImage imageNamed:selectedImage];
nav.view.backgroundColor = [UIColor colorWithRed:arc4random_uniform(100)/100.0 green:arc4random_uniform(100)/100.0 blue:arc4random_uniform(100)/100.0 alpha:1.0];
}
- 下面兩種方法都可以傳圖片
// 這樣傳圖片,它傳的圖片尺寸和原始尺寸一樣
self.navigationItem.titleView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"MainTitle"]];
// 這兩種方法所實現(xiàn)的效果是一樣的竟秫,但是很明顯用上面的
// UIImageView *titleView = [[UIImageView alloc] init];
// titleView.image = [UIImage imageNamed:@"MainTitle"];
// [titleView sizeToFit];
// self.navigationItem.titleView = titleView;
- 打油薰摺(獲取)window的三種方法:
NSLog(@"%@ %@ %@", self.view.superview, self.view.window, [UIApplication sharedApplication].keyWindow);
- 創(chuàng)建一個隨機色
nav.view.backgroundColor = [UIColor colorWithRed:arc4random_uniform(100)/100.0 green:arc4random_uniform(100)/100.0 blue:arc4random_uniform(100)/100.0 alpha:1.0];
- 小小注意點:
self.title =@"我的關注";
相當于下面兩句
self.navigationItem.title = @"我的關注";
self.tabBarItem.title = @"我的關注";
一般在公司項目開始開發(fā)時候肥败,你在公司會給你下面相關文檔
API\接口文檔
-
作用
- 跟服務器進行交互的文檔
-
格式
- HTML網(wǎng)頁
- word文檔
-
開發(fā)進度文檔
- 任務\進度
-
需求文檔
- 有哪些模塊
- 有哪些功能
- 大致的界面
-
原型圖
- 詳細的界面描述
- 界面的跳轉(zhuǎn)關系
- 源碼地址:https://github.com/Tuberose621/-APP-
- 界面之間跳轉(zhuǎn)后的返回鍵如何巧妙的設置呢趾浅?
- 已經(jīng)封裝好了,在另外的文章中有--《項目開發(fā)中封裝一個返回鍵--很實用》《項目開發(fā)中封裝一個BarButtonItem類別-很實用》