首页 > 学院 > 开发设计 > 正文

[iOSUI进阶-2.0]彩票Demov1.0

2019-11-14 19:41:46
字体:
来源:转载
供稿:网友
A.需求
1.模仿“网易彩票”做出有5个导航页面和相应功能的Demo
2.v1.0 版本搭建基本框架
 
code source:https://github.com/hellovoidworld/HelloLottery
Image
 
B.搭建基本框架
1.拖入TaBarController,5个NavigationController和对应的5个UIViewController
Image(296)
 
2.配置图标和启动画面
AppIcon直接拖入图片
LaunchImage在Xcode6中需要先更改启动图使用图库的图片,而不是LaunchImage.xib
6A490F17-B44B-454E-B38D-6DA56E05F17E
 
Image(297)
 
Image(298)
 
Image(299)
 
2.引入图片包
Image(300)
 
4. 按照模块分类代码包
Image(301)
 
3.底部导航--自定义TabBar
(1)基本设计
Image(302)
 
a.自定义HVWTabBarController、继承自UIView的HVWTabBar、继承UIButton的HVWTabBarButton
Image(303)
 
 
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 }

 

 
Image(304)
 
 
(2)封装TabBar代码
Image(305)
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导航栏主题设置
Image(306)
 
Image(307)
 
(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管理状态栏
设置不使用控制器控制状态栏
Image(308)
 
在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为此类
Image(309)
 
 
(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  
 
 

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表