當我們打開一款應用程序的時候私痹,首先映入眼簾的往往并不是程序的主界面,而是經(jīng)過精心設計的歡迎界面,這個界面通常會停留幾秒鐘紊遵,然后消失账千。看似很平常的一個小小的歡迎界面暗膜,其實還大有講究匀奏。
一、 為什么會出現(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)的事先擺好的界面诅迷。更換的話可以在下圖兩個地方進行更換。
五众旗、歡迎界面動態(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];
}];
}