*Swift5, Xcode ver 12.1
I tried to make buttons with rounded corners and shadows, images and titles, and circler buttons
- Font specification, font size
- Put any character in the button title
- Text color
- Do not let the characters stick out
- Border color of button
- Border width of button
- Rounded border of the button
- Shadow color
- Shadow opacity
- Shadow radius
- Shadow direction
- Circler button
- Button with image and title
- Create a button subclass
Font specification, font size
button.titleLabel?.font = UIFont(name: "HelveticaNeue", size: 17)
Put any character in the button title
button.setTitle("Button", for: .normal)
Text color
let textColor = UIColor(red: 129/255, green: 216/255, blue: 208/255, alpha: 1.0)
// button.setTitleColor(UIColor.blue, for: .normal)
button.setTitleColor(textColor, for: .normal)
Do not let the characters stick out
button.sizeToFit()
Border color of button
let borderColor = UIColor(red: 224/255, green: 255/255, blue: 255/255, alpha: 1.0).cgColor
button.layer.borderColor = borderColor
Border width of button
button.layer.borderWidth = 3
Rounded border of the button
button.layer.cornerRadius = 5
Shadow color
let shadowColor = UIColor(red: 211/255, green: 211/255, blue: 211/255, alpha: 1.0).cgColor
// button.layer.shadowColor = UIColor.lightGray.cgColor
button.layer.shadowColor = shadowColor
Shadow opacity
button.layer.shadowOpacity = 1.0
Shadow radius
button.layer.shadowRadius = 3
Shadow direction
As width = value increases, the shadow grows “to the right”, and as height = value increases, the shadow grows “downward”.
button.layer.shadowOffset = CGSize(width: 8, height: 8)
Circler button
circleButton.layer.cornerRadius = circleButton.bounds.width / 2
print("height", circleButton.bounds.size.height)
print("corner", circleButton.layer.cornerRadius)
circleButton.clipsToBounds = true
Button with image and title
When using System image
UIImage(systemName: "chevron.right")
For custom images (images prepared by yourself), the code below will be used, so be careful when using them properly.
UIImage(named: "foo")
It’s called LTR or RTL. In this code, .forceLeftToRight is set so that the image is on the left. If you want to place the image on the right side, please use .forceRightToLeft
semanticContentAttribute = .forceLeftToRight
This code determines where in the image there is whitespace. Right now, I have set 20 spaces on the right side of the image.
imageEdgeInsets = UIEdgeInsets(top: 0.0, left: 0.0, bottom: 0.0, right: 20.0)
let image = UIImage(systemName: "chevron.right")
imageButton.setImage(image, for: .normal)
let imageColor = UIColor(red: 129/255, green: 216/255, blue: 208/255, alpha: 1.0)
imageButton.tintColor = imageColor
imageButton.semanticContentAttribute = .forceLeftToRight
imageButton.imageEdgeInsets = UIEdgeInsets(top: 0.0, left: 0.0, bottom: 0.0, right: 20.0)
Whole code
import UIKit
class ViewController: UIViewController {
@IBOutlet weak var button: UIButton!
@IBOutlet weak var circleButton: UIButton!
@IBOutlet weak var imageButton: UIButton!
override func viewDidLoad() {
super.viewDidLoad()
button.titleLabel?.font = UIFont(name: "HelveticaNeue", size: 17)
button.setTitle("Button", for: .normal)
let textColor = UIColor(red: 129/255, green: 216/255, blue: 208/255, alpha: 1.0)
// button.setTitleColor(UIColor.blue, for: .normal)
button.setTitleColor(textColor, for: .normal)
button.sizeToFit()
let backGroundColor = UIColor(red: 250/255, green: 240/255, blue: 245/255, alpha: 1.0)
// button.backgroundColor = UIColor.blue
button.backgroundColor = backGroundColor
let borderColor = UIColor(red: 224/255, green: 255/255, blue: 255/255, alpha: 1.0).cgColor
button.layer.borderColor = borderColor
button.layer.borderWidth = 3
button.layer.cornerRadius = 5
let shadowColor = UIColor(red: 211/255, green: 211/255, blue: 211/255, alpha: 1.0).cgColor
// button.layer.shadowColor = UIColor.lightGray.cgColor
button.layer.shadowColor = shadowColor
button.layer.shadowOpacity = 1.0
button.layer.shadowRadius = 3
button.layer.shadowOffset = CGSize(width: 8, height: 8)
/// Circler button
circleButton.titleLabel?.font = UIFont(name: "HelveticaNeue", size: 17)
circleButton.setTitle("Circle Button", for: .normal)
let circleTextColor = UIColor(red: 129/255, green: 216/255, blue: 208/255, alpha: 1.0)
// button.setTitleColor(UIColor.blue, for: .normal)
circleButton.setTitleColor(circleTextColor, for: .normal)
let circleBackGroundColor = UIColor(red: 250/255, green: 240/255, blue: 245/255, alpha: 1.0)
// button.backgroundColor = UIColor.blue
circleButton.backgroundColor = circleBackGroundColor
let circleBorderColor = UIColor(red: 224/255, green: 255/255, blue: 255/255, alpha: 1.0).cgColor
circleButton.layer.borderColor = circleBorderColor
circleButton.layer.borderWidth = 3
circleButton.layer.cornerRadius = circleButton.bounds.width / 2
print("height", circleButton.bounds.size.height)
print("corner", circleButton.layer.cornerRadius)
circleButton.clipsToBounds = true
///Image with title button
imageButton.titleLabel?.font = UIFont(name: "Helvetica Neue Bold", size: 17)
imageButton.setTitle("Button", for: .normal)
let imageTextColor = UIColor(red: 129/255, green: 216/255, blue: 208/255, alpha: 1.0)
// button.setTitleColor(UIColor.blue, for: .normal)
imageButton.setTitleColor(imageTextColor, for: .normal)
// imageButton.sizeToFit()
// let imageBackGroundColor = UIColor(red: 250/255, green: 240/255, blue: 245/255, alpha: 1.0)
// button.backgroundColor = UIColor.blue
// imageButton.backgroundColor = imageBackGroundColor
let imageBorderColor = UIColor(red: 224/255, green: 255/255, blue: 255/255, alpha: 1.0).cgColor
imageButton.layer.borderColor = imageBorderColor
imageButton.layer.borderWidth = 3
imageButton.layer.cornerRadius = 5
let imageShadowColor = UIColor(red: 211/255, green: 211/255, blue: 211/255, alpha: 1.0).cgColor
// button.layer.shadowColor = UIColor.lightGray.cgColor
imageButton.layer.shadowColor = imageShadowColor
imageButton.layer.shadowOpacity = 1.0
imageButton.layer.shadowRadius = 3
imageButton.layer.shadowOffset = CGSize(width: 8, height: 8)
//System imageの時はUIImage(systemName: "pencil")
let image = UIImage(systemName: "chevron.right")
imageButton.setImage(image, for: .normal)
let imageColor = UIColor(red: 129/255, green: 216/255, blue: 208/255, alpha: 1.0)
imageButton.tintColor = imageColor
imageButton.semanticContentAttribute = .forceLeftToRight
imageButton.imageEdgeInsets = UIEdgeInsets(top: 0.0, left: 0.0, bottom: 0.0, right: 20.0)
}
}
When I run this code, it looks like the image below

Create a button subclass
Writing the same code for each button can be tedious and difficult to read, so in such cases it is convenient to create a subclass of Button and it is convenient to omit unnecessary code.
Select New File and select Cocoa Touch Class


Please give the class a suitable name that is easy to understand.
*Select UIButton for Subclass

Let’s write the following code when File is successfully created
import UIKit
class CustomButton: UIButton {
override init(frame: CGRect) {
super.init(frame: frame)
customDesign()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
customDesign()
}
override func prepareForInterfaceBuilder() {
super.prepareForInterfaceBuilder()
customDesign()
}
private func customDesign() {
layer.borderColor = UIColor(red: 224/255, green: 255/255, blue: 255/255, alpha: 1.0).cgColor
layer.borderWidth = 2
layer.cornerRadius = 5
layer.backgroundColor = UIColor(red: 129/255, green: 216/255, blue: 208/255, alpha: 1).cgColor
layer.shadowOpacity = 2
layer.shadowRadius = 3
layer.shadowColor = UIColor.gray.cgColor
layer.shadowOffset = CGSize(width: 4, height: 4)
setTitleColor(UIColor(red: 129/255, green: 216/255, blue: 208/255, alpha: 1.0), for: .normal)
titleLabel?.font = UIFont(name: "Helvetica Neue", size: 24)
}
}
Finally, select the button you want to apply in Storyboard, select the class you created earlier from Custom Class, and you’re done! !!
that’s all! Was it helpful? If you find it helpful, please like one button! !! 😉
コメント