美文网首页ios相关文章
JS 与 IOS 交互-横竖屏切换

JS 与 IOS 交互-横竖屏切换

作者: leonardni | 来源:发表于2016-11-25 15:09 被阅读134次

    IOS 设备横竖屏情况

    横屏 描述
    UIInterfaceOrientationLandscapeRight Home键在右侧的情况
    UIInterfaceOrientationMaskLandscapeRight Home键在左侧

    一般情形


    所有界面都支持横竖屏切换如果App的所有切面都要支持横竖屏的切换,那只需要勾选【General】 中的【Device Orientation】,选择希望支持的方向即可。


    图中支持竖屏和Home在右侧

    如上设置完之后,当设备竖屏的时候,所有的界面都是竖屏显示的;而当设备横屏Home在右侧时,所有的界面会横屏显示。其他方向不支持,界面不会改变。

    这里有个坑:在iOS 9 之后横屏时,状态栏会消失。
    解决方法:确保plist 中的【View controller-based status bar appearance】为YES,然后重写ViewController的 - (BOOL)prefersStatusBarHidden

    - (BOOL)prefersStatusBarHidden{ 
    return NO;
    }
    

    特殊情形


    1.个别界面固定方向,其他所有界面都支持横竖屏切换

    这种情况,在【General】-->【Device Orientation】中设置好支持的方向后,只需要在这些特殊的视图控制器中重写两个方法:

    // 支持设备自动旋转
    - (BOOL)shouldAutorotate{ return YES;}
    
    /*设置特殊的界面支持的方向,这里特殊界面只支持Home在右侧的情况*/
    - (UIInterfaceOrientationMask)supportedInterfaceOrientations { 
    return UIInterfaceOrientationMaskLandscapeRight;
    }
    

    2.个别界面支持横竖屏切换,其他所有界面都固定方向

    可能大多数App会是这种需求,某些特殊界面只能横屏,如视频播放类App。
    这里有两种处理方式:

    方式一

    在【General】-->【Device Orientation】中设置好需要支持的所有方向。然后使用一个基类控制器,在基类控制器中重写两个控制横竖屏的方法:

    // 支持设备自动旋转
    - (BOOL)shouldAutorotate{    return YES;}
    // 支持竖屏显示
    - (UIInterfaceOrientationMask)supportedInterfaceOrientations{    
    return UIInterfaceOrientationMaskPortrait;
    }
    

    再然后,特殊的界面上再重写这俩方法,让其可以自动切换方向。

    // 如果需要横屏的时候,一定要重写这个方法并返回NO
    - (BOOL)prefersStatusBarHidden{    return NO;}
    // 支持设备自动旋转
    - (BOOL)shouldAutorotate{    return YES;}
    // 支持横屏显示
    - (UIInterfaceOrientationMask)supportedInterfaceOrientations{    
    // 如果该界面需要支持横竖屏切换   
    return UIInterfaceOrientationMaskLandscapeRight | UIInterfaceOrientationMaskPortrait;   
     // 如果该界面仅支持横屏   
    // return UIInterfaceOrientationMaskLandscapeRight;}
    

    方式二

    用方式一的方法,还需要借助一个基类,所有的控制器都要继承这个基类,太麻烦?另一种方式,是借助通知来控制界面的横竖屏切换。还是整个App中大部分界面都是竖屏,某个界面可以横竖屏切换的情况。

    首先,在【General】-->【Device Orientation】设置仅支持竖屏,像下面这样:

    Device Orientation

    然后在特殊的视图控制器里的ViewDidLoad中注册通知:

    [[UIDevice currentDevice] beginGeneratingDeviceOrientationNotifications];   
    [[NSNotificationCenter defaultCenter] addObserver:self 
    selector:@selector(deviceOrientationDidChange) 
    name:UIDeviceOrientationDidChangeNotification 
    object:nil];
    

    通知方法的实现过程:

    - (void)deviceOrientationDidChange{   
    NSLog(@"deviceOrientationDidChange:%ld",(long)[UIDevice currentDevice].orientation); 
       
    if([UIDevice currentDevice].orientation == UIDeviceOrientationPortrait) { 
    [[UIApplication sharedApplication] 
    setStatusBarOrientation:UIInterfaceOrientationPortrait];
    
    [self orientationChange:NO];
    //注意:UIDeviceOrientationLandscapeLeft 与 UIInterfaceOrientationLandscapeRight    
    } else if ([UIDevice currentDevice].orientation == UIDeviceOrientationLandscapeLeft) { 
    [[UIApplication sharedApplication] 
    setStatusBarOrientation:UIInterfaceOrientationLandscapeRight];
    
    [self orientationChange:YES];
    }}
    -(void)orientationChange:(BOOL)landscapeRight{ 
    if (landscapeRight) {
    [UIView animateWithDuration:0.2f animations:^{
    self.view.transform = CGAffineTransformMakeRotation(M_PI_2);
    self.view.bounds = CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);}];
    } else {
    [UIView animateWithDuration:0.2f animations:^{
    self.view.transform = CGAffineTransformMakeRotation(0); 
    self.view.bounds = CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT); }];   
    }}
    // 用到的两个宏:
    #define SCREEN_WIDTH ([UIScreen mainScreen].bounds.size.width)   
    #define SCREEN_HEIGHT ([UIScreen mainScreen].bounds.size.height)
    

    最重要的一点:需要重写如下方法,并且返回NO。禁止自动旋转

    - (BOOL)shouldAutorotate{    return NO;}
    

    这样,在设备出于横屏时,界面就会变成横屏,设备处于竖屏时,界面就会变成竖屏。

    填坑

    1.上面方式二,因为【General】-->【Device Orientation】因为只设置了竖屏,所以当横屏时,如果有键盘弹出,键盘是竖屏时的样式。

    解决办法:在【General】-->【Device Orientation】中加上横屏时的方向。
    

    2.如果VieController 是放在UINavigationController或者UITabBarController中,需要重写它们的方向控制方法。

    UINavigationController:
    - (BOOL)shouldAutorotate{
    return [self.topViewController shouldAutorotate];
    }
    - (UIInterfaceOrientationMask)supportedInterfaceOrientations{
    return [self.topViewController supportedInterfaceOrientations];
    }
    

    UITabBarController:

    - (BOOL)shouldAutorotate{
    return [self.selectedViewController shouldAutorotate];
    }
    - (UIInterfaceOrientationMask)supportedInterfaceOrientations{
    return [self.selectedViewController supportedInterfaceOrientations];
    }
    

    如果想要点击某个按钮之后,强制将竖屏显示的界面变成横屏呢?

    有人可能会想到这样写:

    // 横屏
    - (IBAction)landscapAction:(id)sender
     { 
    [[UIApplication sharedApplication] 
    setStatusBarOrientation:UIInterfaceOrientationLandscapeRight];
    [self orientationChange:YES];
    }
    

    但是按照上面的写法,会导致返回到之前的界面时,视图方向错误,即使返回前执行如下代码:

    [[UIApplication sharedApplication] 
    setStatusBarOrientation:UIInterfaceOrientationPortrait];
    [self orientationChange:NO];
    

    也没有作用。
    下面是在开源工程中无意看到的写法:

    // 横屏
    - (IBAction)landscapAction:(id)sender 
    {
    [self interfaceOrientation:UIInterfaceOrientationLandscapeRight];
    }
    // 竖屏
    - (IBAction)portraitAction:(id)sender {
    [self interfaceOrientation:UIInterfaceOrientationPortrait];
    }
    - (void)interfaceOrientation:(UIInterfaceOrientation)orientation{
    if ([[UIDevice currentDevice] respondsToSelector:@selector(setOrientation:)]) 
    { SEL selector = NSSelectorFromString(@"setOrientation:"); 
    NSInvocation *invocation = [NSInvocation invocationWithMethodSignature:[UIDevice instanceMethodSignatureForSelector:selector]]; 
    [invocation setSelector:selector]; 
    [invocation setTarget:[UIDevice currentDevice]]; 
    int val   = orientation; 
    [invocation setArgument:&val atIndex:2]; 
    [invocation invoke]; }
    }
    

    上面的方法会将设备的方向强制设置为某个方向,然后再监控设备方向改变的通知,即可实现横竖屏切换。这里有一个用JS 和原生item 控制横竖屏切换的Demo。地址
    这是效果图:

    相关文章

      网友评论

        本文标题:JS 与 IOS 交互-横竖屏切换

        本文链接:https://www.haomeiwen.com/subject/tftwpttx.html