首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

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

    状态栏: 是透明的 始终固定在整个屏幕的上边缘 API注释 你可以将全应用的状态栏风格设计成统一的,或者给不同的视图控制器定义不同的状态栏风格。...4.1.2 导航栏 导航栏能够实现在应用不同信息层级结构间的导航,有时候也可用于管理当前屏幕内容。 ? ? 导航栏: 是半透明的 通常位于屏幕的上方,状态栏正下方。...而当你在导航栏中使用了分段控件,就不要再放标题以及其它多余控件了。 确保文字按钮之间拥有足够的空间。如果导航栏左边或右边的文字按钮之间的间距太小,那些文字看起来会像挤在一起一样,让用户难以区分。...如果按钮之间间距过小,会让蚊子看起来挤在一起,让用户觉得它们难以区分。如果按钮在导航栏中显得太过拥挤,可以用UIBarButtonSystemItemFixedSpace常数来增加他们之间的间距。...尽可能地在横屏与竖屏情况下都展示相同数量的标签。在不同的屏幕方向下提供同样的标签可以让用户对应用建立很好的视觉稳定感。在横屏中,你应该将与竖屏时数量相同的标签居中展示。在横屏中,避免使用“更多”标签。

    10.1K51

    iOS导航栏使用总结

    ; 1.全局设置 全局设置一般的都是在AppDelegate中设置,这样整个app都会生效,相关的代码与效果图如下: //1.设置导航栏背景颜色 [[UINavigationBar appearance...设置导航栏样式效果图 2.局部设置: 全局设置后,如果只有其中几个页面导航栏样式不同,那么我们可以使用局部设置。...导航栏视图层级图 从图中可以看出,导航栏的底部分割线是一个UIImageView对象,而且高度只有0.5,所以我们可以据此获取到导航栏的底部分割线对象,在一个视图控制器中实现此需求,代码如下: #import...,用于优化滑动类视图(继承于UIScrollView的视图)在视图控制里的显示: iOS系统的导航栏UINavigationBar与标签栏UITabBar默认都是半透明模糊效果,在这种情况下系统会对视图控制器的...,默认值是UIRectEdgeAll,即:当前视图控制器里各种UI控件会忽略导航栏和标签的存在,布局时若设置其原点设置为(0,0),视图会延伸显示到导航栏的下面被覆盖。

    3.2K20

    iOS状态栏使用总结

    分页控制:在视图控制器里通过prefersStatusBarHidden方法设置。...,代码的位置很重要;在AppDelegate中写入可以设置整个App页面的状态栏样式; 如果需要单独设置其中一个页面隐藏状态栏,需要在进入页面时设置隐藏,退出页面时设置显示,以保证不影响其他页面的状态栏样式...2.分页设置 在info.plist中设置View controller-based status bar appearance属性为YES,状态栏默认显示且字体黑色。...此时全局设置的操作都是无效的,需要分页设置才能修改其样式,即:在每个视图控制器或者控制器基类中使用如下代码: - (UIStatusBarStyle)preferredStatusBarStyle {...这是因为导航控制器里的preferredStatusBarStyle才具有修改状态栏样式的能力,解决这个问题的方法有两种: 方法1:添加子类导航控制器 我们需要使用自定义的子类导航控制器,在其中添加如下的代码

    1.9K30

    探索 Flutter 中的 NavigationRail:使用详解

    介绍 在 Flutter 中,NavigationRail 是一个垂直的导航栏组件,用于在应用程序中提供导航功能。它通常用于更大屏幕空间的设备,如平板电脑和桌面应用程序。...作用和特点: 导航功能: NavigationRail 允许用户直观地导航应用程序的不同部分。通过点击导航栏中的选项,用户可以快速地切换到不同的页面或执行其他导航操作。...垂直布局: NavigationRail 的垂直布局使其在平板电脑和桌面应用程序中尤其有用。在这些设备上,垂直导航栏可以更有效地利用屏幕空间,并提供更直观的用户体验。...您可以在 PageView 中放置不同的页面,并根据导航栏的选定项切换页面。...您可以将不同的页面放置在 IndexedStack 中,并根据导航栏的选定项设置索引来显示相应的页面。

    66610

    导航栏调色那些事儿2. 标签栏TableBar那些事儿

    方法一: 在 Info.plist 中的 Information Property List 中添加一个 Key为View controller-based status bar appearance的...,需要隐藏整个 StatusBar,方法如下: 状态栏的高度是20 方法一: 和改变 StatusBar 颜色一样,在 Info.plist 中的 Information Property List 中添加一个...,在全局导航栏控制器下面还需要增加以下方法: - (UIViewController *)childViewControllerForStatusBarStyle{ return self.topViewController...标签栏TableBar那些事儿 2.1 调色 可以完全参考导航栏的,几乎雷同。 2.2 关闭半透明效果 一旦关闭标签栏的半透明效果,控制器的view就不会到达屏幕最底部了,而是到了标签栏的紧上方。...标签栏的默认高度是49. self.tabBar.translucent = NO;

    1.5K50

    UINavigationController 导航控制器概念属性方法

    (iOS7之后,在导航中右划会进行pop操作,设置这个的enable可以控制设置手势是否失效) @property(nullable, nonatomic, readonly) UIGestureRecognizer...*barHideOnSwipeGestureRecognizer; 10、屏幕滑动的时候是否隐藏导航栏,常用于tableView,上滑隐藏导航栏,下滑显示,带动画效果 @property (nonatomic...; 13、敲击屏幕可以隐藏与显示导航栏 @property (nonatomic, readwrite, assign) BOOL hidesBarsOnTap; 14、获取敲击屏幕的手势 @property...toolbarClass:(nullable Class)toolbarClass; (2)使用系统默认的导航栏和工具栏,创建一个导航控制器同时设置一个根视图控制器 - (instancetype)initWithRootViewController...UIViewController *)viewController animated:(BOOL)animated; 这个方法是为了iOS方法的命名统一,在导航中,其作用和push一样 - (void)

    2.2K60

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

    /通过一个自定义的导航栏和工具栏创建导航控制器 - (instancetype)initWithNavigationBarClass:(nullable Class)navigationBarClass...@property(null_resettable,nonatomic,readonly) UIToolbar *toolbar; //导航中的返回手势对象 //iOS7之后,在导航中右划会进行pop...; 四、iOS8后导航的新特性 //这个方法是为了iOS方法的命名统一,在导航中,其作用和push一样 - (void)showViewController:(UIViewController *)vc...; //屏幕滑动的时候隐藏导航栏,常用于tableView,上滑隐藏导航栏,下滑显示,带动画效果 @property (nonatomic, readwrite, assign) BOOL hidesBarsOnSwipe...; //横屏的时候隐藏导航栏 @property (nonatomic, readwrite, assign) BOOL hidesBarsWhenVerticallyCompact; //敲击屏幕可以隐藏与显示导航栏

    1.8K20

    iOS多控制器之UINavigationController&UITableBarController1. 多控制器2. UINavigationController3. UITableBarCont

    Paste_Image.png 2.5 修改导航栏的内容 导航栏的内容由栈顶控制器的navigationItem属性决定 UINavigationItem有以下属性影响着导航栏的内容 //左上角的返回按钮...]; navigationController 和navigationItem都是通过"控制器"对象调用的 navigationBar 是通过"导航控制器"对象调用的 如果想改变导航条整体的样式 那么应该找...UITableBarController UITabBarController和UINavigationController类似,UITabBarController也可以轻松地管理多个控制器,轻松完成控制器之间的切换...UITabBarButton在UITabBar中得位置是均分的,UITabBar的高度为49。 UITabBar的结构⼤大致如下图所示: ?...:c1]; tb.viewControllers=@[c1,c2,c3,c4]; 注意:展示的顺序和添加的顺序一致,和导航控制器中不同,展现在眼前的是导航控制器的根视图控制器也就是第一个添加到导航控制器上的视图

    1.4K40

    Swift开发:自定义标签栏UITabBarController (Swift项目开始的第一步)

    中的Main,因为我们要使用纯代码的方式来创建标签栏控制器,系统自带Main.StoryBoard的xib形式的界面我们并不需要。...第二步:准备资源文件 1.在Assets.xcassets中存放标签栏按钮所需要的图片资源 ?...屏幕快照 2017-07-15 下午1.52.29.png 2.创建标签配置Plist文件,并且在Plist文件中设置视图控制器的类名、Title、标签栏图片等信息 ?...屏幕快照 2017-07-15 下午1.46.26.png 这里做下说明,之所以创建这个plist文件是因为在之后创建视图控制器和标签按钮时会有很大的便利性,而且也十分方便真实开发过程中的需求更改。...在项目前期我们以自定义的方式来创建标签栏,这也是为了后期应对更加复杂的需求做伏笔,比如增加新的控制器我们只需要修改plist配置文件的属性创建相应的视图控制器就可以,这样就避免了修改大量代码。

    4.4K70

    iOS 9 Storyboard 教程(二上)介绍Segue静态单元格(static cell)

    介绍Segue 时候在storyboard中添加更多的控制器了.你激昂会创建一个控制器,它允许用户向这个app中添加玩家....---- 然后在Player控制器和导航控制器之间就会出现一个新的箭头: 连接的类型是segue(发音:赛格威),表示从一个控制器到另一个控制器的过渡.到目前为止,你所看到的storyboard 上的连线都是一个个的关系并且它们描述了一个包含另一个的...首先,打开Main.storyboard,选择这个新创建的TableViewController .改变它的标题为Add Player(双击导航栏即可修改).然后在导航栏的两侧各添加一个Bar Button...---- Note: 到目前为止,在storyboard中你所设计的控制器都是在4.7英寸的iPhone6上运行的.显而易见,你的app应该能适配所有的屏幕尺寸,你可以在Storyboard中预览所有这些尺寸...从工具栏打开Assistant Editor ,然后在跳转栏里选择Preview.在辅助编辑器的左下方,点击’+’号符号,添加新的屏幕尺寸来预览.想要去除一个屏幕尺寸,选中它然后点击Delete键删除.

    3.3K10

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

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

    1.8K20

    【Flutter 专题】75 图解基本 TabBar 标签导航栏 (一)

    和尚今天学习一下常用的 TabBar 导航栏使用方法; 源码分析 const TabBar({ Key key, @required this.tabs,...// 顶部标签 Tab 组件列表 this.controller, // 顶部标签 Tab 控制器 this.isScrollable = false,...Widgets this.controller, // 导航栏控制器 this.physics, // 滑动动画 this.dragStartBehavior...,若未提供此标签控制器,可使用系统 DefaultTabController 控制器;和尚创建一个基本的 TabBar 样式,其中 TabBar 与 TabBarView 共用一个 TabController...isScrollable 为标签栏是否可滑动,若设为 true 可按照每个标签宽度延伸,整体可超过屏幕宽度,若不超过屏幕宽度居中展示;若设为 false 则以屏幕宽度为准,多个标签均分宽度; isScrollable

    1.7K31

    UINavigationController

    UINavigationController 利用UINavigationController,可以轻松地管理多个控制器,轻松完成控制器之间的切换,典型例子就是系统自带的“设置”应用 UINavigationController...:(BOOL)animated; //回到根控制器(栈底控制器) - (NSArray *)popToRootViewControllerAnimated:(BOOL)animated; 如何修改导航栏的内容...导航栏的内容由栈顶控制器的navigationItem属性决定 UINavigationItem有以下属性影响着导航栏的内容 //左上角的返回按钮 @property(nonatomic,retain...Modal的形式展示出来 Modal的默认效果:新控制器从屏幕的最底部往上钻,直到盖住之前的控制器为止 //以Modal的形式展示控制器 - (void)presentViewController...View显示在界面上,一定要把这个控制器强引用 //1.

    1.4K60

    深入浅出 NavigationUI | MAD Skills

    在本文中,我们将为大家讲解另外一个用例,即类似操作栏 (Action Bar)、底部标签栏或者抽屉型导航栏之类的 UI 组件如何在应用中实现导航功能。...NavigationUI 类通过匹配目标页面 id 与菜单 id 实现不同页面之间的导航功能。让我们深入探索一下它的内部机制吧。...抽屉式导航栏 虽然看上去不错,但是如果您设备的屏幕尺寸较大,那么底部标签栏恐怕无法提供最佳的用户体验。...为了使代码保持整洁、各个元素之间更加清晰,我们会在新的方法中实现相关操作,并且在 onCreate() 中调用该方法。...Donut Tracker 应用并不需要底部标签栏或者抽屉式导航栏,但是添加了新的功能和目的页面后,NavigationUI 可以很大程度上帮助我们处理应用中的导航功能。

    3K30

    iOS:分割控制器UISplitViewcontroller

    分割控制器UISplitViewController 功能:它也是ipad的一个新特性,在屏幕上可以同时显示两个控制器,左边一个,右边一个;左边的为主控制器,右边的为详细控制器,主控制器可以根据需要显示或隐藏...它对于iPhone虽然可以使用,但是不具备同时显示的特点,在iPhone的样式,就是导航控制器切换的模式。...2、导入几张素材图片,用来在详细控制器中显示。...所有的文件截图为: 3、下面就是具体的代码创建了: //在AppDelegate.m文件中: 导入头文件并声明必要的属性,同时实现分割控制器的协议 #import "AppDelegate.h" #import...Master的导航栏和按钮,并设置表格视图的数据源和代理 - (void)viewDidLoad { [super viewDidLoad]; //创建UITableView

    2K30

    iOS屏幕旋转及其基本适配方法

    3.Appdelegate&&Window中设置 正常情况下,我们的App从Appdelegate中启动,而Appdelegate所持有唯一的Window对象是全局的,所以在Appdelegate文件中设置屏幕旋转也是全局有效的...当然,在一般情况下,我们的项目都是用UITabbarViewController作为Window的根视图控制器,然后管理着若干个导航控制器UINavigationBarController,再由导航栏控制器去管理普通的视图控制器...六、实现需求:项目主要界面竖屏,部分界面横屏 这其实也是一个我们做屏幕旋转最常见的需求,在根据上面的讲述之后,我们实现这个需求会很容易,但是具体的实现却有着不同的思路,我在这里总结了两种方法: 方法1:...使用基类控制器逐级控制 步骤: 1.开启全局权限设置项目支持的旋转方向 2.根据第五节中的方法1,自定义标签控制器和导航控制器来设置屏幕的自动旋转。...这里有两个解决方法: 方法1:在自定义导航控制器中增加以下方法 #pragma mark -UINavigationControllerDelegate //不要忘记设置delegate - (void

    9.5K60

    iOS---iPad开发及iPad特有的特技

    iPad开发简单介绍 iPad开发最大的不同在于iPhone的就是屏幕控件的适配,以及横竖屏的旋转。 Storyboard中得SizeClass的横竖屏配置,也不支持iPad开发。...1.在控制器中得到设备的旋转方向 在 iOS8及以后,屏幕就只有旋转后屏幕尺寸之分,不再是过期的旋转方向。...案例: 情景① 在导航栏上添加leftBarButtonItem按钮,然后弹出UIPopoverController 创建UIPopoverController控制器的内容控制器添加到UIPopoverController...(默认控制器有多大就显示多大)(120, 44 * 3) UIPopoverController的方法popoverContentSize 内容控制器中设置的方法 self.preferredContentSize...item permittedArrowDirections:(UIPopoverArrowDirection)arrowDirections animated:(BOOL)animated; 情景② 在导航控制器的

    2.6K70
    领券