昨天其实已经写了一篇侧边栏的文章,不过感觉还不是很清晰,这篇文章算是补充吧,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岗位的可以提供下,先行谢过~