miyazaki-dev

【Swift】UIButtonをカスタム(下線・padding)する方法

Swift

swiftのUIButton

class ViewController: UIViewController {

  var sampleButton:UIButton!
  
  override func viewDidLoad() {
    super.viewDidLoad()
    
    // ボタンのインスタンス		
    self.sampleButton = UIButton()
		
    // 場所の指定(左上が0.0)
    self.sampleButton.frame = CGRect(x: 100, y: 100, width: 100, height: 30)

    // ボタンの文字
    self.sampleButton.setTitle("sample", for: UIControlState.normal)

    // ボタンの文字色
    self.sampleButton.setTitleColor(UIColor.red, for: UIControlState.normal)
	
    // タップされたときの文字
    self.sampleButton.setTitle("tapped", for: UIControlState.highlighted)
    
    // タップされたときの文字色
    self.sampleButton.setTitleColor(UIColor.blue, for: UIControlState.highlighted)
	
    // 角
    self.sampleButton.layer.cornerRadius = 10
    // 縁の色
    self.sampleButton.layer.borderWidth = 1
        
    // ボタンをタップされたときのアクションを追加
    self.sampleButton.addTarget(
      self,
      action: #selector(self.btnTapped(sender:)),
      for:.touchUpInside
    )
		
	// ViewControllerにボタンを追加
	self.view.addSubview(self.sampleButton)
  }
	
  // タップされたときのアクション
  @objc func btnTapped(sender: UIButton){
    print("tapped")
  }
	
  override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
    // Dispose of any resources that can be recreated.
  }
}

UIButtonに下線をつけるサンプルコード

下線をつけるということは、クリックできるようにする人が多いはずってことで

ついでにタップイベントも追加します。

class ViewController: UIViewController {

 let sampleUIButton:UIButton = UIButton()

  override func viewDidLoad() {
    super.viewDidLoad()

    self.view.backgroundColor = .white

    let text = "Hello World!"
        
  
    self.sampleUIButton.frame = CGRect(x: 100, y: 300, width: 200, height: 20)
    // タップされたとき(touchUpInside)に関数が実行されるように追加
    self.sampleUIButton.addTarget(
     self,
     action: #selector(self.uiButtonTapEvent(_:)),
     for:.touchUpInside
    )

    self.sampleUIButton.setAttributedTitle(attributeText, for: .normal)
        
        
    self.view.addSubview(self.sampleUIButton)
 }
    
 // uibuttonがタップされたときに動く関数
 @objc func uiButtonTapEvent(_ sender:UITapGestureRecognizer) {
    print("tapped uibutton")
  }
}

UIButtonにタップイベントを追加

class ViewController: UIViewController {
    
  let sampleUIButton:UIButton = UIButton()
    
  override func viewDidLoad() {
    super.viewDidLoad()
        
    self.view.backgroundColor = .white
        
    self.sampleUIButton.frame = CGRect(x: 100, y: 300, width: 200, height: 20)
    // タップされたとき(touchUpInside)に関数が実行されるように追加
    self.sampleUIButton.addTarget(
      self,
      action: #selector(self.uiButtonTapEvent(_:)),
      for:.touchUpInside
    )
        
    self.sampleUIButton.setTitle("Hello World!", for: .normal)
    self.view.addSubview(self.sampleUIButton)
  }
    
  // uibuttonがタップされたときに動く関数
  @objc func uiButtonTapEvent(_ sender:UITapGestureRecognizer) {
    print("tapped uibutton")
  }
}

UIButtonを右寄せ・左寄せ・任意のpadding

class ViewController: UIViewController {

  let leftUIButton:UIButton = UIButton()
  let rightUIButton:UIButton = UIButton()
  let paddingUIButton:UIButton = UIButton()
 
  override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view, typically from a nib.

    let screenWidth = UIScreen.main.bounds.size.width

    // 左寄り
    self.leftUIButton.setTitle("左寄りのテキスト", for: .normal)
    self.leftUIButton.titleLabel?.font = UIFont.boldSystemFont(ofSize: 30)
    self.leftUIButton.backgroundColor = UIColor.gray
    self.leftUIButton.contentHorizontalAlignment = UIControl.ContentHorizontalAlignment.left // or .left
    self.leftUIButton.frame = CGRect(x: 0, y: 200, width: screenWidth, height: 50)

    // 右寄り
    self.rightUIButton.setTitle("右寄りのテキスト", for: .normal)
    self.rightUIButton.titleLabel?.font = UIFont.boldSystemFont(ofSize: 30)
    self.rightUIButton.backgroundColor = UIColor.gray
    self.rightUIButton.contentHorizontalAlignment = UIControl.ContentHorizontalAlignment.right // or .right
    self.rightUIButton.frame = CGRect(x: 0, y: 300, width: screenWidth, height: 50)

    // centerから任意のpaddingを設定したやつ
    self.paddingUIButton.setTitle("任意のpaddinテキスト", for: .normal)
    self.paddingUIButton.titleLabel?.font = UIFont.boldSystemFont(ofSize: 30)
    self.paddingUIButton.backgroundColor = UIColor.gray
    // EdgeInsetsがcssのpaddingみたいな役割
    self.paddingUIButton.contentEdgeInsets = UIEdgeInsets(top: 50, left: 100, bottom: 20, right: 20)
    self.paddingUIButton.frame = CGRect(x: 0, y: 400, width: screenWidth, height: 50)

    self.view.addSubview(self.leftUIButton)
    self.view.addSubview(self.rightUIButton)
    self.view.addSubview(self.paddingUIButton)
  }
}