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

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

可以填充颜色(使用tintColor来定义导航栏中的图标与文字颜色;使用 barTintColor来填充导航栏背景色) API注释 导航栏包含于导航控制器(一个管理显示自定义视图层级结构的程序对象)中。...而当你在导航栏中使用了分段控件,就不要再放标题以及其它多余控件了。 确保文字按钮之间拥有足够的空间。如果导航栏左边或右边的文字按钮之间的间距太小,那些文字看起来会像挤在一起一样,让用户难以区分。...举个例子,不要在同一个应用中使用不透明导航栏和半透明工具栏。在屏幕处于同一方向时,最好不要改变不同屏上导航栏的背景图片、颜色和透明度。 确保你自定义的返回按钮的外观与操作仍然像一个返回按钮。...请注意,当搜索的视图控制器包含在导航控制器里面的时候——比如在邮件应用(Mail)中那样,当用户激活搜索时,搜索栏会自动上浮,平铺到原来导航栏的位置上。...当用户在视图中拖拽内容,内容随之滚动;当用户轻扫屏幕时,内容将快速滚动——直到用户再次触摸屏幕或内容已经到达底部时停止。

10.1K51

6详解AppBar小部件

AppBar 应用栏是各种应用程序中最常用的组件之一。它可用于容纳搜索字段、以及在页面之间导航的按钮,或者只是页面标题。...AppBar 包含各种属性,包括颜色、大小、图标主题、文本主题等等。 背景颜色 以下代码将 AppBar 的背景颜色更改为深橙色。500添加以访问颜色的特定阴影,900即最暗和最亮50。...工具栏高度和不透明度 最后,我们有工具栏属性。工具栏包含文字,图标,按钮,和其他任何公司的前景,除了小部件,如Container和Image。...的布局和添加小部件 如何为 AppBar 的图标、文本、背景、高度、阴影颜色和工具栏设置主题 所以我们有了!...用来在 Toolbar 标题下面显示一个 Tab 导航栏 this.elevation,//控件的 z 坐标顺序,默认值 4,对于可滚动的 SliverAppBar,当 SliverAppBar

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

    UI篇-UINavigationController之易忘补充

    设置导航栏的背景图片 (多见于导航背景颜色是渐变颜色,使用一张图片)但是这张图片设置好以后,所有的控件的Y坐标都会下移64,也就是说,这张图片会占用屏幕的64pt 高度的屏幕,而且无法被普通试图覆盖使用...在入口类中全局设置就可以达到统一导航栏颜色的效果。  ...上面设置的为YES,下面的为NO 关于导航返回:     首先ios7 之后只要使用系统自带的导航效果就有手动滑动返回的效果。但是当自定义返回按钮时,这种手动滑动返回的效果就没有了。...:action:设置视图的触发事件 tintColor  设置tintColor可以影响添加在导航条上的系统样式的按钮的颜色  title: 标题  titleView :标题视图  leftBarButtonItem...每个视图控制器都有一个navigationItem属性,navigationItem中设置的做按钮、右按钮、标题等,会随着控制器的显示,也显示到navigationBar上 我们来看一下这些名词是什么意思

    2.2K20

    Cocoa编程中视图控制器与视图类详解

    一切都是在被推入的UIViewController子类内部执行推入请求和相关导航栏的定制(如:右键按钮)。...导航栏可以通过直接访问navigationBar属性,改变栏的风格或者它的颜色: C代码   self.navigationController.navigationBar.barStyle = UIBarStyleBlackTranslucent...)和栏标题(title)、用于显示标题的视图(titleView),以及用于从当前视图向后导航的Back按钮(backBarButtonItem)和隐藏后退按钮(hidesBackButton)。...注意:对于导航栏定制,对定制实际标题的最简单方式时使用子视图控制器而不是导航项的title属性: C代码   self.title = @"Hello";   self.title = [[[NSBundle...UITabBarController类       选项卡类允许用户在多个视图控制器之间移动并在屏幕的底部可定制该栏。

    5.1K50

    零基础微信小程序开发——全局配置之window窗口(保姆级教程+超详细)

    它可以包含多个子配置项,如navigationBarBackgroundColor(导航栏背景颜色)、navigationBarTextStyle(导航栏标题颜色)、navigationBarTitleText...通过tabBar配置项,我们可以为小程序添加底部导航栏,方便用户在不同页面之间进行切换。 style style配置项用于决定是否启用新版的组件样式。...小程序窗口组成部分 导航栏区域(navigationBar): 导航栏区域位于小程序窗口的顶部,通常包含小程序的标题、返回按钮(如果有上一级页面的话)、以及其他可能的操作按钮(如搜索、设置等)。...HexColor #000000 导航栏背景颜色,如#000000 navigationBarTextStyle String white 导航栏标题颜色,仅支持black/white backgroundColor...Boolean false 是否全局开启下拉刷新 onReachBottomDistance Number 50 页面上拉触底事件触发时距页面底部距离,单位为px 设置导航栏的标题 需求:把导航栏上的标题

    15710

    掌握Flutter底部导航栏:畅游导航之旅

    4.1 更改选中项颜色和图标 通过设置BottomNavigationBar的selectedItemColor属性,可以更改选中项的颜色。...通过将底部导航栏的选中项状态提升至顶层,然后使用Provider在底部导航栏和其他相关组件之间共享状态,可以实现底部导航栏的状态管理。...7.3 实现底部导航栏的动画效果 为了提升用户体验,有时候我们还可以为底部导航栏添加一些动画效果,例如切换导航项时的渐变动画、滑动导航栏时的缩放动画等。...接着,我们讨论了如何自定义底部导航栏的外观,包括更改选中项的颜色和图标、自定义背景颜色和形状、以及调整导航栏的高度和图标大小等。...此外,我们还探讨了如何利用状态管理库(如Provider和Bloc)来管理底部导航栏的状态,以及如何实现一些高级功能,如添加徽章、动态更改导航栏项以及实现动画效果等。

    47810

    iOS 图标图像 (官方翻译版)

    如果图标必须包含线条,请与其他图标和应用程序的排版协调权重。 ? ? 使用颜色来传达选择和取消选择的状态。避免在两个不同的图标设计之间切换,如固体版本和概述版本。 避免在图标中加入文字。...image.png 标签栏图标大小 在纵向方向,标签栏图标显示在标题标题上方。在横向上,图标和标题并排出现。根据设备和方向,系统会显示常规或紧凑的标签栏。您的应用程式应包含两种尺寸的自订标签栏图示。...显示包含在当前上下文中有用的共享扩展,操作扩展和任务(如“复制”,“收藏夹”或“查找”)的模态视图。行动 ? 添加导航栏和标签栏图标 加 ? 书签导航栏和标签栏图标 显示应用专用书签。书签 ?...快进导航栏和标签栏图标 通过媒体播放或幻灯片快进。快进 ? 组织导航栏和标签栏图标 将项目移动到新的目的地,如文件夹。组织 ? 暂停导航栏和标签栏图标 暂停媒体播放或幻灯片。...回滚导航栏和标签栏图标 通过媒体播放或幻灯片向后移动。倒带 ? 保存 保存当前状态。保存 ? 搜索导航栏和标签栏图标 显示搜索字段。搜索 ? 停止导航栏和标签栏图标 停止媒体播放或幻灯片。

    3.6K40

    iOS开发常用之网络

    该项目通过三种形式展示页面之间的切换,比如导航栏上的多个选项卡切换,页面左右两端箭头指示切换,以及使用分段控件。...实现教程 XWCatergoryView - 一个轻量级的顶部分类视图控件,只需要通过简单的设置,你就可以快速集成该控件,控件目前暂时有底部横条移动,椭圆背景移动,文字缩放,文字颜色变化和文字颜色渐变五种效果...TYPagerController - 简单,支持定制,页面控制器,可以滚动内容和标题栏,包含多种风格。...FoldingTabBar.iOS - 可折叠标签栏和标签栏控制器。...KYAnimatedPageControl - 除了滚动视图时PageControl会以动画的形式一起移动,点击目标页还可快速定位。支持两种样式:粘性小球和旋转方块。

    23.7K10

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

    在内容区域,通过文案、颜色以及操作指引标题来表明该无边框按钮的可交互性。当它被激活时,按钮可以显示较窄的边框或浅色背景作为操作响应。 ?...视图的所有类型有:控件(比如按钮和滑块)、内容视图(比如集合视图和表格视图),以及临时视图(如警告提示和动作菜单)。 要在应用中管理一组或者一系列的视图,通常需要使用视图控制器。...它能协调视图的内容显示,实现与用户交互的功能并能在不同屏幕内容之间切换。比如,“设置”使用了一个导航控制器来展示其视图层级。...举个例子,当垂直尺寸从压缩变为常规时,导航栏和工具栏会自动变高。 当你靠尺寸类别来驱动布局变化时,你的应用在任何显示环境时都能显示得很好。...使用导航栏(Navigation Bar)帮助用户轻松访问分层内容。导航栏的标题可以显示用户当前所处的层级,而后退按钮可以回到上一层级。想要了解更多内容,请查看Navigation Bar.

    1.9K41

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

    栏(Bars) 栏,可以告诉用户在APP中当前在所在的位置、能提供导航,还可能包含用于触发操作和传递信息的按钮或其他元素。包括6种:导航栏、搜索栏、侧边栏、状态栏、标签栏、工具栏。...系统按钮 系统按钮通常出现在导航栏和工具栏中,也可以在任何地方使用。 ? 在标题中使用动词。特定于操作的标题显示按钮是交互式的,并说明单击该按钮时会发生什么。 使用标题格式命名标题。...将进度条用于持续时间明确的任务。进度条非常适合显示任务的状态,尤其是当它帮助传达任务需要完成多长时间时。 在导航栏和工具栏中隐藏轨道的未填充部分。默认情况下,进度条的轨道包含已填充和未填充的部分。...· 如果您的应用支持排序,则可以使用菜单让用户选择要进行排序的属性。 · 在允许在多个位置之间导航的应用程序中,菜单可以使用户导航到特定位置,而不用追溯每个步骤。 使用菜单提供辅助应用操作。...十二、滑杆(Sliders) 滑块是带有一个称为“拇指”控件的水平轨道,你可以用手指滑动该控件以在最小值和最大值之间移动,例如屏幕亮度的调节或媒体文件播放期间的位置调节。

    8.6K30

    React-Native组件之 Navigator和NavigatorIOS

    对于app而言,一款应用往往涉及到很多的页面,而页面之间的跳转Android和iOS实现也各不相同。...对象参数调用; navigationBar view 导航的可选组件导航标题栏,需要设置左按钮,右按钮和标题属性。...一个常见的用途是设置所有页面的背景颜色 navigationBarHidden 布尔值,决定导航栏是否隐藏 shadowHidden 布尔值,决定是否要隐藏1像素的阴影 tintColor 导航栏上按钮的颜色...titleTextColor 导航器标题的文字颜色 translucent 布尔值,决定导航条是否半透明(注:当不半透明时页面会向下移动导航栏等高的距离,以防止内容被遮盖) interactivePopGestureEnabled...左边返回按钮的样式: initialRoute={{ component: Home, // 要跳转的页面 title:'首页', // 跳转页面导航栏标题

    4.5K70

    【小程序】全局配置window和tabBar

    全局配置文件及常用的配置项 全局配置 - window 1. 小程序窗口的组成部分 2. 了解 window 节点常用的配置项 ​编辑 3. 设置导航栏的标题 4. 设置导航栏的背景色 5....设置导航栏的标题颜色 6. 全局开启下拉刷新功能 7. 设置下拉刷新时窗口的背景色 8. 设置下拉刷新时 loading 的样式 9. 设置上拉触底的距离 全局配置 - tabBar 1....设置导航栏的标题 设置步骤:app.json -> window -> navigationBarTitleText 需求:把导航栏上的标题,从默认的 “WeChat”修改为“黑马程序员”,效果如图所示...设置导航栏的背景色 设置步骤:app.json -> window -> navigationBarBackgroundColor 需求:把导航栏标题的背景 色,从默认的 #fff 修改为 #2b4b6b...设置导航栏的标题颜色 设置步骤:app.json -> window -> navigationBarTextStyle 需求:把导航栏上的标题颜色,从默认 的 black 修改为 white ,效果如图所示

    1.6K30

    iOS开发中标签控制器的使用——UITabBarController

    iOS开发中标签控制器的使用——UITabBarController 一、引言         与导航控制器相类似,标签控制器也是用于管理视图控制器的一个UI控件,在其内部封装了一个标签栏,与导航不同的是...,导航的管理方式是纵向的,采用push与pop切换控制器,标签的管理是横向的,通过标签的切换来改变控制器,一般我们习惯将tabBar作为应用程序的根视图控制器,在其中添加导航,导航中在对ViewController...通过点击下面的标签按钮,可以很方便的切换控制器。如果我们的控制器数超过4个,系统会被我们创建一个more的导航,并且可以通过系统自带的编辑来调整控制器的顺序,如下: ? ?...获取"更多"标签的导航控制器 @property(nonatomic, readonly) UINavigationController *moreNavigationController;  //这个属性设置的是可以进行自定义排列顺序的视图控制器...(null_resettable, nonatomic,strong) UIColor *tintColor; //设置导航栏的颜色 @property(nullable, nonatomic,strong

    1.8K20

    从零开始的Android:常见的UI设计模式

    移动设备的主要特征之一是,它们在用户外出旅行时用于查找事物非常有用。 为此,地图通常是一个很好的工具。 如果您的应用是围绕显示位置,导航或旅行构建的,则地图可能对您的用户来说是完美的。...根据Android的材料设计指南,选项卡也可以存在于屏幕底部,如Google+应用程序所示。 导航抽屉 导航抽屉是一个视图,可以从应用程序的侧面滑出,以便向用户显示选项列表。...至少,该工具栏包含该部分或应用程序的标题,但是工具栏设计模式还有助于将操作按钮直接放置在工具栏或溢出菜单中,以允许用户在应用程序的该部分中执行任务。...在Google Keep应用程序中可以找到一个示例,该应用程序使您可以更改便笺的颜色,向该便笺中添加其他人以及溢出菜单中存在的许多其他操作。...电视应用程序不仅需要考虑这两点,而且电视还使用D-pad控制器而不是触摸屏进行交互。 因此,轮播方式效果很好。 用户可以在几行项目之间移动,然后水平滚动以查看他们可用的内容。

    2.7K20

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

    例如,如果在导航栏的背景与栏按钮标题之间没有足够的对比,按钮就会很难被用户看到。一个快速但不严谨的方法是通过将设备置于不同的光照环境之中(包括晴朗的室外)来测试设备上的颜色是否具有足够的对比度。...这个比率值可以通过在线对比度计算器或者根据WCAG2.0标准中提供的公式自己计算获得。你应用中理想的颜色对比度应该是4.5:1或更高。 当你使用自定义的栏颜色时,着重考虑半透明的栏和应用内容。...当你需要创建能匹配特别颜色的栏颜色时(比如一个已有品牌中的颜色),可能在你获得你想要的结果之前,你需要用各种颜色进行实验。...为了突出某些文字或者为了在内容块之间建立视觉关联,你可以依赖由Dynamic Type支持的语义化样式,如标题、正文,你也可以指定字体权重,如细体或者半粗。...请注意,你有时候也可以用文字来代替工具栏和导航栏的图标。

    1.8K21

    Flutter 中自定义动画底部导航栏

    在这个博客中,我们将探索Flutter中的自定义动画底部导航栏。我们将看到如何实现自定义动画底部导航栏的演示程序以及如何在您的 Flutter 应用程序中使用它。...介绍: 显示在应用程序底部的Material小部件,用于在几个视角中进行选择,通常在 3 到 5 范围内的某个位置。底部导航栏包含各种选项,如文本标签、图标或两者。...它提供了应用程序的高级视角之间的快速导航。对于更大的屏幕,侧面导航可能更合适。 这个演示视频展示了如何在 flutter 中使用自定义的底部导航栏。...它展示了自定义底部导航栏将如何在您的 Flutter 应用程序中工作。它显示当用户点击底部导航栏图标时,它们将被动画化并显示标签文本。当用户点击任何图标时,颜色也会发生变化和动画。...它将显示在您的设备上。 特性 自定义动画底部导航栏的一些属性是: selectedIndex:这个属性用于被选中的项是一个索引。更改此属性将更改所选项目并为其设置动画。默认为零。

    9K30

    iOS14开发-UIViewController

    响应设备的方向变化。 有一些特殊的视图控制器(导航控制器、标签栏控制器)可以更加方便和规范地管理 UIView。 创建 storyboard 初始化箭头指向的 UIViewController。...验证:通过纯代码跳转时发现屏幕黑色且卡顿,设置颜色后正常。 loadView方法 用于创建 UIViewController 的 view。...逆向传值 逆向传值即按照 UIViewController 跳转的顺序反向进行传值,比如控制器A跳转到控制器B,控制器B在返回控制器A时进行传值,这种方式就是逆向传值。...UITabBarController 标签栏控制器。 可以展示多个 UIViewController,这些 UIViewController 是平级关系。...颜色问题 UITabBar的颜色 可以通过 UITabBar 的barTintColor设置。 渲染颜色 图片一般由设计师统一设计,需要设置标题文字颜色以适应图片。

    2.4K20

    iOS系统中导航栏的转场解决方案与最佳实践

    导航栏组件的改变与革新 导航栏组件在 iOS 11 发布时,获得了重大更新,这个更新可不是增加了一个大标题样式(Large Title Display Mode)那么简单,需要注意的地方大概有两点: 导航栏全面支持...导航栏的样式变化 对于不同 ViewController 之间的导航栏样式变化,大多可以总结为两种情况: 导航栏的显示与否 导航栏的颜色变化 导航栏的显示与否 对于显示与否的问题,可以在上一节提到的两个方法里调用...,更改导航栏的背景色。...但这个方案的一个弊端就是,如果苹果修改了导航栏的整体风格,就好比 iOS 11 的大标题特效,那么工作量就来了。...,在视图控制器的 viewDidLoad 或者 viewWillAppear: 方法里去设置导航栏样式。

    2.4K30

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

    有些时候,告诉用户进程没有停止比告诉他们何时完成更加重要。 设计一个与应用的风格协调的活动指示器。可以的话,让活动指示器的尺寸和颜色与它所在的背景协调。...网络活动指示器: 出现在状态栏中,当网络活动正在进行时它会旋转,在活动停止时它则消失 不支持用户交互行为 当你的app正在链接网络,而这个连接过程将会持续好几秒的时候,你可以通过网络活动指示器来给用户以反馈...当视图数量超过页面宽度可承载的氛围时,点的大小和间距并不会因此变小(如果需要显示的点超过一定数量,系统会把它截断) 默认情况下不支持视图之间导航;你必须实现视图到视图之间的导航并适当地更新页面控件状态...设计文案时可以遵循以下指南: 跟其它所有按钮一样,使用标题式大写,而且不需要标点符号 尽可能的使用与警告文案直接相关的动词或动词词组,如”取消(Cancel)”,”查看全部(View All)”,”回复...举个例子,如果一个模态视图中含有导航条和取消或完成任务的按钮,这里的导航条样式应该与你的app中导航条一样。 合适的话,在模态视图里加入可以说明任务内容的标题。

    13.2K30

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

    当然可用的有设置导航条标题的方法setTitle,当然你也能够直接把文字换成一个视图。...即所谓的标题视图放在导航条的中间,用得方法是setTitleView,非常多游戏的导航条中间貌似是一个图片,能够用这个。...我们当然也能够利用自己创建的导航条button来覆盖原来导航控制器产生的默认的button,如“<Back”。 相同。...; //设置导航条背景颜色,也是半透明玻璃状的颜色效果 self.navigationController.navigationBar.backgroundColor=[UIColor...事实上是导航控制器在控制,在里面的元素都能够通过navigationController属性获取到它们所在的导航控制器 //所以(2)获取到导航控制器之后,使用Push的那个方法,往栈里面放一个视图控制器

    2.4K10
    领券