Плавающее видеоизображение iOS, например приложение Youtube

Кто-нибудь знает о какой-либо существующей библиотеке или о любых методах получения того же эффекта, что и в приложении 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

(Обратите внимание, как видео теперь находится в маленьком плавающем окне в правом нижнем углу экрана).

Кто-нибудь знает, как это было достигнуто, и существуют ли существующие учебники или библиотеки, которые могут быть использованы для получения такого же эффекта?

Ответ 1

Это звучало весело, поэтому я посмотрел на youtube. Видео выглядит так, как будто оно воспроизводится в окне 16: 9 вверху, а также список "см. Также" ниже. Когда пользователь минимизирует видео, игрок падает в правый нижний угол вместе с надписью "см. Также" . В то же время, просмотр "см. Также" исчезает до прозрачного.

1) Настройте виды, подобные этим, и создайте выходы. Вот как это выглядит в IB. (Обратите внимание, что два контейнера являются братьями и сестрами)

enter image description here

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, и оно должно выглядеть довольно круто.

Ответ 2

Используйте TFSwipeShrink и настройте код для своего проекта.

надеюсь помочь вам.

Ответ 3

Обновить новую фреймворк FWDraggableSwipePlayer для перетаскивания uiview, такого как приложение YouTube.

надеюсь помочь вам.

Ответ 4

Это версия с быстрым 3 для ответа, предоставленного ранее @danh.

fooobar.com/info/547521/...

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
        })
    }

}