Use UIWebView to create a cool video background view (OC & Swift)

Http://www.cocoachina.com/ios/20151023/13860.html

2015-10-6 Update: Adaptation Swift2.0

If necessary, you can send a private messages via [email protected] or contact me.

Note: Using GIF animated images is only a viable way to achieve this effect, not the only solution. I personally prefer to achieve the video background effect by means of a video player, however, the GIF image is still a viable option. The implementation step jumps directly to the "pre-work preparation" below.

If you've ever used the iOS version of Spotify, you'll notice that in the new version of the app, they used a play video as the app launcher background. This is a pretty cool design relative to the static picture background. If you haven't seen this type of design yet, you can look at the final results I've made:

Just to make you feel funny, I took a slow-shift video of this track on a train from Berlin to Graz.

So I started to recreate a programming practice to achieve the same effect. So here's the question: how? My first thought was to create a video player and have the video file play repeatedly on the background view. But I also want to put other controls on top of the view, and I don't need the sound of the video.

Then I thought of the GIF file. Now the question is: How do you put a GIF into a view? As far as I know, GIF animations are not supported by Uiimageview and UIImage. Although Uiimageview can be implemented by adding multiple images and animations, do we really need to capture a large number of images from the video and add all the images to the project? It's too complicated to prepare for a video job. What else does it support GIF? The answer is UIWebView.

Pre-work preparation: Working with videos

Prepare a video that you want to play as a background. There are countless software and Web applications that can be used to convert videos to GIF images, and if you want the best results, you'll need to clip them to the iphone's screen size.

There is a very good guide to how to make, and more resources you can get from Google. Here I'm using a software called GIF Brewery. This software also has a very detailed guide page, very simple and easy to get started.

Add GIF to the project

Just drag the GIF file to your project's navigation directory as you would any other file.

Start writing code

I will use Objective-c and Swift to show how to achieve this. All the code is written in the viewdidload of the default loaded Viewcontroller.

1. Create a GIF file path to read the GIF file you added.

Objective-c:

123	NSString *filePath = [[NSBundle mainBundle] pathForResource:@"railway"ofType:@"gif"];NSData *gif = [NSData dataWithContentsOfFile:filePath];

Swift:

123	let filePath = NSBundle.mainBundle().pathForResource("railway", ofType: "gif")let gif = NSData(contentsOfFile: filePath!)

2. Create a UIWebView and convert the GIF into the NSData form as its data source. Because it needs to be used as a backdrop, frame size should be set according to the iphone's screen size. Also, UIWebView is similar to ScrollView, and you need to set its Userinteractionenabled property to No. Then add the UIWebView to the main view.

Objective-c:

1234567

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:

1234567

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. Optional: I also need to add other buttons to the background, so I used another black filter view, with an alpha value of 0.05, covering the UIWebView. This lets you fade out of the background view while highlighting the buttons and button titles.

Objective-c:

1234567

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

Swift:

123456789

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

4. Add the other you need to add, finish!

Summarize:

The full project can be downloaded and used from my github. The GIF file used in the example is also inside. The above may not be the best way to solve, welcome to discuss together.

This is my first blog post, I am very happy to start blogging. I will continue to share some of the design and programming skills that are innovative and worth sharing everyday. You are welcome to follow me on medium and Twitter.

Use UIWebView to create a cool video background view (OC & Swift)