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,如需转载请自行联系原作者

相关文章
|
29天前
|
开发框架 前端开发 Android开发
安卓与iOS开发中的跨平台策略
在移动应用开发的战场上,安卓和iOS两大阵营各据一方。随着技术的演进,跨平台开发框架成为开发者的新宠,旨在实现一次编码、多平台部署的梦想。本文将探讨跨平台开发的优势与挑战,并分享实用的开发技巧,帮助开发者在安卓和iOS的世界中游刃有余。
|
6天前
|
iOS开发 开发者 MacOS
深入探索iOS开发中的SwiftUI框架
【10月更文挑战第21天】 本文将带领读者深入了解Apple最新推出的SwiftUI框架,这一革命性的用户界面构建工具为iOS开发者提供了一种声明式、高效且直观的方式来创建复杂的用户界面。通过分析SwiftUI的核心概念、主要特性以及在实际项目中的应用示例,我们将展示如何利用SwiftUI简化UI代码,提高开发效率,并保持应用程序的高性能和响应性。无论你是iOS开发的新手还是有经验的开发者,本文都将为你提供宝贵的见解和实用的指导。
87 66
|
16天前
|
开发框架 Android开发 iOS开发
安卓与iOS开发中的跨平台策略:一次编码,多平台部署
在移动应用开发的广阔天地中,安卓和iOS两大阵营各占一方。随着技术的发展,跨平台开发框架应运而生,它们承诺着“一次编码,到处运行”的便捷。本文将深入探讨跨平台开发的现状、挑战以及未来趋势,同时通过代码示例揭示跨平台工具的实际运用。
|
20天前
|
Java 调度 Android开发
安卓与iOS开发中的线程管理差异解析
在移动应用开发的广阔天地中,安卓和iOS两大平台各自拥有独特的魅力。如同东西方文化的差异,它们在处理多线程任务时也展现出不同的哲学。本文将带你穿梭于这两个平台之间,比较它们在线程管理上的核心理念、实现方式及性能考量,助你成为跨平台的编程高手。
|
22天前
|
存储 前端开发 Swift
探索iOS开发:从新手到专家的旅程
本文将带您领略iOS开发的奇妙之旅,从基础概念的理解到高级技巧的掌握,逐步深入iOS的世界。文章不仅分享技术知识,还鼓励读者在编程之路上保持好奇心和创新精神,实现个人成长与技术突破。
|
25天前
|
安全 IDE Swift
探索iOS开发之旅:从初学者到专家
在这篇文章中,我们将一起踏上iOS开发的旅程,从基础概念的理解到深入掌握核心技术。无论你是编程新手还是希望提升技能的开发者,这里都有你需要的指南和启示。我们将通过实际案例和代码示例,展示如何构建一个功能齐全的iOS应用。准备好了吗?让我们一起开始吧!
|
1月前
|
安全 Swift iOS开发
Swift 与 UIKit 在 iOS 应用界面开发中的关键技术和实践方法
本文深入探讨了 Swift 与 UIKit 在 iOS 应用界面开发中的关键技术和实践方法。Swift 以其简洁、高效和类型安全的特点,结合 UIKit 丰富的组件和功能,为开发者提供了强大的工具。文章从 Swift 的语法优势、类型安全、编程模型以及与 UIKit 的集成,到 UIKit 的主要组件和功能,再到构建界面的实践技巧和实际案例分析,全面介绍了如何利用这些技术创建高质量的用户界面。
29 2
|
1月前
|
vr&ar Android开发 iOS开发
安卓与iOS开发中的用户界面设计原则
【10月更文挑战第41天】探索移动应用开发的精髓,本文将深入分析安卓和iOS平台上用户界面设计的核心原则。通过比较两大操作系统的设计哲学,我们将揭示如何打造直观、易用且美观的应用程序界面。无论你是初学者还是资深开发者,这篇文章都将为你提供宝贵的见解和实用的技巧,帮助你在竞争激烈的应用市场中脱颖而出。
|
1月前
|
设计模式 Swift iOS开发
探索iOS开发:从基础到高级,打造你的第一款App
【10月更文挑战第40天】在这个数字时代,掌握移动应用开发已成为许多技术爱好者的梦想。本文将带你走进iOS开发的世界,从最基础的概念出发,逐步深入到高级功能实现,最终指导你完成自己的第一款App。无论你是编程新手还是有志于扩展技能的开发者,这篇文章都将为你提供一条清晰的学习路径。让我们一起开始这段旅程吧!
|
1月前
|
iOS开发 开发者
探索iOS开发中的SwiftUI框架
【10月更文挑战第39天】在苹果的生态系统中,SwiftUI框架以其声明式语法和易用性成为开发者的新宠。本文将深入SwiftUI的核心概念,通过实际案例展示如何利用这一框架快速构建用户界面,并探讨其对iOS应用开发流程的影响。