UISliderでImageViewを動かしたい願望に負けて作ったApp

# 完成形はこんな感じです
<img width="150" alt="BCC709B7-4198-4AA3-879E-A28494C9B779.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1466343/5da94f10-22b8-d22d-3110-e0697fc069de.png"> <img width="150" alt="130D1BB8-E3CC-467D-AD7B-E8AFDD0093D8.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1466343/f5178951-9429-f7d4-98f3-26281050ae4c.png"> <img width="151" alt="DC833DE3-EE4E-4EC5-BD19-21B5E1D44D2F.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1466343/28f63f36-8720-be32-eb17-f3903be430e4.png"> <img width="151" alt="3469B6AA-BB19-47E5-88AD-B711BBB51837.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1466343/7e9a9453-39cc-009f-646b-9cbbc9a1c5d7.png"> <img width="300" alt="7E941AB7-9CF5-4266-8D6F-66EF2F1BC55C_1_105_c.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1466343/2726d76a-49e4-09ce-2d85-cc8ea4532ca5.jpeg">

# 機能説明　 
* Thumbが白いSliderはx軸方向にImageViewを移動させます。
* Thumbが黒いSliderはy軸方向にImageViewを移動させます。
* UISwitchをオフにするとSliderがリセットされて、ImageViewの位置がframeの初期値の位置に戻ります。(オンにしても何も起きません)

# コードと簡単な解説

* `viewWillAppear`にて見た目の部分とSliderの最大値と最小値を決めています。
* `maximumValue`は``Float(onMovingImageView.bounds.maxXまたはmaxY)`だけだと、moveImageがonMovingImageViewから飛び出すので、横に飛び出さない様に`.maxX`から`moveImage.frame.size.width`を引きます。そして、下に飛び出さない様に`.maxY`から`moveImage.frame.size.height`を引きます。

```Swift:ViewController
import UIKit

class ViewController: UIViewController {

    
    @IBOutlet weak var moveImage: UIImageView!
    @IBOutlet weak var onMovingImageView: UIView!
    @IBOutlet weak var xPointSliderItem: UISlider!
    @IBOutlet weak var yPointSliderItem: UISlider!
    @IBOutlet weak var xPointLabel: UILabel!
    @IBOutlet weak var yPointLabel: UILabel!
    @IBOutlet weak var resetSwitch: UISwitch!
      
    var xSliderValue = Float()
    var ySliderValue = Float()
      
    override func viewDidLoad() {
        super.viewDidLoad()
        
    }
    
    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        
        onMovingImageView.layer.cornerRadius = 15.0
        onMovingImageView.frame = CGRect(x:UIScreen.main.bounds.minX + 20, y: UIScreen.main.bounds.minY + 44, width: UIScreen.main.bounds.width - 40, height: UIScreen.main.bounds.height / 1.6)
        
        moveImage.frame = CGRect(x: onMovingImageView.bounds.minX, y: onMovingImageView.bounds.minY, width: onMovingImageView.frame.size.width / 5, height: onMovingImageView.frame.size.height / 10)
        moveImage.layer.cornerRadius = 15.0
        moveImage.layer.shadowOffset = CGSize(width: 7, height: 7)
        moveImage.layer.shadowOpacity = 0.5
        moveImage.layer.shadowRadius = 7
        moveImage.layer.masksToBounds = false
                
        xPointSliderItem.minimumValue = Float(onMovingImageView.bounds.minX)
        xPointSliderItem.maximumValue = Float(onMovingImageView.bounds.maxX) - Float(moveImage.frame.size.width)
        yPointSliderItem.minimumValue = Float(onMovingImageView.bounds.minY)
        yPointSliderItem.maximumValue = Float(onMovingImageView.bounds.maxY) - Float(moveImage.frame.size.height)
        
    }

```

# Sliderから値を取得してframeに反映

* sliderをスライドさせると、`sender.value`に入った値を使って`moveImage.frame`の位置を移動させます。

```Swift:ViewController
 @IBAction func xPointSlider(_ sender: UISlider) {
        
        moveImage.frame = CGRect(x: CGFloat(sender.value), y: CGFloat(ySliderValue), width: onMovingImageView.frame.size.width / 5, height: onMovingImageView.frame.size.height / 10)
        
        xSliderValue = sender.value
        xPointLabel.text = String(floor(sender.value * 10) / 10)
        
    }
    
    @IBAction func yPointSlider(_ sender: UISlider) {
        
        moveImage.frame = CGRect(x: CGFloat(xSliderValue) , y: CGFloat(sender.value), width: onMovingImageView.frame.size.width / 5, height: onMovingImageView.frame.size.height / 10)
        
        ySliderValue = sender.value
        yPointLabel.text = String(floor(sender.value * 10) / 10)
        
    }
```

# UISwichを使ってmoveImage.frameをリセット

* `moveImage.frame`の初期値をもう一度入れ直しただけですね。
* 画面のSliderのThumbの位置を初期値の位置に戻してます。
* 次は、ラベルの値もSliderに入れた値と同じものを入れてます。
* ` xSliderValue = Float(onMovingImageView.bounds.minX)`と`ySliderValue = Float(onMovingImageView.bounds.minY)`を忘れると、`@IBAction func xPointSlider(_ sender: UISlider)`と`@IBAction func xPointSlider(_ sender: UISlider)`の時に取得した値が残ったままになるので、リセットした後に画面のSliderをスライドすると、変な動きになるので忘れない様に気を付けましょう。　
 

```Swift:ViewController
    @IBAction func xPointYPointReset(_ sender: Any) {
        
        if resetSwitch.isOn == false{
            
            moveImage.frame = CGRect(x: onMovingImageView.bounds.minX, y: onMovingImageView.bounds.minY, width: onMovingImageView.frame.size.width / 5, height: onMovingImageView.frame.size.height / 10)
            
            xPointSliderItem.value = Float(onMovingImageView.bounds.minX)
            yPointSliderItem.value = Float(onMovingImageView.bounds.minY)
            
            xPointLabel.text = String(Float(onMovingImageView.bounds.minX))
            yPointLabel.text = String(Float(onMovingImageView.bounds.minY))
            
            xSliderValue = Float(onMovingImageView.bounds.minX)
            ySliderValue = Float(onMovingImageView.bounds.minY)
        }
        
    }

```

#ViewController(全体のコード)

```Swift:ViewController
import UIKit

class ViewController: UIViewController {
    
    @IBOutlet weak var moveImage: UIImageView!
    @IBOutlet weak var onMovingImageView: UIView!
    @IBOutlet weak var xPointSliderItem: UISlider!
    @IBOutlet weak var yPointSliderItem: UISlider!
    @IBOutlet weak var xPointLabel: UILabel!
    @IBOutlet weak var yPointLabel: UILabel!
    @IBOutlet weak var resetSwitch: UISwitch!
    
    var xSliderValue = Float()
    var ySliderValue = Float()
    
    override func viewDidLoad() {
        super.viewDidLoad()

    }
    
    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        
        onMovingImageView.layer.cornerRadius = 15.0
        onMovingImageView.frame = CGRect(x:UIScreen.main.bounds.minX + 20, y: UIScreen.main.bounds.minY + 44, width: UIScreen.main.bounds.width - 40, height: UIScreen.main.bounds.height / 1.6)
        
        moveImage.frame = CGRect(x: onMovingImageView.bounds.minX, y: onMovingImageView.bounds.minY, width: onMovingImageView.frame.size.width / 5, height: onMovingImageView.frame.size.height / 10)
        moveImage.layer.cornerRadius = 15.0
        moveImage.layer.shadowOffset = CGSize(width: 7, height: 7)
        moveImage.layer.shadowOpacity = 0.5
        moveImage.layer.shadowRadius = 7
        moveImage.layer.masksToBounds = false //初期値がtrueなのでfalseにしないと影が表示されないよ
                
        xPointSliderItem.minimumValue = Float(onMovingImageView.bounds.minX)
        xPointSliderItem.maximumValue = Float(onMovingImageView.bounds.maxX) - Float(moveImage.frame.size.width)
        yPointSliderItem.minimumValue = Float(onMovingImageView.bounds.minY)
        yPointSliderItem.maximumValue = Float(onMovingImageView.bounds.maxY) - Float(moveImage.frame.size.height)
        
    }

    @IBAction func xPointSlider(_ sender: UISlider) {
        
        moveImage.frame = CGRect(x: CGFloat(sender.value), y: CGFloat(ySliderValue), width: onMovingImageView.frame.size.width / 5, height: onMovingImageView.frame.size.height / 10)
        
        xSliderValue = sender.value
        xPointLabel.text = String(floor(sender.value * 10) / 10)
        
    }
    
    @IBAction func yPointSlider(_ sender: UISlider) {
        
        moveImage.frame = CGRect(x: CGFloat(xSliderValue) , y: CGFloat(sender.value), width: onMovingImageView.frame.size.width / 5, height: onMovingImageView.frame.size.height / 10)
        
        ySliderValue = sender.value
        yPointLabel.text = String(floor(sender.value * 10) / 10)
        
    }
    
    @IBAction func xPointYPointReset(_ sender: Any) { 
        
        if resetSwitch.isOn == false{
            
            moveImage.frame = CGRect(x: onMovingImageView.bounds.minX, y: onMovingImageView.bounds.minY, width: onMovingImageView.frame.size.width / 5, height: onMovingImageView.frame.size.height / 10)
            
            xPointSliderItem.value = Float(onMovingImageView.bounds.minX)
            yPointSliderItem.value = Float(onMovingImageView.bounds.minY)
            
            xPointLabel.text = String(Float(onMovingImageView.bounds.minX))
            yPointLabel.text = String(Float(onMovingImageView.bounds.minY))
            
            xSliderValue = Float(onMovingImageView.bounds.minX)
            ySliderValue = Float(onMovingImageView.bounds.minY)
        }
        
    }
    
}
```

# 終わり
思いつきで簡単に作れるアプリの中では、作ってて結構楽しめたと思います。
ご指摘や質問などありましたら、喜んで受け付けてます。