ユーザーがアプリ全体のカラーテーマを選択できるように、ピッカービューを使用しています。
ナビゲーションバー、背景、場合によってはタブバー(可能な場合)の色を変更することを計画しています。
私はこれを行う方法を調査してきましたが、Swiftの例を見つけることができません。誰かがナビゲーションバーの色とナビゲーションバーのテキストの色を変更するために使用する必要があるコードの例を教えてもらえますか?
ピッカービューが設定されました。UIの色を変更するコードを探しています。
ユーザーがアプリ全体のカラーテーマを選択できるように、ピッカービューを使用しています。
ナビゲーションバー、背景、場合によってはタブバー(可能な場合)の色を変更することを計画しています。
私はこれを行う方法を調査してきましたが、Swiftの例を見つけることができません。誰かがナビゲーションバーの色とナビゲーションバーのテキストの色を変更するために使用する必要があるコードの例を教えてもらえますか?
ピッカービューが設定されました。UIの色を変更するコードを探しています。
回答:
ナビゲーションバー:
navigationController?.navigationBar.barTintColor = UIColor.green
greenColorを任意のUIColorに置き換えます。必要に応じてRGBも使用できます。
ナビゲーションバーのテキスト:
navigationController?.navigationBar.titleTextAttributes = [.foregroundColor: UIColor.orange]
orangeColorを好きな色に置き換えます。
タブバー:
tabBarController?.tabBar.barTintColor = UIColor.brown
タブバーテキスト:
tabBarController?.tabBar.tintColor = UIColor.yellow
最後の2つでは、brownColorとyellowColorを好みの色に置き換えます。
以下は、アプリ全体に適用できる非常に基本的な外観のカスタマイズです。
UINavigationBar.appearance().backgroundColor = UIColor.greenColor()
UIBarButtonItem.appearance().tintColor = UIColor.magentaColor()
//Since iOS 7.0 UITextAttributeTextColor was replaced by NSForegroundColorAttributeName
UINavigationBar.appearance().titleTextAttributes = [UITextAttributeTextColor: UIColor.blueColor()]
UITabBar.appearance().backgroundColor = UIColor.yellowColor();
UIAppearance
SwiftのAPI について詳しくは、https://developer.apple.com/documentation/uikit/uiappearanceをご覧ください。
Swift 3、4、4.2、5+用に更新
// setup navBar.....
UINavigationBar.appearance().barTintColor = .black
UINavigationBar.appearance().tintColor = .white
UINavigationBar.appearance().titleTextAttributes = [NSForegroundColorAttributeName: UIColor.white]
UINavigationBar.appearance().isTranslucent = false
スウィフト4
UINavigationBar.appearance().barTintColor = .black
UINavigationBar.appearance().tintColor = .white
UINavigationBar.appearance().titleTextAttributes = [NSAttributedStringKey.foregroundColor: UIColor.white]
UINavigationBar.appearance().isTranslucent = false
Swift 4.2、5+
UINavigationBar.appearance().barTintColor = .black
UINavigationBar.appearance().tintColor = .white
UINavigationBar.appearance().titleTextAttributes = [NSAttributedString.Key.foregroundColor: UIColor.white]
UINavigationBar.appearance().isTranslucent = false
こちらもチェックできます:https://github.com/hasnine/iOSUtilitiesSource
UINavigationBar.appearance().barTintColor = UIColor(red: 46.0/255.0, green: 14.0/255.0, blue: 74.0/255.0, alpha: 1.0)
UINavigationBar.appearance().tintColor = UIColor.whiteColor()
UINavigationBar.appearance().titleTextAttributes = [NSForegroundColorAttributeName : UIColor.whiteColor()]
この行をdidFinishLaunchingWithOptions
コードに貼り付けるだけです。
AppDelegate内で、これによりNavBarの形式がグローバルに変更され、最終的な行/境界線(ほとんどの人にとって問題領域)が削除され、あなたや他の人が探していると思われるものが得られます。
func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {
UINavigationBar.appearance().setBackgroundImage(UIImage(), forBarPosition: UIBarPosition.Any, barMetrics: UIBarMetrics.Default)
UINavigationBar.appearance().shadowImage = UIImage()
UINavigationBar.appearance().tintColor = UIColor.whiteColor()
UINavigationBar.appearance().barTintColor = Style.SELECTED_COLOR
UINavigationBar.appearance().translucent = false
UINavigationBar.appearance().clipsToBounds = false
UINavigationBar.appearance().backgroundColor = Style.SELECTED_COLOR
UINavigationBar.appearance().titleTextAttributes = [NSFontAttributeName : (UIFont(name: "FONT NAME", size: 18))!, NSForegroundColorAttributeName: UIColor.whiteColor()] }
次に、Constants.swiftファイルを設定し、色やフォントなどを含むStyle構造体を含めます。次に、tableView / pickerViewを任意のViewControllerに追加し、「availableThemes」配列を使用して、ユーザーがthemeColorを変更できるようにします。
これの美しい点は、アプリ全体で各色に1つの参照を使用でき、ユーザーが選択した「テーマ」に基づいて更新され、それがない場合はデフォルトでtheme1()になります。
import Foundation
import UIKit
struct Style {
static let availableThemes = ["Theme 1","Theme 2","Theme 3"]
static func loadTheme(){
let defaults = NSUserDefaults.standardUserDefaults()
if let name = defaults.stringForKey("Theme"){
// Select the Theme
if name == availableThemes[0] { theme1() }
if name == availableThemes[1] { theme2() }
if name == availableThemes[2] { theme3() }
}else{
defaults.setObject(availableThemes[0], forKey: "Theme")
theme1()
}
}
// Colors specific to theme - can include multiple colours here for each one
static func theme1(){
static var SELECTED_COLOR = UIColor(red:70/255, green: 38/255, blue: 92/255, alpha: 1) }
static func theme2(){
static var SELECTED_COLOR = UIColor(red:255/255, green: 255/255, blue: 255/255, alpha: 1) }
static func theme3(){
static var SELECTED_COLOR = UIColor(red:90/255, green: 50/255, blue: 120/255, alpha: 1) } ...
ストーリーボードでこれを行うには(Interface Builder Inspector)
の助けを借りて、IBDesignable
Interface Builder Inspectorにオプションを追加UINavigationController
して、ストーリーボードで微調整できます。まず、次のコードをプロジェクトに追加します。
@IBDesignable extension UINavigationController {
@IBInspectable var barTintColor: UIColor? {
set {
guard let uiColor = newValue else { return }
navigationBar.barTintColor = uiColor
}
get {
guard let color = navigationBar.barTintColor else { return nil }
return color
}
}
}
次に、ストーリーボードのナビゲーションコントローラーの属性を設定します。
このアプローチは、ストーリーボードからナビゲーションバーのテキストの色を管理するためにも使用できます。
@IBInspectable var barTextColor: UIColor? {
set {
guard let uiColor = newValue else {return}
navigationBar.titleTextAttributes = [NSAttributedStringKey.foregroundColor: uiColor]
}
get {
guard let textAttributes = navigationBar.titleTextAttributes else { return nil }
return textAttributes[NSAttributedStringKey.foregroundColor] as? UIColor
}
}
スウィフト4:
アプリケーションレベルでナビゲーションバーの外観を変更するための完全に機能するコード。
// MARK: Navigation Bar Customisation
// To change background colour.
UINavigationBar.appearance().barTintColor = .init(red: 23.0/255, green: 197.0/255, blue: 157.0/255, alpha: 1.0)
// To change colour of tappable items.
UINavigationBar.appearance().tintColor = .white
// To apply textAttributes to title i.e. colour, font etc.
UINavigationBar.appearance().titleTextAttributes = [.foregroundColor : UIColor.white,
.font : UIFont.init(name: "AvenirNext-DemiBold", size: 22.0)!]
// To control navigation bar's translucency.
UINavigationBar.appearance().isTranslucent = false
ハッピーコーディング!
SWIFT 4-スムーズな移行(最適なソリューション):
ナビゲーションコントローラーから戻って、使用するプッシュ元のナビゲーションコントローラーに別の色を設定する必要がある場合
override func willMove(toParentViewController parent: UIViewController?) {
navigationController?.navigationBar.barTintColor = .white
navigationController?.navigationBar.tintColor = Constants.AppColor
}
これをviewWillAppearに配置する代わりに、遷移がきれいになります。
SWIFT 4.2
override func willMove(toParent parent: UIViewController?) {
navigationController?.navigationBar.barTintColor = UIColor.black
navigationController?.navigationBar.tintColor = UIColor.black
}
ではスウィフト4
ナビゲーションバーの色を変更できます。以下のコードスニペットを使用するだけですviewDidLoad()
ナビゲーションバーの色
self.navigationController?.navigationBar.barTintColor = UIColor.white
ナビゲーションバーのテキストの色
self.navigationController?.navigationBar.titleTextAttributes = [NSAttributedStringKey.foregroundColor: UIColor.purple]
以下のためにiOSの11大タイトルナビゲーションバー、あなたが使用する必要があるlargeTitleTextAttributes
プロパティを
self.navigationController?.navigationBar.largeTitleTextAttributes = [NSAttributedStringKey.foregroundColor: UIColor.purple]
このappearance()
機能は私にとっては必ずしも機能するとは限りません。そのため、NCオブジェクトを作成し、その属性を変更することを好みます。
var navBarColor = navigationController!.navigationBar
navBarColor.barTintColor =
UIColor(red: 255/255.0, green: 0/255.0, blue: 0/255.0, alpha: 100.0/100.0)
navBarColor.titleTextAttributes =
[NSForegroundColorAttributeName: UIColor.whiteColor()]
また、テキストだけでなく画像を追加する場合も同様に機能します
var imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 70, height: 70))
imageView.contentMode = .ScaleAspectFit
var image = UIImage(named: "logo")
imageView.image = image
navigationItem.titleView = imageView
外観APIとbarTintColorカラーを使用します。
UINavigationBar.appearance().barTintColor = UIColor.greenColor()
ナビゲーションコントローラをカスタマイズしている場合は、上記のコードスニペットを使用できます。したがって、私の場合、次のコード部分として使用しました。
Swift 3.0、XCode 8.1バージョン
navigationController.navigationBar.barTintColor = UIColor.green
ナビゲーションバーのテキスト:
navigationController.navigationBar.titleTextAttributes = [NSForegroundColorAttributeName: UIColor.orange]
とても参考になる話です。
Swift 4、iOS 12およびXcode 10アップデート
内側に1行入れるだけ viewDidLoad()
navigationController?.navigationBar.barTintColor = UIColor.red
Swift 2で
ナビゲーションバーの色を変更するには、
navigationController?.navigationBar.barTintColor = UIColor.whiteColor()
アイテムナビゲーションバーの色を変更するには、
navigationController?.navigationBar.tintColor = UIColor.blueColor()
または
navigationController!.navigationBar.titleTextAttributes = [NSForegroundColorAttributeName: UIColor.blueColor()]
UINavigationBar.appearance().barTintColor = UIColor(colorLiteralRed: 51/255, green: 90/255, blue: 149/255, alpha: 1)
これにより、ナビゲーションバーの色がFacebookバーの色のように設定されます。
Swift 3およびSwift 4互換Xcode 9
一般的なナビゲーションバーのクラスを作成するためのより良いソリューション
5つのコントローラーがあり、各コントローラーのタイトルがオレンジ色に変わります。各コントローラーには5つのナビゲーションコントローラーがあるため、インスペクターまたはコードのいずれかからすべての色を変更する必要がありました。
だから、私はすべてのナビゲーションバーをコードから変更する代わりにクラスを作成しました。このクラスを割り当てるだけで、5つのコントローラーのコード再利用機能すべてで機能しました。 このクラスを各コントローラーに割り当てるだけで、それで終わりです。
import UIKit
class NabigationBar: UINavigationBar {
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
commonFeatures()
}
func commonFeatures() {
self.backgroundColor = UIColor.white;
UINavigationBar.appearance().titleTextAttributes = [NSAttributedStringKey.foregroundColor:ColorConstants.orangeTextColor]
}
}
iOS 10 Swift 3.0
あなたが使用する迅速なフレームワークそして、私たちに気にしない場合はUINeraidaとして、変更ナビゲーション背景にUIColor
かHexColor
またはUIImage
、変更ナビゲーションバックボタンのテキスト、プログラム、完全なforgroundのテキストの色を変更します。
ために UINavigationBar
neraida.navigation.background.color.hexColor("54ad00", isTranslucent: false, viewController: self)
//Change navigation title, backbutton colour
neraida.navigation.foreground.color.uiColor(UIColor.white, viewController: self)
//Change navigation back button title programmatically
neraida.navigation.foreground.backButtonTitle("Custom Title", ViewController: self)
//Apply Background Image to the UINavigationBar
neraida.navigation.background.image("background", edge: (0,0,0,0), barMetrics: .default, isTranslucent: false, viewController: self)
このバージョンでは、ナビゲーションバーの下の1pxのシャドウラインも削除されます。
Swift 5:これをAppDelegateに配置しましたdidFinishLaunchingWithOptions
UINavigationBar.appearance().barTintColor = UIColor.black
UINavigationBar.appearance().tintColor = UIColor.white
UINavigationBar.appearance().titleTextAttributes = [NSAttributedString.Key.foregroundColor: UIColor.white]
UINavigationBar.appearance().isTranslucent = false
UINavigationBar.appearance().setBackgroundImage(UIImage(), for: .any, barMetrics: .default)
UINavigationBar.appearance().shadowImage = UIImage()
私がしなければなりませんでした
UINavigationBar.appearance().tintColor = UIColor.whiteColor()
UINavigationBar.appearance().barStyle = .Black
UINavigationBar.appearance().backgroundColor = UIColor.blueColor()
それ以外の場合、背景色は変更されません
.normalのボタンの状態を必ず設定してください
extension UINavigationBar {
func makeContent(color: UIColor) {
let attributes: [NSAttributedString.Key: Any]? = [.foregroundColor: color]
self.titleTextAttributes = attributes
self.topItem?.leftBarButtonItem?.setTitleTextAttributes(attributes, for: .normal)
self.topItem?.rightBarButtonItem?.setTitleTextAttributes(attributes, for: .normal)
}
}
PS iOS 12、Xcode 10.1
topItem
解決策を何時間も探していました。Appleがスタイルをナビゲーションに適用する方法に加え続けている多くの変更はイライラさせられます。
AppDelegateでこれを試してください:
//MARK:- ~~~~~~~~~~setupApplicationUIAppearance Method
func setupApplicationUIAppearance() {
UIApplication.shared.statusBarView?.backgroundColor = UIColor.clear
var preferredStatusBarStyle: UIStatusBarStyle {
return .lightContent
}
UINavigationBar.appearance().tintColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
UINavigationBar.appearance().barTintColor = UIColor.white
UINavigationBar.appearance().isTranslucent = false
let attributes: [NSAttributedString.Key: AnyObject]
if DeviceType.IS_IPAD{
attributes = [
NSAttributedString.Key.foregroundColor: UIColor.white,
NSAttributedString.Key.font: UIFont(name: "HelveticaNeue", size: 30)
] as [NSAttributedString.Key : AnyObject]
}else{
attributes = [
NSAttributedString.Key.foregroundColor: UIColor.white
]
}
UINavigationBar.appearance().titleTextAttributes = attributes
}
iOS 13
func setupNavigationBar() {
// if #available(iOS 13, *) {
// let window = UIApplication.shared.windows.filter {$0.isKeyWindow}.first
// let statusBar = UIView(frame: window?.windowScene?.statusBarManager?.statusBarFrame ?? CGRect.zero)
// statusBar.backgroundColor = #colorLiteral(red: 0.2784313725, green: 0.4549019608, blue: 0.5921568627, alpha: 1) //UIColor.init(hexString: "#002856")
// //statusBar.tintColor = UIColor.init(hexString: "#002856")
// window?.addSubview(statusBar)
// UINavigationBar.appearance().tintColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
// UINavigationBar.appearance().barTintColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
// UINavigationBar.appearance().isTranslucent = false
// UINavigationBar.appearance().backgroundColor = #colorLiteral(red: 0.2784313725, green: 0.4549019608, blue: 0.5921568627, alpha: 1)
// UINavigationBar.appearance().titleTextAttributes = [NSAttributedString.Key.foregroundColor : UIColor.white]
// }
// else
// {
UIApplication.shared.statusBarView?.backgroundColor = #colorLiteral(red: 0.2784313725, green: 0.4549019608, blue: 0.5921568627, alpha: 1)
UINavigationBar.appearance().tintColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
UINavigationBar.appearance().barTintColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
UINavigationBar.appearance().isTranslucent = false
UINavigationBar.appearance().backgroundColor = #colorLiteral(red: 0.2784313725, green: 0.4549019608, blue: 0.5921568627, alpha: 1)
UINavigationBar.appearance().titleTextAttributes = [NSAttributedString.Key.foregroundColor : UIColor.white]
// }
}
拡張
extension UIApplication {
var statusBarView: UIView? {
if responds(to: Selector(("statusBar"))) {
return value(forKey: "statusBar") as? UIView
}
return nil
}}
ここでの解決策でまだ問題がある人のためにこれを書いています。
Xcodeバージョン11.4(11E146)を使用しています。私のために働いているのは:
navigationController?.navigationBar.barTintColor = UIColor.white
navigationController?.navigationBar.tintColor = UIColor.black
ただし、ストーリーボードのbarTintColorを「デフォルト」以外の値に設定した場合、この2行のコードは効果がありません。
したがって、注意して、ストーリーボードのデフォルトのbarTintColorに戻します。ああアップル...
次の行をdidFinishLaunchingWithOptions関数内のAppDelegateに追加します。
この行は、ナビゲーションバーの背景です。
UINavigationBar.appearance().barTintColor = .orange
この行は、don's isTranslucentがfalseの場合、ナビゲーションで白色を表示します。
UINavigationBar.appearance().tintColor = .white
この行は、ナビゲーションバーのテキストとアイコン用です
UINavigationBar.appearance().titleTextAttributes = [NSAttributedString.Key.foregroundColor: Styles.textFirstColor]
これにより、すべてがナビゲーションバーに到達します。
UINavigationBar.appearance().isTranslucent = false