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

A.需求

1.优化项目设置

2.自定义导航栏标题按钮

3.多版本处理

4.iOS6和iOS7的适配

5.设置按钮背景

6.设置值UIBarButtonItem样式

 

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

 

B.实现

1.项目配置

（1）程序启动期间隐藏状态栏

 

（2）程序启动完成显示状态栏

AppDelegate:

 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
     // Override point for customization after application launch.

     // 设置状态栏样式为白色
     application.statusBarHidden = NO;
     application.statusBarStyle = UIStatusBarStyleLightContent;

     return YES;
 }

 

（3）取消渲染app图标（取消系统渲染效果）

 

 

2.自定义导航栏标题按钮

“购彩大厅”右上角的“咨询”按钮是图标+文字型的

 

 

（1）UIBarButtonItem在storyboard中只能选择文字或者图片之一（注意NavigationBar内只能放UIBarButtonItem）

 

（2）UIBarButtonItem可以包含其他控件，这里我们使用UIButton

 

（3）设置宽度、内间距

 

 

 

3.“合买跟单”导航栏主题点击下拉菜单

 

 

（1）使用UIButton作为title item

 

（2）自定义UIButton，交换按钮title和image的位置，实现titleRectForContentRect和imageRectForContentRect，控制内部控件的frame

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

 #import "TitleExtendButton.h"

 @interface TitleExtendButton()

 @property(nonatomic, strong) UIFont *titleFont;

 @end

 @implementation TitleExtendButton

 /** 从文件加载对象就会调用此方法，例如xib和storybard */
 - (id)initWithCoder:(NSCoder *)aDecoder {
     NSLog(@"从文件加载TitleButton");
     if (self = [super initWithCoder:aDecoder]) {
         [self initializeButton];
     }

     return self;
 }

 /** 从代码中加载对象就会调用此方法 */
 - (instancetype)initWithFrame:(CGRect)frame {
     NSLog(@"从代码加载TitleButton");
     if (self = [super initWithFrame:frame]) {
         [self initializeButton];
     }

     return self;
 }

 - (void) initializeButton {
     // 设置font
     self.titleFont = [UIFont systemFontOfSize:]; // 暂时先自定义font
     self.titleLabel.font = self.titleFont;

     // 图标居中
     [self.imageView setContentMode:UIViewContentModeCenter];
 }

 /** 返回title的frame */
 - (CGRect)titleRectForContentRect:(CGRect)contentRect {
     CGFloat titleX = ;
     CGFloat titleY = ;

     NSDictionary *attr = @{NSFontAttributeName : self.titleFont};
     CGFloat titleWidth;

     // 只有 iOS7 版本以上才能运行以下代码
     if (iOS7) {
         // 只有 Xcode5 或以上版本才能识别这段代码
 #ifdef __IPHONE_7_0
     titleWidth = [self.currentTitle boundingRectWithSize:CGSizeMake(MAXFLOAT, MAXFLOAT) options:NSStringDrawingUsesLineFragmentOrigin attributes:attr context:nil].size.width;
 #else
         titleWidth = [self.currentTitle sizeWithFont:self.titleFont].width;
 #endif
     } else { // 否则使用旧的API
         titleWidth = [self.currentTitle sizeWithFont:self.titleFont].width;
     }

     CGFloat titleHeight = contentRect.size.height;

     return CGRectMake(titleX, titleY, titleWidth, titleHeight);
 }

 /** 返回image的frame */
 - (CGRect)imageRectForContentRect:(CGRect)contentRect {
     CGFloat imageWidth = ;
     CGFloat imageHeight = contentRect.size.height;
     CGFloat imageX = contentRect.size.width - imageWidth;
     CGFloat imageY = ;
     return CGRectMake(imageX, imageY, imageWidth, imageHeight);
 }

 @end

 

 

（3）自定义一个集成UIViewController的类，设置为该页面的控制器类，拖线监听title item点击事件

a.按钮效果（“三角形”下拉效果旋转）

 

 

 

b.创建一个UIView，点击下拉显示，再次点击隐藏

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

 #import "HVWBuyViewController.h"
 #import "TitleExtendButton.h"

 @interface HVWBuyViewController ()

 @property(nonatomic, weak) UIView *popupView;

 /** 标题点击事件 */
 - (IBAction)titleClicked:(TitleExtendButton *)sender;

 @end

 @implementation HVWBuyViewController

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

 }

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

 /** 延迟初始化弹出view
 * （发现放在viewDidLoad的时候，在点击按钮调用的时候pupupView的frame没有被初始化）
 */
 - (UIView *)popupView {
     if (_popupView == nil) {
         // 初始化弹出view
         UIView *popupView = [[UIView alloc] init];
         CGFloat popupViewX = ;
         CGFloat popupViewY = [UIApplication sharedApplication].statusBarFrame.size.height + self.navigationController.navigationBar.frame.size.height;
         CGFloat popupViewWidth = self.navigationController.navigationBar.frame.size.width;
         CGFloat popupViewHeight = self.view.frame.size.height - popupViewY - self.tabBarController.tabBar.frame.size.height;
         popupView.frame = CGRectMake(popupViewX, popupViewY, popupViewWidth, popupViewHeight);
         popupView.backgroundColor = [UIColor grayColor];

         UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(, , , )];
         label.text = @"这是全部彩种de弹出内容";
         [popupView addSubview:label];

         self.popupView = popupView;
         NSLog(@"%@", NSStringFromCGRect(self.popupView.frame));
     }

     return _popupView;
 }

 /** 标题点击事件
 * 转换箭头方向
 * 伸缩内容
 */
 - (IBAction)titleClicked:(TitleExtendButton *)sender {
     [UIView animateWithDuration:0.5 animations:^{
         // 按钮旋转
         sender.imageView.transform = CGAffineTransformRotate(sender.imageView.transform, M_PI);
     }];

     // 弹出view
     if (![self.popupView isDescendantOfView:self.view]) {
         [self.view addSubview:self.popupView];
     } else {
         [self.popupView removeFromSuperview];
     }
 }
 @end

 

 

4.view的初始化方法

（1）awakeFromNib和initWithCoder:差别

awakeFromNib 从xib或者storyboard加载完毕就会调用

initWithCoder: 只要对象是从文件解析来的，就会调用

同时存在会先调用initWithCoder:

 

（2）initWithCoder: & initWithFrame:

initWithCoder：使用文件加载的对象调用（如从xib或stroyboard中创建）

initWithFrame：使用代码加载的对象调用（使用纯代码创建）

     注意：所以为了同时兼顾从文件和从代码解析的对象初始化，要同时在initWithCoder: 和 initWithFrame: 中进行初始化

 

5.使用不同版本Xcode编译代码的时候，进行适配

#import <Availability.h> 定义了SDK版本的宏

 #define __IPHONE_2_0     20000
 #define __IPHONE_2_1     20100
 #define __IPHONE_2_2     20200
 #define __IPHONE_3_0     30000
 #define __IPHONE_3_1     30100
 #define __IPHONE_3_2     30200
 #define __IPHONE_4_0     40000
 #define __IPHONE_4_1     40100
 #define __IPHONE_4_2     40200
 #define __IPHONE_4_3     40300
 #define __IPHONE_5_0     50000
 #define __IPHONE_5_1     50100
 #define __IPHONE_6_0     60000
 #define __IPHONE_6_1     60100
 #define __IPHONE_7_0     70000
 #define __IPHONE_7_1     70100
 #define __IPHONE_8_0     80000
 #define __IPHONE_8_1     80100

 

6.iOS6 和 iOS7 的简单适配

由于iOS6及之前的版本，屏幕view的位置尺寸是需要去掉状态栏、导航栏等的位置尺寸的

而iOS7及之后的版本，屏幕view的位置尺寸默认是占据了整个屏幕

这里需要设置iOS6 和 iOS7， 控制view的frame坐标原点都是一样的

（1）iOS7 中 view的扩展效果

iOS7其实是增加了一个扩展属性，才能将屏幕view扩展到全屏幕

由于不是TableController或者ScrollController的view不需要滚动，所以不需要进行扩展

扩展属性：self.edgesForExtendedLayout

 

在storyboard修改扩展属性，取消扩展，默认使用iOS6的做法:

修改控制器的属性

 

取消勾选之后，会发现图片位置的Y是从导航栏下端开始的（跟iOS6一致）

 

运行效果：

 

#mark：由于系统是OXS10.10.1， Xcode6.1.1，这里我没有iOS6的模拟器，暂时试验不了iOS6的运行情况

 

（2）启动图的大小会决定app运行的大小

使用较小的启动图在较大尺寸的设备上运行，会出现黑边

     例如在4英寸的设备上使用iOS6进行模拟，却最大只有3.5英寸 retina（2x）的图片，最后显示的效果就是3.5英寸设备的显示效果

 

给运行iOS6的4英寸设备增加retina4（4英寸retina）的启动图片

 

 

#mark：新出的iphone6（4.7英寸）和 iphone6 plus（5.5英寸）使用哪个尺寸的启动图片？

#A：经过试验证明是使用了 retina 4 的启动图，如果不存在就会使用 2x 的启动图，会造成上述的黑边效果

 

删掉 retina 4 的启动图

 

运行：

 

开启后：

 

 

7.设置按钮的背景

（1）背景图片拉伸方式（从中间某段开始拉伸）

     之前在“聊天Demo”中，曾经使用过代码来设置UIImageView的图片拉伸方式（聊天框背景），其实UIImageView也可以在storyboard中进行拉伸设置:

 

Stretching（拉伸）:

x: 左边需要保护的比例（右边由width影响）

y: 上边需要保护的比例（下边由height影响）

width：除去左边需要保护的部分，拉伸宽度部分的比例（0代表1像素）

height：除去上边需要保护的部分，拉伸高度部分的比例（0代表1像素）

 

在这里我们需要对一个UIButton进行拉伸，但是storyboard不能对UIButton进行此操作，会无效

 

----->所以需要使用代码来进行设置

stretchableImageWithLeftCapWidth

做成UIImage的一个分类方法

 //
 //  UIImage+Extend.m
 //  HelloLottery
 //
 //  Created by hellovoidworld on 15/1/3.
 //  Copyright (c) 2015年 hellovoidworld. All rights reserved.
 //

 #import "UIImage+Extend.h"

 @implementation UIImage(Extend)

 /**  返回一个中心扩展拉伸的图片 */
 + (UIImage *) resizableImage:(NSString *) imageName {
     UIImage *image = [UIImage imageNamed:imageName];

     // 这个参数决定了左边的保护区域，右边的保护区域为左边+1开始到末端
     CGFloat width = image.size.width * 0.5;

     // 原理同左右保护区域
     CGFloat height = image.size.height * 0.5;

     // 也就是，取中间1x1的区域作为扩展区域
     return [image stretchableImageWithLeftCapWidth:width topCapHeight:height];
 }

 @end

 

（2）在登陆控制器中设置按钮样式

 

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

 #import "HVWLoginViewController.h"
 #import "UIImage+Extend.h"

 @interface HVWLoginViewController ()

 /** 登陆按钮 */
 @property (weak, nonatomic) IBOutlet UIButton *loginButton;

 @end

 @implementation HVWLoginViewController

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

     UIImage *normal = [UIImage resizableImage:@"RedButton"];
     UIImage *highlighted = [UIImage resizableImage:@"RedButtonPressed"];

     [self.loginButton setBackgroundImage:normal forState:UIControlStateNormal];
     [self.loginButton setBackgroundImage:highlighted forState:UIControlStateHighlighted];
 }

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

 @end

 

 

 

 

8.storyboard添加“设置”界面（暂时演示用）

"我的彩票" --> 右上角 "设置"

使用TableViewController

使用static cell显示内容

使用“customer”为cell的样式，自行拖入image、label和switch等

 

 

9.设置按钮主题，统一设置Navigation导航栏按钮样式