Swift 3 - Most appropriate way to create a button with a scalable image above text - swift

Question

In Android I was able to accomplish this custom button by creating a LinearLayout with 2 children-an ImageView and a TextView, and just controlling the layout properties (and adding onClick, etc. to recreate button functionality). Using weights, I was able to have the image scale to fill the button while allowing the appropriate proportions for the text.
For Example:
<LinearLayout
android:id="#+id/my_button"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#drawable/button_background"
android:clickable="true"
android:focusable="true"
android:onClick="onClickFunction"
android:orientation="vertical" >
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="5"
android:layout_marginTop="-8dp"
android:src="#mipmap/icon_test" />
<TextView
android:id="#+id/my_button_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button Text"
android:textSize="14sp"
android:textAllCaps="true"
android:textStyle="bold"
android:textColor="#color/text_color"
android:textAlignment="center" />
</LinearLayout>
Produces:
What is the most appropriate way to do this in Swift 3? I've read about using insets to control the positioning (even setting negative "Left" insets on the image to position it above the text), but the image dimensions would have to be managed manually. I've also been made aware that setting the image as the background would have it scale, but I don't want to have the text overlap the image. My thought process is that there could be a "workaround" of sorts similar to my example above for Android, but I doubt the solution will be similar.
Furthermore, I'm pretty dependent on the IB (my app is not very complex so it's easily managed), so I'm using this for my button so far:
import UIKit
#IBDesignable
class RoundButton: UIButton {
#IBInspectable var cornerRadius: CGFloat = 0{
didSet{
self.layer.cornerRadius = cornerRadius
}
}
#IBInspectable var borderWidth: CGFloat = 0{
didSet{
self.layer.borderWidth = borderWidth
}
}
#IBInspectable var borderColor: UIColor = UIColor.clear{
didSet{
self.layer.borderColor = borderColor.cgColor
}
}
}
If it's not asking too much I'd like to be able to build off of this.

Answer 1

Here is the example how you can achieve that:
let btnSort = UIButton(type: .system)
btnSort.frame = CGRect(x: 2, y: 74, width: 140, height: 140)
btnSort.tintColor = UIColor.white
btnSort.setImage(UIImage(named:"lamp"), for: .normal)
btnSort.imageEdgeInsets = UIEdgeInsets(top: 6,left: 20,bottom: 30,right: 20)
btnSort.titleEdgeInsets = UIEdgeInsets(top: 100,left: -250,bottom: 0,right: 0)
btnSort.setTitle("BUTTON TEXT", for: .normal)
btnSort.layer.borderWidth = 1.0
btnSort.backgroundColor = UIColor.red
btnSort.layer.borderColor = UIColor.white.cgColor
self.view.addSubview(btnSort)
And result will be:
And here is the original post. I have changed EdgeInsets as per your requirement.