How to implement video controller like YouTube with rotation to landscape

Question

I want to implement controller like YouTube. Where Top part of controller plays video and bottom remains static. And when user rotate device only Top gets rotates.

I tried to implement it with this code:

@IBOutlet weak var myView: UIView!

   override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        NotificationCenter.default.addObserver(self, selector: #selector(self.rotated), name: NSNotification.Name.UIDeviceOrientationDidChange, object: nil)
    }

   @objc func rotated() {
        if UIDeviceOrientationIsLandscape(UIDevice.current.orientation) {
            UIView.animate(withDuration: 0.9, animations: {
                self.myView.transform = CGAffineTransform(rotationAngle: CGFloat.pi/2)
                let rect = CGRect(x: 0, y: 0, width: self.view.frame.width, height: self.view.frame.height)
                self.myView.frame = rect
            })
        }
    }

And I have this result:

Problem is controller still in portrait orientation and status bar at wrong side.

I think that there is better implementation for this thing.

Please, help

score 0 · Answer 1 · answered Sep 08 '17 at 15:02

This is a simple solution for your problem,

import UIKit

class ViewController: UIViewController {

    let RotatingView :UIView = UIView()
    let TextLabel :UILabel = UILabel()

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.


        self.RotatingView.frame = CGRect(x: 0, y: 0, width: self.view.frame.size.width, height: (self.view.frame.size.height/3))
        self.RotatingView.backgroundColor = UIColor.black



        self.TextLabel.text = "Rotating View"
        self.TextLabel.textColor = UIColor.white
        self.TextLabel.textAlignment = .center
        self.TextLabel.frame = CGRect(x: 0, y: self.RotatingView.frame.size.height/2, width: self.RotatingView.frame.width, height: 20)

        self.RotatingView.addSubview(self.TextLabel)
        self.view.addSubview(self.RotatingView)

        NotificationCenter.default.addObserver(self, selector: #selector(rotated), name: NSNotification.Name.UIDeviceOrientationDidChange, object: nil)


    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    func rotated(){
        switch UIDevice.current.orientation {
        case .landscapeLeft, .landscapeRight:
            self.RotatingView.frame = CGRect(x: 0, y: 0, width: self.view.frame.size.width, height: (self.view.frame.size.height))
            self.TextLabel.frame = CGRect(x: 0, y: self.RotatingView.frame.size.height/2, width: self.RotatingView.frame.width, height: 20)
        default:
            self.RotatingView.frame = CGRect(x: 0, y: 0, width: self.view.frame.size.width, height: (self.view.frame.size.height/3))
            self.TextLabel.frame = CGRect(x: 0, y: self.RotatingView.frame.size.height/2, width: self.RotatingView.frame.width, height: 20)
        }
    }

    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(true)
        self.setNeedsStatusBarAppearanceUpdate()
    }

    override var prefersStatusBarHidden : Bool {
        return false
    }


}

Thanks for the answer! But this solution rotates all views in the controller. I need to rotate only the view of the player, as shown on my gif — Sergey Roslyakov, Sep 11 '17 at 08:38
@SergeiR. Its possible to keep all the other view as they are and then rotate only one view. But then you can't fix the status bar. It will stay in portrait. You can't change it from code. My suggestion is to hide the status bar in landscape mode. That's what youtube doing. If you okay with it i can update the code. — Bishan, Sep 11 '17 at 13:42
its not just about not showing the status bar. the whole phone thinks its in portrait, so notification center is in the wrong place, the iphone x bottom "button" is on the wrong place, etc. basically, so far, the one way is not rotating the phone, and the other way rotates all views, so none of them is a solution. — pvinis, May 22 '18 at 09:25

How to implement video controller like YouTube with rotation to landscape

1 Answers1