[iOS] Hướng dẫn tạo Landing View với Video Background
Landing View có thể hiểu là màn hình khởi động ứng dụng, là trải nghiệm, là thứ đầu tiên người dùng nhìn thấy đối với mỗi ứng dụng. Có thể nói việc tạo ra ấn tượng đầu tiên tốt đẹp là rất quan trọng với một ứng dụng mobile.
Spotify hay Uber (iOS platform) khi lần đầu tiên chúng ta sử dụng, đập ngay vào mắt là một video background rất đẹp, hôm nay mình sẽ hướng dẫn các bạn làm một landing view tương tự như vậy. Nếu các bạn vẫn chưa mường tượng được ra landing view trông như thế nào thì các bạn hãy nhìn vào hình bên dưới đây.
Câu hỏi đầu tiên là làm sao để tạo ra một video background?
Chúng ta có thể sử dụng 1 video quay sẵn và chạy trực tiếp nó. Nhưng chúng ta lại không muốn có âm thanh phát ra. Hoặc chúng ta có thể sử dụng ảnh GIF, nhưng trong IOS thì cả UIImageView và UIImage đều không thể sử dụng image với định dạng .gif được. Vậy giải pháp cho vấn đề này là chúng ta sẽ sử dụng UIWebView.
Trước tiên, chúng ta sẽ tìm một bức ảnh gif để sử dụng trong ví dụ này. Có một chú ý là chúng ta không nên sử dụng ảnh quá nặng, vì nó sẽ làm ảnh hưởng đến hiệu năng của ứng dụng. Trong ví dụ này mình sẽ sử dụng bức ảnh sau.
Tiếp theo chúng ta sẽ tạo 1 file .html để hiển thị ảnh gif
Các bạn down ảnh gif phía trên về, đổi tên thành VideoBackground.gif và đặt vào trong project của các bạn. Tiếp theo các bạn tạo một file là WebViewContent.html và viết vào đó đoạn code sau:
<!DOCTYPE html><html style="height: 100%;"><body style="margin:0; height: 100%"><div style="background: url(VideoBackground.gif) center center / cover no-repeat; height: 100%" ></div></body>
Vậy là xong khâu chuẩn bị ảnh hiển thị. Bây giờ chúng ta sẽ đi thiết kế giao diện cho Landing page. Các bạn thiết kế UIStoryboard giống như hình bên dưới, và nhớ thiết lập các IBOutlet cho từng view.
class ViewController: UIViewController {
@IBOutlet weak var filterBackground: UIView!
@IBOutlet weak var videoBackgroundWebView: UIWebView!
@IBOutlet weak var loginBtn: UIButton!
@IBOutlet weak var joinUsBtn: UIButton!
}Bây giờ chúng ra sẽ viết code để Webview có thể hiển thị ảnh gif này lên, các bạn tạo 1 hàm là setVideoBackground trong ViewController như sau
private func setVideoBackground() {let htmlName = "WebViewContent"guard let htmlPath = Bundle.main.path(forResource: htmlName, ofType: "html") else { return }let htmlURL = URL(fileURLWithPath: htmlPath)guard let html = try? Data(contentsOf: htmlURL) else { return }self.videoBackgroundWebView.load(html, mimeType: "text/html", textEncodingName: "UTF-8", baseURL: htmlURL.deletingLastPathComponent())}
Bây giờ ứng dụng của chúng ta sẽ trông như thế này
Để làm video background trở nên sẫm màu hơn để có thể thấy các nút bấm hoặc label trở nên rõ ràng hơn mình sẽ tạo ra 1 bộ lọc màu trên video background, nghe thì có vẻ nguy hiểm nhưng chỉ đơn giảm bằng vài dòng code sau là có thể giải quyết được vấn đề.
private func setBackgroundFilter () {
self.filterBackground.backgroundColor = UIColor.black
self.filterBackground.alpha = 0.5
}Và đây là kết quả
Các button và label đã trở nên rõ nét hơn, nhưng các button có vẻ không được đẹp, mình sẽ thêm border cho 2 button bằng đoạn code sau:
private func setButtons () {
self.setButtonInterface (loginBtn)
self.setButtonInterface (joinUsBtn)
}private func setButtonInterface (_ button: UIButton) {
button.layer.borderColor = UIColor.white.cgColor
button.layer.borderWidth = 1
button.layer.cornerRadius = 2
}
Và kết quả cuối cùng chúng ta sẽ được như hình dưới đây.
Cuối cùng nhớ gọi các hàm đã được viết trong viewDidLoad nhé
override func viewDidLoad() {super.viewDidLoad()self.setVideoBackground()self.setBackgroundFilter()self.setButtons()}
Mình đã push code lên github, các bạn có thể tham khảo code demo của mình tại đây. Cám ơn các bạn đã quan tâm và theo dõi bài viết của mình.
