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

简介:

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

 

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

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

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//
//  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属性,之后的可以设置文字和图片的位置,重写两个方法:

1
2
3
4
5
6
7
8
9
10
11
12
13
//设置图片区域
-(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);
}

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

1
2
3
4
5
-( void )imageSetting:( NSString  *)backgroundImage selectedImage:( NSString  *)selectedImage{
     self .backgroundImage=backgroundImage;
 
     self .selectedImage=selectedImage;
}

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

1
2
3
4
5
6
7
8
9
10
11
-( 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中的代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
//
//  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,只需要设置横竖屏自动伸缩属性即可:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
//
//  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中的定位:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
-( 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中的设置:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
-( 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中:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
-(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 ;
}

 最终实现效果如下:

本文转自Fly_Elephant博客园博客,原文链接:http://www.cnblogs.com/xiaofeixiang/p/4334242.html,如需转载请自行联系原作者

相关文章
|
10天前
|
IDE Android开发 iOS开发
探索Android与iOS开发的差异:平台选择对项目成功的影响
【9月更文挑战第27天】在移动应用开发的世界中,Android和iOS是两个主要的操作系统平台。每个系统都有其独特的开发环境、工具和用户群体。本文将深入探讨这两个平台的关键差异点,并分析这些差异如何影响应用的性能、用户体验和最终的市场表现。通过对比分析,我们将揭示选择正确的开发平台对于确保项目成功的重要作用。
|
19天前
|
开发框架 数据可视化 Java
iOS开发-SwiftUI简介
iOS开发-SwiftUI简介
|
1天前
|
设计模式 安全 Swift
探索iOS开发:打造你的第一个天气应用
【9月更文挑战第36天】在这篇文章中,我们将一起踏上iOS开发的旅程,从零开始构建一个简单的天气应用。文章将通过通俗易懂的语言,引导你理解iOS开发的基本概念,掌握Swift语言的核心语法,并逐步实现一个具有实际功能的天气应用。我们将遵循“学中做,做中学”的原则,让理论知识和实践操作紧密结合,确保学习过程既高效又有趣。无论你是编程新手还是希望拓展技能的开发者,这篇文章都将为你打开一扇通往iOS开发世界的大门。
|
2天前
|
搜索推荐 IDE API
打造个性化天气应用:iOS开发之旅
【9月更文挑战第35天】在这篇文章中,我们将一起踏上iOS开发的旅程,通过创建一个个性化的天气应用来探索Swift编程语言的魅力和iOS平台的强大功能。无论你是编程新手还是希望扩展你的技能集,这个项目都将为你提供实战经验,帮助你理解从构思到实现一个应用的全过程。让我们开始吧,构建你自己的天气应用,探索更多可能!
12 1
|
7天前
|
开发框架 移动开发 Android开发
安卓与iOS开发中的跨平台解决方案:Flutter入门
【9月更文挑战第30天】在移动应用开发的广阔舞台上,安卓和iOS两大操作系统各自占据半壁江山。开发者们常常面临着选择:是专注于单一平台深耕细作,还是寻找一种能够横跨两大系统的开发方案?Flutter,作为一种新兴的跨平台UI工具包,正以其现代、响应式的特点赢得开发者的青睐。本文将带你一探究竟,从Flutter的基础概念到实战应用,深入浅出地介绍这一技术的魅力所在。
27 7
|
10天前
|
开发框架 前端开发 Android开发
安卓与iOS开发中的跨平台解决方案
【9月更文挑战第27天】在移动应用开发的广阔天地中,安卓和iOS两大操作系统如同双子星座般耀眼。开发者们在这两大平台上追逐着创新的梦想,却也面临着选择的难题。如何在保持高效的同时,实现跨平台的开发?本文将带你探索跨平台开发的魅力所在,揭示其背后的技术原理,并通过实际案例展示其应用场景。无论你是安卓的忠实拥趸,还是iOS的狂热粉丝,这篇文章都将为你打开一扇通往跨平台开发新世界的大门。
|
16天前
|
前端开发 iOS开发 开发者
探索iOS开发中的SwiftUI框架
【9月更文挑战第21天】在iOS应用开发的广阔天地中,SwiftUI框架如一股清新之风,为开发者带来了声明式语法的便捷与高效。本文将深入探讨SwiftUI的核心概念、布局方式及数据绑定机制,同时通过实例演示如何运用SwiftUI构建用户界面,旨在引领读者领略SwiftUI的魅力,并激发其对iOS开发新趋势的思考与实践。
33 6
|
16天前
|
安全 Swift iOS开发
探索iOS开发之旅:Swift语言的魅力与挑战
【9月更文挑战第21天】在这篇文章中,我们将一起潜入iOS开发的海洋,探索Swift这门现代编程语言的独特之处。从简洁的语法到强大的功能,Swift旨在让开发者能够以更高效、更安全的方式构建应用程序。通过实际代码示例,我们会深入了解Swift如何简化复杂任务,并讨论它面临的挑战和未来的发展方向。无论你是初学者还是有经验的开发者,这篇文章都将为你提供新的视角和知识。
31 4
|
25天前
|
API Android开发 iOS开发
安卓与iOS开发中的线程管理对比
【9月更文挑战第12天】在移动应用的世界中,安卓和iOS平台各自拥有庞大的用户群体。开发者们在这两个平台上构建应用时,线程管理是他们必须面对的关键挑战之一。本文将深入探讨两大平台在线程管理方面的异同,通过直观的代码示例,揭示它们各自的设计理念和实现方式,帮助读者更好地理解如何在安卓与iOS开发中高效地处理多线程任务。
|
11天前
|
iOS开发 Python
6-8|如何使用Python语言开发IOS混淆工具
6-8|如何使用Python语言开发IOS混淆工具
下一篇
无影云桌面