LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@Hiro_Roki(Hiro Roki)

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

Posted at

完成形はこんな感じです

BCC709B7-4198-4AA3-879E-A28494C9B779.png 130D1BB8-E3CC-467D-AD7B-E8AFDD0093D8.png DC833DE3-EE4E-4EC5-BD19-21B5E1D44D2F.png 3469B6AA-BB19-47E5-88AD-B711BBB51837.png 7E941AB7-9CF5-4266-8D6F-66EF2F1BC55C_1_105_c.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`を引きます。
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の位置を移動させます。
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をスライドすると、変な動きになるので忘れない様に気を付けましょう。　
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(全体のコード)

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)
        }
        
    }
    
}

終わり

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?