0

Mi objetivo es poder replicar esta imagen, con que tenga un color de fondo completo y a su vez un texto con un background diferente

introducir la descripción de la imagen aquí

Hasta por el momento tengo el siguiente metodo para setear el navigationBar

 func setupNavigationBar(showBack:Bool, showMenu:Bool,isLogin:Bool)
    {
        self.navigationController?.navigationBar.isTranslucent = false

        var leftItemTitle = UIBarButtonItem()

        let sizeLength = UIScreen.main.bounds.size.height * 2
        let defaultNavigationBarFrame = CGRect(x: 0, y: 0, width: sizeLength, height: 70)



        let titleLabel = UILabel()
        titleLabel.text = self.menuText
        titleLabel.font = UIFont.systemFont(ofSize: 20)
        titleLabel.textColor = UIColor.white
        titleLabel.sizeToFit()
        leftItemTitle = UIBarButtonItem(customView: titleLabel)

         let mediumView = UIView(frame: CGRect (x: 0, y: 0, width: UIScreen.main.bounds.size.width, height: 20 ))
         mediumView.backgroundColor = Utils.Color.LigthViewBackGround
////         mediumView.addSubview(titleLabel)
//
//         let linearBackgroundTextBar = UIBarButtonItem(customView: mediumView)
//        self.navigationItem.centerViews = [mediumView]

          navigationItem.titleView = mediumView



        if(!showBack && !showMenu && !isLogin){
            self.navigationController?.navigationBar.tintColor = UIColor.clear
            self.navigationItem.leftBarButtonItems?.removeAll()
            self.navigationItem.setHidesBackButton(true, animated:false);
            self.navigationController?.navigationBar.barTintColor = Utils.Color.LigthViewBackGround
        }
        else if(showBack){
            let backMenuButtonItem = UIBarButtonItem(image: UIImage.init(named: "backButton"), style: UIBarButtonItemStyle.done, target: self, action: #selector(backPressed))
            backMenuButtonItem.tintColor = UIColor.white
            backMenuButtonItem.width = CGFloat(30)

            self.navigationItem.leftBarButtonItems = [backMenuButtonItem,leftItemTitle,]
                self.navigationController?.navigationBar.barTintColor = Utils.Color.backgroundBlue
        }
        else if(showMenu){
            let sideMenuButtonItem = UIBarButtonItem(image: UIImage.init(named: "sideMenu"), style: UIBarButtonItemStyle.done, target: self, action: #selector(sideMenuPressed))
            sideMenuButtonItem.tintColor = UIColor.white
            sideMenuButtonItem.width = CGFloat(30)

            self.navigationItem.leftBarButtonItems = [sideMenuButtonItem,leftItemTitle]


        }
        else if (isLogin){
               self.navigationController?.navigationBar.barTintColor = Utils.Color.backgroundLogin
        }


        if let hidden = navigationController?.navigationBar.isHidden
        {
            if(hidden)
            {
                self.navigationController?.navigationBar.barStyle = .default
            }
            else
            {
                self.navigationController?.navigationBar.barStyle = .black
            }
        }
    }

el resultado es

introducir la descripción de la imagen aquí

Como podria hacer que ese fondo blanco ocupe todo el ancho y que este centrado a lo que es el title de la pantalla

Gracias

AL UTILIZAR EL METODO

let frame = self.navigationController?.navigationBar.frame.size
mediumView.frame = CGRect(x: 0, y: 0, width: frame.width,  height: frame.height)
self.navigationController.navigationBar.addSubView(mediumView)

YA NO SE VE EL TITLE SOLO SE VE EL FONDO NECESITO AMBAS COSAS VISIBLES

6
  • que quieres mostrar con esta vista que hubo un error en la peticion, que no hay acceso a internet o algo por el estilo
    – kjoe
    el 30 jul. 2019 a las 12:28
  • lo que necesito es que la linea blanca este en todo el ancho como al primer imagen pero esto es en el navigationbar el 30 jul. 2019 a las 15:28
  • Lo que te pregunto el objetivo de poner la línea no conozco de Android nada pero en iOS no he visto nada igual y quizás te pueda recomendar una solución más a los iOS
    – kjoe
    el 30 jul. 2019 a las 16:20
  • @kjoe tengo un diseño de un cliente el cual quiere que en el navigationBar se vea de esa forma ya logre colocar el title como se ve alli que dice "Error" y ahora quiero colocarle una uiview de color claro(sera dinamico) por detras en todo el ancho ese es mi requerimiento y necesito para ios justamenten o para android el 30 jul. 2019 a las 16:33
  • que debe mostrar esta vista aparte del error por que te puedo sugerior esconder el navigationBar. y mostra una vista personalizada como quieres. pero si no tienes ningun otro botton en la vista no se como manejaras la navegacion en ese cas
    – kjoe
    el 30 jul. 2019 a las 18:10

1 respuesta 1

3

Lo que tienes que hacer es añadir mediumView dentro del navigationBar y decirle que tenga el mismo alto y ancho que el navBar.

let frame = self.navigationController?.navigationBar.frame.size
mediumView.frame = CGRect(x: 0, y: 0, width: frame.width,  height: frame.height)
self.navigationController.navigationBar.addSubView(mediumView)
3
  • al realizarlo asi me tapa el resto de los componentes , aparte no quiero que tenga la misma altura debe ser inferior como se ve en la primer imagen el 8 ago. 2019 a las 21:05
  • 1
    Si quieres que tu mediumView quede debajo solo le tienes que decir a su superview que lo envíe al fondo con navBar.sendSubviewToBack(mediumView) y lo otro del tamaño ya es cosa tuya es bastante obvio que en el ancho y altura le estoy diciendo que tome el del navBar por eso cubre el navBar compelto :| el 9 ago. 2019 a las 2:20
  • de mandarlo con subViewToBack ya directamente no aparece porque quedaria tapado, creo que estoy encerrandome en un frasco el 9 ago. 2019 a las 17:05

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.