1. 程式人生 > >[IOS]歡迎介面Launch Screen動態載入廣告(閃屏圖)

[IOS]歡迎介面Launch Screen動態載入廣告(閃屏圖)

當我們開啟一款應用程式的時候,首先映入眼簾的往往並不是程式的主介面,而是經過精心設計的歡迎介面,這個介面通常會停留幾秒鐘,然後消失。看似很平常的一個小小的歡迎介面,其實還大有講究。

一、 為什麼會出現歡迎介面?

程式在啟動的過程中需要消耗一些時間,那麼在加載出現主介面之前,會出現短暫的黑屏,這實在是很糟糕的一件事情,會給使用者一個非常不好的體驗。為了緩解使用者等待過程中心理的不適與煩躁,歡迎介面閃亮登場了!

用歡迎介面來替代黑屏的等待,可以有效的掩蓋耗時阻塞的後臺操作,還能向用戶展示有效的資訊,是非常好的一種過渡方案。但是有的程式把歡迎介面做成了廣告版,浪費了使用者更多的時間,讓使用者覺得厭煩,對程式本身功能也失去了興趣,這種做法實在是很不明智。

二、歡迎介面的種類

歡迎介面種類有很多,大致分為靜態和動態兩種。

靜態的歡迎介面通常比較簡潔,一般會放置一張很精美的圖片,可能是一張公司或者產品的宣傳圖,也可能是一張廣告圖,給我印象最深的是某聊天軟體在生日當天開啟,歡迎介面竟然是一張寫著你名字的生日祝福的圖片,讓人感覺很溫暖。

動態的歡迎介面要更加炫酷精美,樣式也更加豐富,有的是聯網載入的廣告,有的像一本很炫的書,可以滑動翻頁,有的是一個小小的遊戲,有的是美文配著美妙的音樂,還有的可能是一段有趣的動畫。

三、歡迎介面使用LaunchImage

針對IOS7,蘋果提供了LaunchImage來實現歡迎介面,開發的時候只需要將設計好對應尺寸的圖片拖到對應的狀態的位置即可。

在IOS7,歡迎介面對應的尺寸分別為:

iphone 豎屏 640960 6401136
ipad 豎屏 7681024 15362048
ipad 橫屏 1024768 20281536

IOS8出現之後,蘋果推出了LaunchScreen.xib來做歡迎介面,如果還想通過LaunchImage來做歡迎介面,完美適配IOS7和IOS8,應該如何來做呢?

首先,需要把LaunchScreen.storyboard刪掉,否則IOS8時會自動呼叫它。然後找到Images.xcassets,點選下面的 + 號,選擇New Launch Image,然後按照對應的要求放入相應尺寸圖片即可,和之前操作完全一樣。

四、歡迎介面使用LaunchScreen.storyboard

如上圖所示,當前歡迎介面包括中間的大標題,下面的公司資訊等,和一張圖片。因為上面的控制元件都是在Any w和Any h的情況下新增的約束,所以無論在哪種尺寸的裝置上都可以適配。為了保證更完美的效果,sb中得圖片我們可以使用Images.xcassets來設定,這樣可以在不同裝置的時候自動選擇相應尺寸的圖片,達到更好的效果。

但是很遺憾,用於做歡迎介面的storyboard沒法與View Controller連線,因此只能顯示靜態的事先擺好的介面。更換的話可以在下圖兩個地方進行更換。

69E01BC8-CB5A-47D1-AA77-04B6E3564252.png

五、歡迎介面動態載入廣告

有許多應用程式在開啟的時候,歡迎介面會載入一張連網獲取的廣告圖片或者顯示一組動畫,這樣的效果是如何做到的呢?下面給大家介紹一種簡單的實現載入廣告的方式。

程式執行起來,歡迎介面之後,會進入AppDelegate,因此我們可以在application: didFinishLaunchingWithOptions:新增程式碼完成想要的效果。連網獲取圖片可以用第三方SDWebImage實現,所以需要先將第三方資料夾匯入。因為顯示廣告的頁面是在歡迎介面基礎上顯示的,因此可以直接利用LaunchScreen中得view,在上面新增一個UIImageView顯示圖片,然後將其加在window上,並顯示在最上層。廣告圖片顯示之後,再將view移除掉,顯示程式的主介面。程式碼如下所示:


#pragma mark - 新增啟動動畫
- (void)addLaunchAnimation
{
    UIViewController *viewController = [[UIStoryboard storyboardWithName:@"LaunchScreen" bundle:nil] instantiateViewControllerWithIdentifier:@"LaunchScreen"];
    
    //UIView *launchView = viewController.view;
    UIWindow *mainWindow = [UIApplication sharedApplication].keyWindow;
    
    //viewController.view.frame = [UIApplication sharedApplication].keyWindow.frame;
    [mainWindow addSubview:viewController.view];
    [self.window bringSubviewToFront:viewController.view];
    
    //新增廣告圖
    UIImageView *imageV = [[UIImageView alloc] initWithFrame:CGRectMake(0, 50, SCREEN_WIDHT, 300)];
    NSString *str = @"http://upload-images.jianshu.io/upload_images/746057-6e83c64b3e1ec4d2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240";
    [imageV sd_setImageWithURL:[NSURL URLWithString:str] placeholderImage:[UIImage imageNamed:@"default1.jpg"]];
    [viewController.view addSubview:imageV];
    
    [UIView animateWithDuration:0.6f delay:2 options:UIViewAnimationOptionBeginFromCurrentState animations:^{
        
        viewController.view.alpha = 0.0f;
        viewController.view.layer.transform = CATransform3DScale(CATransform3DIdentity, 2.0f, 2.0f, 1.0f);
        
    } completion:^(BOOL finished) {
        [viewController.view removeFromSuperview];
    }];
    
}

後話總結:

第一, 啟動屏廣告會讓使用者反感,尤其是時間久的,追求使用者體驗的不建議新增.

第二, 啟動屏不能改只能寫死.第三如果要載入廣告,要在啟動屏顯示消失之後,在重新拿到view然後進行自定義顯示.

第三, 推薦用launchScreen.stroyBoard的方式新增啟動屏,方式機型適配出現的未知錯誤.