iOS11 仿大标题 导航栏
iOS11 SytleTitleController 仿大标题 风格 导航栏
仿 iOS11 大导航标题 风格 UI 适用范围 iOS8 +
前言
iOS11全面应用大标题设计,(岂止于大—— 比逼格更逼格!)bigger than bigger. 突出的大标题 特点:
- 突出的大而粗的标题
- iOS 11标题设计的大且粗,把醒目优先级提到了最高
- 明确整个page核心,结构更明朗,让用户减少疑惑 很多设计师把Apple、google或者微软的用户界面标准奉若神明,觉得只要是他们说的,都是对的 好看不好看,我相信必定还会引起国内的国产手机UI设计追“大苹果风”。
如果你们的设计师也已经开始设计了这种大标题导航的UI,并且让你适配到iOS11以下的iOS10 iOS9 iOS8 那么特别希望 我写的 这个小demo 能够帮到你,毕竟维护自家产品一般不可能只限制用户用iOS11系统吧。。。
效果图是这样的:(动图地址)
为了使用方便,本人特意写了类别方法 UIViewController+HFDynamicBar.h
#import <UIKit/UIKit.h>
#import "HFDynamicNavView.h" @interface UIViewController (HFDynamicBar) @property (nonatomic, strong) HFDynamicNavView *dynamicNavView; /**
设置 展示导航大标题样式 UI
*/
- (void)defaultShowDynamicNav; /**
展示滚动 导航折叠Animation 就在滚动代理方法 UIScrollViewDelegate 中实现该方法
- (void)scrollViewDidScroll:(UIScrollView *)scrollView @param scrollView scrollView
*/
- (void)showDynamicBarAnimationWithScrollView:(UIScrollView *)scrollView; @end
使用方法 分5步:
[self defaultShowDynamicNav];//导航大标题展示 【1】放在tableView 的上层
[tableView mas_makeConstraints:^(MASConstraintMaker *make) { make.top.equalTo(@(self.dynamicNavView.dynamicBottom));/////修改起始高度 【2】这个起始位置相对还是64 make.left.right.bottom.equalTo(self.view); }];
tableView.contentInset = UIEdgeInsetsMake(self.dynamicNavView.bigTitleView.hf_height, 0, 0, 0);////这行代码必须有 【3】为了连贯联动效果
[tableView setContentOffset:CGPointMake(self.view.hf_width, - self.dynamicNavView.bigTitleView.hf_height) animated:NO];////这行代码必须有 【4】为了连贯联动效果
[self showDynamicBarAnimationWithScrollView:scrollView]; //该代码选择实现 需要导航折叠Animation 就要在该代理方法里面实现 不滚动就是默认大标题 【5】选择性实现
可扩展
暴露的属性都是可读写的,任何需要的地方可直接扩展 (比如添加右边导航按钮 。。。) 注意要点:标题居中,约束合法
iOS11 仿大标题 导航栏的更多相关文章
- IOS11 - UINavigationItem大标题,搜索栏实现
1.新建模型 class Contact: NSObject { var name : String? var mobile : String?{ didSet{ { mobileString = m ...
- Android 高仿新浪微博底部导航栏,实现双击首页Tab,页面的ListView滚动、刷新
现在很多APP,如微信.QQ.微博等等,它们的主页面都无一例外的选择使用底部Tab导航, 通过这种方式,可以很好的把页面层级分化,很好的提高用户体验.相信,很多Android开发者,都使用到过这种经典 ...
- Flutter沉浸式状态栏/AppBar导航栏/仿咸鱼底部凸起导航
Flutter中如何实现沉浸式透明Statusbar状态栏效果? 如下图:状态栏是指android手机顶部显示手机状态信息的位置.android 自4.4开始新加入透明状态栏功能,状态栏可以自定义颜色 ...
- 简单仿京东"筛选"界面 双导航栏控制器共存 by Nicky.Tsui
大概就是这么一个效果 如图.大概可以看到,"筛选"视图后面有一层视图盖住了后面原来的视图 那么我们可以通过加一个view到导航栏控制器的view里面来实现 //该view作为全局变 ...
- ViewPager+GridView实现首页导航栏布局分页效果
如图是效果图用ViewPager+GridView实现首页导航栏布局分页效果来实现的效果 Demo下载地址:http://download.csdn.net/detail/qq_29774291/96 ...
- 网页导航栏 html + css的代码实现
一般来讲,我们的网页导航栏是这么个模式来构建在结构上:1.首先我们需要给导航栏的div 给个类名 一般为nav2.然后就是一个无序表格 3.由于导航栏的文字一般都是链接用来跳转页面 要在li里面包含一 ...
- 微信小程序 自定义头部导航栏和导航栏背景图片 navigationStyle
这两天因为要做一个带背景的小程序头,哭了,小程序导航栏有背景也就算了,还得让导航栏上的背景顺下来,心态小崩.现在可以单独设置一个页面的小程序头了,但是前提是要微信7.0以上的版本,考虑到兼容性问题 ...
- 自定义iOS7导航栏背景,标题和返回按钮文字颜色
在iOS7下,默认导航栏背景,颜色是这样的,接下来我们就进行自定义,如果你仅仅是更改一下背景和颜色,代码会很简单,不需要很复杂的自定义View来替代leftBarItem 更改导航栏的背景和文字Col ...
- IOS 改变导航栏返回按钮的标题
IOS 改变导航栏返回按钮的标题 下午又找到了一个新的方法 这个方法不错 暂时没有发现异常的地方. 新写的App中需要使用UINavigationController对各个页面进行导航,但由于第一 ...
随机推荐
- redis 底层数据结构 压缩列表 ziplist
压缩列表是列表键和哈希键的底层实现之一.当一个列表键只包含少量列表项,并且每个列表项要么就是小整数,要么就是长度比较短的字符串,redis就会使用压缩列表来做列表键的底层实现 当一个哈希键只包含少量键 ...
- 通过Get方式传递数据
1:因为get传参数有个特点就是不能超过256字节.如果数据大的话会溢出. 解决办法: $data=json_encode($data_array); 然后在拼接超链接: <a href=&qu ...
- Java(System类,currentTimeMillis())
CurrentTimeMillis()方法来记录程序的执行时间.currentTimeMillis()方法将返回自1970年1月1日午夜起到现在的时间,时间单位是ms,如果要记录程序中一段程序的运行时 ...
- Python 爬虫实战5 模拟登录淘宝并获取所有订单
经过多次尝试,模拟登录淘宝终于成功了,实在是不容易,淘宝的登录加密和验证太复杂了,煞费苦心,在此写出来和大家一起分享,希望大家支持. 本篇内容 python模拟登录淘宝网页 获取登录用户的所有订单详情 ...
- Problem 500!!! (Project Euler 500)
题目大意:求出最小的正整数,它的约数有$2^{500500}$个. 思路:考虑将一个数质因数分解,如果它的约数有$2^{500500}$个, 那么每个质因子的指数一定是$2^k-1$这样的形式. 如果 ...
- firefox(火狐)怎么关闭鼠标拖拽搜索
工具-附加组件-卸载<附加组件管理器> 即可. 这玩意真心坑爹,起这个名字的人绝对是吃屎了,这名字怎么和鼠标拖拽混到一起的 !!! 关键字:火狐:鼠标:鼠标拖拽:鼠标手势:关闭
- Laravel5.1 模型 --一对一关系
这篇文章主要记录模型的一对一关系,关联关系是Model的一种非常方便的功能. 1 实现一对一关系 1.1 准备工作 首先我们需要创建两张表和对应的两个模型,第一个模型是用户表,第二个模型是账号表. 这 ...
- Laravel5.1 数据库--DB运行原生SQL
Laravel操作数据库有三种:DB原生SQL.构建器.Model.这三种依情况而决定使用哪种更合适. 那么今儿咱就从DB原生SQL说起: 1 用DB门面原生SQL语句操作 用DB门面操作的话呢 无非 ...
- iphone断点下载,断点续传
本文转载至 http://blog.csdn.net/zaitianaoxiang/article/details/6650469 - (void)loadView { NSURLConnection ...
- ADO.NET详细学习笔记《一》
目录 ADO.NET和ADO的区别 ADO.NET的五大核心对象 Connection对象 Command对象 DataAdapter对象,DataSet对象 DataReader对象 [1]ADO. ...