0
    早速もどってまいりました!キリンさんを動かすために

    [今回の内容]
    ■ボタンを使って UIImageView を移動させる
    ■もうひとつボタンを作って、UIImageView をさらに移動させる

    それでは、ボタンの動作に手をつけていきましょう...

    ■ボタンを使って UIImageView を移動させる

    TestGameViewController.m
    の中の
    - (void) moveL_touchDown:(id)sender に記述していきます

    - (void) moveL_touchDown:(id)sender
    {   
        CGRect frame = kirinIV.frame;
        frame.origin.x -= 1.0;
        [kirinIV setFrame:frame];
       
        NSLog(@"MOVE:%.1f", frame.origin.x);
    }

    青い部分を新しく追加、赤い部分を変更しています

    1行目:キリンさん(kirinIV)の座標とサイズを取得し、frameという名のものに代入
    2行目:取得した frame の中のX座標を1ピクセルマイナスして変更
    3行目:X座標を変更した frame をあらためてキリンさん(kirinIV)にセットする
    4行目:変更したX座標を小数第一位まで、NSLog で表示する

    move:1px

    ここでは、2行目に注目して、
    frame.origin.x -= 1.0;
    の部分は
    frame.origin.x = frame.origin.x - 1.0;
    と同じ意味をもちます

    つまり、frame.origin.x というのがX座標でありまして、
    X座標を マイナス1.0 するという意味です

    現在のキリンさんのX座標は、140.0 なので、
    140.0 の場合、140.0 - 1.0 = 139.0 になります

    数字が減っているので、
    X座標の「0」の方向である画面左側に向かって移動することになります

    もちろん
    frame.origin.x += 1.0;
    (frame.origin.x = frame.origin.x + 1.0; と同じ)
    とすると右に向かって移動します

    それでは、マイナス1.0 ということで [Run] して
    ボタンを押してみましょう
    move_left

    連打すると、地味にキリンさんが、
    1ピクセルずつ左に移動するのがわかるでしょうか?

    ついでに、All Output を確認すると、
    移動後のX座標が、NSLog で表示されているのが確認できます
    1ピクセルずつ移動していますか?

    「1ピクセルなんてしゃらくせ〜」という方は、
    frame.origin.x -= 5.0;

    frame.origin.x -= 40.0;

    それ以上の数値に変更して確認してみてください

    あっという間に画面左端へ到達します
    left

    そして、そのまま押し続けると、画面から消えてしまいます

    「あぁ、消えちゃった」と思われるかもしれませんが、
    見た目に消えているだけで、ボタンを押すたびに、
    ずっと左のほうをキリンさんは移動し続けています
    宇宙空間をさまようように...
    out

    でも、根気よく押し続けていると、右側からもどってくるかもしれません...
    そう、地球を一周して...
    ※注意・・・実際は、もどってきません

    ちなみに、数値を1.0以下にしても、画面には1ピクセルずつしか反映されないので
    例えば 0.1にした場合、ボタンを10回押してやっと1ピクセル移動するのが確認できます

    ...


    ■もうひとつボタンを作って、UIImageView をさらに移動させる

    それでは、キリンさんが左にばかり行って、
    見えなくなるのは寂しいので、右にも移動できるようにしましょう

    そのために、ボタンをもうひとつつくります
    やることはほとんど一緒なので、この後は見ないでできるかもしれませんね

    でも念のため...

    TestGameViewController.h へ移動して

    @interface TestGameViewController : UIViewController
    {
        UIImageView *greenIV, *kirinIV;
       
        UIButton *moveLBT, *moveRBT;
    }

    - (void) moveL_touchDown:(id)sender;
    赤い部分を追加します

    button

    おっとここで、「L」の意味が判明!
    そう、「L」は左(Left)に移動するのを暗示(?)した「L」だったのです
    だから、moveRBT の「R」は、右(Right)の「R」なのです
    あとで修正するのが面倒なので、はじめから「L」と書いちゃいました

    そしてここで、右と左を間違えてしまうと、
    プログラムの修正と大量の画像の作り直しが発生してしまうので、
    お茶碗と箸と英語の辞書を手に、何度も確認しました

    ...

    それでは、TestGameViewController.m に移りましょう
    moveLBT = [[UIButton alloc] initWithFrame:CGRectMake( 70.0, 400.0, 80.0, 50.0)];
    [moveLBT setTitle:@"<-L" forState:UIControlStateNormal];
    [moveLBT setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    [moveLBT addTarget:self action:@selector(moveL_touchDown:)
                                             forControlEvents:UIControlEventTouchDown];
    moveLBT.backgroundColor = [UIColor whiteColor];
    [self.view addSubview:moveLBT];
       
    moveRBT = [[UIButton alloc] initWithFrame:CGRectMake(170.0, 400.0, 80.0, 50.0)];
    [moveRBT setTitle:@"R->" forState:UIControlStateNormal];
    [moveRBT setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    [moveRBT addTarget:self action:@selector(moveR_touchDown:)
                                              forControlEvents:UIControlEventTouchDown];
    moveRBT.backgroundColor = [UIColor whiteColor];
    [self.view addSubview:moveRBT];
    moveLBT の若干の変更は、赤い部分
    moveRBT は青い部分を追加しています

    dealloc

    moveRBT の動作の追加、そして dealloc もお忘れなく
    - (void) moveL_touchDown:(id)sender
    {   
        CGRect frame = kirinIV.frame;
        frame.origin.x -= 5.0;
        [kirinIV setFrame:frame];
       
        NSLog(@"MOVE(L):%.1f", frame.origin.x);
    }

    - (void) moveR_touchDown:(id)sender
    {   
        CGRect frame = kirinIV.frame;
        frame.origin.x += 5.0;
        [kirinIV setFrame:frame];
       
        NSLog(@"MOVE(R):%.1f", frame.origin.x);
    }

    移動するピクセルは、5.0に変更しています
    moveR_touchDown の移動は、プラス方向ですよ

    - (void)dealloc
    {
        [moveRBT release];
        [moveLBT release];
       
        [kirinIV release];
        [greenIV release];
       
        [super dealloc];
    }

    button

    さあ!思い切って [Run]です
    Left_and_right

    思ったように、キリンさんを右へ左へ移動させることができましたか?
    これで、画面から消えて宇宙空間をさまようキリンさんを
    再び画面の中に戻せるようになりましたね

    そして!

    さらに、ボタンをふたつ追加して、
    そのふたつのボタンの動作の「X座標の移動」を「Y座標の移動」に変更することで
    キリンさんを上下左右に移動させることもできるようになります
    (X座標は frame.origin.x でしたが、Y座標は frame.origin.y です)

    でもそこは、ここでは省略させていただきます

    ...

    それでは次回は?

    「キリンさんを移動させるのに、いちいちボタンを連打するのは面倒だ!」
    「ボタンを押したら、キリンさんを移動させ続けたい!」

    というあなたの悩みを解決したいと思います

    ア、アニメーションですね...

    大変です... そうでもないかな?


    ...

    UIImageView や UIButton 、UILabel(ラベル) などを
    細かく設定するのに便利な一冊



    コメント
    コメントする








       
    この記事のトラックバックURL
    トラックバック

    Calendar
    S M T W T F S
         12
    3456789
    10111213141516
    17181920212223
    24252627282930
    << November 2019 >>
    My Apps
    有料アプリ

    無料アプリ

    Selected entries
    Categories
    AdSense
    Sponsored Links
    Archives
    Recent comment
    Links
    Profile
    Search this site.
    Others
    Mobile
    qrcode
    powered
    無料ブログ作成サービス JUGEM