Añadir subtítulos, bajo el título en la barra de navegación de la controladora en Xcode

Así que estoy queriendo agregar un «subtítulo», con el título en la barra de navegación en la navegación del controlador.

Principalmente todo lo puedo mirar tan lejos quiere que yo uso CGRect. No sé mucho de lo que es y suena como su queriendo crear todo un nuevo punto de vista que no es lo que estoy deseando hacer.

Mi pregunta es, hay un punto método para añadir un subtítulo ver fácilmente?

Lo más cercano que encontré fue publicado en el desbordamiento de pila y aquí está el enlace:

Crear un subtítulo en navigationbar

Al parecer el año pasado, este funcionó, pero ahora me estoy poniendo de los errores y en mi viewDidLoad…

He intentado esto:

auto.navigationController?.navigationItem.prompt = «Subtitle Aquí»

Es la única cosa que no se muestran errores, pero aún así no funciona. Literalmente no hace nada. Al menos nada visible en tiempo de ejecución.

En una nota de lado, swift es el preferido. Gracias!

  • ¿Has probado self.navigationItem.prompt = "Subtitle"?
  • Que va a hacer el subtítulo anterior título y no por debajo de título
  • Sí, me hice un test y encontró que.
  • está usted bromeando? No es el subtítulo, se trata de una nueva separado de la barra de arriba de la barra de navegación con su propio título, de esta manera se tienen dos barras, inútil!
  • Te ayudará a todos escenario existente stackoverflow.com/questions/37409260/…

9 Kommentare

  1. 46

    Aunque no es una solución, pero tiene algunos problemas conocidos

    Solución es escribir una función como esta

    func setTitle(title:String, subtitle:String) -> UIView {
        let titleLabel = UILabel(frame: CGRectMake(0, -2, 0, 0))
    
        titleLabel.backgroundColor = UIColor.clearColor()
        titleLabel.textColor = UIColor.grayColor()
        titleLabel.font = UIFont.boldSystemFontOfSize(17)
        titleLabel.text = title
        titleLabel.sizeToFit()
    
        let subtitleLabel = UILabel(frame: CGRectMake(0, 18, 0, 0))
        subtitleLabel.backgroundColor = UIColor.clearColor()
        subtitleLabel.textColor = UIColor.blackColor()
        subtitleLabel.font = UIFont.systemFontOfSize(12)
        subtitleLabel.text = subtitle
        subtitleLabel.sizeToFit()
    
        let titleView = UIView(frame: CGRectMake(0, 0, max(titleLabel.frame.size.width, subtitleLabel.frame.size.width), 30))
        titleView.addSubview(titleLabel)
        titleView.addSubview(subtitleLabel)
    
        let widthDiff = subtitleLabel.frame.size.width - titleLabel.frame.size.width
    
        if widthDiff < 0 {
            let newX = widthDiff / 2
            subtitleLabel.frame.origin.x = abs(newX)
        } else {
            let newX = widthDiff / 2
            titleLabel.frame.origin.x = newX
        }
    
        return titleView
    }

    El uso de esta función para personalizar la navegación de título de vista en viewDidLoad

    self.navigationItem.titleView = setTitle("Title", subtitle: "SubTitle")

    Único problema conocido es que si los subtítulos se hace muy grande que el extravío se produce.

    Resultado Final
    Añadir subtítulos, bajo el título en la barra de navegación de la controladora en Xcode

    Fuente: https://gist.github.com/nazywamsiepawel/0166e8a71d74e96c7898

    • Su mucho más código, a continuación, me estaba esperando pero no funciona. Realmente espero que Apple agrega una manera más fácil. Los subtítulos no me parece algo que sea tan descabellada.. lol
    • Gracias un montón por el camino! 🙂 @rajan
    • Necesito algo como esto, Si el título está en blanco, entonces el título debe en el centro. Tengo que implementar en el chat de la aplicación. Si el usuario comienza a escribir, a continuación, mostrar subtítulos. Para más información, véase whatsApp.
    • el título y el subtítulo de la diapositiva a centro desde la izquierda empujando de navegación controlador de soluciones @naveed
    • por encima de la solución de trabajo para centrar el texto, en mi caso su trabajo
    • Teniendo el mismo problema que @Zoom, de otros posts parece que puede estar relacionado con cuando en el punto de vista del ciclo de vida se actualiza el título?
    • agregar el código para el título y el subtítulo en viewDidAppear trabajó para mí.
    • Mi problema fue solucionado, mantener la actualización inicial de venir async de viewDidLoad. Era la configuración de la titleView a un atribuye la etiqueta varias veces como el contenido ha cambiado durante la transición. Tengo trabajo por el sólo establecimiento de la vista una vez, a continuación, sólo la actualización de su contenido si ya está presente.
    • ¿cómo puedo cambiar la alineación de ambos arriba a la izquierda sólo
    • traté de titleLabel.textColor = UIColor.blanco pero no funciona para mí

  2. 62

    Aquí está mi versión, con una pila de vista sobre una extensión.

    extension UINavigationItem {
    
    
    
         func setTitle(title:String, subtitle:String) {
    
                let one = UILabel()
                one.text = title
                one.font = UIFont.systemFont(ofSize: 17)
                one.sizeToFit()
    
                let two = UILabel()
                two.text = subtitle
                two.font = UIFont.systemFont(ofSize: 12)
                two.textAlignment = .center
                two.sizeToFit()
    
    
    
                let stackView = UIStackView(arrangedSubviews: [one, two])
                stackView.distribution = .equalCentering
                stackView.axis = .vertical
                stackView.alignment = .center
    
                let width = max(one.frame.size.width, two.frame.size.width)
                stackView.frame = CGRect(x: 0, y: 0, width: width, height: 35)
    
                one.sizeToFit()
                two.sizeToFit()
    
    
    
                self.titleView = stackView
            }
        }
    • el título y el subtítulo de la diapositiva a centro desde la izquierda empujando de navegación controlador de soluciones
    • Para mí, este es el limpiador de respuesta, no tiene la magia de los números como la primera respuesta. Sólo voy a añadir stackView.alignment = .center después de establecer el eje, de lo contrario no aparecerá totalmente centrado en si el subtítulo es más grande. También me gustaría quitar las dos últimas llamadas a sizeToFit(), ya que se les llama en las etiquetas.
    • ¿el título predeterminado también tiene constante fuente de valor 17?
  3. 11

    Muchas gracias por tu respuesta! @RajanMaheshwari

    Su codificación funcionó a la perfección, excepto en el caso de la declaración que usted hizo con la widthDiff..

    He ajustado un poco y todo funcionó sin problemas.

    if widthDiff < 0 {
            let newX = widthDiff / 2
            subtitleLabel.frame.origin.x = abs(newX)
        } else {
            let newX = widthDiff / 2
            titleLabel.frame.origin.x = newX
        }

    Gracias de nuevo por tu respuesta!

    • Gran solución! Tenía que hacerlo así.
  4. 7

    @iosjillian Swift 4 extensión de las grandes obras, añadiendo un poco más para honrar a la barra de la aparición de usuario y las preferencias de fuentes:

    import UIKit
    
    extension UINavigationItem {
    
      func setTitle(_ title: String, subtitle: String) {
        let appearance = UINavigationBar.appearance()
        let textColor = appearance.titleTextAttributes?[NSAttributedString.Key.foregroundColor] as? UIColor ?? .black
    
        let titleLabel = UILabel()
        titleLabel.text = title
        titleLabel.font = .preferredFont(forTextStyle: UIFont.TextStyle.headline)
        titleLabel.textColor = textColor
    
        let subtitleLabel = UILabel()
        subtitleLabel.text = subtitle
        subtitleLabel.font = .preferredFont(forTextStyle: UIFont.TextStyle.subheadline)
        subtitleLabel.textColor = textColor.withAlphaComponent(0.75)
    
        let stackView = UIStackView(arrangedSubviews: [titleLabel, subtitleLabel])
        stackView.distribution = .equalCentering
        stackView.alignment = .center
        stackView.axis = .vertical
    
        self.titleView = stackView
      }
    }
  5. 4

    En caso de que alguien buscando Objective-C código de la mencionada solución:

       UILabel *title = [[UILabel alloc]init];
       UILabel *subtitle = [[UILabel alloc]init];
    
       [title setFont:[UIFont systemFontOfSize:12]];
       [title setTextColor:[UIColor whiteColor]];
       [title setFont:[UIFont systemFontOfSize:17]];
       [title sizeToFit];
       title.text = @"Title";
    
       [subtitle setTextColor:[UIColor whiteColor]];
       [subtitle setFont:[UIFont systemFontOfSize:12]];
       [subtitle setTextAlignment:NSTextAlignmentCenter];
       [subtitle sizeToFit];
       subtitle.text = @"Subtitle Title";
    
       UIStackView *stackVw = [[UIStackView alloc]initWithArrangedSubviews:@[title,subtitle]];
       stackVw.distribution = UIStackViewDistributionEqualCentering;
       stackVw.axis = UILayoutConstraintAxisVertical;
       stackVw.alignment =UIStackViewAlignmentCenter;
    
    
       [stackVw setFrame:CGRectMake(0, 0, MAX(title.frame.size.width, subtitle.frame.size.width), 35)];
       self.navigationItem.titleView = stackVw;
  6. 2

    Gracias por la respuesta @RajanMaheshwari

    Si alguien está teniendo el problema de que el título se convierte en desalineados cuando el texto de los subtítulos es más largo que el texto del título, he añadido el siguiente código a la Rajan la respuesta de arriba justo debajo de donde el subtitleLabel se crea una instancia de:

    //Fix incorrect width bug
    if (subtitleLabel.frame.size.width > titleLabel.frame.size.width) {
        var titleFrame = titleLabel.frame
        titleFrame.size.width = subtitleLabel.frame.size.width
        titleLabel.frame = titleFrame
        titleLabel.textAlignment = .center
    }

    La esperanza de que esto ayude a alguien que se encontraron con el mismo problema que me

    • como por @GerardoMR comentario de arriba, se puede centrar el título/subtítulo usando el UIStackView configuración: stackView.alignment = .center
  7. 2

    Me gustó mucho @user2325031 la respuesta, pero se encontró que cambiar el tamaño de las etiquetas para el ajuste y la configuración de la trama no era necesaria. También he puesto el stackView de la alineación .centro por @GerardoMR sugerencia.

    extension UINavigationItem {
    
        func setTitle(_ title: String, subtitle: String) {
            let titleLabel = UILabel()
            titleLabel.text = title
            titleLabel.font = .systemFont(ofSize: 17.0)
            titleLabel.textColor = .black
    
            let subtitleLabel = UILabel()
            subtitleLabel.text = subtitle
            subtitleLabel.font = .systemFont(ofSize: 12.0)
            subtitleLabel.textColor = .gray
    
            let stackView = UIStackView(arrangedSubviews: [titleLabel, subtitleLabel])
            stackView.distribution = .equalCentering
            stackView.alignment = .center
            stackView.axis = .vertical
    
            self.titleView = stackView
        }
    
    }
  8. 2

    Swift 4:

    import UIKit
    
    class NavigationTitleView: UIView {
    
        private var contentStackView = UIStackView()
        private var titleLabel = UILabel()
        private var subTitleLabel = UILabel()
    
        override init(frame: CGRect) {
            super.init(frame: frame)
    
            viewConfig()
            addViewsConfig()
            layoutViewsConfig()
    
        }
    
        required init?(coder aDecoder: NSCoder) {
            fatalError("init(coder:) has not been implemented")
        }
    
    
        func set(title: String, subTitle: String){
    
            self.titleLabel.text = title
            self.subTitleLabel.text = subTitle
    
        }
    
        private func viewConfig() {
    
            contentStackView.axis = .vertical
            contentStackView.alignment = .center
            contentStackView.distribution  = .fill
            contentStackView.spacing = 5
    
    
            self.backgroundColor = .clear
            self.titleLabel.textColor = .white
            self.self.subTitleLabel.textColor = .white
    
        }
    
        private func addViewsConfig() {
    
            contentStackView.addArrangedSubview(subTitleLabel)
            contentStackView.addArrangedSubview(titleLabel)
            self.addSubview(contentStackView)
    
        }
    
        private func layoutViewsConfig(){
    
            contentStackView.translatesAutoresizingMaskIntoConstraints = false
            contentStackView.centerXAnchor.constraint(equalTo: self.centerXAnchor, constant: 0.0).isActive = true
            contentStackView.centerYAnchor.constraint(equalTo: self.centerYAnchor, constant: 0.0).isActive = true
    
        }
    
    }

    Uso:

    import UIKit
    
    class  ViewController: UIViewController {
    
        private var navigationTitleView = NavigationTitleView()
    
        override func viewDidLoad() {
            super.viewDidLoad()
    
            self.navigationItem.titleView = navigationTitleView
            navigationTitleView.set(title: "title", subTitle: "subTitle")
    
        }
    
    }

    Añadir subtítulos, bajo el título en la barra de navegación de la controladora en Xcode

  9. 1

    Otra solución, utilizando sólo uno etiqueta y NSAttributedString para diferenciar entre el título y el subtítulo (con diferentes tamaños de fuente, pesos, colores, etc.) en su lugar. Elimina el problema de los diferentes etiquetas de alineación.

    extension UIViewController {
        func setTitle(_ title: String, subtitle: String) {
            let rect = CGRect(x: 0, y: 0, width: 400, height: 50)
            let titleSize: CGFloat = 20     //adjust as needed
            let subtitleSize: CGFloat = 15
    
            let label = UILabel(frame: rect)
            label.backgroundColor = .clear
            label.numberOfLines = 2
            label.textAlignment = .center
            label.textColor = .black
    
            let text = NSMutableAttributedString()
            text.append(NSAttributedString(string: title, attributes: [.font : UIFont.boldSystemFont(ofSize: titleSize)]))
            text.append(NSAttributedString(string: "\n\(subtitle)", attributes: [.font : UIFont.systemFont(ofSize: subtitleSize)]))
            label.attributedText = text
            self.navigationItem.titleView = label
        }
    }

    Personalizado titleView basado en parte en https://stackoverflow.com/a/34298491/3918865

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea