[iOS UI進階 - 2.1] 彩票Demo v1.1

時間 2019-11-21

標籤 ios 進階 2.1 demo v1.1 欄目 iOS 简体版

原文原文鏈接

A.需求

1.優化項目設置

2.自定義導航欄標題按鈕

3.多版本處理

4.iOS6和iOS7的適配

5.設置按鈕背景

6.設置值UIBarButtonItem樣式

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

B.實現

1.項目配置

（1）程序啓動期間隱藏狀態欄

（2）程序啓動完成顯示狀態欄

AppDelegate:

1 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
2     // Override point for customization after application launch.
3    
4     // 設置狀態欄樣式爲白色
5     application.statusBarHidden = NO;
6     application.statusBarStyle = UIStatusBarStyleLightContent;
7    
8     return YES;
9 }

（3）取消渲染app圖標（取消系統渲染效果）

2.自定義導航欄標題按鈕

「購彩大廳」右上角的「諮詢」按鈕是圖標+文字型的

（1） UIBarButtonItem在storyboard中只能選擇文字或者圖片之一（注意NavigationBar內只能放UIBarButtonItem）

（2） UIBarButtonItem能夠包含其餘控件，這裏咱們使用UIButton

（3）設置寬度、內間距

3.「合買跟單」導航欄主題點擊下拉菜單

（1）使用UIButton做爲title item

（2）自定義UIButton，交換按鈕title和image的位置，實現titleRectForContentRect和imageRectForContentRect，控制內部控件的frame

 1 //
 2 //  TitleExtendButton.m
 3 //  HelloLottery
 4 //
 5 //  Created by hellovoidworld on 15/1/3.
 6 //  Copyright (c) 2015年 hellovoidworld. All rights reserved.
 7 //
 8 
 9 #import "TitleExtendButton.h"
10 
11 @interface TitleExtendButton()
12 
13 @property(nonatomic, strong) UIFont *titleFont;
14 
15 @end
16 
17 @implementation TitleExtendButton
18 
19 /** 從文件加載對象就會調用此方法，例如xib和storybard */
20 - (id)initWithCoder:(NSCoder *)aDecoder {
21     NSLog(@"從文件加載TitleButton");
22     if (self = [super initWithCoder:aDecoder]) {
23         [self initializeButton];
24     }
25 
26     return self;
27 }
28 
29 /** 從代碼中加載對象就會調用此方法 */
30 - (instancetype)initWithFrame:(CGRect)frame {
31     NSLog(@"從代碼加載TitleButton");
32     if (self = [super initWithFrame:frame]) {
33         [self initializeButton];
34     }
35    
36     return self;
37 }
38 
39 - (void) initializeButton {
40     // 設置font
41     self.titleFont = [UIFont systemFontOfSize:14]; // 暫時先自定義font
42     self.titleLabel.font = self.titleFont;
43    
44     // 圖標居中
45     [self.imageView setContentMode:UIViewContentModeCenter];
46 }
47 
48 
49 /** 返回title的frame */
50 - (CGRect)titleRectForContentRect:(CGRect)contentRect {
51     CGFloat titleX = 0;
52     CGFloat titleY = 0;
53    
54     NSDictionary *attr = @{NSFontAttributeName : self.titleFont};
55     CGFloat titleWidth;
56    
57     // 只有 iOS7 版本以上才能運行如下代碼
58     if (iOS7) {
59         // 只有 Xcode5 或以上版本才能識別這段代碼
60 #ifdef __IPHONE_7_0
61     titleWidth = [self.currentTitle boundingRectWithSize:CGSizeMake(MAXFLOAT, MAXFLOAT) options:NSStringDrawingUsesLineFragmentOrigin attributes:attr context:nil].size.width;
62 #else
63         titleWidth = [self.currentTitle sizeWithFont:self.titleFont].width;
64 #endif
65     } else { // 不然使用舊的API
66         titleWidth = [self.currentTitle sizeWithFont:self.titleFont].width;
67     }
68    
69     CGFloat titleHeight = contentRect.size.height;
70    
71     return CGRectMake(titleX, titleY, titleWidth, titleHeight);
72 }
73 
74 /** 返回image的frame */
75 - (CGRect)imageRectForContentRect:(CGRect)contentRect {
76     CGFloat imageWidth = 30;
77     CGFloat imageHeight = contentRect.size.height;
78     CGFloat imageX = contentRect.size.width - imageWidth;
79     CGFloat imageY = 0;
80     return CGRectMake(imageX, imageY, imageWidth, imageHeight);
81 }
82 
83 @end

（3）自定義一個集成UIViewController的類，設置爲該頁面的控制器類，拖線監聽title item點擊事件

a.按鈕效果（「三角形」下拉效果旋轉）

b.建立一個UIView，點擊下拉顯示，再次點擊隱藏

 1 //
 2 //  HVWBuyViewController.m
 3 //  HelloLottery
 4 //
 5 //  Created by hellovoidworld on 15/1/3.
 6 //  Copyright (c) 2015年 hellovoidworld. All rights reserved.
 7 //
 8 
 9 #import "HVWBuyViewController.h"
10 #import "TitleExtendButton.h"
11 
12 @interface HVWBuyViewController ()
13 
14 @property(nonatomic, weak) UIView *popupView;
15 
16 /** 標題點擊事件 */
17 - (IBAction)titleClicked:(TitleExtendButton *)sender;
18 
19 @end
20 
21 @implementation HVWBuyViewController
22 
23 - (void)viewDidLoad {
24     [super viewDidLoad];
25     // Do any additional setup after loading the view.
26    
27 }
28 
29 - (void)didReceiveMemoryWarning {
30     [super didReceiveMemoryWarning];
31     // Dispose of any resources that can be recreated.
32 }
33 
34 /** 延遲初始化彈出view
35 * （發現放在viewDidLoad的時候，在點擊按鈕調用的時候pupupView的frame沒有被初始化）
36 */
37 - (UIView *)popupView {
38     if (_popupView == nil) {
39         // 初始化彈出view
40         UIView *popupView = [[UIView alloc] init];
41         CGFloat popupViewX = 0;
42         CGFloat popupViewY = [UIApplication sharedApplication].statusBarFrame.size.height + self.navigationController.navigationBar.frame.size.height;
43         CGFloat popupViewWidth = self.navigationController.navigationBar.frame.size.width;
44         CGFloat popupViewHeight = self.view.frame.size.height - popupViewY - self.tabBarController.tabBar.frame.size.height;
45         popupView.frame = CGRectMake(popupViewX, popupViewY, popupViewWidth, popupViewHeight);
46         popupView.backgroundColor = [UIColor grayColor];
47        
48         UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(10, 10, 200, 100)];
49         label.text = @"這是所有彩種de彈出內容";
50         [popupView addSubview:label];
51        
52         self.popupView = popupView;
53         NSLog(@"%@", NSStringFromCGRect(self.popupView.frame));
54     }
55    
56     return _popupView;
57 }
58 
59 /** 標題點擊事件 
60 * 轉換箭頭方向
61 * 伸縮內容
62 */
63 - (IBAction)titleClicked:(TitleExtendButton *)sender {
64     [UIView animateWithDuration:0.5 animations:^{
65         // 按鈕旋轉
66         sender.imageView.transform = CGAffineTransformRotate(sender.imageView.transform, M_PI);
67     }];
68    
69     // 彈出view
70     if (![self.popupView isDescendantOfView:self.view]) {
71         [self.view addSubview:self.popupView];
72     } else {
73         [self.popupView removeFromSuperview];
74     }
75 }
76 @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版本的宏

 1 #define __IPHONE_2_0     20000
 2 #define __IPHONE_2_1     20100
 3 #define __IPHONE_2_2     20200
 4 #define __IPHONE_3_0     30000
 5 #define __IPHONE_3_1     30100
 6 #define __IPHONE_3_2     30200
 7 #define __IPHONE_4_0     40000
 8 #define __IPHONE_4_1     40100
 9 #define __IPHONE_4_2     40200
10 #define __IPHONE_4_3     40300
11 #define __IPHONE_5_0     50000
12 #define __IPHONE_5_1     50100
13 #define __IPHONE_6_0     60000
14 #define __IPHONE_6_1     60100
15 #define __IPHONE_7_0     70000
16 #define __IPHONE_7_1     70100
17 #define __IPHONE_8_0     80000
18 #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的一個分類方法

 1 //
 2 //  UIImage+Extend.m
 3 //  HelloLottery
 4 //
 5 //  Created by hellovoidworld on 15/1/3.
 6 //  Copyright (c) 2015年 hellovoidworld. All rights reserved.
 7 //
 8 
 9 #import "UIImage+Extend.h"
10 
11 @implementation UIImage(Extend)
12 
13 /**  返回一箇中心擴展拉伸的圖片 */
14 + (UIImage *) resizableImage:(NSString *) imageName {
15     UIImage *image = [UIImage imageNamed:imageName];
16    
17     // 這個參數決定了左邊的保護區域，右邊的保護區域爲左邊+1開始到末端
18     CGFloat width = image.size.width * 0.5;
19    
20     // 原理同左右保護區域
21     CGFloat height = image.size.height * 0.5;
22    
23     // 也就是，取中間1x1的區域做爲擴展區域
24     return [image stretchableImageWithLeftCapWidth:width topCapHeight:height];
25 }
26 
27 @end

（2）在登錄控制器中設置按鈕樣式

 1 //
 2 //  HVWLoginViewController.m
 3 //  HelloLottery
 4 //
 5 //  Created by hellovoidworld on 15/1/3.
 6 //  Copyright (c) 2015年 hellovoidworld. All rights reserved.
 7 //
 8 
 9 #import "HVWLoginViewController.h"
10 #import "UIImage+Extend.h"
11 
12 @interface HVWLoginViewController ()
13 
14 /** 登錄按鈕 */
15 @property (weak, nonatomic) IBOutlet UIButton *loginButton;
16 
17 @end
18 
19 @implementation HVWLoginViewController
20 
21 - (void)viewDidLoad {
22     [super viewDidLoad];
23     // Do any additional setup after loading the view.
24    
25     UIImage *normal = [UIImage resizableImage:@"RedButton"];
26     UIImage *highlighted = [UIImage resizableImage:@"RedButtonPressed"];
27    
28     [self.loginButton setBackgroundImage:normal forState:UIControlStateNormal];
29     [self.loginButton setBackgroundImage:highlighted forState:UIControlStateHighlighted];
30 }
31 
32 - (void)didReceiveMemoryWarning {
33     [super didReceiveMemoryWarning];
34     // Dispose of any resources that can be recreated.
35 }
36 
37 
38 @end