首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

iOS 9人机界面指南(四):UI元素(上) - 腾讯ISUX

不会希望用户在滚动时候看到五花八门内容和状态栏自身元素混合在一起。想要让用户感受到内容区域够大同时,最大限度地保证可读性,请保证在状态栏后面添加一块背景,用以模糊出现在状态栏内容。...以下有一些方法可以让滚动内容能正常显示在状态 栏后面: 使用导航控制器(navigation controller)来展示内容。导航控制器自动展示状态栏背景,同时能确保内容视图不会出现在状态栏后面。...4.1.2 导航导航栏能够实现在应用不同信息层级结构间导航,有时候也可用于管理当前屏幕内容。 ? ? 导航栏: 是半透明 通常位于屏幕上方,状态栏正下方。...在iOS 7及之前版本里,对分视图控制器仅适用于iPad. 默认情况,对分视图控制器通过当前尺寸来管理其子视图。...默认情况,竖屏方向时只会展示右侧窗格,因此你需要向用户提供一个按钮(通常位于导航栏上)来让用户唤起和隐藏主窗格。对分视图控制器也支持轻扫手势来执行呼出和隐藏动作。

10.1K51

最新iOS设计规范三|3大界面要素:栏(Bars)

这有利于提高我们工作效率,保证用户良好体验。 本文是iOS设计规范系列第3篇,介绍3大界面要素(栏、视图、控件)中栏(Bars)。首先让我们了解一iOS3大界面要素。...一、导航栏(Navigation Bars) 导航栏出现在页面的顶部,位于状态栏下方,可以给一系列层级页面进行导航。当点击进入新页面时,其导航左侧会出现一个返回按钮,并带有前一页面的标题。...在iOS 13及更高版本中,默认情况,大标题导航栏不包含背景材质或阴影。另外,随着页面滑动,大标题要转换为标准标题。 ? 隐藏大标题导航边框。...在iOS 13及更高版本中,可以通过删除导航阴影来隐藏导航底部边框(当滑动内容区域时,边框会自动重新出现)。无边框样式在大标题导航栏中效果很好,因为它增强了标题和内容之间联系感。...有几种常见技术可以做到这一点: · 在APP中使用导航栏,该导航栏会自动显示状态栏背景,并确保内容不会显示在状态栏背后 · 在状态栏背后显示自定义图像,如渐变色或纯色 · 在状态栏背后放置模糊视图

9.8K10
您找到你想要的搜索结果了吗?
是的
没有找到

iOS状态栏使用总结

目录: 一、状态栏导航栏 二、设置状态栏显隐与字体样式 三、设置状态栏背景色 四、启动页隐藏状态栏 五、状态栏导航栏相关常用宏定义 相关文章:iOS导航使用总结 一、状态栏导航状态栏...:显示时间、电池等信息 导航栏:显示app页面标题,返回按钮等 iOS7之前:状态栏导航栏是分开iOS7之后:状态栏导航栏合在一起;导航部分总高度(64)= 状态栏高度(20) +导航栏内容高度...//return NO; //设置状态栏显示 } 但是,这里存在一个问题:如果当前视图控制器是UINavigationController视图控制器,preferredStatusBarStyle...这是因为导航控制器preferredStatusBarStyle才具有修改状态栏样式能力,解决这个问题方法有两种: 方法1:添加子类导航控制器 我们需要使用自定义子类导航控制器,在其中添加如下代码...,所以默认情况状态栏都是跟随导航栏背景色变化而变化。

1.9K30

iOS多设备适配简史以及相应API支撑实现

一直在做iOS开发程序员相信在下面的两个版本交界处需要处理适配坎一定让你焦头烂额过: iOS7出来后视图控制器视图默认尺寸是占据整个屏幕,如果有半透明导航条的话也默认是延伸到导航栏和状态栏下面...(7.0,11.0), tvos(7.0,11.0)); iOS11中提出了一个安全区概念,要求我们可操作视图都放置在安全区内,并对视图滚动视图提供了如下扩展属性: @property (nonatomic...从上面的这些属性中可以看出苹果提出这些解决方案其主要是围绕解决视图导航条、滚动视图状态栏、屏幕边缘之间关系而进行。...因为iOS7和iOS11两个版本中控制器视图和上面所列出一些内容之间关系变化最大。...,也可以将它添加进入视图中去,也可以将这个占位视图作为其他视图约束依赖项,唯一不同就是占位视图不会进行任何渲染和绘制,它只会参与布局处理。

1K30

IOS开发基础系列】UIScrollView专题

(1)如果150mstouch未产生移动,它就把这个事件传递给内部view;     (2)如果150mstouch产生移动,开始scrolling,不会传递给内部view。...假如一开始是对角方向滚动,则不会禁止某个方向 indicatorStyle     滚动样式,基本只是设置颜色。...它在这些对象之间保持了松散配对,视图本身与视图控制器或任何其它控制器对象,委托不是滚轴视图直接子类,它比起牢固配对子类更加松散。...UIPageControl(就是记录当前页面的一串小点)放到导航栏 http://code4app.com/ios/TwitterPaggingViewer/53a7ed4a933bf0794c8b48f9.../article/details/32331933 ios重写Cell后tabelView不能响应点击状态栏回到到顶部 http://www.cocoachina.com/bbs/read.php?

36930

Human Interface Guidelines —— 导航栏(Navigation Bars)

自上次参加完回音分享会后,我下定决心要洗心革面乖乖打基础,于是开启了这个part,争取两个月不间断更新,写完Material Design与iOS组件(顺便学学英语),以便今后在使用时候完全不虚...Navigation Bars 位置 Navigation Bars显示在app屏幕顶部,位于status bar(状态栏)下方,并可穿过一系列不同层级屏幕进行导航。 ...替代 在不需要导航时使用toolbar,或者需要多个控件来管理内容。 ---- 导航栏标题(Navigation Bar Titles) 考虑在navigation bar中显示当前视图标题。...在大多数情况,标题可以帮助人们了解他们正在查看内容。 但是,如果导航标题看起来多余,则可以将标题处留空。 例如,由于第一行内容提供了所需所有上下文,因此Notes不会为当前笔记加标题。...当用户开始滚动内容时,大标题转换为标准标题。 大标题在所有应用程序中没有意义,永远不会与内容竞争。

2.4K110

iOS开发UINavigation系列四——导航控制器UINavigationController

controller管理         导航控制器是一个堆栈结构,只是其中管理对象是controller,通过push与pop进行controller切换,我们有两种方式可以创建导航控制器: /... toolbarClass:(nullable Class)toolbarClass; //使用系统默认导航栏和工具栏,通过一个根视图创建导航控制器 - (instancetype)initWithRootViewController...:(UIViewController *)rootViewController; 通过以下方法对视图控制器进行管理操作: //设置管理视图控制器 - (void)setViewControllers:...:(BOOL)animated; //状态栏对象 @property(null_resettable,nonatomic,readonly) UIToolbar *toolbar; //导航返回手势对象... *interactivePopGestureRecognizer; 四、iOS8后导航新特性 //这个方法是为了iOS方法命名统一,在导航中,其作用和push一样 - (void)showViewController

1.8K20

最新iOS设计规范四|3大界面要素:视图(Views)

这有利于提高我们工作效率,保证用户良好体验。 本文是iOS设计规范系列第4篇,介绍3大界面要素(栏、视图、控件)中视图(Views)。首先让我们回顾一iOS3大界面要素。...栏(Bars) 栏,可以告诉用户在APP中当前在所在位置、能提供导航,还可能包含用于触发操作和传递信息按钮或其他元素。包括6种:导航栏、搜索栏、侧边栏、状态栏、标签栏、工具栏。...如果系统必须执行缩放,那么所有图像具有相同大小和形状时,最容易实现。 六、页面视图(Pages) 页面视图控制器提供了一种在内容页面之间实现线性导航方式,例如在文档、书籍、记事本或日历中。...页面视图控制器可以使用滚动或页面卷曲两种样式任意一种完成页面之间转场过渡。 ? 如果需要,可以自定义一种非线性导航方法。使用页面视图控制器时,页面只能按顺序跳转,而跨页面之间是无法跳转。...网页视图支持前进和后退导航,但默认情况这种交互行为是被禁用了。如果用户想通过网页视图访问多个页面,请启用前进和后退导航,并提供相应控件来启动这些功能。 避免使用网页视图来构建一个网页浏览器。

8.3K31

iOS 一个可滑动缩放轮播图

当偏移量<0时候,也就是向上拖表格,这时候轮播图Cell大小不再合适当前视图。发个消息告诉cell。...关于导航栏和状态栏动态显示问题,原本我自己写了一套,是放在轮播图中,但是我觉得放进去不好,耦合性差,如果有人不想改,也许就得修改我代码了。...你只需要继承他导航控制器,再写一些代码就行了。...(我Demo就是在故事版中继承了这个控制器) 更新日志: iOS 11适配 以上讲解代码均在iOS 11之前版本,11之后我对其进行了重构,使用约束控制放大缩小。...这里不再做讲解,感兴趣下载上面提供Demo自行查看即可。 iOS技术交流群:511860085 欢迎加入! 封面。 ?

1.6K60

IOS开发之视图视图控制器

视图(View), 视图控制器(ViewController)是IOS开发UI部分比较重要东西。在学习视图这一块东西时候,感觉和Java Swing中Panel差不多。...窗口是用来显示视图,下面我们将会结合着实例来具体学习一IOSView和ViewController         1.首先我们需要建一个EmptyProject来测试我们View和ViewController...3.界面都是视图对象,即在UIView类实例中进行布局,UIView表示屏幕上一块矩形区域,负责渲染矩形区域中内容,并且响应该区域发生触摸事件。...UITextView类支持在滚动区域显示和编辑多行文本;而UIWebView类则提供显示HTML内容方法          ?        ...6.导航视图             页签条和导航条和视图控制器结合使用,为用户提供从一个屏幕到另一个屏幕导航工具。

1.7K70

View编程指南(二)

此外,应用程序不会通过显示新window来更改其内容。如果要更改显示内容,请改为改变window最前面的view。 大多数iOS应用程序在其生命周期中只创建并使用一个window。...由于默认情况,view不会被剪切到window边界,所以view仍然可见,但是事件不能到达它们。在启动时启用全屏选项可确保window适合当前屏幕。...注意:如果windowrootview由容器view控制器(如选项卡栏控制器导航控制器或分割view控制器)提供,则不需要自行设置view初始大小。...容器view控制器root据状态栏是否可见,自动调整view大小。...虽然你可以自己分配window到这些级别,但是当你使用特定接口时,系统通常会为你做这些。 例如,当您显示或隐藏状态栏或显示警报视图时,系统会自动创建所需window来显示这些项目。

77910

iOS导航栏使用总结

目录: 一、设置导航栏样式 二、解决自定义导航栏返回按钮后侧滑不可用问题 三、隐藏导航栏底部分割线 四、导航栏引起布局问题 相关文章:iOS状态栏使用总结 一、设置导航栏样式 设置导航样式可分为全局设置与局部设置...iOS导航栏自带返回按钮形式单一,所以大多情况,我们都需要自定义导航栏返回按钮。...,用于优化滑动类视图(继承于UIScrollView视图)在视图控制里显示: iOS系统导航栏UINavigationBar与标签栏UITabBar默认都是半透明模糊效果,在这种情况系统会对视图控制器...我们可以通过一段代码来测试一效果,在默认导航栏(半透明)视图控制器里添加如下代码: //UITextView是滑动视图,内容自动向下偏移,不会导航栏覆盖 UITextView *leftTextView...导航栏透明情况,滑动视图自动偏移,普通视图被遮挡 其实,这种系统优化也是可以控制关闭,关闭优化之后,滑动视图就会和普通视图一样,如果还设置其布局原点是(0,0),其内容就会被导航栏所覆盖,关键代码如下

3.1K20

UI篇-UINavigationController之易忘补充

上面设置为YES,下面的为NO 关于导航返回:     首先ios7 之后只要使用系统自带导航效果就有手动滑动返回效果。但是当自定义返回按钮时,这种手动滑动返回效果就没有了。...将状态栏隐藏就可实现这样不错页面效果 PS:  backBarButtonItem自定义事件是不会被执行 backItem = [[UIBarButtonItem alloc] initWithTitle...:action:设置视图触发事件 tintColor  设置tintColor可以影响添加在导航条上系统样式按钮颜色  title: 标题  titleView :标题视图  leftBarButtonItem...每个视图控制器都有一个navigationItem属性,navigationItem中设置做按钮、右按钮、标题等,会随着控制器显示,也显示到navigationBar上 我们来看一这些名词是什么意思...navigationItem包含了bar视图全部元素(如title,tileview,backBarButtonItem等),受当前viewcontroller管理,即bar形成整个nv导航视图,然后每个

2.1K20

如何处理手势冲突 | 手势导航连载 (三)

粘性沉浸模式: 用户可以通过在系统栏上滑动来暂时退出沉浸模式 这里我们向您进一步解释一流程图里内容。 问题 1: 应用需要隐藏导航栏或状态栏吗?...问题 5: 该视图/控件大部分位于手势交互区域吗? 紧接着问题 4,进一步确认该视图是否完全或大部分位于手势交互区域。...如果您视图放置在一个可滚动操作容器 (如 RecyclerView) 中,那么请这么理解这个问题: 该视图是否完全或大部分位于手势交互区域中?...即使考虑加上了内外边距情况,用户仍然可以正常通过滑动操作来翻看里面的图片。 问题 6: 该视图/控件是否和强制系统手势交互区域重叠? 最后一个问题询问该控件是否位于系统强制手势导航交互区域。...不会,系统仅计算屏幕范围切出矩形。同样,如果视图只有一部分显示在屏幕,则仅计算所请求矩形屏幕可见部分。 请关注下一篇连载 读完本文您可能会问: 为什么我们还没有讲流程图右半部分?

4.8K30
领券