web-dev-qa-db-ja.com

InstagramやVineなどのiOSアプリのサインアップにビデオの背景を追加する

Swiftを使用して、ログイン/サインアップページなどをロードして持つアプリを作成しました。現在、背景として画像がありますが、コードを追加したいので、VineやInstagramなどのアプリのようにバックグラウンドでgif/movが再生されます。

ビデオを現在のコードと統合するにはどうすればよいですか？私もこれに非常に慣れていないので、チュートリアルに従っています。また、解析ロゴを削除する方法を誰かが知っているなら、それも役に立ちます。

ビデオが表示されますが、ストーリーボードのUIの前にあります。それらを背景GIFの前に表示するにはどうすればよいですか？

以下は、サインインビューコントローラー用に現在持っているコードです。

import UIKit
import Foundation

class SignInViewController: UIViewController, UITextFieldDelegate {

@IBOutlet weak var userName: UITextField!
@IBOutlet weak var password: UITextField!

@IBOutlet weak var errorLabel: UILabel!

override func viewDidLoad() {

       super.viewDidLoad()

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

    let webViewBG = UIWebView(frame: self.view.frame)
    webViewBG.loadData(gif!, MIMEType: "image/gif", textEncodingName: "UTF-8", baseURL: NSURL(string: "")!)
    webViewBG.userInteractionEnabled = false;
    self.view.addSubview(webViewBG)


    userName.delegate = self
    password.delegate = self
}


@IBAction func signInTouched(sender: UIButton) {

    let signin = SignIn(user: userName.text!, pass: password.text!)

    do {
        try signin.signInUser()
        self.dismissViewControllerAnimated(true, completion: nil)


    } catch let error as Error {
        errorLabel.text = error.description
    } catch {
        errorLabel.text = "Sorry something went\n wrong please try again"
    }

}

override func touchesBegan(touches: Set<UITouch>, withEvent event: UIEvent?) {
    self.view.endEditing(true)

}

}
iosswiftvideobackground-imageios9
11
Robert S

次のコードを使用すると、ViewControllerのビデオ背景を追加できます。

Swiftで記述され、mp4ビデオファイルを再生します。

Swift 5の場合。

import AVFoundation

class VideoBackgroundController: UIViewController {
    var avPlayer: AVPlayer!
    var avPlayerLayer: AVPlayerLayer!
    var paused: Bool = false

    override func viewDidLoad() {

        let theURL = Bundle.main.url(forResource:"my_video_file", withExtension: "mp4")

        avPlayer = AVPlayer(url: theURL!)
        avPlayerLayer = AVPlayerLayer(player: avPlayer)
        avPlayerLayer.videoGravity = .resizeAspectFill
        avPlayer.volume = 0
        avPlayer.actionAtItemEnd = .none

        avPlayerLayer.frame = view.layer.bounds
        view.backgroundColor = .clear
        view.layer.insertSublayer(avPlayerLayer, at: 0)

        NotificationCenter.default.addObserver(self,
                                           selector: #selector(playerItemDidReachEnd(notification:)),
                                           name: .AVPlayerItemDidPlayToEndTime,
                                           object: avPlayer.currentItem)
    }

    @objc func playerItemDidReachEnd(notification: Notification) {
        let p: AVPlayerItem = notification.object as! AVPlayerItem
        p.seek(to: .zero)
    }

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        avPlayer.play()
        paused = false
    }

    override func viewDidDisappear(_ animated: Bool) {
        super.viewDidDisappear(animated)
        avPlayer.pause()
        paused = true
    }
}
45
Amro Shafie

これは機能します。そこに配置したすべてのコードを次のように置き換えます。

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

     let webViewBG = UIWebView(frame: self.view.frame)
     webViewBG.loadData(gif!, MIMEType: "image/gif", textEncodingName: "UTF-8", baseURL: NSURL(string: "")!)
     webViewBG.userInteractionEnabled = false;
     self.view.addSubview(webViewBG)

それはすべてテストされ、100％動作します

編集Swift 3そしてバックグラウンドでGifを持っている：

let filePath = Bundle.main.path(forResource: "beach_water", ofType: "gif")
let gif = NSData(contentsOfFile: filePath!)
let webViewBG = UIWebView(frame: self.view.frame)
webViewBG.load(gif! as Data, mimeType: "image/gif", textEncodingName: "UTF-8", baseURL: NSURL(string: "")! as URL)
webViewBG.isUserInteractionEnabled = false
webViewBG.layer.zPosition = -2.0
self.view.addSubview(webViewBG)
2
Zander

これが完全なソリューションです。負のz位置は重要です！

let filePath = NSBundle.mainBundle().pathForResource("Lake", ofType: "gif")

let gif = NSData(contentsOfFile: filePath!)

let webViewBG = UIWebView(frame: self.view.frame)

webViewBG.loadData(gif!, MIMEType: "image/gif", textEncodingName: "UTF-8", baseURL: NSURL(string: "")!)

webViewBG.userInteractionEnabled = false
webViewBG.layer.zPosition = -2.0
self.view.addSubview(webViewBG)
0
MacInnis

本当に簡単です。最初にgifをAssets.xcassetsにドラッグします。次に、ファイルをコードで取得します（おそらくconfigureviewメソッドで）。

    var filePath = NSBundle.mainBundle().pathForResource(“YourImageNameHere”, ofType: “gif”)
    var gif = NSData(contentsOfFile: filePath)

  1. UIWebViewを作成し、GIFNSDataをデータソースとして追加します。

    var webViewBG = UIWebView(frame: self.view.frame)
webViewBG.loadData(gif, MIMEType: “image/gif”, textEncodingName: nil, baseURL: nil)
webViewBG.userInteractionEnabled = false;
self.view.addSubview(webViewBG)

そして、あなたは行き​​ます、あなたのボタンと他のUIElementsの後ろにwebViewがあることを確認してください

0
Zander

互換性のあるUIViewビデオファイルを再生およびループし、ビュー全体に合わせて自動的にスケーリングするSDLoopingVideoViewというSwift AVPlayerサブクラスを作成しました。 Interface Builderで完全にセットアップできます。これはビデオの背景として最適です。Githubの次の場所にあります： SDLoopingVideoView

0
Solsma Dev

ありがとう！グラデーションを追加するには：

let gradient: CAGradientLayer = CAGradientLayer()
    gradient.colors = [self.hexStringToUIColor(hex: "#141414").cgColor,self.hexStringToUIColor(hex: "#323232").cgColor]
    gradient.locations = [0.0,1.0]
    gradient.opacity = 0.8
    gradient.startPoint = CGPoint(x: 1.0, y: 0.0)
    gradient.endPoint = CGPoint(x: 1.0, y: 1.0)
    gradient.frame = viewLogin.layer.frame
    viewLogin.layer.insertSublayer(gradient, at: 0)

hexStringToUIColorメソッド：

var cString:String = hex.trimmingCharacters(in: .whitespacesAndNewlines).uppercased()

    if (cString.hasPrefix("#")) {
        cString.remove(at: cString.startIndex)
    }

    if ((cString.count) != 6) {
        return UIColor.gray
    }

    var rgbValue:UInt32 = 0
    Scanner(string: cString).scanHexInt32(&rgbValue)

    return UIColor(
        red: CGFloat((rgbValue & 0xFF0000) >> 16) / 255.0,
        green: CGFloat((rgbValue & 0x00FF00) >> 8) / 255.0,
        blue: CGFloat(rgbValue & 0x0000FF) / 255.0,
        alpha: CGFloat(1.0)
    )
0
Álvaro Agüero