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










1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看rEADME.md或论文文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。 5、资源来自互联网采集,如有侵权,私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看rEADME.md或论文文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。 5、资源来自互联网采集,如有侵权,私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md或论文文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。 5、资源来自互联网采集,如有侵权,私聊博主删除。 6、可私信博主看论文后选择购买源代码。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值