Buttonを押したら、4つのButtonを時間差で表示する。

# 今回の内容
<img width="150" alt="C00B05C3-84AB-45E6-9325-17CA87C3D202_1_201_a.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1466343/38e13008-04ac-75a1-7ba3-5b22285f42f8.jpeg"> <img width="156" alt="B9021013-9475-42AD-9A6E-8BF3E81480E3_1_201_a.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1466343/54f7ec0d-576d-ef19-3580-93e24dc87fa3.jpeg">

#機能説明
* 真ん中のshowButtonを押したら、0.25秒間隔でshowButtonの上下左右にButtonを表示します。

* 4つのButtonを表示し終わったら、showButtonを非表示にする。

#コードと簡単解説

##表示するButtonを作成

* 各UIButtonのframeを設定

* `UIButton.backgroundColor`で背景色を設定

* `UIButton.layer.cornerRadius` でButtonの角を丸くしています。（今回は綺麗な円形にしたいので、値に50.0を設定しました）



```Swift:
    func createUpButton(){
        
        let upButton = UIButton(frame: CGRect(x: showButton.frame.minX, y: showButton.frame.minY - (showButton.frame.size.height + 10), width: showButton.frame.size.width, height: showButton.frame.size.height))
        
        upButton.backgroundColor = UIColor.systemGreen
        
        upButton.layer.cornerRadius = 50.0
        
        self.view.addSubview(upButton)
        
    }
    
    func createUnderButton(){
        
        let underButton = UIButton(frame: CGRect(x: showButton.frame.minX, y: showButton.frame.minY + (showButton.frame.size.height + 10), width: showButton.frame.size.width, height: showButton.frame.size.height))
     
        underButton.backgroundColor = UIColor.systemGreen
        
        underButton.layer.cornerRadius = 50.0
        
        self.view.addSubview(underButton)
        
    }
    
    func createRightButton(){
        
        let rightButton = UIButton(frame: CGRect(x: showButton.frame.minX + (showButton.frame.size.width + 10), y: showButton.frame.minY, width: showButton.frame.size.width, height: showButton.frame.size.height))
        
        rightButton.backgroundColor = UIColor.systemGreen
        
        rightButton.layer.cornerRadius = 50.0
        
        self.view.addSubview(rightButton)
        
    }
    
    func createLeftButton(){
        
        let leftButton = UIButton(frame: CGRect(x: showButton.frame.minX - (showButton.frame.size.width + 10), y: showButton.frame.minY, width: showButton.frame.size.width, height: showButton.frame.size.height))
        
        leftButton.backgroundColor = UIColor.systemGreen
        
        leftButton.layer.cornerRadius = 50.0
        
        self.view.addSubview(leftButton)
        
    }
    
```

##showButtonを押した時に時間差でButtonを表示

* 最初にshowButtonの上にButtonを表示してから、`0.25秒間隔`で下右左の順番で表示していきます。

* 全てのButtonが表示されたら、showButtonを`sender.isHidden = true`で非表示にします。

```Swift:

    var intervalArray = [0.25, 0.50, 0.75, 1.00]

           ~~~一部省略~~~

    @IBAction func show(_ sender: UIButton) {
        
        createUpButton()
        
        for time in intervalArray{
            
            DispatchQueue.main.asyncAfter(deadline: .now() + time) { [self] in
                
                if time == 0.25{
                    
                    createUnderButton()
                    
                }else if time == 0.50{
                    
                    createRightButton()
                    
                }else if time == 0.75{
                    
                    createLeftButton()
                    
                }else if time == 1.00{
                    
                    sender.isHidden = true
                    
                }       
            }   
        }        
    }
```

#全体コード

```Swift:ViewController
import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var showButton: UIButton!
    
    var intervalArray = [0.25, 0.50, 0.75, 1.00]
    
    override func viewDidLoad() {
        super.viewDidLoad()   
        
    }

    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        
        showButton.layer.cornerRadius = 50.0
        
    }
    
    
    @IBAction func show(_ sender: UIButton) {
        
        createUpButton()
        
        for time in intervalArray{
            
            DispatchQueue.main.asyncAfter(deadline: .now() + time) { [self] in
                
                if time == 0.25{
                    
                    createUnderButton()
                    
                }else if time == 0.50{
                    
                    createRightButton()
                    
                }else if time == 0.75{
                    
                    createLeftButton()
                    
                }else if time == 1.00{
                    
                    sender.isHidden = true
                    
                }
                
            }
            
        }
        
    }
     
    func createUpButton(){
        
        let upButton = UIButton(frame: CGRect(x: showButton.frame.minX, y: showButton.frame.minY - (showButton.frame.size.height + 10), width: showButton.frame.size.width, height: showButton.frame.size.height))
        
        upButton.backgroundColor = UIColor.systemGreen
        
        upButton.layer.cornerRadius = 50.0
        
        self.view.addSubview(upButton)
        
    }
    
    func createUnderButton(){
        
        let underButton = UIButton(frame: CGRect(x: showButton.frame.minX, y: showButton.frame.minY + (showButton.frame.size.height + 10), width: showButton.frame.size.width, height: showButton.frame.size.height))
     
        underButton.backgroundColor = UIColor.systemGreen
        
        underButton.layer.cornerRadius = 50.0
        
        self.view.addSubview(underButton)
        
    }
    
    func createRightButton(){
        
        let rightButton = UIButton(frame: CGRect(x: showButton.frame.minX + (showButton.frame.size.width + 10), y: showButton.frame.minY, width: showButton.frame.size.width, height: showButton.frame.size.height))
        
        rightButton.backgroundColor = UIColor.systemGreen
        
        rightButton.layer.cornerRadius = 50.0
        
        self.view.addSubview(rightButton)
        
    }
    
    func createLeftButton(){
        
        let leftButton = UIButton(frame: CGRect(x: showButton.frame.minX - (showButton.frame.size.width + 10), y: showButton.frame.minY, width: showButton.frame.size.width, height: showButton.frame.size.height))
        
        leftButton.backgroundColor = UIColor.systemGreen
        
        leftButton.layer.cornerRadius = 50.0
        
        self.view.addSubview(leftButton)
        
    }  
}
```

#終わり　
ご指摘、ご質問などありましたら、コメントまでお願い致します。