网站导航栏颜色与透明度渐变设计技巧解析

时间：11-17 现代故事提交错误

大家好，今天给各位分享网站导航栏颜色与透明度渐变设计技巧解析的一些知识，其中也会对进行解释，文章篇幅可能偏长，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在就马上开始吧！

图2-1 使用导航控制器控制导航栏时，需要执行以下步骤：

在Interface Builder或代码中创建导航控制器。使用UINavigationController 对象的navigationBar 属性来配置导航栏的外观。通过设置导航控制器堆栈中管理的每个视图控制器的title 和navigationItem 属性来控制导航栏的内容。导航栏也可以单独使用。在界面中添加导航栏时，需要执行以下步骤：

设置自动布局规则来管理界面中导航栏的位置。创建root navigationItem以提供初始标题。配置委托对象以处理与导航栏的交互。自定义导航栏的外观。配置应用程序界面，以便在用户浏览分层屏幕时推送和弹出相关的导航项。

导航栏和导航控制器配合使用

当使用导航控制器管理不同内容屏幕之间的导航时，导航控制器会自动创建导航栏并在适当的时间推送和弹出navigationItems。

当视图控制器从堆栈中弹出和推送时，导航控制器使用此视图控制器对象的navigationItem 属性为其导航栏提供需要显示的当前内容。默认的navigationItem 使用视图控制器的标题，但您可以通过覆盖UIViewController 子类的navigationItem 属性来完全控制导航栏内容。

导航控制器会自动将其自身分配给其导航栏对象的委托对象，因此在使用导航控制器时，请勿将导航栏的委托对象设置为自定义对象。

要访问与导航控制器关联的导航栏，请使用UINavigationController 对象的navigationBar 属性。

有关导航控制器的信息，请参阅UINavigationController。

添加视图到单独使用的导航栏

在大多数情况下，导航栏用作导航控制器的一部分。然而，在某些情况下可能需要使用单独的导航栏来实现内容导航方法。当单独使用导航栏时，您需要为其提供内容。与其他类型的视图不同，您不能直接将子视图添加到导航栏。相反，您需要使用navigationItem 来指定要显示的按钮或自定义视图。 navigationItem是UINavigationItem类的实例对象，它包含用于指定导航栏左侧、右侧和中心视图以及指定自定义提示字符串的属性，如图2-1所示。

导航栏管理一堆UINavigationItem 对象。该堆栈主要用于支持导航控制器，可以用来实现我们自己的自定义导航界面。堆栈中最顶层的navigationItem 是导航栏当前显示的内容所属的navigationItem。使用其pushNavigationItem:animated:方法将新的navigationItem推入堆栈，并使用popNavigationItemAnimated:方法从堆栈中弹出navigationItem。

除了压入和弹出navigationItem之外，还可以直接使用导航栏的items属性或者setItems:animated:方法来设置堆栈的内容。您可以在应用程序启动时使用此方法将界面恢复到应用程序上次关闭之前的状态。下图展示了导航栏如何管理navigationItem堆栈：

图2-2 单独使用导航栏时，需要手动配置导航栏的委托对象。委托对象必须遵循UINavigationBarDelegate 协议。通过实现委托对象的委托方法，委托对象可以接收导航栏发送的消息。这允许您跟踪何时从堆栈中推送或弹出导航项，并根据这些消息更新应用程序的界面。

有关创建navigationItem 的信息，请参阅UINavigationItem。有关委托对象的信息，请参阅UINavigationBarDelegate。

自定义导航栏外观

导航栏有两种标准外观样式：白底黑字或黑底白字。使用其barStyle 属性来配置外观样式。对导航栏外观样式的barStyle 属性的更改会覆盖从其他外观相关属性推断出的导航栏的显示内容。

导航栏默认是半透明的。您可以通过将导航栏的半透明属性值设置为“否”来使导航栏不透明。

可以使用barTintColor 属性设置导航栏背景颜色。设置此属性会覆盖从barStyle 属性推断的默认颜色。与所有UIView子类一样，您可以使用tintColor属性来控制导航栏上控件内容的颜色，包括按钮图像和按钮文本。

titleTextAttributes 属性用于指定标题文本的外观。您可以使用NSFontAttributeName、NSForegroundColorAttributeName 和NShadowAttributeName 键分别指定标题文本的字体、文本颜色、文本阴影颜色和文本阴影偏移量。

使用setTitleVerticalPositionAdjustment:forBarMetrics:方法调整标题在垂直方向的位置。 UIBarMetrics枚举值定义导航栏是否紧凑以及是否包含提示文本。该方法将根据指定的UIBarMetrics 枚举值调整导航栏的高度。下图显示了具有自定义背景颜色、标题文本属性和控件内容颜色的导航栏。

图2-3还可以提供自定义背景图像和阴影图像来完全自定义导航栏的外观。调用setBackgroundImage:forBarPosition:barMetrics:方法，根据指定的UIBarPosition枚举值和UIBarMetrics枚举值设置对应导航栏的背景图片。 UIBarPosition 枚举值定义导航栏是显示在窗口的底部还是顶部。

通过配置shadowImage属性值，为导航栏提供自定义阴影图像。但自定义阴影图的前提是必须自定义导航栏背景图。否则，将使用默认的阴影图像。下图显示了带有自定义背景图像和自定义阴影图像的导航栏。导航栏的位置值为UIBarPositionTopAttached，高度值为UIBarMetricsDefault。

图2-4 当

导航栏颜色切换、透明度渐变

应用程序运行在iOS 10以上版本时，使用Xcode调试应用程序时，查看半透明导航栏的视图层，其子视图信息如下图所示：

图3-1 如果导航栏不透明，视图层将不包含UIVisualEffectView 视图分支。如果导航栏使用自定义背景，则UIImageView 视图将被插入到_UIBarBackground 视图中并位于底部。另外，在iOS 10以下的系统中运行时，UIVisualEffectView子视图层中的视图会发生变化。

导航栏的外观由其_UIBarBackground 子视图决定。当调用官方提供的方法设置导航栏背景色时，实际调整的是_UIBarBackground子视图的背景色。调用官方提供的方法设置导航栏自定义背景图时，实际上是添加在_UIBarBackground子视图的底部。 UIImageView 视图。

设置导航栏颜色

在视图控制器跳转过程中，UIKit框架会自动对导航栏上的子视图执行一些操作，而我们对导航栏上的子视图执行的操作可能会被覆盖。因此，为了完全控制导航栏的背景颜色操作，可以在_UIBarBackground子视图的底部手动添加一个子视图，通过改变这个子视图的背景来控制导航栏的外观背景，使其不会被正式的操作覆盖。

设置导航栏透明度

UIKit框架没有提供直接修改导航栏透明度的方法，但我们已经知道导航栏的外观是由其_UIBarBackground子视图决定的。因此，调整_UIBarBackground视图及其子视图的透明度可以改变导航栏的透明度。但在iOS 10以上系统中，在push和pop视图控制器时，UIKit框架会自动重置_UIBarBackground视图的颜色和透明度等属性。这会覆盖掉我们对该视图执行的修改，但我们可以通过方法交换来绕开UIKit框架的这种行为。

为导航栏添加转场动画

在视图控制器上执行push或pop操作时，为了提高用户体验，通常会使用官方提供的过渡动画。官方提供的过渡动画有两种类型：交互式和非交互式。当执行push或pop操作时，两个视图控制器对应的导航栏背景颜色是不同的。直接改变背景颜色会显得视觉上突兀。这时候就需要给导航栏背景色的切换添加动画效果，这样就可以和push或者pop过渡动画一起执行。