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

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

你不会希望用户在滚动时候看到五花八门内容状态栏自身元素混合在一起。想要让用户感受到内容区域够大同时,最大限度地保证可读性,请保证在状态栏后面添加一块背景,用以模糊出现在状态栏内容。...导航,工具标签 可以操作当前app视图对象各种控件或对象 (默认情况, 浮出层表格视图导航工具背景都是透明,这样会让浮出层毛玻璃效果展示出来) 在横屏情况,动作列表总是出现在浮出层里...在iOS 7及之前版本里,对分视图控制器仅适用于iPad. 默认情况,对分视图控制器通过当前尺寸来管理其视图。...Value 2布局,文本副标题中间垂直间距会让用户专注于副标题第一 个单词。 ? 重要 以上四种单元格样式均支持添加表格视图元素,勾选或展开标志。...(下图是iPhone自带邮件应用,网络视图指的是下图中导航标签中间区域) ? API注释 想要了解如何在代码定义网络视图,请参考Web Views.

10.1K51

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

这有利于提高我们工作效率,保证用户良好体验。 本文是iOS设计规范系列第3篇,介绍3大界面要素(视图、控件)(Bars)。首先让我们了解一iOS3大界面要素。...有时,导航右侧也会有一个控件,“编辑”或“完成”按钮,用于管理活动视图内容。在拆分视图中,导航可能会显示在拆分视图单个窗格。...导航是半透明,也可以添加背景色,并且必要时可以设置为隐藏。 ? 某些情况可暂时隐藏导航,以提供更沉浸体验。例如,当人们查看全屏照片时,“照片”会隐藏导航其他界面元素。...如果你APP也用到了这个功能,切记要让用户使用简单手势(点按)来恢复导航导航标题 在导航显示当前视图标题。在多数情况,标题可以帮助人们了解他们在看什么。...有几种常见技术可以做到这一点: · 在APP中使用导航,该导航会自动显示状态栏背景,并确保内容不会显示在状态栏背后 · 在状态栏背后显示自定义图像,渐变色或纯色 · 在状态栏背后放置模糊视图

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

iOS状态栏使用总结

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

1.9K30

Human Interface Guidelines —— 导航(Navigation Bars)

Navigation Bars 位置 Navigation Bars显示在app屏幕顶部,位于status bar(状态栏)下方,并可穿过一系列不同层级屏幕进行导航。 ...暂时隐藏navigation bar以提供更加身临其境体验。 照片在查看全屏照片时会隐藏navigation bar其他界面元素。 如果你实现这类行为,让用户用简单手势恢复导航点击。...替代 在不需要导航时使用toolbar,或者需要多个控件来管理内容。 ---- 导航标题(Navigation Bar Titles) 考虑在navigation bar显示当前视图标题。...在大多数情况,标题可以帮助人们了解他们正在查看内容。 但是,如果导航标题看起来多余,则可以将标题处留空。 例如,由于第一行内容提供了所需所有上下文,因此Notes不会为当前笔记加标题。...在某些app,大标题大号加粗文本可以帮助用户在浏览搜索时知道自己所在位置。 例如,在 tabbed layout,大型标题可以帮助看清当前活动tab,并在用户滚动到顶部时通知用户。

2.4K110

iOS 11 更大导航 (官方翻译版)

导航 导航出现在应用程序屏幕顶部状态栏下方,并可以通过一系列分层屏幕进行导航。当显示新屏幕时,通常标有前一屏幕标题后退按钮出现在左侧。...有时,导航右侧包含一个控件,编辑或完成按钮,用于管理活动视图内容。在拆分视图中,导航可能会出现在拆分视图单个窗格。...暂时隐藏酒吧,提供更身临其境体验。查看全屏照片时,照片会隐藏导航其他界面元素。如果您实现这种行为,让用户使用简单手势(轻按)来还原导航。...大标题 当您需要特别强调上下文时,请使用较大标题。在一些应用程序,大标题大胆大胆文字可以帮助人们浏览搜索。例如,在标签布局,大标题可以帮助澄清活动选项卡,并在用户滚动到顶部时通知用户。...导航控件 避免拥挤导管控制太多。通常,导航不应包含视图的当前标题,后退按钮管理视图内容一个控件。如果您在导航中使用分段控件,则该不应包含标题或除分段控件之外任何控件。

2.8K30

IOS开发基础系列】UIScrollView专题

currentPage;     [self setupScrollToTop];     [self callBackChangedPage]; } 2.4.2  指定Cell大小与间距 2.4.3 支持点击状态栏回到页面顶部...        scrollsToTop是UIScrollView一个属性,主要用于点击设备状态栏时,是scrollsToTop == YES控件滚动返回至顶部。         ...每一个默认UIScrollView实例,他scrollsToTop属性默认为YES,所以要实现某一UIScrollView实例点击设备状态栏返回顶部,则需要关闭其他UIScrollView实例...UIPageControl(就是记录当前页面的一串小点)放到导航 http://code4app.com/ios/TwitterPaggingViewer/53a7ed4a933bf0794c8b48f9.../article/details/32331933 ios重写Cell后tabelView不能响应点击状态栏回到到顶部 http://www.cocoachina.com/bbs/read.php?

36130

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

一直在做iOS开发程序员相信在下面的两个版本交界处需要处理适配坎一定让你焦头烂额过: iOS7出来后视图控制器视图默认尺寸是占据整个屏幕,如果有半透明导航条的话也默认是延伸到导航状态栏下面...这段时间相信你对要同时满足iOS7以下版本进行大面积改版特殊适配处理,尤其是状态栏高度问题尤为棘手。...iOS11出来后尤其是iPhoneX设备推出,iPhoneX设备特殊性表现为顶部状态栏高度由20变为了44,底部还出现了一个34安全区,当横屏时还需要考虑左右两边44缩进处理。...从上面的这些属性可以看出苹果提出这些解决方案其主要是围绕解决视图导航条、滚动视图状态栏、屏幕边缘之间关系而进行。...因为iOS7iOS11两个版本控制器视图上面所列出一些内容之间关系变化最大。

1K30

深入理解 Android Window系统

它还包括DecorView,DecorView是Activity界面的根视图,负责包含应用程序内容视图其他元素(例如标题状态栏等)。...内容视图是开发者定义用户界面布局,包括按钮、文本框、图像等元素。DecorView通过将内容视图添加到自身来显示应用程序用户界面。 标题状态栏:DecorView还包括标题状态栏等元素。...标题通常包含应用程序标题操作按钮(例如返回按钮)。状态栏位于屏幕顶部,通常包括系统通知、时间电池状态等信息。...属性:应用程序窗口可以包括标题、内容视图系统状态栏。它们通常可以获得焦点,并且可以与用户交互。...它们不属于应用程序一部分,而是由Android系统管理。 属性:系统窗口包括状态栏导航、锁屏、通知等。它们通常在应用程序之上显示,并具有高度系统权限。

44620

iOS开发·适配iPhone X相关方法

过了好久,今天终于有时间总结一适配iPhone X相关坑,总的来说有两类坑,一个是导航+状态栏高度发生了变化,一个是一些没有实现实现-tableView: viewForHeaderInSection...灵活返回状态栏+导航高度 需求:灵活得到导航+状态栏高度,作为一个视图Y轴起点。...适配iPhone X其他问题 适配iPhone XXcode 9过程,除了与导航相关问题,还有一个问题经常出现,就是UITableView相关问题。下面两个办法可以解决多数错位问题。...iOS新增了个safeArea,原来老代码,规定子视图跟根子视图关系代码需要新增一个判断:当iOS 11时,需要改为视图跟根子视图安全区关系。...(self.view) } 当然,一般除了tabbar不能放在这个底部虚拟home区,其它视图tableView视图或者网页视图时可以放在底部虚拟home区

1.2K40

最新iOS设计规范五|3大界面要素:控件(Controls)

这有利于提高我们工作效率,保证用户良好体验。 本文是iOS设计规范系列第5篇,介绍3大界面要素(视图、控件)控件(Controls)。首先让我们回顾一iOS3大界面要素。...(Bars) ,可以告诉用户在APP当前在所在位置、能提供导航,还可能包含用于触发操作和传递信息按钮或其他元素。包括6种:导航、搜索、侧边状态栏、标签、工具。...虽然菜单可以缩短情境菜单并说明用户可以执行命令,但是如果子菜单分还几个层级的话会使得体验变得复杂,并且让用户难以导航。 将最常用项放在情境菜单顶部。...将进度条用于持续时间明确任务。进度条非常适合显示任务状态,尤其是当它帮助传达任务需要完成多长时间时。 在导航工具隐藏轨道未填充部分。默认情况,进度条轨道包含已填充未填充部分。...在iOS 12及更早版本,以及在全面屏显示设备上,网络活动指示器会在发生联网时在屏幕顶部状态栏旋转,联网完成后消失。活动加载指示器样式一样,并且是非交互式。 ?

8.5K30

兼容 - 纯代码完美适配 iPhoneX

没有适配 iPhoneX触底页面 旧工程如何在iphoneX全屏显示 只需要在LaunchImage添加一个尺寸为1125 × 2436启动图,并且工程使用LaunchImage加载启动图,而不是使用...关于状态栏另外两个需要注意地方: 不要在iPhone X隐藏状态栏,一个原因是显示内容足够高了,另一个是这样内容会被刘海切割。 ?...现在通话或者其它状态状态栏高度不会变化了,程序不需要去做兼容。 横屏 在横屏状态,不能因为刘海原因将内容向左或者向右便宜,要保证内容中心对称: ?...> 如何实现在工程任何地方修改状态栏颜色设置 info.plist添加下面三项 UIStatusBarHidden UIStatusBarStyle...值得注意是:我这个项目中使用是系统自带导航、Tabbar。

4.4K20

全屏、沉浸式、fitSystemWindow使用及原理分析:全方位控制“沉浸式”实现

改变状体导航颜色本质是往DecorView添加有颜色View, 并放在状态栏导航下面。...不过,如果状态栏被设置为透明,用户就会看到状态栏下方有一片空白,这种体验肯定不好。这种情况,往往希望内容能够延伸到状体下方,因此,就需要把空白也留给内容视图。...ContentView是一个LinearLayout,可以看出它并不是全屏,而是底部有一个Margin,正好对应导航高度,顶部有个padding,这个其实是由fitSystemWindow决定...仅仅设置隐藏导航 上图中由于设置了SYSTEM_UI_FLAG_HIDE_NAVIGATION,所以没有导航View被添加,DecorView只有状态栏背景(1)View与根内容布局,从图中点2...SystemUi系统状态栏添加逻辑 上面我们说过了,状体导航属于系统窗口,不在用户管理范畴内,由于牵扯到通知、图标之类管理,还是挺复杂,这里我们只关心 状态栏添加时机,用来说明状态栏视图其实是不归

5.3K40

掌握 SwiftUI Safe Area

掌握 SwiftUI Safe Area 访问我博客 www.fatbobman.com[1] 可以获得更好阅读体验 Safe Area(安全区域)是指不与导航、标签、工具或其他视图控制器提供视图重叠内容空间...本文将探讨如何在 SwiftUI 获取 SafeAreaInsets、将视图绘制到安全区域之外、修改视图安全区域等内容。...对于根视图来说,safeAreaInsets 反映状态栏导航、主页提示器以及 TabBar 等在各个边占用数值。...SafeAreaRegions 定义了三种安全区域划分: •container由设备用户界面内容器所定义安全区域,包括诸如顶部底部等元素。...尽管使用 safeAreaInset 为列表在底部添加状态栏或自定义 TabBar 非常方便,但如果你列表中使用了 TextField,情况将变得很麻烦。

7.5K31

H5 页面 iPhoneX 刘海屏适配

但是为了比较,我这里给出一张苹果官方文档,iPhone8之前常规屏幕刘海屏 Safe Area 区域对比图。 ?...safe-area.png 很明显,在讨论适配之前,我们页面一般有两种分类: 1、H5 页面使用原生 App Navigation Bar 导航,此时,status bar 状态栏导航都是原生控件...2、H5 页面在 iOS 占据全屏页面,在这种情况,除了要兼顾底部小黑条,我们还要处理页面上部跟 状态栏接触部分,避免内容出现在状态栏上。...WX20200531-205658@2x.png 可以看到页面的顶部,因为 safe-area-inset-top 避开了状态栏,而底部因为 safe-area-inset-bottom 避开了小黑条,...当你页面不使用原生导航铺在整个屏幕时,这就是一个不错适配方案。

4.2K40

iOS 知识小集(Status Bar变换)

背景 iOS 中经常会有需要在某个界面改变状态栏颜色或者某个界面隐藏状态栏需求。而改变状态栏颜色控制状态栏显示隐藏API,在iOS 不同版本也发生了很多变化。...iOS 7以前 在iOS 7之前,状态栏是不占视图位置。每个控制器根view都是从屏幕Y轴20px处开始显示。...iOS 7以前状态栏设置 从API来看,那时候也是支持在代码里修改状态栏样式以及显示隐藏。只是因为状态栏对整个APP影响不大,所以一般在plist里设置好后,用不着再去修改了。 ?...API iOS 7 ~iOS 9 从iOS 7开始系统风格大变样,图标扁平了,状态栏也不在闹独立了。因为状态栏会受到导航或者View背景色影响,所以状态栏风格也需要实时调整了。...window其根视图控制器背景色必须为clearColor。

1.3K21

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

/通过一个自定义导航工具创建导航控制器 - (instancetype)initWithNavigationBarClass:(nullable Class)navigationBarClass... toolbarClass:(nullable Class)toolbarClass; //使用系统默认导航工具,通过一个根视图创建导航控制器 - (instancetype)initWithRootViewController...:(BOOL)animated; //状态栏对象 @property(null_resettable,nonatomic,readonly) UIToolbar *toolbar; //导航返回手势对象... *interactivePopGestureRecognizer; 四、iOS8后导航新特性 //这个方法是为了iOS方法命名统一,在导航,其作用push一样 - (void)showViewController...; //push时候隐藏底部push后隐藏tabbar @property(nonatomic) BOOL hidesBottomBarWhenPushed; //管理它导航控制器 @property

1.8K20

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

4.3.2 添加联系人按钮 添加联系人按钮让用户将现有联系人添加到文本框或者其它文字视图中。 ? API注释 想要了解如何在代码定义添加联系人按钮,请参考UIButton....4.3.7 网络活动指示器 网络活动指示器在状态栏中出现,表示网络活动正在进行。 ?...网络活动指示器: 出现在状态栏,当网络活动正在进行时它会旋转,在活动停止时它则消失 不支持用户交互行为 当你app正在链接网络,而这个连接过程将会持续好几秒时候,你可以通过网络活动指示器来给用户以反馈...4.3.10 进度视图 进度视图展示了任务或进程进度(下图是iOS默认邮件App工具)。 ?...举个例子,如果一个模态视图中含有导航取消或完成任务按钮,这里导航条样式应该与你app中导航条一样。 合适的话,在模态视图里加入可以说明任务内容标题。

13.2K30

UIViewController生命周期

合创建一些附加view控件 3、ViewWillAppear 在视图加载完成,并即将显示在屏幕上时,会调用viewWillAppear方法,在这个方法里,可以改变当前屏幕方向或状态栏风格等。...applicationWillResignActive:在应用程序将要由活动状态切换到非活动状态时候,要执行委托调用, home 按钮,返回主屏幕,或全屏之间切换应用程序等。...rootViewController(必须指定根控制器) makeKeyAndVisible方法 状态栏键盘都是特殊UIWindow。...=vc]; 4、KeyWindow 当前app可以打开多个window 系统状态栏其实就是一个window ,程序启动时候创建默认window ,弹出键盘也是一个window ,alterView...而通常我们程序界面都是处于Normal这个级别的,系统顶部状态栏应该是处于StatusBar级别,提醒用户等操作位于Alert级别。

1.8K10

《Motion Design for iOS》(十五)

从UIKitCoreAnimation开始 通常情况iOS app屏幕上物体都是UIView对象。它们是矩形并且有坐标大小来定义它们在屏幕上位置尺寸。...比如说,iOS app状态栏是一个长且瘦视图,处于屏幕顶端,并且状态栏目中每个物体(时间、电池指示器、信号强度指示器等等)都是状态栏视图其它视图。...运营商图像视图(苹果控制) wifi信号强度视图(苹果控制) 当前时间视图(苹果控制) 电池等级视图(苹果控制) “汉堡包”菜单按钮 标题标题标签 改变子板按钮 一个UITableViewCell...视图,用来包含UITableView中一行元素 UILabel帖子标题 评论数量UIButton,由一个评论气泡图评论数量组成 显示帖子URLUILable UILabel显示帖子点值板...一个UIView本质上是一个包含内部图形矩形。在屏幕上布局,靠近或在其他视图顶部,还可能会有高级透明效果来整合到一起或者快速绘制。

84140

iOS开发-22】navigationBar导航,navigationItem建立:获取导航基本文本button以及各种跳跃

注意后面这个前面这个相比,多了一个“s”。有非常多个。也要注意一有多个button时排列顺序。 (5)我们创建这些导航条button有非常多种形式。...我们当然也能够利用自己创建导航条button来覆盖原来导航控制器产生默认button,“<Back”。 相同。...须要创建两个视图控制器(ViewController根视图控制器,SecondViewController视图控制器),然后放在导航控制器栈。...//视图xy无效。...,所谓跳转,事实上就是往导航控制器栈PUSH或者POP一个视图控制器,这样在最上面的视图控制器就变了,这样视图也跟着变了,由于仅仅显示在栈顶得那个视图控制器视图 //所以(1)控制所谓跳转

2.2K10
领券