[IOS]歡迎界面Launch Screen動態(tài)加載廣告(閃屏圖)

當我們打開一款應用程序的時候,首先映入眼簾的往往并不是程序的主界面,而是經(jīng)過精心設計的歡迎界面,這個界面通常會停留幾秒鐘,然后消失??此坪芷匠5囊粋€小小的歡迎界面,其實還大有講究。

一、 為什么會出現(xiàn)歡迎界面?

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

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

二、歡迎界面的種類

歡迎界面種類有很多,大致分為靜態(tài)和動態(tài)兩種。

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

動態(tài)的歡迎界面要更加炫酷精美,樣式也更加豐富,有的是聯(lián)網(wǎng)加載的廣告,有的像一本很炫的書,可以滑動翻頁,有的是一個小小的游戲,有的是美文配著美妙的音樂,還有的可能是一段有趣的動畫。

三、歡迎界面使用LaunchImage

針對IOS7,蘋果提供了LaunchImage來實現(xiàn)歡迎界面,開發(fā)的時候只需要將設計好對應尺寸的圖片拖到對應的狀態(tài)的位置即可。

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

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

IOS8出現(xiàn)之后,蘋果推出了LaunchScreen.xib來做歡迎界面,如果還想通過LaunchImage來做歡迎界面,完美適配IOS7和IOS8,應該如何來做呢?

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

四、歡迎界面使用LaunchScreen.storyboard

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

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

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

五、歡迎界面動態(tài)加載廣告

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

程序運行起來,歡迎界面之后,會進入AppDelegate,因此我們可以在application: didFinishLaunchingWithOptions:添加代碼完成想要的效果。連網(wǎng)獲取圖片可以用第三方SDWebImage實現(xiàn),所以需要先將第三方文件夾導入。因為顯示廣告的頁面是在歡迎界面基礎上顯示的,因此可以直接利用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];
    }];
    
}

后話總結(jié):

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

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

第三, 推薦用launchScreen.stroyBoard的方式添加啟動屏,防止機型適配出現(xiàn)的未知錯誤.

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

  • 將軍 ——佟麟閣 一身男兒血 頭顱可撒拋 壯志赴國難 大刀斬妖刀 將軍 ——趙...
    行走的M閱讀 442評論 0 0
  • 9月12號上午,據(jù)知情人士稱,文化綠城小學五年級學生沒寫作業(yè)班長撤了,從20樓縱身跳下。 同一學校的家長稱,第二天...
    低效率的勤奮者閱讀 5,044評論 13 26
  • 儒家入世有為,引導人熱愛生活;道家出世無為,使人淡泊名利;佛家靜達圓通,啟迪人走向圓融和通達。 儒家代表的是生命意...
    錯路不迷茫閱讀 214評論 0 0
  • 雪花飄飄 落于發(fā)間,衣上,腳上 連帶直降地上 滿地的泥濘丑陋不堪 就此被染上臟 伸手慌亂的捕捉 一樣的融化掉 給你...
    過量閱讀 221評論 0 4

友情鏈接更多精彩內(nèi)容