iOS开发-仿大众点评iPad侧边导航栏

十度 IOS 2015年12月01日 收藏

昨天其实已经写了一篇侧边栏的文章,不过感觉还不是很清晰,这篇文章算是补充吧,iPad上看了大众点评的侧边栏,基本上百分之九十类似,具体效果可参考下图:

 

对比昨天主要做了两个修改,一个是图片和文字的显示位置,另外一个就是关于底部的定位和设置的位置在横竖屏时显示的问题,侧边栏的区域是是自己控制的,需要注意一下横竖屏的时候设置一下autoresizingMask,底部图标定位的时候也是一样设置。

导航栏上每个按钮提取出了一个父类GPDockItem,头文件中的代码:

 

//
//  GPDockItem.h
//  GrouponProject
//博客园FlyElephant:http://www.cnblogs.com/xiaofeixiang
//  Created by keso on 15/3/11.
//  Copyright (c) 2015年 keso. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface GPDockItem : UIButton

-(void)imageSetting:(NSString *)backgroundImage selectedImage:(NSString *)selectedImage;

@property (nonatomic,strong)  NSString  *title;

//背景图片
@property (nonatomic,strong)  NSString  *backgroundImage;
//选中图片
@property (nonatomic,strong)  NSString  *selectedImage;

@end

 

相对于之前的代码,主要是添加了设置背景图片和设置选中图片的混合方法,定义了一个Title属性,之后的可以设置文字和图片的位置,重写两个方法:

//设置图片区域
-(CGRect)imageRectForContentRect:(CGRect)contentRect{
    CGFloat  width=contentRect.size.width;
    CGFloat  height= contentRect.size.height * 0.7;
    return CGRectMake(0, 10, width, height);
}
//设置文字区域
-(CGRect)titleRectForContentRect:(CGRect)contentRect{
    CGFloat  width=contentRect.size.width;
    CGFloat  height= contentRect.size.height * 0.3;
    CGFloat  position=contentRect.size.height*0.7;
    return CGRectMake(0, position, width, height);
}

 设置背景图片和选中图片:

-(void)imageSetting:(NSString *)backgroundImage selectedImage:(NSString *)selectedImage{
    self.backgroundImage=backgroundImage;

    self.selectedImage=selectedImage;
}

 设置显示文字和图片在区域内的位置:

-(void)setTitle:(NSString *)title{
    [self setTitle:title forState:UIControlStateNormal];
    self.titleLabel.textAlignment=NSTextAlignmentCenter;
    self.titleLabel.font = [UIFont systemFontOfSize:15];
    //正常状态下是灰色
    [self setTitleColor:[UIColor grayColor] forState:UIControlStateNormal];
    //不可点击的时候切换文字颜色
    [self setTitleColor:[UIColor orangeColor] forState:UIControlStateDisabled];
    //设置图片属性
    self.imageView.contentMode = UIViewContentModeCenter;
}

 GPDockItem.m中的代码:

//
//  GPDockItem.m
//  GrouponProject
//博客园FlyElephant:http://www.cnblogs.com/xiaofeixiang
//  Created by keso on 15/3/11.
//  Copyright (c) 2015年 keso. All rights reserved.
//

#import "GPDockItem.h"

@implementation GPDockItem

/*
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {
    // Drawing code
}
*/

-(instancetype)initWithFrame:(CGRect)frame{
    self=[super initWithFrame:frame];
//    if (self) {
////        UIImageView *splitLine = [[UIImageView  alloc] init];
////        splitLine.frame = CGRectMake(0, 0, GPDockItemWidth, 2);
////        splitLine.image = [UIImage imageNamed:@"separator_tabbar_item.png"];
////        [self addSubview:splitLine];
//
//    }
    return self;

}
-(void)setTitle:(NSString *)title{
    [self setTitle:title forState:UIControlStateNormal];
    self.titleLabel.textAlignment=NSTextAlignmentCenter;
    self.titleLabel.font = [UIFont systemFontOfSize:15];
    //正常状态下是灰色
    [self setTitleColor:[UIColor grayColor] forState:UIControlStateNormal];
    //不可点击的时候切换文字颜色
    [self setTitleColor:[UIColor orangeColor] forState:UIControlStateDisabled];
    //设置图片属性
    self.imageView.contentMode = UIViewContentModeCenter;
}

-(void)imageSetting:(NSString *)backgroundImage selectedImage:(NSString *)selectedImage{
    self.backgroundImage=backgroundImage;

    self.selectedImage=selectedImage;
}

//设置背景图片
-(void)setBackgroundImage:(NSString *)backgroundImage{
    
    _backgroundImage=backgroundImage;
    
    [self setImage:[UIImage imageNamed:backgroundImage] forState:UIControlStateNormal];
    
}
//设置选中图片
-(void)setSelectedImage:(NSString *)selectedImage{
    _selectedImage=selectedImage;
    [self setImage:[UIImage imageNamed:selectedImage] forState:UIControlStateDisabled];
    
}
//设置图片区域
-(CGRect)imageRectForContentRect:(CGRect)contentRect{
    CGFloat  width=contentRect.size.width;
    CGFloat  height= contentRect.size.height * 0.7;
    return CGRectMake(0, 10, width, height);
}
//设置文字区域
-(CGRect)titleRectForContentRect:(CGRect)contentRect{
    CGFloat  width=contentRect.size.width;
    CGFloat  height= contentRect.size.height * 0.3;
    CGFloat  position=contentRect.size.height*0.7;
    return CGRectMake(0, position, width, height);
}

-(void)setFrame:(CGRect)frame{
    //固定Item宽高
    frame.size=CGSizeMake(GPDockItemWidth, GPDockItemHeight);
    [super setFrame:frame];
}

@end

继承自GPDockItem的GPBottomItem,只需要设置横竖屏自动伸缩属性即可:

//
//  GPBottomItem.m
//  GrouponProject
// FlyElephant--http://www.cnblogs.com/xiaofeixiang
//  Created by keso on 15/3/13.
//  Copyright (c) 2015年 keso. All rights reserved.
//

#import "GPBottomItem.h"

@implementation GPBottomItem

/*
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {
    // Drawing code
}
*/

-(instancetype)initWithFrame:(CGRect)frame{
    self=[super initWithFrame:frame];
    if (self) {
        // 自动伸缩
        self.autoresizingMask=UIViewAutoresizingFlexibleTopMargin;
    }
    return self;
}

@end

GPDock.h中的定位:

-(void)addLocation{
    GPBottomItem *tabItem=[[GPBottomItem alloc]init];
    
    [tabItem imageSetting:@"Toolbar_switchcity.png" selectedImage:@"Toolbar_switchcity_selected.png"];
    
    CGFloat y = self.frame.size.height - GPDockItemHeight*2-20;
    //设置位置
    tabItem.frame = CGRectMake(0, y, 0, 0);
    
    [tabItem setTitle:@"北京"];
    
    //设置选中触摸选中事件
    [tabItem addTarget:self action:@selector(tabItemTouchEvent:) forControlEvents:UIControlEventTouchDown];
    tabItem.tag =4;
    [self addSubview:tabItem];
}

 GPDock.h中的设置:

-(void)addSetting{
    GPBottomItem *tabItem=[[GPBottomItem alloc]init];
    
    [tabItem imageSetting:@"Toolbar_setting.png" selectedImage:@"Toolbar_setting_selected.png"];
    
      CGFloat y = self.frame.size.height - GPDockItemHeight-10;
    //设置位置
    tabItem.frame = CGRectMake(0, y, 0, 0);
    
    [tabItem setTitle:@"设置"];
    //设置选中触摸选中事件
    [tabItem addTarget:self action:@selector(tabItemTouchEvent:) forControlEvents:UIControlEventTouchDown];
    tabItem.tag =5;
    [self addSubview:tabItem];
}

  两者有相同之处,分开合并都行,具体看将来要实现的业务逻辑,将其添加到GPDock中:

-(instancetype)initWithFrame:(CGRect)frame{
    self=[super initWithFrame:frame];
    if (self) {
        //自动伸缩高度可伸缩,右边距可以伸缩
        self.autoresizingMask=UIViewAutoresizingFlexibleHeight|UIViewAutoresizingFlexibleRightMargin;
       //设置背景图片
        self.backgroundColor=[UIColor colorWithPatternImage:[UIImage imageNamed:@"Toolbar_bg_tabbar.png"]];
        
        //添加选项卡
        [self addTabItems];
        
        //添加设置
        [self addLocation];
        
        //添加设置
        [self addSetting];
    }
    return self;
}

 最终实现效果如下:

时间匆匆,行笔仓促,难免遗漏,欢迎指正,写博不易,如有好感,请尽情推荐,最近需要换工作,有相关的iOS岗位的可以提供下,先行谢过~