[iOS UI進階 - 2.0] 彩票Demo v1.0

A.需求

1.模仿“網易彩票”做出有5個導航頁面和相應功能的Demo

2.v1.0 版本搭建基本框架

 

code source:https://github.com/hellovoidworld/HelloLottery

 

B.搭建基本框架

1.拖入TaBarController，5個NavigationController和對應的5個UIViewController

 

2.配置圖標和啟動畫面

AppIcon直接拖入圖片

LaunchImage在Xcode6中需要先更改啟動圖使用圖庫的圖片，而不是LaunchImage.xib

 

 

 

 

2.引入圖片包

 

4. 按照模塊分類代碼包

 

3.底部導航--自定義TabBar

（1）基本設計

 

a.自定義HVWTabBarController、繼承自UIView的HVWTabBar、繼承UIButton的HVWTabBarButton

 

 

b.在自定義TabBar控制器viewDidLoad，刪除原來的TabBar，加上自定義的TabBar

c.加入自定義的按鈕圖片、選中圖片

d.選中事件，轉換圖片

e.按下馬上激發按鈕激發

重寫TabBarButton的[button setHighlighted:]取消高亮狀態

HVWTabBarButton:

// 覆蓋setHighlighted,取消點擊時的高亮狀態
- (void)setHighlighted:(BOOL)highlighted {
//    [super setHighlighted:highlighted];
}

 

初步實現都在HVWTabBarController的viewDidLoad方法中:

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
   
    // 1.刪除原來的TabBar
    [self.tabBar removeFromSuperview];
   
    // 2.添加自定義TabBar
    HVWTabBar *hvwTabBar = [[HVWTabBar alloc] init];
    hvwTabBar.frame = self.tabBar.frame;
    hvwTabBar.backgroundColor = [UIColor greenColor]; // 設置綠色底的tabBar，稍后會被按鈕圖片覆蓋
    [self.view addSubview:hvwTabBar];
   
    // 3.添加按鈕
    for (int i=0; i<5; i++) {
        // 3.1創建按鈕
        HVWTabBarButton *button = [HVWTabBarButton buttonWithType:UIButtonTypeCustom];
        button.tag = i;

        // 3.2設置按鈕背景圖片
        [button setBackgroundImage:[UIImage imageNamed:[NSString stringWithFormat:@"TabBar%d", i+1]] forState:UIControlStateNormal];
       
        [button setBackgroundImage:[UIImage imageNamed:[NSString stringWithFormat:@"TabBar%dSel", i+1]]  forState:UIControlStateSelected];
       
        // 3.3設置frame
        CGFloat buttonWidth = hvwTabBar.frame.size.width / 5;
        CGFloat buttonHeight = hvwTabBar.frame.size.height;
        CGFloat buttonX = i * buttonWidth;
        CGFloat buttonY = 0;
        button.frame = CGRectMake(buttonX, buttonY, buttonWidth, buttonHeight);
       
        // 3.4添加到tabBar
        [hvwTabBar addSubview:button];
       
        // 3.5添加監聽事件
        [button addTarget:self action:@selector(tabBarButtonClicked:) forControlEvents:UIControlEventTouchUpInside];
       
        // 3.6默認已經點擊了第一個按鈕
        if (i == 0) {
            [self tabBarButtonClicked:button];
        }
    }
}

- (void) tabBarButtonClicked:(HVWTabBarButton *) button {
    // 1.取消選中之前的按鈕
    self.selectedButton.selected = NO;
   
    // 2.選中新點擊的按鈕
    button.selected = YES;
   
    // 3.設置為當前選中的按鈕
    self.selectedButton = button;
   
    // 4.切換子控制器
    self.selectedIndex = button.tag;
}

 

 

 

 

（2）封裝TabBar代碼

a.重寫initWithFrame:創建初始化TabBar

b.移動子控件的初始化代碼到layoutSubviews

c.通過代理轉換Navigation頁面

d.封裝添加按鈕函數

//
//  HWTabBarController.m
//  HelloLottery
//
//  Created by hellovoidworld on 14/12/31.
//  Copyright (c) 2014年 hellovoidworld. All rights reserved.
//

#import "HvWTabBarController.h"
#import "HVWTabBar.h"
#import "HVWTabBarButton.h"

@interface HVWTabBarController () <HVWTabBarDelegate>

@end

@implementation HVWTabBarController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
   
    // 1.刪除原來的TabBar
    [self.tabBar removeFromSuperview];
   
    // 2.添加自定義TabBar
    HVWTabBar *hvwTabBar = [[HVWTabBar alloc] init];
    hvwTabBar.frame = self.tabBar.frame;
    hvwTabBar.backgroundColor = [UIColor greenColor]; // 設置綠色底的tabBar，稍后會被按鈕圖片覆蓋
    hvwTabBar.delegate = self;
    [self.view addSubview:hvwTabBar];
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

#pragma mark - HVWTabBarDelegate 代理方法
- (void)hvwTabBar:(HVWTabBar *)hvwTabBar didClickedButtonFrom:(int)from to:(int)to {
    // 切換子控制器
    self.selectedIndex = to;
}

@end

 

//
//  HVWTabBar.h
//  HelloLottery
//
//  Created by hellovoidworld on 14/12/31.
//  Copyright (c) 2014年 hellovoidworld. All rights reserved.
//

#import <UIKit/UIKit.h>

@class HVWTabBar;

/** 代理協議 */
@protocol HVWTabBarDelegate <NSObject>
@optional
- (void) hvwTabBar:(HVWTabBar *) hvwTabBar didClickedButtonFrom:(int) from to:(int) to;
@end

@interface HVWTabBar : UIView

/** 代理 */
@property(nonatomic, weak) id<HVWTabBarDelegate> delegate;

@end

 

//
//  HVWTabBar.m
//  HelloLottery
//
//  Created by hellovoidworld on 14/12/31.
//  Copyright (c) 2014年 hellovoidworld. All rights reserved.
//

#import "HVWTabBar.h"
#import "HVWTabBarButton.h"

#define HVWTabBarButtonCount 5

@interface HVWTabBar()

@property(nonatomic, weak) HVWTabBarButton *selectedButton;

@end

@implementation HVWTabBar

// 重寫initWithFrame方法，添加tabBar按鈕
- (instancetype)initWithFrame:(CGRect)frame {
    if (self = [super initWithFrame:frame]) {
        [self initButtons];
    }
   
    return self;
}

/** 初始化按鈕 */
- (void) initButtons {
    for (int i=0; i<HVWTabBarButtonCount; i++) {
        // 3.1創建按鈕
        HVWTabBarButton *button = [HVWTabBarButton buttonWithType:UIButtonTypeCustom];
        button.tag = i;
       
        // 3.2設置按鈕背景圖片
        [button setBackgroundImage:[UIImage imageNamed:[NSString stringWithFormat:@"TabBar%d", i+1]] forState:UIControlStateNormal];
       
        [button setBackgroundImage:[UIImage imageNamed:[NSString stringWithFormat:@"TabBar%dSel", i+1]]  forState:UIControlStateSelected];
       
        // 3.3添加到tabBar
        [self addSubview:button];
       
        // 3.4添加監聽事件
        [button addTarget:self action:@selector(tabBarButtonClicked:) forControlEvents:UIControlEventTouchUpInside];
       
        // 3.5默認已經點擊了第一個按鈕
        if (i == 0) {
            [self tabBarButtonClicked:button];
        }
    }
}

/** 初始化子控件的位置尺寸 */
- (void)layoutSubviews {
    [super layoutSubviews];
   
    for (int i=0; i<HVWTabBarButtonCount; i++) {
        HVWTabBarButton *button = self.subviews[i];
        CGFloat buttonWidth = self.frame.size.width / 5;
        CGFloat buttonHeight = self.frame.size.height;
        CGFloat buttonX = i * buttonWidth;
        CGFloat buttonY = 0;
        button.frame = CGRectMake(buttonX, buttonY, buttonWidth, buttonHeight);
    }
}

- (void) tabBarButtonClicked:(HVWTabBarButton *) button {
    // 1.調用代理方法，通知TabBarController切換子控制器
    if ([self.delegate respondsToSelector:@selector(hvwTabBar:didClickedButtonFrom:to:)]) {
        [self.delegate hvwTabBar:self didClickedButtonFrom:self.selectedButton.tag to:button.tag];
    }
   
    // 2.取消選中之前的按鈕
    self.selectedButton.selected = NO;
   
    // 3.選中新點擊的按鈕
    button.selected = YES;
   
    // 4.設置為當前選中的按鈕
    self.selectedButton = button;
}

@end

 

4.頭部Navigation導航欄主題設置

 

 

（1）讓applicatoin管理狀態欄

（2）Navigation導航欄背景圖片

（3）統一設置所有Navigation導航欄

[UINavigationBar appearance]; // 所有Navigation導航欄（頭部導航欄）

（4）設置所有Navigation導航欄字體顏色

（5）根據系統版本，設置Navigation導航欄背景圖片

 

（6）在二級頁面隱藏底部導航條，重寫導航控制器的push方法

a.自定義一個導航控制器HVWNavigationController類，重寫push，隱藏底部導航欄

b.設置為每個NavigationController的class

c.導航控制器類的initialize只會在類第一次使用的時候調用一次

所以，導航欄的主題設置可以放在initialize方法中

 

解決：

（1）使用application管理狀態欄

設置 不使用控制器控制狀態欄

 

在AppDelegate中設置：

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    // Override point for customization after application launch.
   
    // 設置狀態欄樣式為白色
    application.statusBarStyle = UIStatusBarStyleLightContent;
   
    return YES;
}

 

（2）創建自定義NavigationController類，並設置5個Navigation控制器的class為此類

 

 

（3）不要刪除原來的tabBar，而是覆蓋它，才能控制push事件中底部導航欄

HVWTabBarController:

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
   
    // 1.添加自定義TabBar
    HVWTabBar *hvwTabBar = [[HVWTabBar alloc] init];
    hvwTabBar.frame = self.tabBar.bounds;
    hvwTabBar.delegate = self;
   
    // 2.設置tabBar
    [self.tabBar addSubview:hvwTabBar];
}

 

（4）在NavigationController中編寫類初始化方法和重寫push方法

//
//  HVWNavigationController.m
//  HelloLottery
//
//  Created by hellovoidworld on 15/1/1.
//  Copyright (c) 2015年 hellovoidworld. All rights reserved.
//

#import "HVWNavigationController.h"


@interface HVWNavigationController ()

@end

@implementation HVWNavigationController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
   
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

/** 類初始化方法，僅調用一次 */
+ (void) initialize {
    // 獲取能夠控制所有NavigationBar的實例
    UINavigationBar *navBar = [UINavigationBar appearance];
   
    // 設置背景圖片
    NSString *bgImageName;
    if (iOS7) { // 在HelloLottery-Prefix.pch中定義了判斷iOS版本的全局變量
        bgImageName = @"NavBar64";
    } else {
        bgImageName = @"NavBar";
    }
   
    [navBar setBackgroundImage:[UIImage imageNamed:bgImageName] forBarMetrics:UIBarMetricsDefault];
   
    // 設置文本
    NSMutableDictionary *attr = [NSMutableDictionary dictionary];
    attr[NSForegroundColorAttributeName] = [UIColor whiteColor];
    attr[NSFontAttributeName] = [UIFont systemFontOfSize:16];
    [navBar setTitleTextAttributes:attr];
}

// 攔截所有的push操作
- (void)pushViewController:(UIViewController *)viewController animated:(BOOL)animated {
    viewController.hidesBottomBarWhenPushed = YES; // 這是原來NavigationController中的tabBar，所以要設置自定義的tabBar為Navigation中的tabBar
    [super pushViewController:viewController animated:YES];
}

@end