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

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

以下有一些方法可以让滚动内容能正常显示在状态 栏后面: 使用导航控制器(navigation controller)来展示内容。导航控制器自动展示状态栏背景,同时能确保内容视图不会出现在状态栏后面。...为你应用选择配色协调状态栏颜色。默认状态栏内容是黑色,在浅色应用中效果出色,而相应浅色状态栏则更适用于颜色较深应用。...可以填充颜色(使用tintColor来定义导航栏中图标与文字颜色;使用 barTintColor来填充导航栏背景色) API注释 导航栏包含于导航控制器(一个管理显示自定义视图层级结构程序对象)中。...你必须确保你设计控制器优点不会由于用户不熟悉、不认识、不会用而白费功夫。 确保容器内容控制器在横屏与竖屏模式都可用。...下图是iOS模拟器中翻页样式: ? API注释 想要了解如何在代码中定义图片视图,请参考Page View Controllers. 页面视图控制器: 带滚动条页面视图控制器没有默认外观。

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

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

有几种常见技术可以做到这一点: · 在APP中使用导航栏,该导航栏会自动显示状态栏背景,并确保内容不会显示状态栏背后 · 在状态栏背后显示自定义图像,如渐变色或纯色 · 在状态栏背后放置模糊视图...在“照片”应用中浏览全屏照片时,只需轻按一次即可再次显示状态栏。 五、标签栏(Tab Bars) 标签栏出现在页面底部,可以在APP不同模块之间快速切换。标签栏是半透明,也可添加背景颜色。...例如,如果iOS设备上没有歌曲,则“音乐”应用中“立即收听”选项卡将说明如何下载歌曲。 始终在附加视图中切换上下文。...可以在标签上做标记 - 包含白色文本红色椭圆(即小红点),或者一个数字或一个感叹号,用以提示用户有新信息,并且新信息与该视图模式是相关联确保标签栏标志符号在视觉上保持一致和平衡。...在iOS 13及更高版本中,您可以使用SF符号来表示选项卡栏项目。在所有版本iOS中,系统API提供了一系列预设图标。当然你也可以自定义图标。

9.8K10

最新iOS设计规范七|10大视觉规范(Visual Design)

这些布局指南可确保根据设备和上下文进行适当插入。安全区域还可以防止内容重叠在状态栏,导航栏,工具栏和选项卡栏上。系统提供标准视图将自动采用安全区域布局指南。...如有必要,请调整颜色以便于在大多数用例中都能提有很好观看体验。 考虑原彩显示如何影响颜色。原彩显示器使用环境光传感器自动调整显示白点,以适应当前环境照明条件。...iOS默认颜色空间是标准RGB(sRGB)。为确保颜色正确匹配此颜色空间,请确保图像包含嵌入颜色配置文件。 使用宽色可增强兼容显示视觉体验。...当视频内容使用嵌入式信箱或邮筒模式填充以符合特定纵横比时,iOS无法根据用户选择观看模式正确地缩放视频。嵌入视频会使其在全屏模式和适合屏幕模式显示得更小。...使用原生纵横比还可以防止视频在边到边、非全屏环境中正确显示内容,比如iPad上画中画模式

7.9K30

iOS状态栏使用总结

显示时间、电池等信息 导航栏:显示app页面标题,返回按钮等 iOS7之前:状态栏与导航栏是分开iOS7之后:状态栏与导航栏合在一起;导航部分总高度(64)= 状态栏高度(20) +导航栏内容高度...((44) iPhoneX设备出现以后,状态栏高度变为44,导航栏部分总高度(88) = 状态栏(44) + 导航栏内容高度(44) 二、设置状态栏显隐与字体样式 iOS状态栏可以设置显示和隐藏,也可以设置文字颜色...方法2:代码设置 //1.设置状态栏隐藏(YES)或显示(NO) [[UIApplication sharedApplication] setStatusBarHidden:NO]; //2.设置状态栏字体颜色...此时全局设置操作都是无效,需要分页设置才能修改其样式,即:在每个视图控制器或者控制器基类中使用如下代码: - (UIStatusBarStyle)preferredStatusBarStyle {...//return NO; //设置状态栏显示 } 但是,这里存在一个问题:如果当前视图控制器是UINavigationController视图控制器,preferredStatusBarStyle

1.9K30

掌握 SwiftUI Safe Area

掌握 SwiftUI Safe Area 访问我博客 www.fatbobman.com[1] 可以获得更好阅读体验 Safe Area(安全区域)是指不与导航栏、标签栏、工具栏或其他视图控制器提供视图重叠内容空间...对于根视图来说,safeAreaInsets 反映状态栏、导航栏、主页提示器以及 TabBar 等在各个边占用数值。...13 提供 edgesIgnoringSafeArea 修饰器已经在 iOS 14.5 中弃用。...•all(默认)上述两种安全区域划分合集 iOS 13 并没有提供键盘自动避让功能,开发者需要编写一些额外代码来解决软键盘不恰当遮盖视图(如 TextField )问题。...safeAreaInset 修饰符出现解决了上述问题。通过 safeAreaInset,我们可以缩小视图安全区域,以确保所有内容都可以按预期显示

7.5K31

iOS好用第三方侧边栏控件——MMDrawerController

二、MMDrawerController使用及相关设置         MMDrawerController使用十分简单,只需将中心视图控制器和左边栏视图控制器传入初始化方法即可完成MMDrawerController...MMCloseDrawerGestureModeCustom, }; */ @property (nonatomic, assign) MMCloseDrawerGestureMode closeDrawerGestureModeMask; //设置侧边栏显示中心视图控制器用户交互规则...(nonatomic, assign) BOOL showsShadow; //设置是否显示状态栏自定义视图 只有在iOS7之后可用 @property (nonatomic, assign) BOOL...showsStatusBarBackgroundView; //设置状态栏视图颜色 只有在iOS7之后可用 @property (nonatomic, strong) UIColor * statusBarViewBackgroundColor...3.无法设置显示一个最小抽屉宽度。 4.不能支持UITabBarController容器。 5.不能在中心视图控制器之上呈现侧边栏视图。 专注技术,热爱生活,交流技术,也做朋友。 ——珲少

2.8K20

UIViewController生命周期

一、视图控制器 UIViewController采用懒加载方式,也就是说第一次访问到view属性时才会加载或创建它。...由于视图视图控制器管理,所以讨论视图加载方式时,主要讨论视图控制器加载方式。 通过Storyboard加载:这是苹果推荐方式。...合创建一些附加view和控件 3、ViewWillAppear 在视图加载完成,并即将显示在屏幕上时,会调用viewWillAppear方法,在这个方法里,可以改变当前屏幕方向或状态栏风格等。...在这里可以进行一些显示处理。比如键盘弹出,一些特殊过程动画(比如状态条和navigationbar颜色)。...rootViewController(必须指定根控制器) 和 makeKeyAndVisible方法 状态栏和键盘都是特殊UIWindow。

1.8K10

UI篇-UINavigationController之易忘补充

上面设置为YES,下面的为NO 关于导航返回:     首先ios7 之后只要使用系统自带导航效果就有手动滑动返回效果。但是当自定义返回按钮时,这种手动滑动返回效果就没有了。...一个箭头后面带有文字返回是使用ios 自带backBarButtonItem  ,显示字体文字是push之前山层页面的 title  ,如果希望文字是自定义,需要在push 之前   self.navigationItem.backBarButtonItem...:action:设置视图触发事件 tintColor  设置tintColor可以影响添加在导航条上系统样式按钮颜色  title: 标题  titleView :标题视图  leftBarButtonItem...每个视图控制器都有一个navigationItem属性,navigationItem中设置做按钮、右按钮、标题等,会随着控制器显示,也显示到navigationBar上 我们来看一下这些名词是什么意思...navigationItem包含了bar视图全部元素(如title,tileview,backBarButtonItem等),受当前viewcontroller管理,即bar形成整个nv导航视图,然后每个

2.1K20

IOS开发基础系列】UIScrollView专题

某些对象是用来管理内容显示如何绘制,这些对象应该是管理如何平铺显示内容视图,以便于没有子视图可以超过屏幕尺寸。就是当用户滚动时,这些对象应该恰当增加或者移除子视图。          ...一个滚动视图也可以控制一个视图缩放和平铺。当用户做捏合手势时,滚动视图调整偏移量和视图比例。当手势结束时候,管理视图内容显示对象,就应该恰当升级子视图显示。...下面就需要在你创建视图控制器中,创建一个重用视图数组,用来把这些要显示视图放入内存中,这里虽然界面上显示是2排2列四个视图,但是当拖动时候,可能出现前面一排视图显示一部分,末尾一排视图显示一部分情况...编写很多子类是很沉闷事情,你最后会有很多无法重复使用单独视图,而MVC视图部分一个重点是视图是可以在不同控制器和不同模式之中重复使用,如果我们把所有逻辑都放在视图中,它减少了可复用性。        ...它在这些对象之间保持了松散配对,视图本身与视图控制器或任何其它控制器对象,委托不是滚轴视图直接子类,它比起牢固配对子类更加松散。

39830

ViewController及View生命周期1. 起因2. Controller生命周期3. View生命周期4. 内存警告

Controller生命周期 系统提供了控制器显示到消失四个方法。 千万不要看到方法名中间出现了view就以为这是视图方法。这些都是控制器生命周期。...这个阶段会加载一些高开销操作,例如:键盘弹出、特殊过程动画(比方说修改状态栏、导航条颜色等等)这些。...iOS7新增加了导航控制器侧滑手势,当触发侧滑返回时,会调用系统viewWillDisappear:方法,取消侧滑返回时又会调用viewWillAppear:方法。...5_0); 在四个方法中: isMovingFromParentViewController 会在viewWillDisappear & viewDidDisappear 方法内部调用这个方法判断视图控制器视图隐藏是否因为视图控制器从它容器视图控制器移除...,与上面被其它视图控制器显示对应,如信息录入完成,返回之前视图控制器)。

1.3K30

深入理解 Android Window系统

窗口管理:WindowManager服务负责管理所有应用程序窗口层级、位置和大小,确保正确窗口叠加次序和处理焦点变化。...WindowManager作用 WindowManager在Android系统中扮演了以下关键角色: 窗口管理:WindowManager管理所有应用程序窗口显示和布局,确保窗口按正确顺序叠放,以便用户与它们交互...它还包括DecorView,DecorView是Activity界面的根视图,负责包含应用程序内容视图和其他元素(例如标题栏、状态栏等)。...内容视图是开发者定义用户界面布局,包括按钮、文本框、图像等元素。DecorView通过将内容视图添加到自身来显示应用程序用户界面。 标题栏和状态栏:DecorView还包括标题栏和状态栏等元素。...使用DecorView示例 以下是一个示例代码,演示如何在Activity中获取DecorView并更改其背景颜色: // 获取当前ActivityDecorView View decorView =

48720

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

三、情境菜单(Context Menus) 在iOS 13及更高版本中,你可以使用情境菜单让用户访问与APP相关其他功能,而不会使界面混乱。 ?...情境菜单很类似于Peek(轻压手势唤醒)和Pop(重压手势唤醒),但是有两个主要区别: 所有运行iOS 13及更高版本设备都可以使用情境菜单;但Peek和Pop仅适用于支持3D Touch设备。...当人们点击按钮时,日期选择器将扩展为模式视图,从而提供对熟悉日历样式编辑器和时间选择器访问。在模式视图中,人们可以对日期和时间进行多次编辑,然后在视图外部轻按以确认他们选择。...网络加载指示(Network Activity Indicators) 网络加载指示在iOS 13和全面屏显示设备上已被弃用。...在iOS 12及更早版本中,以及在全面屏显示设备上,网络活动指示器会在发生联网时在屏幕顶部状态栏中旋转,联网完成后消失。和活动加载指示器样式一样,并且是非交互式。 ?

8.5K30

iOS-UIWindow详解

iOS程序启动完毕后,创建第一个视图控件就是UIWindow,接着创建控制器View,最后将控制器View添加到UIWindow上,于是控制器View就显示在屏幕上了。...一个iOS程序之所以能显示在屏幕上,完全是因为它有UIWindow,也就是说,没有UIWindow就看不到任何UI界面。 状态栏和键盘都是特殊UIWindow。...那么UIWindow是如何将View显示到屏幕上呢 这里有三个重要对象UIScreen,UIWindow,UIView。...我们可以发现,当我们新建一个项目,直接在stroyboard为view设置一个背景颜色,然后运行项目,就能看到换了背景颜色view,这说明系统已经帮我们创建了一个UIWindow,那么这个UIWindow...3.通过storyboard加载控制器 刚才我们提到过系统在加载storyboard时候会做以下三件事情 创建窗口 加载mian.storyboard 并实例化view controller 分配新视图控制器到窗口

1.9K40

Android App Dark Theme(暗黑模式)适配指南

在 2019 年 Google I/O 和 Apple WWDC 上,新露面的 Android 10 和 iOS 13 都宣布将支持 Dark Theme 也就是我们常说暗黑模式,并提供相关 API...暗色主题 App 比比皆是,但是让 Android 和 iOS 从系统层级支持暗黑模式还是头一次。也许是用户呼声也许是工业推动,发展得益于进步和反馈,暗黑模式就这样来到了你我手机上。...这样在暗黑模式下,OLED 就具有天生优势,只需要关闭黑色区域显示,就可以达到纯黑效果,而 LCD 背光层只能发射白光,所以在显示黑色时候,仍然会有部分光透过颜色薄膜,无法达到纯黑效果,只能达到相对黑效果...如果您应用采用浅色主题背景,则 Force Dark 会分析应用每个视图,并在相应视图在屏幕上显示之前,自动应用深色主题背景。...,在不同模式显示不同颜色

5K20

iOS小技能:设置状态栏背景颜色(图片)

引言 设置状态栏背景颜色解决方案: 使用新API 【statusBarManager】 通过安全区域高度判断是否IphoneX之后机型:if ([UIApplication sharedApplication...].delegate.window.safeAreaInsets.bottom > 0) I 状态栏背景颜色适配方案 问题 [Bugly] Trapped uncaught exception '...补充:如果整个项目的状态栏(电池栏)都是有颜色,并且都是不透明,上面这个方法完全可以应付。...2、iOS 13之后,因为苹果不允许使用KVCvalueForKey访问私有属性。...因此这个方法多次调用就会创建多份statusBar,造成内存开销不说,想设置状态栏为为透明,根本没效果。 解决办法:既然定位到问题所在,办法就是保证iOS 13 之后,每次也都能拿到有去只有一个对象。

1.8K40

iOS导航栏使用总结

目录: 一、设置导航栏样式 二、解决自定义导航栏返回按钮后侧滑不可用问题 三、隐藏导航栏底部分割线 四、导航栏引起布局问题 相关文章:iOS状态栏使用总结 一、设置导航栏样式 设置导航栏样式可分为全局设置与局部设置...导航栏视图层级图 从图中可以看出,导航栏底部分割线是一个UIImageView对象,而且高度只有0.5,所以我们可以据此获取到导航栏底部分割线对象,在一个视图控制器中实现此需求,代码如下: #import...,用于优化滑动类视图(继承于UIScrollView视图)在视图控制里显示iOS系统导航栏UINavigationBar与标签栏UITabBar默认都是半透明模糊效果,在这种情况下系统会对视图控制器...UI布局进行优化:视图控制器里面第一个被添加进去视图是滑动类视图,并且其Frame是整个屏幕大小时,系统会自动调整其contenInset,以保证滑动视图内容不被UINavigationBar与UITabBar...,默认值是UIRectEdgeAll,即:当前视图控制器里各种UI控件会忽略导航栏和标签存在,布局时若设置其原点设置为(0,0),视图会延伸显示到导航栏下面被覆盖。

3.1K20

iOS 9人机界面指南(一)上篇:UI设计基础 - 腾讯ISUX

内置应用使用了同系列系统颜色,这样一来,无论在深色或浅色背景上看起来都很干净,纯粹。 ? 通过使用系统字体确保易读性。...它能协调视图内容显示,实现与用户交互功能并能在不同屏幕内容之间切换。比如,“设置”使用了一个导航控制器来展示其视图层级。...这里有一个关于视图视图控制器如何结合并呈现iOS应用UI例子,如图。 ? 尽管开发者认为真正起到作用视图视图控制器,但一般用户感知到iOS应用是不同屏幕内容集合。...你可以使用一个特征集合让你视图视图控制器响应显示环境变化。 iOS定义了两个尺寸类别(size class),常规(regular)和压缩(compact)。...如你所想,一个iOS设备在竖屏模式可以使用一套类别,而横屏模式下可以使用另一套类别。 iOS能随着尺寸类别和显示环境变化而自动生成不同布局。

1.8K41

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

须要创建两个视图控制器(ViewController根视图控制器,SecondViewController子视图控制器),然后放在导航控制器栈中。...,在状态栏下方显示 //clipsToBounds就是把多余图片裁剪掉 self.navigationController.navigationBar.clipsToBounds=YES...视图上下左右居中显示在标题位置 UIView *textView1=[[UIView alloc]initWithFrame:CGRectMake(10, 10, 50, 30)];...,所谓跳转,事实上就是往导航控制器栈中PUSH或者POP一个视图控制器,这样在最上面的视图控制器就变了,这样视图也跟着变了,由于仅仅显示在栈顶得那个视图控制器视图 //所以(1)控制所谓跳转...事实上是导航控制器在控制,在里面的元素都能够通过navigationController属性获取到它们所在导航控制器 //所以(2)获取到导航控制器之后,使用Push那个方法,往栈里面放一个视图控制器

2.2K10
领券