动画化导航栏颜色 [英] Animating a navigation bar color
本文介绍了动画化导航栏颜色的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
当我跳回到上一个控制器时，我正在尝试为导航栏的颜色设置动画。为了提供一些背景信息，我有一个控制器A，它是一个collectionView控制器，并具有由以下项设置的不透明导航栏颜色：
self .navigationController？.navigationBar.barTintColor = UIColor.rgb（红色：244，绿色：67，蓝色：54）
self.navigationController？.navigationBar.tintColor = .white
self.navigationController？.navigationBar。 titleTextAttributes = [NSForegroundColorAttributeName：UIColor.white]
self.navigationController？.navigationBar.isTranslucent = false
选择了collectionViewCell之后，我将其推到下一个控制器B，将其导航栏更改为透明的：
self.navigationController？.navigationBar.setBackgroundImage（UIImage（），for：.default）
self.navigationController？.navigationBar.shadowImage = UIImage（）
self.navigationController？.navigationBar.isTranslucent = true
当用户点击后退箭头时，我想要navigationBar返回其原始颜色。我在控制器B的 viewWillDissappear 函数， willMove（toParentViewController）和<$ c $控制器A上的c> viewWillAppear 函数：
这是动画：
UIView.animate（withDuration：0.5）{
self.navigationController？.navigationBar.barTintColor = UIColor.rgb（red：244，green：67，blue：54）
self.navigationController？.navigationBar.setBackgroundImage（nil，代表：.default）
self.navigationController？.navigationBar.shadowImage = nil
self.navigationController？.navigationBar.isTranslucent = false
self .navigationController？.navigationBar.layoutIfNeeded（）
}
这样做之后，我尝试使用过渡协调器，但得到的结果相同：
guard let coordinator = self.transitionCoordinator else {
return
}
coordinator.animate（alongsideTransit ion：{
self中的
[weak self]上下文？.navigationController？.navigationBar.barTintColor = UIColor.rgb（红色：244，绿色：67，蓝色：54）
self ？。 navigationController..navigationBar.setBackgroundImage（nil，for：.default）
self？.navigationController？.navigationBar.shadowImage = nil
self？.navigationController？.navigationBar.isTranslucent = false
self？ .navigationController？.navigationBar.layoutIfNeeded（）
}，完成：nil）
不管我尝试什么，或将代码放在哪里，都总是得到相同的结果。我知道代码是重复的，但是我只是想弄清楚原因，所以发生了大量复制和粘贴。
据我所知，我认为这与前一个控制器的背景视图有关，但是我很困惑，我似乎在导航栏下方的动画之前看到黑屏。
谢谢
解决方案
详细信息
xCode 8.3.2，快速3.1
解决方案
重写func viewWillAppear（_动画：布尔）{
如果让navigationBar = self.navigationController？.navigationBar {
navigationBar.backgroundColor = .blue
}
}
完整样本
< blockquote>
ViewController
导入UIKit
类ViewController：UIViewController {
覆盖func viewWillAppear（_动画：Bool）{
如果让navigationBar = self.navigationController？.navigationBar {
navigationBar.barTintColor = UIColor（红色：244/255，绿色：67/255，蓝色：54/255，alpha：1.0）
navigationBar.tintColor = .white
navigationBar.titleTextAttributes = [NSForegroundColorAttribu teName：UIColor.white]
navigationBar.isTranslucent = false
}
}
}
ViewController2
导入UIKit
类ViewController2：UIViewController {
覆盖func viewWillAppear（_ animation：Bool）{
如果让navigationBar = self.navigationController？.navigationBar {
let color = UIColor（红色：1，绿色：153/255，蓝色：0，alpha：1.0）
navigationBar.setBackgroundImage（UIImage.imageWithColor（color：color），for：.default）
navigationBar.shadowImage = UIImage（）
navigationBar.isTranslucent = true
}
}
覆盖func viewWillDisappear（_animated：Bool）{
如果让navigationBar = self.navigationController？.navigationBar {
navigationBar.setBackgroundImage（nil，for：.default）
navigationBar。 shadowImage = nil
navigationBar.isTranslucent = false
}
}
}
扩展UIImage
import UIKit
扩展UIImage {
类func imageWithColor（color：UIColor）-> UIImage {
let rect = CGRect（x：0，y：0，width：1，height：1）
UIGraphicsBeginImageContextWithOptions（CGSize（width：1，height：1），false，0）
color.setFill（）
UIRectFill（rect）
let image = UIGraphicsGetImageFromCurrentImageContext（）！
UIGraphicsEndImageContext（）
返回图像
}
}
< blockquote>
Main.storyboard
<？xml版本= 1.0 encoding = UTF-8？>
< document type = com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB version = 3.0 toolsVersion = 12120 systemVersion = 16F73 targetRuntime = iOS.CocoaTouch propertyAccessControl = none useAutolayout = YES useTraitCollections = YES colorMatched = YES initialViewController = Tzy-ol-uu0>
< device id = retina4_7 orientation = portrait>
< adaptation id = fullscreen />
< / device>
< dependencies>
< deployment identifier = iOS />
< plugIn标识符= com.apple.InterfaceBuilder.IBCocoaTouchPlugin version = 12088 />
< capability name =以Xcode 8格式保存的文档 minToolsVersion = 8.0 />
< / dependencies>
< scenes>
<！-View Controller->
<场景sceneID = tne-QT-ifu>
< objects>
< viewController id = BYZ-38-t0r customClass = ViewController customModule = stackowerflow_44343355 customModuleProvider = target sceneMemberID = viewController>
< layoutGuides>
< viewControllerLayoutGuide type = top id = y3c-jy-aDJ />
< viewControllerLayoutGuide type = bottom id = wfy-db-euE />
< / layoutGuides>
< view key = view contentMode = scaleToFill id = 8bC-Xf-vdC>
< rect key = frame x = 0.0 y = 0.0 width = 375 height = 667 />
< autoresizingMask key = autoresizingMask widthSizable = YES heightSizable = YES />
< subviews>
< button opaque = NO contentMode = scaleToFill contentHorizontalAlignment = center contentVerticalAlignment = center buttonType = roundedRect lineBreakMode = middleTruncation translationsAutoresizingMaskIntoConstraints = NO id = eIC-Nm-Ex7 >
< rect key = frame x = 164 y = 318 width = 46 height = 30 />
< state key = normal title = Button />
< connections>
< segue destination = QHs-H4-fAS kind = show id = Rff-Eq-K6g />
< / connections>
< / button>
< / subviews>
< color key = backgroundColor red = 1 green = 1 blue = 1 alpha = 1 colorSpace = custom customColorSpace = sRGB />
< constraints>
<约束firstItem = eIC-Nm-Ex7 firstAttribute = centerX secondItem = 8bC-Xf-vdC secondAttribute = centerX id = G1g-VM-MAn />
<约束firstItem = eIC-Nm-Ex7 firstAttribute = centerY secondItem = 8bC-Xf-vdC secondAttribute = centerY id = mdZ-GP-EQw />
< / constraints>
< / view>
< navigationItem key = navigationItem id = hq3-zt-U4K />
< / viewController>
< placeholder placeholderIdentifier = IBFirstResponder id = dkx-z0-nzr sceneMemberID = firstResponder />
< / objects>
< point key = canvasLocation x = 977 y = 791 />
< / scene>
<！-View Controller2->
< scene sceneID = F9C-Nz-6dd>
< objects>
< viewController id = QHs-H4-fAS customClass = ViewController2 customModule = stackowerflow_44343355 customModuleProvider = target sceneMemberID = viewController>
< layoutGuides>
< viewControllerLayoutGuide type = top id = AV0-X8-nhX />
< viewControllerLayoutGuide type = bottom id = AsY-Gl-67v />
< / layoutGuides>
< view key = view contentMode = scaleToFill id = 1fA-pX-rzR>
< rect key = frame x = 0.0 y = 0.0 width = 375 height = 667 />
< autoresizingMask key = autoresizingMask widthSizable = YES heightSizable = YES />
< color key = backgroundColor white = 1 alpha = 1 colorSpace = calibratedWhite />
< / view>
< / viewController>
< placeholder placeholderIdentifier = IBFirstResponder id = Uzd-Tb-KRO userLabel = First Responder sceneMemberID = firstResponder />
< / objects>
< point key = canvasLocation x = 1770 y = 789 />
< / scene>
<！-导航控制器->
< scene sceneID = Jff-OO-3e7>
< objects>
< navigationController自动调整AdjustScrollViewInsets = NO id = Tzy-ol-uu0 sceneMemberID = viewController>
< toolbarItems />
< navigationBar key = navigationBar contentMode = scaleToFill id = 804-YF-T6T>
< rect key = frame x = 0.0 y = 0.0 width = 375 height = 44 />
< autoresizingMask key = autoresizingMask />
< / navigationBar>
< nil name = viewControllers />
< connections>
< segue destination = BYZ-38-t0r kind = relationship关系= rootViewController id = BRB-ym-7I2 />
< / connections>
< / navigationController>
< placeholder placeholderIdentifier = IBFirstResponder id = M6i-ib-61I userLabel = First Responder sceneMemberID = firstResponder />
< / objects>
< point key = canvasLocation x = 140 y = 791.15442278860576 />
< / scene>
< / scenes>
< / document>
I am trying to animate a change of color of a navigation bar when popping back to a previous controller. To give it some context, I have controller A which is a collectionView Controller and has an opaque navigation bar color set by:
self.navigationController?.navigationBar.barTintColor = UIColor.rgb(red: 244, green: 67, blue: 54)
self.navigationController?.navigationBar.tintColor = .white
self.navigationController?.navigationBar.titleTextAttributes = [NSForegroundColorAttributeName : UIColor.white]
self.navigationController?.navigationBar.isTranslucent = false
Once a collectionViewCell is selected I push to the next controller, B, where the navigation bar is altered to become transparent:
self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
self.navigationController?.navigationBar.shadowImage = UIImage()
self.navigationController?.navigationBar.isTranslucent = true
When a user taps on the back arrow, I want the navigationBar to return to it's original colors. I have tried a simple UIView animation on the controller B's viewWillDissappear function, willMove(toParentViewController) and the viewWillAppear function on Controller A:
Here is the animation:
UIView.animate(withDuration: 0.5) {
self.navigationController?.navigationBar.barTintColor = UIColor.rgb(red: 244, green: 67, blue: 54)
self.navigationController?.navigationBar.setBackgroundImage(nil, for: .default)
self.navigationController?.navigationBar.shadowImage = nil
self.navigationController?.navigationBar.isTranslucent = false
self.navigationController?.navigationBar.layoutIfNeeded()
}
After doing this I tried using a transition coordinator but got the same results:
guard let coordinator = self.transitionCoordinator else {
return
}
coordinator.animate(alongsideTransition: {
[weak self] context in
self?.navigationController?.navigationBar.barTintColor = UIColor.rgb(red: 244, green: 67, blue: 54)
self?.navigationController?.navigationBar.setBackgroundImage(nil, for: .default)
self?.navigationController?.navigationBar.shadowImage = nil
self?.navigationController?.navigationBar.isTranslucent = false
self?.navigationController?.navigationBar.layoutIfNeeded()
}, completion: nil)
It seems that no matter what I try, or where I put the code I always end up with the same outcome. I am aware that the code is repetitive, but I was just trying to figure out why, so a lot of copying and pasting occurred.
From what I can tell, I think that it has something to do with the background view of the previous controller, but I am stumped, I seem to see a black screen before the animation under the navigation bar. Any help would be greatly appreciated.
Thanks
解决方案
Details
xCode 8.3.2, swift 3.1
Solution
override func viewWillAppear(_ animated: Bool) {
if let navigationBar = self.navigationController?.navigationBar {
navigationBar.backgroundColor = .blue
}
}
Full sample
ViewController
import UIKit
class ViewController: UIViewController {
override func viewWillAppear(_ animated: Bool) {
if let navigationBar = self.navigationController?.navigationBar {
navigationBar.barTintColor = UIColor(red: 244/255, green: 67/255, blue: 54/255, alpha: 1.0)
navigationBar.tintColor = .white
navigationBar.titleTextAttributes = [NSForegroundColorAttributeName : UIColor.white]
navigationBar.isTranslucent = false
}
}
}
ViewController2
import UIKit
class ViewController2: UIViewController {
override func viewWillAppear(_ animated: Bool) {
if let navigationBar = self.navigationController?.navigationBar {
let color = UIColor(red: 1, green: 153/255, blue: 0, alpha: 1.0)
navigationBar.setBackgroundImage(UIImage.imageWithColor(color: color), for: .default)
navigationBar.shadowImage = UIImage()
navigationBar.isTranslucent = true
}
}
override func viewWillDisappear(_ animated: Bool) {
if let navigationBar = self.navigationController?.navigationBar {
navigationBar.setBackgroundImage(nil, for: .default)
navigationBar.shadowImage = nil
navigationBar.isTranslucent = false
}
}
}
extension UIImage
import UIKit
extension UIImage {
class func imageWithColor(color: UIColor) -> UIImage {
let rect = CGRect(x: 0, y: 0, width: 1, height: 1)
UIGraphicsBeginImageContextWithOptions(CGSize(width: 1, height: 1), false, 0)
color.setFill()
UIRectFill(rect)
let image = UIGraphicsGetImageFromCurrentImageContext()!
UIGraphicsEndImageContext()
return image
}
}
Main.storyboard
<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="12120" systemVersion="16F73" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" colorMatched="YES" initialViewController="Tzy-ol-uu0">
<device id="retina4_7" orientation="portrait">
<adaptation id="fullscreen"/>
</device>
<dependencies>
<deployment identifier="iOS"/>
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="12088"/>
<capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
</dependencies>
<scenes>
<!--View Controller-->
<scene sceneID="tne-QT-ifu">
<objects>
<viewController id="BYZ-38-t0r" customClass="ViewController" customModule="stackowerflow_44343355" customModuleProvider="target" sceneMemberID="viewController">
<layoutGuides>
<viewControllerLayoutGuide type="top" id="y3c-jy-aDJ"/>
<viewControllerLayoutGuide type="bottom" id="wfy-db-euE"/>
</layoutGuides>
<view key="view" contentMode="scaleToFill" id="8bC-Xf-vdC">
<rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<subviews>
<button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="eIC-Nm-Ex7">
<rect key="frame" x="164" y="318" width="46" height="30"/>
<state key="normal" title="Button"/>
<connections>
<segue destination="QHs-H4-fAS" kind="show" id="Rff-Eq-K6g"/>
</connections>
</button>
</subviews>
<color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstItem="eIC-Nm-Ex7" firstAttribute="centerX" secondItem="8bC-Xf-vdC" secondAttribute="centerX" id="G1g-VM-MAn"/>
<constraint firstItem="eIC-Nm-Ex7" firstAttribute="centerY" secondItem="8bC-Xf-vdC" secondAttribute="centerY" id="mdZ-GP-EQw"/>
</constraints>
</view>
<navigationItem key="navigationItem" id="hq3-zt-U4K"/>
</viewController>
<placeholder placeholderIdentifier="IBFirstResponder" id="dkx-z0-nzr" sceneMemberID="firstResponder"/>
</objects>
<point key="canvasLocation" x="977" y="791"/>
</scene>
<!--View Controller2-->
<scene sceneID="F9C-Nz-6dd">
<objects>
<viewController id="QHs-H4-fAS" customClass="ViewController2" customModule="stackowerflow_44343355" customModuleProvider="target" sceneMemberID="viewController">
<layoutGuides>
<viewControllerLayoutGuide type="top" id="AV0-X8-nhX"/>
<viewControllerLayoutGuide type="bottom" id="AsY-Gl-67v"/>
</layoutGuides>
<view key="view" contentMode="scaleToFill" id="1fA-pX-rzR">
<rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
</view>
</viewController>
<placeholder placeholderIdentifier="IBFirstResponder" id="Uzd-Tb-KRO" userLabel="First Responder" sceneMemberID="firstResponder"/>
</objects>
<point key="canvasLocation" x="1770" y="789"/>
</scene>
<!--Navigation Controller-->
<scene sceneID="Jff-OO-3e7">
<objects>
<navigationController automaticallyAdjustsScrollViewInsets="NO" id="Tzy-ol-uu0" sceneMemberID="viewController">
<toolbarItems/>
<navigationBar key="navigationBar" contentMode="scaleToFill" id="804-YF-T6T">
<rect key="frame" x="0.0" y="0.0" width="375" height="44"/>
<autoresizingMask key="autoresizingMask"/>
</navigationBar>
<nil name="viewControllers"/>
<connections>
<segue destination="BYZ-38-t0r" kind="relationship" relationship="rootViewController" id="BRB-ym-7I2"/>
</connections>
</navigationController>
<placeholder placeholderIdentifier="IBFirstResponder" id="M6i-ib-61I" userLabel="First Responder" sceneMemberID="firstResponder"/>
</objects>
<point key="canvasLocation" x="140" y="791.15442278860576"/>
</scene>
</scenes>
</document>
这篇关于动画化导航栏颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
