Xcode, design elements made of multiple objects

in my app I had to implement the log-in via Google and in order to accomplish that I used Firebase authentication; I managed to create a button using a UIView with a label and a UIImageView and adding to the view a UITapGestureRecognizer. My question is, is there any smarter way to put together elements? And if so how can I make the view become darker when pressed like in a real button?

This is the "button" I created; on the left, there's the UIImageView with Google logo and on the right, there's the label

2 answers

  • answered 2018-08-16 16:21 lindanordstrom

    You can use a UIButton instead. It is possible to add images and labels to a button. And if using Interface Builder you can just connect the button to an IBAction to cater for button being pressed. If using a UIButton you can set different colors for different states as well, e.g. highlighted (when button is being pressed down).

    There’s plenty of tutorials online for achieving this. Eg this one: https://medium.com/@harmittaa/uibutton-with-label-text-and-right-aligned-image-a9d0f590bba1

  • answered 2018-08-16 17:05 Alejandro Viquez

    you just need to set image in button set label, the semantic default is set by unspecified: image example

    but you are able to change this semantic of the button, try this extension to switch the semantic of the image, this extension function when you are trying to put image on the right, but you are able to edit extension to separate right image from left label:

    extension UIButton{
    func buttonSemantic(){
            titleEdgeInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 20)
            imageEdgeInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
            contentEdgeInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 20 / 2)
        }
    }
    

    and then you just need set image and title, and add separator semantic

    button.setTitle("titleButton", for: UIControlState())
    button.setImage(UIImage(named: "image"), for: .normal)
    button.buttonSemantic()