版本記錄

前言

一般我們用的app都是豎屏的，比如微信和QQ等，但是也有一些app是橫屏的，比如有些游戲，還有一些是橫豎屏都可以的，比如視頻直播類，如花椒、快手等，所以這里就先講一下橫豎屏適配的相關技巧。感興趣的可以看看我寫的其他小技巧
1. 實用小技巧（一）：UIScrollView中上下左右滾動方向的判斷

詳情

一、基本配置

要是工程可以適應橫豎屏，那么工程得按照下面進行配置。

橫豎屏工程配置

還有就是真機的豎屏鎖定不能開著，也就是說不能鎖定豎屏。

豎屏鎖定

二、代碼實現(xiàn)

下面就直接看代碼吧，我寫的這個demo，實現(xiàn)的就是橫豎屏轉換和內(nèi)部視圖的適配。

1. AppDelegate.m

#import "AppDelegate.h"
#import "JJLiveVC.h"

@interface AppDelegate ()

@end

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
    JJLiveVC *liveVC = [[JJLiveVC alloc] init];
    self.window.rootViewController = liveVC;
    [self.window makeKeyAndVisible];
    
    //橫屏顯示狀態(tài)欄
    [[UIApplication sharedApplication] setStatusBarHidden:YES withAnimation:UIStatusBarAnimationNone];
    [[UIApplication sharedApplication] setStatusBarHidden:NO withAnimation:UIStatusBarAnimationNone];
    
    return YES;
}

@end

2. JJLiveVC.h

#import <UIKit/UIKit.h>

@interface JJLiveVC : UIViewController

@end

3. JJLiveVC.m

#import "JJLiveVC.h"
#import "JJLiveView.h"

@interface JJLiveVC ()

@property (nonatomic, strong) JJLiveView *liveView;

@end

@implementation JJLiveVC

#pragma mark - Override Base Function

- (void)viewDidLoad
{
    [super viewDidLoad];

    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(orientDidChanged:) name:UIDeviceOrientationDidChangeNotification object:nil];
    
    if ([UIDevice currentDevice].orientation == UIDeviceOrientationPortrait) {
        
        //豎屏
        [self setupLivePortraitView];
    }
    else {
        
        //橫屏
        [self setupLiveLandscapeView];
    }
    
    [[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent];
}

#pragma mark - Object Private Function

//設置豎屏視圖
- (void)setupLivePortraitView
{
    if (self.liveView) {
        self.liveView.frame = CGRectMake(0.0, 0.0, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height);
        self.liveView.isLandscape = NO;
        return;
    }
    JJLiveView *liveView = [[JJLiveView alloc] initWithFrame:self.view.frame];
    self.liveView = liveView;
    liveView.isLandscape = NO;
    [self.view addSubview:liveView];
}

//設置橫屏視圖
- (void)setupLiveLandscapeView
{
    if (self.liveView) {
        self.liveView.frame = CGRectMake(0.0, 0.0, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height);
        self.liveView.isLandscape = YES;
        return;
    }
    
    JJLiveView *liveView = [[JJLiveView alloc] initWithFrame:self.view.frame];
    self.liveView = liveView;
    liveView.isLandscape = YES;
    [self.view addSubview:liveView];
}


#pragma mark - Action && Notification

- (void)orientDidChanged:(NSNotification *)noti
{
    UIDeviceOrientation orient = [UIDevice currentDevice].orientation;
    
    if (orient == UIDeviceOrientationPortrait) {
        NSLog(@"豎屏");
        //設置豎屏視圖
        [self setupLivePortraitView];
        
    }
    else {
        NSLog(@"橫屏");
        
        if (orient == UIDeviceOrientationLandscapeRight || orient == UIDeviceOrientationLandscapeLeft){
            //設置橫屏視圖
            [self setupLiveLandscapeView];
        }
    }
}

@end

4. JJLiveView.h

#import <UIKit/UIKit.h>

@interface JJLiveView : UIView

@property (nonatomic, assign) BOOL isLandscape;

@end

5. JJLiveView.m

#import "JJLiveView.h"

@interface JJLiveView ()

@property (nonatomic, strong) UILabel *timeOnLabel;
@property (nonatomic, strong) UIButton *startLiveButton;

@end

@implementation JJLiveView

#pragma mark - Override Base Function

- (instancetype)initWithFrame:(CGRect)frame
{
    if (self = [super initWithFrame:frame]) {
        [self setupUI];
    }
    return self;
}

#pragma mark - Object Private Function

- (void)setupUI
{
    self.backgroundColor = [UIColor darkGrayColor];
    
    //節(jié)目時間已經(jīng)到啦
    UILabel *timeOnLabel = [[UILabel alloc] init];
    timeOnLabel.textColor = [UIColor blueColor];
    timeOnLabel.text = @"小澤老師的直播時間到了~~~~~";
    timeOnLabel.font = [UIFont fontWithName:@"PingFangSC-Regular" size:18];
    [self addSubview:timeOnLabel];
    self.timeOnLabel = timeOnLabel;
    
    //開始直播按鈕
    UIButton *startLiveButton = [UIButton buttonWithType:UIButtonTypeCustom];
    [startLiveButton setTitle:@"開始直播啦" forState:UIControlStateNormal];
    startLiveButton.layer.cornerRadius = 21.5;
    startLiveButton.layer.masksToBounds = YES;
    startLiveButton.layer.borderColor = [UIColor redColor].CGColor;
    startLiveButton.layer.borderWidth = 0.5;
    [startLiveButton setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
    startLiveButton.titleLabel.font = [UIFont fontWithName:@"PingFangSC-Regular" size:21.5];
    [startLiveButton addTarget:self action:@selector(startLiveButtonDidClick:) forControlEvents:UIControlEventTouchUpInside];
    [self addSubview:startLiveButton];
    self.startLiveButton = startLiveButton;
}

//進行豎屏約束
- (void)layoutPortraitView
{
    //文字
    [self.timeOnLabel sizeToFit];
    [self.timeOnLabel mas_remakeConstraints:^(MASConstraintMaker *make) {
        make.center.equalTo(self);
    }];
    
    //按鈕
    [self.startLiveButton mas_remakeConstraints:^(MASConstraintMaker *make) {
        make.centerX.equalTo(self);
        make.bottom.equalTo(self).offset(-100.0);
        make.height.equalTo(@40);
        make.width.equalTo(@160);

    }];
}

//進行橫屏約束
- (void)layoutLandscapeView
{
    //文字
    [self.timeOnLabel sizeToFit];
    [self.timeOnLabel mas_remakeConstraints:^(MASConstraintMaker *make) {
        make.center.equalTo(self);
    }];
    
    //按鈕
    [self.startLiveButton mas_remakeConstraints:^(MASConstraintMaker *make) {
        make.centerX.equalTo(self);
        make.bottom.equalTo(self).offset(-50.0);
        make.height.equalTo(@40);
        make.width.equalTo(@160);
    }];
}

#pragma mark - Getter && Setter

- (void)setIsLandscape:(BOOL)isLandscape
{
    _isLandscape = isLandscape;
    
    if (!isLandscape) {
        //進行豎屏約束
        [self layoutPortraitView];
    }
    else {
        //進行橫屏約束
        [self layoutLandscapeView];
    }
}

#pragma mark - Action && Notification

- (void)startLiveButtonDidClick:(UIButton *)button
{

}

@end

6. PrefixHeader.pch

#ifndef PrefixHeader_pch
#define PrefixHeader_pch

#import "Masonry.h"

#endif

下面看實現(xiàn)效果圖

portrait

landscape_left

landscape_right

在寫的過程中碰到了兩個小問題，現(xiàn)和大家分享：

• 第一個是將狀態(tài)欄變成白色。
• 橫屏的時候狀態(tài)欄不顯示了，消失了。

狀態(tài)欄修改為白色

其實這個很簡單，只需要兩步，第一步就是在info.plist中加一個鍵值對，View controller-based status bar appearance設置為NO。第二步就是在控制器內(nèi)部加上修改顏色的代碼，[[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent];具體需要什么顏色需要看枚舉值，大家可以自己看，我需要的是白色的，所以我寫的是UIStatusBarStyleLightContent。

橫屏了狀態(tài)欄消失了

這個可以在appDelegate的啟動方法里面加入兩句代碼即可。

    //橫屏顯示狀態(tài)欄
    [[UIApplication sharedApplication] setStatusBarHidden:YES withAnimation:UIStatusBarAnimationNone];
    [[UIApplication sharedApplication] setStatusBarHidden:NO withAnimation:UIStatusBarAnimationNone];

運行起來就發(fā)現(xiàn)橫屏的時候狀態(tài)欄顯示出來了。

后記

更多的實用小技巧和大家分享哦，未完，待續(xù)~~~~

風景圖