[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设置frame
26         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添加到tabBar
33         [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 @end
16
17 @implementation HVWTabBarController
18
19 - (void)viewDidLoad {
20     [super viewDidLoad];
21     // Do any additional setup after loading the view.
22
23     // 1.删除原来的TabBar
24     [self.tabBar removeFromSuperview];
25
26     // 2.添加自定义TabBar
27     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 @optional
16 - (void) hvwTabBar:(HVWTabBar *) hvwTabBar didClickedButtonFrom:(int) from to:(int) to;
17 @end
18
19 @interface HVWTabBar : UIView
20
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 5
13
14 @interface HVWTabBar()
15
16 @property(nonatomic, weak) HVWTabBarButton *selectedButton;
17
18 @end
19
20 @implementation HVWTabBar
21
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添加到tabBar
44         [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.设置tabBar
11     [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 @end
15
16 @implementation HVWNavigationController
17
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中的tabBar
54     [super pushViewController:viewController animated:YES];
55 }
56
57 @end
58  
时间: 12-31

[iOS UI进阶 - 2.0] 彩票Demo v1.0的相关文章

[iOS UI进阶 - 2.1] 彩票Demo v1.1

A.需求 1.优化项目设置 2.自定义导航栏标题按钮 3.多版本处理 4.iOS6和iOS7的适配 5.设置按钮背景 6.设置值UIBarButtonItem样式 B.实现 1.项目配置 (1)程序启动期间隐藏状态栏 (2)程序启动完成显示状态栏 AppDelegate: 1 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {

[iOS UI进阶 - 2.4] 彩票Demo v1.4 转盘动画

A.需求 幸运广场界面中有一个幸运转盘,平时能够自动缓缓转动 能够选择星座 点击“开始选号”开速旋转转盘,旋转一定周数 转盘转动速度节奏:开始-慢-块-慢-结束 设置其余的背景和按钮 code source: 彩票Demo https://github.com/hellovoidworld/HelloLottery 转盘Demo https://github.com/hellovoidworld/LuckyWheelDemo B.实现 1.使用xib设计转盘 2.自定义类 (1)自定义一个继承U

[iOS UI进阶 - 2.3] 彩票Demo v1.3

A.需求 真机调试 "关于”模块 存储开关状态 打电话.发短信 应用评分 打开其他应用 cell 在iOS6 和 iOS7的适配 block的循环引用 屏幕适配 code source:  code source: https://github.com/hellovoidworld/HelloLottery B.iOS真机测试小功能 (1)打电话 a.方法1 最简单最直接的方式:直接跳到拨号界面 1 NSURL *url = [NSURL URLWithString:@"tel://1

[iOS UI进阶 - 2.2] 彩票Demo v1.2 UICollectionView基本

A.需要掌握的 设计.实现设置界面 cell的封装 UICollectionView的使用 自定义UICollectionView 抽取控制器父类 “帮助”功能 code source: https://github.com/hellovoidworld/HelloLottery B.实现 1.探讨“设置”界面的实现方案 (1)“设置”界面可以采用的做法 static cell(呆板,完全没有动态) 使用代码,条件判断逐个编写(麻烦,代码冗长) 使用模型.plist加载(能够动态配置跳转控制器,

iOS UI进阶05

Quartz2D Quartz2D是二维的绘图引擎 经包装的函数库,方便开发者使用.也就是说苹果帮我们封装了一套绘图的函数库 用Quartz2D写的同一份代码,既可以运行在iphone上又可以运行在mac上,可以跨平台开发. 开发中比较常用的是截屏/裁剪/自定义UI控件. Quartz2D在iOS开发中的价值就是自定义UI控件. 在drawRect:方法中才能获取到上下文 Quartz2D绘图 自定义view:需要绘图,就必须重写drawRect:方法 1 drawRect视图要显示的时候,才会

iOS UI进阶-1.0网易彩票框架搭建

仿网易彩票,最终要做成的效果如下: 一.分层搭建 1.新建一个项目,Lottery.只支持7.1以上坚屏. 2.将素材全部图片全部拉到相应的文件夹里. 3.选中Lottery--右键Show in Finder ,在Lottery文件夹下新建一个Classes,并分别分层成MVC文件夹. 4.把Classes拉到Lottery项目里,整个框架结构如 二.UI搭建 分层好之后,接下来,我们搭建一下界面.使用Storyboard进行搭建. 1.点击Main.storyboard,删除原来的界面,分别

[iOS UI进阶 - 4.0] 涂鸦app Demo

A.需求 1.超简易画图,只有一种画笔 2.清屏功能 3.回退功能 4.保存功能 5.使用了cocos2D code source: https://github.com/hellovoidworld/PaintDemo B.实现方法1 1.基本界面 (1)3个按钮:清屏.回退.保存 (2)绘图view 2.画线 (1)使用数组存储绘图点:存储一条线的数组.存储所有线的总数组 (2)在touch的开始.拖曳.结束记录触摸位置,触发重绘 3.清屏 删除总数组 4.回退 删除最后画的一条线:删除相应

[iOS UI进阶 - 5.0] 手势解锁Demo

A.需求 1.九宫格手势解锁 2.使用了绘图和手势事件 code source: https://github.com/hellovoidworld/GestureUnlockDemo B.实现 使用按钮来处理每个圆点 使用代码生成按钮 取消按钮点击事件 设置普通状态和选中状态的背景图片 CGRectContainsPoint,移动到按钮范围内改变按钮为选中状态 按钮的连接:使用数组存储被选中的所有按钮,画上连线 已经连线的按钮不需要再连线 触摸结束清空连线和按钮选中状态 移动中也要画出线,最后

[iOS UI进阶 - 0] Quiartz2D

A.简介 1. 需要掌握的 drawRect:方法的使用 常见图形的绘制:线条.多边形.圆 绘图状态的设置:文字颜色.线宽等 图形上下文状态的保存与恢复 图形上下文栈 1.基本图形绘制* 线段(线宽.线段样式)* 矩形(空心.实心.颜色)* 三角形.梯形等形状* 椭圆\圆* 圆弧* 文字绘制* 图片绘制(pattern)* 图形上下文栈 2.练习(画人) 3.模仿UIImageView 4.自定义checkbox 5.图片裁剪 6.图片水印 7.条纹背景 8.截图     2.概念 Quartz