0

プログラミング初心者です。
現在、ボタンをタップするごとに画像が切り替わる機能を考えています。
画像は、「1.png」「2.png」「3.png」「4.png」の4つです。
ボタンをタップすると「1.png」表示が消え「2.png」が表示します。
ボタンを繰り返しタップすると、以下のようにループします。1.png→2.png→3.png→4.png→1.png→2.png→以降もループ
また、1〜4.pngの表示される座標はそれぞれ異なります。
各座標は以下の通りです。
1.pngは(x:150, y:150)
2.pngは(x:100, y:360)
3.pngは(x:70, y:500)
4.pngは(x:100, y:200)

以上の様な機能を実装するために考えたコードは、下記のとおりです。

ViewController.swift

class ViewController: UIViewController {    
var imageNum: Int = 0
var stampView:UIImageView!
let stampImage = UIImage(named: "1.png")!
省略
var imageArray:[UIImage] = []
override func viewDidLoad() {
    super.viewDidLoad()
    for i in 1...4 {
        imageArray.append(UIImage(named: "\(i).png")!)
    }
省略
    stampView = UIImageView(image: stampImage)
    stampView.center = CGPointMake(150,150)
    view.addSubview(stampView)
    }
省略
@IBAction func imageSelect(sender: UIButton) {
imageNum++
    if imageNum >= imageArray.count {
        imageNum = 0
    }
}

ここまでは考えたのですが、ここから先がわかりません。
アプリの起動直後は、1.pngが座標(x:150, y:150)に表示されている仕様を考えております。
ボタンをタップしたときimageArray.count番目の画像を各座標に描画するには
どういったコーディングをすべきでしょうか。
また、私のコードの書き方がおかしな点などございましたら、ご教示願います。

3
  • 「1〜4.pngの表示される座標はそれぞれ異なります」だけでは毎回動的に表示座標を変えるのか、固定位置で良いのかなどがわかりません。また構文エラーについて聞きたいのでないかぎり、提示されるコードは「コンパイルエラーが出ない」状態にしておいてください。そうしないとつまらないタイプミスに関するやりとりが必要になってくるかもしれません。最低でも{}は正しくバランスさせてください。rararaArrayimageArrayも多分同じものに思えるのですが。できればご質問を編集して表示位置に関する仕様の明確化とコードのリファインをお願いします。
    – OOPer
    Commented 2016年4月11日 14:26
  • 1〜4.pngの座標情報など追加及び編集いたしました。説明不足な点、申し訳ありません。
    – jack_three
    Commented 2016年4月12日 0:01
  • 修正ありがとうございます。自分にとって自明のことの説明を省略してしまうと言うのは回答を書く場合にもありがちかもしれません。そのような場合にはコメント欄などを利用してお知らせください。いただいた条件での回答を後ほどあげさせてもらいます。
    – OOPer
    Commented 2016年4月12日 0:09

1 件の回答 1

1

あなたの現在のコードをできるだけ生かすようにコードを追加してみるとこんな感じになります。
ちなみにポイントはUIImageViewには書き換え可能なプロパティimagecenterがあるんだから、それを都度、書き換えれば良いという考え方です。

class ViewController: UIViewController {
    var imageNum: Int = 0
    var stampView:UIImageView!
//    let stampImage = UIImage(named: "1.png")! //不要?
    //省略
    var imageArray:[UIImage] = []
    let imageCoords = [
        (150, 150),
        (100, 360),
        (70, 500),
        (100, 200),
    ].map{CGPointMake($0, $1)}
    override func viewDidLoad() {
        super.viewDidLoad()
        for i in 1...4 {
            imageArray.append(UIImage(named: "\(i).png")!)
        }
        //省略
        stampView = UIImageView(image: imageArray[0])
        stampView.center = imageCoords[0]
        view.addSubview(stampView)
    }
    //省略
    @IBAction func imageSelect(sender: UIButton) {
        imageNum = (imageNum + 1) % imageArray.count //*1
        //stampViewのimageとcenterを新しいimageNumに合わせて書き換える
        stampView.image = imageArray[imageNum]
        stampView.center = imageCoords[imageNum]
    }
}

(imageArrayimageCoordsの各要素が1対1に対応していることがコードを少し見ても読み取れないので、もう少し書き換えたいところですが、「元のコードを生かす」を優先しました。)

(*1) Xcode7.3(Swift2.2)では、imageNum++に警告が出るので、ついでに書き換えてみました。
0...(N-1)の値を順次繰り返す場合によく見られる書き方です。わかりやすさという点では???なのですが、サンプルコードなどを見ていてもちょくちょく出てくる書き方なので使わせていただきました。imageArray.countの値が0の時に実行するとアプリが落ちますのでご注意ください。


ご提示のように固定座標で良いのなら最初から4つともViewの中に配置しておいて、その表示・非表示だけを切り替えると言う考え方をとると、コードの方は少しコンパクトにできます。

class ViewController: UIViewController {
    var imageNum: Int = 0
    @IBOutlet var stampViews: [UIImageView] = []
    //省略
    override func viewDidLoad() {
        super.viewDidLoad()
        //省略
    }
    @IBAction func rararaSelect(sender: UIButton) {
        imageNum = (imageNum + 1) % stampViews.count
        for view in stampViews {
            view.hidden = (view.tag != imageNum+1)
        }
    }
}

あらかじめInterface Builder上で

  • UIImageViewを(1.png〜4.pngに紐付けて)4つView内に配置しておき、
  • それぞれのTagの値を1〜4にし、
  • 2.png〜4.pngのUIImageViewはhidden属性(これもInterface Builder内でチェックボックスで変更できます)をtrueにしておく

ことで「起動直後は、1.pngが座標(x:150, y:150)に表示されている」を実現する、と言う想定です。
(Swiftでは、@IBOutletのデータ型を配列にしておくと、複数のUI要素をひとつの@IBOutlet変数に結び付けられるようになります。)


どちらにしろ、UIImageは意外と(あるいは予想通りに)メモリを食うものなので、「4つ」よりはるかに数が増える可能性があるのでしたら、配列などに保持せずにその都度ロードし直すようにしたほうが良いかもしれません。(その場合、上記のうち後者の方法は使えませんが。)

実際のアプリでは、まだ明文化されていない制約などがあって、どちらの方法もうまくいかないかもしれませんが、ご参考程度にはしていただけると思います。お試しください。

2
  • 回答頂いた2つのコードのうち、前者のコードに関しまして質問させて頂きます。初歩的な質問でしたらすみません。imageNum = (imageNum + 1) % imageArray.countの行で、左辺のimageNumをlet stampImage = UIImage(named: "1.png")!の行の"1.png"の箇所に代入してみたいのですが、どのようなコーディングをすべきでしょうか。 @Le Pere d'OO
    – jack_three
    Commented 2016年4月13日 11:49
  • UIImage(named: "1.png")!1の部分をimageNumを使った式で置き換えたいと言うことであれば、imageNumのデータ型はInt(Optionalではない)なので、あなたのコードのUIImage(named: "\(i).png")!とほぼ同じですよ。imageNumは0...3の値を取り、iのように1...4ではないので、例えばUIImage(named: "\(imageNum+1).png")!と書けます。
    – OOPer
    Commented 2016年4月13日 11:56

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。