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岗位的可以提供下,先行谢过~
iOS开发-仿大众点评iPad侧边导航栏相关推荐
- 你好,SegmentFault 新导航 【开发手册】; 再见,侧边导航栏
SegmentFault 在夏季上线了 SegmentFault 5.0 版本,迭代了整个主站的样式,在 8 月的时候上线了面板九宫格(侧边导航栏),整合了部分的入口,方便用户查看笔记.徽章和排行榜等 ...
- iOS开发 导航栏渐变 图片下拉放大 导航栏移动 仿QQ 微博 知乎导航栏
开发中,我们时常会遇到导航栏颜色渐变,导航栏移动等功能;只需要复制以下系统和自定义导航栏代码到你新建的文件中,然后仿照试图控制器所举的例子使用即可,简单易用,别忘记在单例里面实现以下方法用以设置导航栏 ...
- Android高仿大众点评(带服务端)
2019独角兽企业重金招聘Python工程师标准>>> 实例讲解了一个类似大众点评的项目,项目包含服务端和android端源码, 服务端为php代码,如果没有接触过php, 文章中讲 ...
- 《仿大众点评仿美团做一个评价网站——Java SSM》项目研发阶段性总结
<仿大众点评仿美团做一个评价网站--Java SSM>项目研发阶段性总结 一.后台功能实现 (一).注册商家 (二).登录商家中心 (三).商家登录后台操作模块 (1).用户管理模块 (1 ...
- IOS开发——仿网易新闻客户端
IOS开发--仿网易新闻客户端 本文没有内容,传个资源 衔接地址:http://download.csdn.net/detail/u012881779/7152281 左侧导航部分: 新闻版块 订阅版 ...
- iOS开发UI篇—多控制器和导航控制器简单介绍
iOS开发UI篇-多控制器和导航控制器简单介绍 一.多控制器 一个iOS的app很少只由一个控制器组成,除非这个app极其简单.当app中有多个控制器的时候,我们就需要对这些控制器进行管理 有多个vi ...
- 【Android重量级】高仿大众点评源码
高仿大众点评源码 下载地址:http://url.cn/Nzj3Lc 源码简介 声明:本源码只用于个人研究使用,不可用于商业用途,由于本源码引起的纠纷皆与作者无关. 本套源码是本人在校的时候 ...
- 直播app开发搭建,纯css/html实现侧边导航栏
直播app开发搭建,纯css/html实现侧边导航栏 css代码: *{margin: 0px;padding: 0px;}#box{position: absolute;height: 300px; ...
- android 高仿大众点评,高仿大众点评商家列表
原生android,高仿大众点评商家列表; 废话不多说了,上代码,效果图 适配器 class MyAdapter extends BaseAdapter { protected final int m ...
最新文章
- 写一个函数,要求输入一个字符串和一个字符长度,根据字符长度对该字符串进行分隔
- VMware vSphere四种迁移类型的区别与适应场景
- 如何复制一个含有随机指针节点的链表
- android 支付宝月账单 统计图_2019年你抢了多少微信红包?花了多少?(微信账单查看教程)...
- Debian 3.1 (Sarge) 正式发布,Knoppix也升级到最后一个单CD版3.9
- etcd集群部署与遇到的坑
- MyEclipse Servers视窗出现“Could not create the view: An unexpected exception was thrown”错误解决办法...
- android 画面俯视效果,四种方法让你的画面更耐看
- Mozilla在Thunderbird 60.3中的修补了多个安全漏洞
- go定时读取mysql_Windows下MySQL定时备份脚本-Go语言中文社区
- 图像处理边缘处理:Roberts算子和canny算子,对圆与矩阵进行识别
- 路由器、交换机配置命令简写对照表
- 隐马尔可夫模型(HMM)推导详解
- 不要眼馋咪蒙一年赚几千万!今天做自媒体依然还来得及!
- 人民日报申论范文:如何写“担当”“责任”
- IT民工,你的未来在哪里?
- 费控产品之易快报洞察解析
- 路由器刷opwenwrt固件和原厂固件教程
- [H265/HEVC] 波前并行处理WPP
- tomcat的环境变量的配置