WinForms学習:配列とfor文でカードを5枚並べる


WinFormsでカードを5枚並べてみよう

いま皆さんは

  • 配列
  • for文
  • Windows Forms

を学びました。

ここで一度、配列がどれだけ便利なのか

画面を使って体験してみましょう。

今日作るのはこれです。

[カード] [カード] [カード] [カード] [カード]

カードを 横に5枚並べるアプリです。


配列を使わない場合

もし配列を使わなかったら、こうなります。

PictureBox p1 = new PictureBox();
PictureBox p2 = new PictureBox();
PictureBox p3 = new PictureBox();
PictureBox p4 = new PictureBox();
PictureBox p5 = new PictureBox();

まだ5枚だから書けますが、

カード100枚

だったらどうでしょう?

現実的ではありません。


配列を使う

そこで配列を使います。

PictureBox[] cards = new PictureBox[5];

これは

PictureBoxを5個まとめて管理する箱

という意味です。

ここで大事なことがあります。

配列を作っただけでは、PictureBoxはまだ存在しません。

つまり「箱(入れ物)」を作っただけです。

そのため、あとで new PictureBox() で1つずつ作って入れていきます。


完全サンプルコード(コメント付き)

// カードを作って並べるメソッド
void CreateCards()
{
    // 左側の余白
    int startX = 20;

    // カードの間隔
    int space = 120;

    // 配列の数だけ繰り返す
    for (int i = 0; i < cards.Length; i++)
    {
        // PictureBoxを作る
        cards[i] = new PictureBox();

        // 横幅
        cards[i].Width = 100;

        // 高さ
        cards[i].Height = 150;

        // 横位置
        cards[i].Left = startX + i * space;

        // 縦位置
        cards[i].Top = 30;

        // 画像表示方法
        cards[i].SizeMode = PictureBoxSizeMode.StretchImage;

        // 画像を読み込む
        cards[i].Image = Image.FromFile("card.png");

        // 画面に追加
        this.Controls.Add(cards[i]);
    }
}

配列のイメージ

このコードでは、PictureBoxは次のように管理されています。

cards[0]
cards[1]
cards[2]
cards[3]
cards[4]

つまり

PictureBoxが5個入った棚

です。


for文でまとめて作る

次の部分が重要です。

for (int i = 0; i < cards.Length; i++)

これは

0
1
2
3
4

と順番に処理を繰り返します。

そのため

cards[0]
cards[1]
cards[2]
cards[3]
cards[4]

が自動的に作られていきます。


横に並ぶ理由

ここも重要です。

cards[i].Left = startX + i * space;

計算するとこうなります。

0番 → 20
1番 → 140
2番 → 260
3番 → 380
4番 → 500

つまり

20 + (番号 × 間隔)

で位置を決めています。

これによって

カードがきれいに等間隔に並びます。


今日のポイント

今日覚えてほしいことはこれです。

配列とは
同じ種類のものを
まとめて管理する仕組み

そして

配列 + for文

プログラミングの最も基本的な組み合わせ

の1つです。


少し考えてみましょう

もしカードを

10枚

並べたいなら、どこを変えればよいでしょう?

ヒントはここです。

PictureBox[] cards = new PictureBox[5];

そして

cards.Length

です。


訪問数 37 回, 今日の訪問数 37回

記事下広告