IPadDemo之QQZone

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