类似 Youtube 应用的 iOS 浮动视频窗口

Question

有没有人知道任何现有的库，或者任何技术如何获得与 Youtube 应用程序上相同的效果。

视频可以“最小化”并悬停在屏幕底部 - 然后可以滑动以关闭或触摸以重新最大化。

见：

视频正常播放：https://www.dropbox.com/s/o8c1ntfkkp4pc4q/2014-06-07%2001.19.20.png

视频最小化：https://www.dropbox.com/s/w0syp3infu21g08/2014-06-07%2001.19.27.png

（注意视频现在是如何在屏幕右下角的一个小浮动窗口中显示的）。

任何人都知道这是如何实现的，是否有任何现有的教程或库可用于获得相同的效果？

Answer 1

更新新框架FWDraggableSwipePlayer 用于像 YouTube 应用一样拖动 uiview。

希望能帮到你。

Answer 2

听起来很有趣，所以我看了一下 youtube。该视频看起来像是在顶部的 16:9 框中播放的，下面有一个“另见”列表。当用户最小化视频时，播放器与“另见”视图一起下降到右下角。同时，“另见”视图逐渐变为透明。

1) 设置这样的视图并创建出口。这是它在 IB 中的样子。 （注意这两个容器是同级的）

2) 让视频视图向上滑动和向下滑动手势识别器：

@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIView *tallMpContainer;
@property (weak, nonatomic) IBOutlet UIView *mpContainer;
@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    UISwipeGestureRecognizer *swipeDown = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(swipeDown:)];
    UISwipeGestureRecognizer *swipeUp = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(swipeUp:)];

    swipeUp.direction = UISwipeGestureRecognizerDirectionUp;
    swipeDown.direction = UISwipeGestureRecognizerDirectionDown;

    [self.mpContainer addGestureRecognizer:swipeUp];
    [self.mpContainer addGestureRecognizer:swipeDown];
}

- (void)swipeDown:(UIGestureRecognizer *)gr {
    [self minimizeMp:YES animated:YES];
}

- (void)swipeUp:(UIGestureRecognizer *)gr {
    [self minimizeMp:NO animated:YES];
}

3) 然后是一个知道当前状态，并改变当前状态的方法。

- (BOOL)mpIsMinimized {
    return self.tallMpContainer.frame.origin.y > 0;
}

- (void)minimizeMp:(BOOL)minimized animated:(BOOL)animated {

    if ([self mpIsMinimized] == minimized) return;

    CGRect tallContainerFrame, containerFrame;
    CGFloat tallContainerAlpha;

    if (minimized) {
        CGFloat mpWidth = 160;
        CGFloat mpHeight = 90; // 160:90 == 16:9

        CGFloat x = 320-mpWidth;
        CGFloat y = self.view.bounds.size.height - mpHeight;

        tallContainerFrame = CGRectMake(x, y, 320, self.view.bounds.size.height);
        containerFrame = CGRectMake(x, y, mpWidth, mpHeight);
        tallContainerAlpha = 0.0;

    } else {
        tallContainerFrame = self.view.bounds;
        containerFrame = CGRectMake(0, 0, 320, 180);
        tallContainerAlpha = 1.0;
    }

    NSTimeInterval duration = (animated)? 0.5 : 0.0;

    [UIView animateWithDuration:duration animations:^{
        self.tallMpContainer.frame = tallContainerFrame;
        self.mpContainer.frame = containerFrame;
        self.tallMpContainer.alpha = tallContainerAlpha;
    }];
}

我没有在这个项目中添加视频，但它应该直接加入。将 mpContainer 设置为 MPMoviePlayerController 视图的父视图，它应该看起来很酷。

Answer 3

这是 @danh 之前提供的答案的 swift 3 版本。

https://stackoverflow.com/a/24107949/1211470

import UIKit

class ViewController: UIViewController {
    @IBOutlet weak var tallMpContainer: UIView!
    @IBOutlet weak var mpContainer: UIView!

    var swipeDown: UISwipeGestureRecognizer?
    var swipeUp: UISwipeGestureRecognizer?

    override func viewDidLoad() {
        super.viewDidLoad()
        swipeDown = UISwipeGestureRecognizer(target: self, action: #selector(swipeDownAction))

        swipeUp = UISwipeGestureRecognizer(target: self, action: #selector(swipeUpAction))

        swipeDown?.direction = .down
        swipeUp?.direction = .up

        self.mpContainer.addGestureRecognizer(swipeDown!)
        self.mpContainer.addGestureRecognizer(swipeUp!)
    }

    @objc func swipeDownAction() {
        minimizeWindow(minimized: true, animated: true)
    }

    @objc func swipeUpAction() {
        minimizeWindow(minimized: false, animated: true)
    }

    func isMinimized() -> Bool {
        return CGFloat((self.tallMpContainer?.frame.origin.y)!) > CGFloat(20)
    }

    func minimizeWindow(minimized: Bool, animated: Bool) {
        if isMinimized() == minimized {
            return
        }

        var tallContainerFrame: CGRect
        var containerFrame: CGRect

        var tallContainerAlpha: CGFloat

        if minimized == true {

            let mpWidth: CGFloat = 160
            let mpHeight: CGFloat = 90

            let x: CGFloat = 320-mpWidth
            let y: CGFloat = self.view.bounds.size.height - mpHeight;

            tallContainerFrame = CGRect(x: x, y: y, width: 320, height: self.view.bounds.size.height)
            containerFrame = CGRect(x: x, y: y, width: mpWidth, height: mpHeight)
            tallContainerAlpha = 0.0

        } else {

            tallContainerFrame = self.view.bounds
            containerFrame = CGRect(x: 0, y: 0, width: 320, height: 180)
            tallContainerAlpha = 1.0

        }

        let duration: TimeInterval = (animated) ? 0.5 : 0.0
        UIView.animate(withDuration: duration, animations: {
            self.tallMpContainer.frame = tallContainerFrame
            self.mpContainer.frame = containerFrame
            self.tallMpContainer.alpha = tallContainerAlpha
        })
    }

}

Answer 4

使用TFSwipeShrink 并为您的项目自定义代码。

希望能帮到你。