iPad开发跟Iphone完全不同,iPad因为屏幕大,因此横屏竖屏的显示会有所不同,今天跟着李明杰老师写了demo,觉得非常有意义,首先显示一下界面呈现
横屏的侧边栏的显示
复测蜂窝肺
竖屏的侧边栏的显示
我们需要把它进行一个分层(很乱,只需要看字即可)
横屏的侧边栏跟竖屏的侧边栏的不同在于,
(1)iconView:竖屏没有title
(2)tabbatr:竖屏没有title
(3)TLBottomMenu:一个竖着显示,一个横着显示
一:这就需要进行不同的frame的处理,当然这里因为横竖屏的Dock的宽度都不一样,所以AutoLayout是不可能的,这就需要我们手写frame的代码
而获取横竖屏的方法调用是这个方法:
/**
* 屏幕即将旋转的时候调用
*/
- (void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration
{
[UIView animateWithDuration:duration animations:^{
BOOL landscape = UIInterfaceOrientationIsLandscape(toInterfaceOrientation);
[self.dock rotate:landscape];
}];
}
有了[self.dock rotate:]这个方法我们只需要在其他三个子控件中也是现这个方法即可。
核心代码如下:
TLDock.m文件
//dock是否为横屏
- (void)rotate:(BOOL)landscape {
// 设置dock的宽度(高度在HomeVc已经设置好了)
if (landscape) {
self.width = TLTabbarButtonLW;
}else {
self.width = TLTabbarButtonPW;
}
//旋转内部的其他子空间
[self.iconView rotate:landscape];
[self.tabbar rotate:landscape];
[self.bottomMenu rotate:landscape];
self.tabbar.y = self.bottomMenu.y- self.tabbar.height;
}
</pre><pre name="code" class="objc" style="color: rgb(228, 68, 72);">
</pre><p></p><p style="margin-top:0px; margin-bottom:0px; font-size:11px; line-height:normal; font-family:Menlo"><span style=""></span></p><p style="color:rgb(228,68,72); margin-top:0px; margin-bottom:0px; font-size:11px; line-height:normal; font-family:Menlo"><span style="">TLIconView.m文件</span></p><p style="color:rgb(228,68,72); margin-top:0px; margin-bottom:0px; font-size:11px; line-height:normal; font-family:Menlo"><span style=""></span></p><pre name="code" class="objc">- (void)rotate:(BOOL)landscape {
if (landscape) {
self.width = self.superview.width *0.5;
self.x = (self.superview.width - self.width) *0.5;
self.y = 55;
self.height = self.width +40;
}else {
self.x = 5;
self.y = 80;
self.width = self.superview.width- 2*self.x;
self.height = self.width;
}
}
TLTabbar.m文件
//是横屏的时候tabbar已经tabbar子控件的位置大小
- (void)rotate:(BOOL)landscape {
self.width = self.superview.width;
int count = self.subviews.count;
self.height =count *TLTabbarButtonH;
for (int i=0; i<count; i++) {
TLTabbarButton *button = self.subviews[i];
button.x =0;
button.y = i *TLTabbarButtonH;
button.width = self.width;
button.height = TLTabbarButtonH;
}
}
TLBottomenu.m文件
- (void)rotate:(BOOL)landscape{
int count = self.subviews.count;
if (landscape) {
for (int i=0; i<count; i++) {
UIButton *button = self.subviews[i];
button.width = TLTabbarBottomMenuW;
button.height = TLTabbarBottomMenuH;
button.y=0;
button.x= i*button.width;
}
self.height = TLTabbarBottomMenuH;
}else{
for (int i=0; i<count; i++) {
UIButton *button = self.subviews[i];
button.width = TLTabbarBottomMenuW;
button.height = TLTabbarBottomMenuH;
button.y=i*button.width;
button.x= 0;
}
self.height = TLTabbarBottomMenuH *count;
}
self.width = self.superview.width;
self.y = self.superview.height - self.height;
}
二:另外当为横屏的时候,TLTabbarButton里面既有image也有title,这时我们可以自定义一个TLTabrButton
在这里我们需要注意一些小细节:
(1)当我们长按一个按钮(按下不松开)的时候,也是需要实现点击效果也就是有背景图片的效果的,这时候我们需要设置
self.adjustsImageWhenHighlighted = NO
//写这个方法长按的时候也会高亮并有背景图片
- (void)setHighlighted:(BOOL)highlighted {
}
(2)重写- (CGRect)imageRectForContentRect:(CGRect)contentRect
之后需要设置image在button的中心位置
self.imageView.contentMode = UIViewContentModeCenter;
整体代码如下
TLDock.h文件
@interface TLDock()
@property (nonatomic,weak)TLIconView *iconView;
@property (nonatomic,weak)TLTabbar *tabbar;
@property (nonatomic,weak)TLBottomenu *bottomMenu;
@end
@implementation TLDock
- (TLIconView *)iconView {
if (!_iconView) {
TLIconView *iconView= [[TLIconView alloc]init];
[self addSubview:iconView];
self.iconView = iconView;
}
return _iconView;
}
- (TLTabbar *)tabbar{
if (!_tabbar) {
TLTabbar *tabbar= [[TLTabbar alloc]init];
tabbar.autoresizingMask = UIViewAutoresizingFlexibleTopMargin;
[self addSubview:tabbar ];
self.tabbar = tabbar;
}
return _tabbar;
}
- (TLBottomenu *)bottomMenu {
if (!_bottomMenu) {
TLBottomenu *bottonMenu = [[TLBottomenu alloc]init];
[self addSubview:bottonMenu];
//永远连着父控件底部(距离父控件底部是伸缩的)
bottonMenu.autoresizingMask = UIViewAutoresizingFlexibleTopMargin;
self.bottomMenu = bottonMenu;
}
return _bottomMenu;
}
+ (instancetype)dock {
return [[self alloc]init];
}
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
}
return self;
}
//dock是否为横屏
- (void)rotate:(BOOL)landscape {
// 设置dock的宽度(高度在HomeVc已经设置好了)
if (landscape) {
self.width = TLTabbarButtonLW;
}else {
self.width = TLTabbarButtonPW;
}
//旋转内部的其他子空间
[self.iconView rotate:landscape];
[self.tabbar rotate:landscape];
[self.bottomMenu rotate:landscape];
self.tabbar.y = self.bottomMenu.y- self.tabbar.height;
}
@end
TLIconView.h文件
@implementation TLIconView
- (instancetype)initWithFrame:(CGRect)frame {
self = [super initWithFrame:frame];
if (self) {
self.titleLabel.textAlignment = NSTextAlignmentCenter;
self.imageView.layer.cornerRadius = 5;
[self setImage:[UIImage imageNamed:@"luzhu"] forState:UIControlStateNormal];
[self setTitle:@"露水傻傻" forState:UIControlStateNormal];
[self setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
}
return self;
}
- (void)rotate:(BOOL)landscape {
if (landscape) {
self.width = self.superview.width *0.5;
self.x = (self.superview.width - self.width) *0.5;
self.y = 55;
self.height = self.width +40;
}else {
self.x = 5;
self.y = 80;
self.width = self.superview.width- 2*self.x;
self.height = self.width;
}
}
//设置图片的位置大小
- (CGRect)imageRectForContentRect:(CGRect)contentRect {
return CGRectMake(0, 0, self.width, self.width);
}
//设置文字的位置
- (CGRect)titleRectForContentRect:(CGRect)contentRect {
//横屏
if (self.width > TLTabbarButtonPW) {
CGFloat labelx = self.x ;
CGFloat labely = self.width;
CGFloat labelW = self.width;
CGFloat labelH = self.height - self.width;
return CGRectMake(0, labely, labelW,labelH);
}else {
//竖屏
return CGRectZero;
}
}
TLTabbar.h文件
@interface TLTabbar()
@property (nonatomic, weak) TLTabbarButton *selectedButton;
@end
@implementation TLTabbar
- (instancetype)initWithFrame:(CGRect)frame {
if (self) {
self = [super initWithFrame:frame];
// 初始化6个按钮
[self setupButtonWithIcon:@"tab_bar_feed_icon" title:@"全部动态"];
[self setupButtonWithIcon:@"tab_bar_passive_feed_icon" title:@"与我相关"];
[self setupButtonWithIcon:@"tab_bar_pic_wall_icon" title:@"照片墙"];
[self setupButtonWithIcon:@"tab_bar_e_album_icon" title:@"电子相框"];
[self setupButtonWithIcon:@"tab_bar_friend_icon" title:@"好友"];
[self setupButtonWithIcon:@"tab_bar_e_more_icon" title:@"更多"];
}
return self;
}
- (void) setupButtonWithIcon:(NSString *)icon title:(NSString *)title {
TLTabbarButton *button = [[TLTabbarButton alloc]init];
[button setImage:[UIImage imageNamed:icon] forState:UIControlStateNormal];
[button setTitle:title forState:UIControlStateNormal];
//TouchDown 手一按下去就有反应 TouchUpInSide 按下去抬起来之后才有反应
[button addTarget:self action:@selector(buttonClick:) forControlEvents:UIControlEventTouchDown];
[self addSubview:button];
if (self.subviews.count==1) {
[self buttonClick:button];
}
}
- (void)buttonClick:(TLTabbarButton *)button {
NSLog(@".......");
self.selectedButton.selected = NO;
self.selectedButton = button;
button.selected = YES;
//将选中的按钮发送通知给HomeVc
[[NSNotificationCenter defaultCenter]postNotificationName:TLTabbarButtonSelect object:self userInfo:@{TLTabbarButtonSelectAtIndex:@([self.subviews indexOfObject:button])}];
//[self.subviews indexOfObject:button];
}
//是横屏的时候tabbar已经tabbar子控件的位置大小
- (void)rotate:(BOOL)landscape {
self.width = self.superview.width;
int count = self.subviews.count;
self.height =count *TLTabbarButtonH;
for (int i=0; i<count; i++) {
TLTabbarButton *button = self.subviews[i];
button.x =0;
button.y = i *TLTabbarButtonH;
button.width = self.width;
button.height = TLTabbarButtonH;
}
}
TLBottomenu.h文件
@implementation TLBottomenu
- (instancetype)initWithFrame:(CGRect)frame {
self = [super initWithFrame:frame];
if (self) {
//初始化3个按钮
[self setupButton:@"tabbar_mood"];
[self setupButton:@"tabbar_photo"];
[self setupButton:@"tabbar_blog"];
}
return self;
}
- (void)setupButton:(NSString *)icon{
UIButton *button = [[UIButton alloc]init];
[button setImage:[UIImage imageNamed:icon] forState:UIControlStateNormal];
[button setBackgroundImage:[UIImage imageNamed:@"tabbar_separate_selected_bg"] forState:UIControlStateHighlighted];
[self addSubview:button];
}
- (void)rotate:(BOOL)landscape{
int count = self.subviews.count;
if (landscape) {
for (int i=0; i<count; i++) {
UIButton *button = self.subviews[i];
button.width = TLTabbarBottomMenuW;
button.height = TLTabbarBottomMenuH;
button.y=0;
button.x= i*button.width;
}
self.height = TLTabbarBottomMenuH;
}else{
for (int i=0; i<count; i++) {
UIButton *button = self.subviews[i];
button.width = TLTabbarBottomMenuW;
button.height = TLTabbarBottomMenuH;
button.y=i*button.width;
button.x= 0;
}
self.height = TLTabbarBottomMenuH *count;
}
self.width = self.superview.width;
self.y = self.superview.height - self.height;
}
TLTabbarButton.h文件
#define TLTabbarButtonImageRadio 0.4
@implementation TLTabbarButton
- (instancetype)initWithFrame:(CGRect)frame {
self = [super initWithFrame:frame];
if (self) {
//在重写(CGRect)imageRectForContentRect:(CGRect)contentRect方法之后,需要设置image在button的位置
self.imageView.contentMode = UIViewContentModeCenter;
[self setBackgroundImage:[UIImage imageNamed:@"tabbar_separate_selected_bg"] forState:UIControlStateSelected];
[self setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
self.adjustsImageWhenHighlighted = NO;
}
return self;
}
//写这个方法长按的时候也会高亮并有背景图片
- (void)setHighlighted:(BOOL)highlighted {
}
- (CGRect)imageRectForContentRect:(CGRect)contentRect {
//图片与文字的比例
CGFloat imageW = self.width *TLTabbarButtonImageRadio;
if (self.width > TLTabbarButtonPW) {//横屏
return CGRectMake(0, 0,imageW , self.height);
}else {//竖屏的时候,没有文字,titile的跨度等于竖屏的按钮的宽度
return self.bounds;
}
}
- (CGRect)titleRectForContentRect:(CGRect)contentRect {
CGFloat imageW = self.width *TLTabbarButtonImageRadio;
//按钮的宽度大于竖屏时候按钮的宽度的话,就是横屏了
if (self.width > TLTabbarButtonPW) {
return CGRectMake(imageW, 0, self.width - imageW, self.height);
}else {
//没有文字
return CGRectZero;
}
}
三:最后就需要我们把选中的按钮的tag传给控制器啦,这里采用通知(如果是代理的话就需要先从tabbarButton传给tabbar,然后由tabbar传给控制器,麻烦一些)
//通知
#define TLTabbarButtonSelect @"TLTabbarButtonSelect" //name
#define TLTabbarButtonSelectAtIndex @"TLTabbarButtonSelectAtIndex" //key
tabbar:注册通知
//将选中的按钮发送通知给HomeVc
[[NSNotificationCenter defaultCenter]postNotificationName:TLTabbarButtonSelect object:self userInfo:@{TLTabbarButtonSelectAtIndex:@([self.subviews indexOfObject:button])}];
homeVc:监听通知
[[NSNotificationCenter defaultCenter]addObserver:self selector:@selector(switchChildVc:) name:TLTabbarButtonSelect object:nil];
TLHomeViewController.h文件
@interface TLHomeViewController ()
@property (nonatomic,weak) TLDock *dock;
@end
@implementation TLHomeViewController
- (TLDock *)dock {
if (!_dock) {
TLDock *dock = [[TLDock alloc]init];
[self.view addSubview:dock];
self.dock = dock;
}
return _dock;
}
- (void)viewDidLoad {
[super viewDidLoad];
self.view.backgroundColor = TLColor(42, 42, 42);
//默认是竖屏
//设置dock的frame
self.dock.height = self.view.height;
self.dock.autoresizingMask = UIViewAutoresizingFlexibleHeight;
[self willRotateToInterfaceOrientation:self.interfaceOrientation duration:0];
//约束是死的(横屏竖屏宽度不一样)
//[self.dock autoSetDimensionsToSize:CGSizeMake(100, 100)];
//只想设置固定一个值为70(宽;70 上下左:0 右边忽略)
// [self.dock autoSetDimension:ALDimmensionWidth toSize:70];
// [self.dock autoPinEdgesToSuperviewEdgesWithInsets:UIEdgeInsetsMake(0, 0, 0, 0) excludingEdge:AL];
//监听通知
[[NSNotificationCenter defaultCenter]addObserver:self selector:@selector(switchChildVc:) name:TLTabbarButtonSelect object:nil];
}
//移除通知
- (void)dealloc {
[[NSNotificationCenter defaultCenter] removeObserver:self];
}
//屏幕即将旋转的时候调用
- (void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration {
//BOOL landscape = UIInterfaceOrientationIsLandscape(toInterfaceOrientation);
BOOL landscape = UIInterfaceOrientationIsLandscape(toInterfaceOrientation);
[self.dock rotate:landscape];
}
-(void)switchChildVc:(NSNotification *)notification {
int index = [notification.userInfo[TLTabbarButtonSelectAtIndex]integerValue];
NSLog(@"切换第%d个控制器",index);
}
;
TLTabbarButton
TLTabbarButton