iOS 如何做出像Spotify 一樣登入畫面背景

如何做出像Spotify 一樣登入畫面背景。

在這邊示範的第一個方法是用UIWebView 播放Gif 動畫。
註:Gif的解析度最好與裝置是相符的,如此才能達到最好的效果。

首先你必須先將需要的Gif 檔案拉進專案中

1. 找到你的檔案路徑

Objective-C:

NSString *filePath = [[NSBundle mainBundle] pathForResource:@"你的gif檔案名稱" ofType:@"gif"];
NSData *gif = [NSData dataWithContentsOfFile:filePath];

Swift:

let filePath = NSBundle.mainBundle().pathForResource("你的git檔案名稱", ofType: "gif")
let gif = NSData(contentsOfFile: filePath!)

2. 創造一個符合裝置背景大小的 UIWebView 放你所需要的 Gif 檔案,並且將 userInteractionEnabled設為否。

註:當視圖對象的userInteractionEnabled設置為NO的時候,用戶觸發的事件,如觸摸事件,鍵盤彈出事件…等,將會被該視圖忽略(其他視圖照常響應),並且該視圖對象也會從事件響應隊列中被移除。

Objective-C:

UIWebView *webViewBG = [[UIWebView alloc] initWithFrame:self.view.frame];
[webViewBG loadData:gif MIMEType:@"image/gif" textEncodingName:nil baseURL:nil];
webViewBG.userInteractionEnabled = NO;
[self.view addSubview:webViewBG];

Swift:

let webViewBG = UIWebView(frame: self.view.frame)
webViewBG.loadData(gif!, MIMEType: "image/gif", textEncodingName: String(), baseURL: NSUrl())
webViewBG.userInteractionEnabled = false;
self.view.addSubview(webViewBG)

3. 這邊可以不添加; 我想要我的button有陰影效果,所以多寫了這段。

Objective-C:

UIView *filter = [[UIView alloc] initWithFrame:self.view.frame];
filter.backgroundColor = [UIColor blackColor];
filter.alpha = 0.05;
[self.view addSubview:filter];

Swift:

Let filter = UIView()
filter.frame = self.view.frame
filter.backgroundColor = UIColor.blackColor()
filter.alpha = 0.05
self.view.addSubview(filter)

4. 打完收工。


如果你懂網頁語法的話,你可以新增一個html檔案來處理 Gif。
如此一來就可以用 CSS來處理畫面的問題。

作法如下
1. 右鍵新增一個空檔案命名為WebViewContent.html。將內容更改如下

<!DOCTYPE html>
<html style="height: 100%;">
<body style="margin:0; height: 100%">
<div style="background: url(你的檔名.gif) center center / cover no-repeat; height: 100%" ></div>
</body>

2. Code 可以先寫在 viewdidload 測試看看

Objective-C

NSString *htmlPath = [[NSBundle mainBundle] 
pathForResource:@"WebViewContent" ofType:@"html"];
NSURL *htmlURL = [[NSURL alloc] initFileURLWithPath:htmlPath];
NSData *htmlData = [[NSData alloc] initWithContentsOfURL:htmlURL];
[self.webViewBG loadData:htmlData MIMEType:@"text/html" textEncodingName:@"UTF-8" baseURL:[htmlURL URLByDeletingLastPathComponent]];

Swift

let htmlPath = Bundle.main.path(forResource: "WebViewContent", ofType: "html")
let htmlURL = URL(fileURLWithPath: htmlPath!)
let html = try? Data(contentsOf: htmlURL)
self.webViewBG.load(html!, mimeType: "text/html", textEncodingName: "UTF-8", baseURL: htmlURL.deletingLastPathComponent())

使用 Gif 只是其中一個方法。

後面更新會再介紹 AVFoundation 播放mp4 或是使用 MPMoviePlayerController 來達成同樣的效果。

Show your support

Clapping shows how much you appreciated Yu-J.Cheng’s story.