首页 > 代码库 > [iOS UI进阶 - 2.0] 彩票Demo v1.0
[iOS UI进阶 - 2.0] 彩票Demo v1.0
A.需求
1.模仿“网易彩票”做出有5个导航页面和相应功能的Demo
2.v1.0 版本搭建基本框架
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:
1 // 覆盖setHighlighted,取消点击时的高亮状态2 - (void)setHighlighted:(BOOL)highlighted {3 // [super setHighlighted:highlighted];4 }
初步实现都在HVWTabBarController的viewDidLoad方法中:
1 - (void)viewDidLoad { 2 [super viewDidLoad]; 3 // Do any additional setup after loading the view. 4 5 // 1.删除原来的TabBar 6 [self.tabBar removeFromSuperview]; 7 8 // 2.添加自定义TabBar 9 HVWTabBar *hvwTabBar = [[HVWTabBar alloc] init];10 hvwTabBar.frame = self.tabBar.frame;11 hvwTabBar.backgroundColor = [UIColor greenColor]; // 设置绿色底的tabBar，稍后会被按钮图片覆盖12 [self.view addSubview:hvwTabBar];13 14 // 3.添加按钮15 for (int i=0; i<5; i++) {16 // 3.1创建按钮17 HVWTabBarButton *button = [HVWTabBarButton buttonWithType:UIButtonTypeCustom];18 button.tag = i;19 20 // 3.2设置按钮背景图片21 [button setBackgroundImage:[UIImage imageNamed:[NSString stringWithFormat:@"TabBar%d", i+1]] forState:UIControlStateNormal];22 23 [button setBackgroundImage:[UIImage imageNamed:[NSString stringWithFormat:@"TabBar%dSel", i+1]] forState:UIControlStateSelected];24 25 // 3.3设置frame26 CGFloat buttonWidth = hvwTabBar.frame.size.width / 5;27 CGFloat buttonHeight = hvwTabBar.frame.size.height;28 CGFloat buttonX = i * buttonWidth;29 CGFloat buttonY = 0;30 button.frame = CGRectMake(buttonX, buttonY, buttonWidth, buttonHeight);31 32 // 3.4添加到tabBar33 [hvwTabBar addSubview:button];34 35 // 3.5添加监听事件36 [button addTarget:self action:@selector(tabBarButtonClicked:) forControlEvents:UIControlEventTouchUpInside];37 38 // 3.6默认已经点击了第一个按钮39 if (i == 0) {40 [self tabBarButtonClicked:button];41 }42 }43 }44 45 - (void) tabBarButtonClicked:(HVWTabBarButton *) button {46 // 1.取消选中之前的按钮47 self.selectedButton.selected = NO;48 49 // 2.选中新点击的按钮50 button.selected = YES;51 52 // 3.设置为当前选中的按钮53 self.selectedButton = button;54 55 // 4.切换子控制器56 self.selectedIndex = button.tag;57 }
（2）封装TabBar代码
a.重写initWithFrame:创建初始化TabBar
b.移动子控件的初始化代码到layoutSubviews
c.通过代理转换Navigation页面
d.封装添加按钮函数
1 // 2 // HWTabBarController.m 3 // HelloLottery 4 // 5 // Created by hellovoidworld on 14/12/31. 6 // Copyright (c) 2014年 hellovoidworld. All rights reserved. 7 // 8 9 #import "HvWTabBarController.h"10 #import "HVWTabBar.h"11 #import "HVWTabBarButton.h"12 13 @interface HVWTabBarController () <HVWTabBarDelegate>14 15 @end16 17 @implementation HVWTabBarController18 19 - (void)viewDidLoad {20 [super viewDidLoad];21 // Do any additional setup after loading the view.22 23 // 1.删除原来的TabBar24 [self.tabBar removeFromSuperview];25 26 // 2.添加自定义TabBar27 HVWTabBar *hvwTabBar = [[HVWTabBar alloc] init];28 hvwTabBar.frame = self.tabBar.frame;29 hvwTabBar.backgroundColor = [UIColor greenColor]; // 设置绿色底的tabBar，稍后会被按钮图片覆盖30 hvwTabBar.delegate = self;31 [self.view addSubview:hvwTabBar];32 }33 34 - (void)didReceiveMemoryWarning {35 [super didReceiveMemoryWarning];36 // Dispose of any resources that can be recreated.37 }38 39 #pragma mark - HVWTabBarDelegate 代理方法40 - (void)hvwTabBar:(HVWTabBar *)hvwTabBar didClickedButtonFrom:(int)from to:(int)to {41 // 切换子控制器42 self.selectedIndex = to;43 }44 45 @end
1 // 2 // HVWTabBar.h 3 // HelloLottery 4 // 5 // Created by hellovoidworld on 14/12/31. 6 // Copyright (c) 2014年 hellovoidworld. All rights reserved. 7 // 8 9 #import <UIKit/UIKit.h>10 11 @class HVWTabBar;12 13 /** 代理协议 */14 @protocol HVWTabBarDelegate <NSObject>15 @optional16 - (void) hvwTabBar:(HVWTabBar *) hvwTabBar didClickedButtonFrom:(int) from to:(int) to;17 @end18 19 @interface HVWTabBar : UIView20 21 /** 代理 */22 @property(nonatomic, weak) id<HVWTabBarDelegate> delegate;23 24 @end
1 // 2 // HVWTabBar.m 3 // HelloLottery 4 // 5 // Created by hellovoidworld on 14/12/31. 6 // Copyright (c) 2014年 hellovoidworld. All rights reserved. 7 // 8 9 #import "HVWTabBar.h"10 #import "HVWTabBarButton.h"11 12 #define HVWTabBarButtonCount 513 14 @interface HVWTabBar()15 16 @property(nonatomic, weak) HVWTabBarButton *selectedButton;17 18 @end19 20 @implementation HVWTabBar21 22 // 重写initWithFrame方法，添加tabBar按钮23 - (instancetype)initWithFrame:(CGRect)frame {24 if (self = [super initWithFrame:frame]) {25 [self initButtons];26 }27 28 return self;29 }30 31 /** 初始化按钮 */32 - (void) initButtons {33 for (int i=0; i<HVWTabBarButtonCount; i++) {34 // 3.1创建按钮35 HVWTabBarButton *button = [HVWTabBarButton buttonWithType:UIButtonTypeCustom];36 button.tag = i;37 38 // 3.2设置按钮背景图片39 [button setBackgroundImage:[UIImage imageNamed:[NSString stringWithFormat:@"TabBar%d", i+1]] forState:UIControlStateNormal];40 41 [button setBackgroundImage:[UIImage imageNamed:[NSString stringWithFormat:@"TabBar%dSel", i+1]] forState:UIControlStateSelected];42 43 // 3.3添加到tabBar44 [self addSubview:button];45 46 // 3.4添加监听事件47 [button addTarget:self action:@selector(tabBarButtonClicked:) forControlEvents:UIControlEventTouchUpInside];48 49 // 3.5默认已经点击了第一个按钮50 if (i == 0) {51 [self tabBarButtonClicked:button];52 }53 }54 }55 56 /** 初始化子控件的位置尺寸 */57 - (void)layoutSubviews {58 [super layoutSubviews];59 60 for (int i=0; i<HVWTabBarButtonCount; i++) {61 HVWTabBarButton *button = self.subviews[i];62 CGFloat buttonWidth = self.frame.size.width / 5;63 CGFloat buttonHeight = self.frame.size.height;64 CGFloat buttonX = i * buttonWidth;65 CGFloat buttonY = 0;66 button.frame = CGRectMake(buttonX, buttonY, buttonWidth, buttonHeight);67 }68 }69 70 - (void) tabBarButtonClicked:(HVWTabBarButton *) button {71 // 1.调用代理方法，通知TabBarController切换子控制器72 if ([self.delegate respondsToSelector:@selector(hvwTabBar:didClickedButtonFrom:to:)]) {73 [self.delegate hvwTabBar:self didClickedButtonFrom:self.selectedButton.tag to:button.tag];74 }75 76 // 2.取消选中之前的按钮77 self.selectedButton.selected = NO;78 79 // 3.选中新点击的按钮80 button.selected = YES;81 82 // 4.设置为当前选中的按钮83 self.selectedButton = button;84 }85 86 @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中设置：
1 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {2 // Override point for customization after application launch.3 4 // 设置状态栏样式为白色5 application.statusBarStyle = UIStatusBarStyleLightContent;6 7 return YES;8 }
（2）创建自定义NavigationController类，并设置5个Navigation控制器的class为此类
（3）不要删除原来的tabBar，而是覆盖它，才能控制push事件中底部导航栏
HVWTabBarController:
1 - (void)viewDidLoad { 2 [super viewDidLoad]; 3 // Do any additional setup after loading the view. 4 5 // 1.添加自定义TabBar 6 HVWTabBar *hvwTabBar = [[HVWTabBar alloc] init]; 7 hvwTabBar.frame = self.tabBar.bounds; 8 hvwTabBar.delegate = self; 9 10 // 2.设置tabBar11 [self.tabBar addSubview:hvwTabBar];12 }
（4）在NavigationController中编写类初始化方法和重写push方法
1 // 2 // HVWNavigationController.m 3 // HelloLottery 4 // 5 // Created by hellovoidworld on 15/1/1. 6 // Copyright (c) 2015年 hellovoidworld. All rights reserved. 7 // 8 9 #import "HVWNavigationController.h"10 11 12 @interface HVWNavigationController ()13 14 @end15 16 @implementation HVWNavigationController17 18 - (void)viewDidLoad {19 [super viewDidLoad];20 // Do any additional setup after loading the view.21 22 }23 24 - (void)didReceiveMemoryWarning {25 [super didReceiveMemoryWarning];26 // Dispose of any resources that can be recreated.27 }28 29 /** 类初始化方法，仅调用一次 */30 + (void) initialize {31 // 获取能够控制所有NavigationBar的实例32 UINavigationBar *navBar = [UINavigationBar appearance];33 34 // 设置背景图片35 NSString *bgImageName;36 if (iOS7) { // 在HelloLottery-Prefix.pch中定义了判断iOS版本的全局变量37 bgImageName = @"NavBar64";38 } else {39 bgImageName = @"NavBar";40 }41 42 [navBar setBackgroundImage:[UIImage imageNamed:bgImageName] forBarMetrics:UIBarMetricsDefault];43 44 // 设置文本45 NSMutableDictionary *attr = [NSMutableDictionary dictionary];46 attr[NSForegroundColorAttributeName] = [UIColor whiteColor];47 attr[NSFontAttributeName] = [UIFont systemFontOfSize:16];48 [navBar setTitleTextAttributes:attr];49 }50 51 // 拦截所有的push操作52 - (void)pushViewController:(UIViewController *)viewController animated:(BOOL)animated {53 viewController.hidesBottomBarWhenPushed = YES; // 这是原来NavigationController中的tabBar，所以要设置自定义的tabBar为Navigation中的tabBar54 [super pushViewController:viewController animated:YES];55 }56 57 @end58
[iOS UI进阶 - 2.0] 彩票Demo v1.0
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。