swift - guidelines - menu ios

Cambiar la posición del título atribuido en el botón

Question

Como ve, quiero que el título esté debajo de la imagen y los dos se centran horizontalmente. Tenga cuidado, son componentes de un botón. Traté de cambiar el valor del recuadro en el constructor de la interfaz, pero no funcionó con la pantalla de los demás (utilizo el diseño automático), se estropeó.

¿Puedo hacerlo usando IB o tengo que "codificar"

Answer 1

Intente agregar CAShapeLayer al botón: -

1.) Defina un UIBezierPath con el rect : frame igual al botón

2.) Defina un CAShapeLayer con ruta a la de un bezierPath

3.) Agregue texto "B" al centro del botón agregando un CATextLayer : https://developer.apple.com/library/ios/documentation/GraphicsImaging/Reference/CATextLayer_class/

4.) Agregue ese shapeLayer y textLayer como subLayer a la capa de botón, déle a esa capa una zPosition respectiva en este caso -1

5.) Establezca la opacidad (alfa) para la primera capa, es decir, el botón.

Así es como se verá su código:

import UIKit

class ViewController: UIViewController {

@IBOutlet weak var btn: UIButton!

override func viewDidLoad() {
    super.viewDidLoad()

    setupButton()

}

func setupButton(){

    print(btn.bounds)
    print(btn.frame)

    let bezPath : UIBezierPath = UIBezierPath(rect: btn.bounds)
    let lyr : CAShapeLayer = CAShapeLayer()
    let txtLyr : CATextLayer = CATextLayer()
    lyr.path = bezPath.CGPath
    lyr.fillColor = UIColor.blueColor().CGColor
    lyr.zPosition = -1
    lyr.opacity = 0.5
    txtLyr.string = "B"
    //        txtLyr.font = 
    txtLyr.fontSize = 38.0
    txtLyr.zPosition = -1
    txtLyr.frame = btn.bounds
    print(txtLyr.frame)
    txtLyr.alignmentMode = kCAAlignmentCenter
    btn.layer.addSublayer(lyr)
    btn.layer.addSublayer(txtLyr)
}


@IBAction func btnAction(sender: UIButton) {

     print("Button is pressed!")

  }
}

Con esto siendo la Salida: -

PD: 1.) En su caso solo se necesitaría CATextLayer ...

2.) Esa cosa del círculo rojo que ves en el botón es una imagen.

espero que esto ayude

Answer 2

en el constructor de interfaces es fácil, solo agrega un botón cámbialo para escribir personalizado como la imagen de abajo y también el título como configuración

y configura la imagen para su botón, lo settingsButton.png como settingsButton.png .

ahora necesita establecer la alineación, por ejemplo,

ahora puede configurar los insectos para la imagen y el título, para establecer el insecto para la imagen u seleccione el edge para la image como la image a continuación, y ajuste el insecto

y para el título, ahora seleccione el edge para el title y ajuste el insecto como la imagen de abajo,

y ahora tu botón se ve más abajo,

Espero que esto te ayude :)