iOS開發-仿大眾點評iPad側邊導航欄

昨天其實已經寫了一篇側邊欄的文章，不過感覺還不是很清晰，這篇文章算是補充吧，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崗位的可以提供下，先行謝過~