版本記錄
| 版本號 | 時間 |
|---|---|
| V1.0 | 2017.06.02 |
前言
一般我們用的app都是豎屏的，比如微信和QQ等，但是也有一些app是橫屏的，比如有些游戲，還有一些是橫豎屏都可以的，比如視頻直播類，如花椒、快手等，所以這里就先講一下橫豎屏適配的相關技巧。感興趣的可以看看我寫的其他小技巧
1. 實用小技巧（一）：UIScrollView中上下左右滾動方向的判斷
詳情
一、基本配置
要是工程可以適應橫豎屏，那么工程得按照下面進行配置。
橫豎屏工程配置
還有就是真機的豎屏鎖定不能開著，也就是說不能鎖定豎屏。
豎屏鎖定
二、代碼實現
下面就直接看代碼吧，我寫的這個demo，實現的就是橫豎屏轉換和內部視圖的適配。
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];
//橫屏顯示狀態欄
[[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];
//節目時間已經到啦
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
下面看實現效果圖
portrait
landscape_left
landscape_right
在寫的過程中碰到了兩個小問題，現和大家分享：
- 第一個是將狀態欄變成白色。
- 橫屏的時候狀態欄不顯示了，消失了。
狀態欄修改為白色
其實這個很簡單，只需要兩步，第一步就是在info.plist中加一個鍵值對，View controller-based status bar appearance設置為NO。第二步就是在控制器內部加上修改顏色的代碼，[[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent];具體需要什么顏色需要看枚舉值，大家可以自己看，我需要的是白色的，所以我寫的是UIStatusBarStyleLightContent。
橫屏了狀態欄消失了
這個可以在appDelegate的啟動方法里面加入兩句代碼即可。
//橫屏顯示狀態欄
[[UIApplication sharedApplication] setStatusBarHidden:YES withAnimation:UIStatusBarAnimationNone];
[[UIApplication sharedApplication] setStatusBarHidden:NO withAnimation:UIStatusBarAnimationNone];
運行起來就發現橫屏的時候狀態欄顯示出來了。
后記
更多的實用小技巧和大家分享哦，未完，待續~~~~
風景圖
