第1-1回 Androidアプリのリバーシをつくる[Java,Android Studio]
こんにちは
アプリってどうやって作るのか興味があったので，手を出してみました．
第1-2回 Androidアプリのリバーシをつくる（ボタン処理）
第1-3回 Androidアプリのリバーシをつくる（Google Playへの登録）
今回は，androidアプリを作成しGoogle Playに登録するところをゴールとします．
また，動的な配置の作成方法についての情報がネットにあまり落ちていなかったので，一例を具体的に述べたいと思います．
具体的な中身をすべて書くと膨大になるため、都度他のホームページを調べながら見てもらえればと思います。
今回作成したアプリ
https://play.google.com/store/apps/details?id=com.dualreversi.reversi
Github
https://github.com/hide-dog/DualReversi
0 二刀流リバーシ
リバーシのルールはみなさんご存じかと思います。白と黒の石を交互に置き、最後に多く自分の色の石がある方が勝ちというゲームですね。
ただ、純粋にリバーシを作るだけでは、面白くないので自分のオリジナルルールとして
「自分のターンに相手の石も置ける」リバーシを作成したいと思います。
1 Android Studio
アンドロイドのアプリを作る際は「Android Studio」を使用します．
一言でいうと「.exeファイルのようにアプリに対応した形にまとめてくれるすごいやつ」です。
下記からダウンロードできます．
プログラミング言語は、Java か Kotlinになります．
後者は、Javaをより簡易に扱えるように開発されたようです。
自分はどちらも手を出したことがなかったので、資料の多そうなJavaを選択しました。
それでは、すこしずつアプリを作成していきます。
2 画面配置
アプリを作成するにあたり、まずLayoutを決めなければいけません。
今回は、ボード上のマス目にボタンを設置することから、相対距離を簡単に配置できそうなConstraintLayoutを使用しました。
まず、背景を設定します。
Android Studioの解説ページを調べると「何か画面にものを配置するときはactivity_main.xmlに書き込む」と出てきます。
自分の場合は、マス目のボタンを一々書き込むのが面倒なので
コードの大半を記載しているMainActivity.javaから設定していきます。
下記に背景のボードを設定している部分を抜粋してきました。
前半がレイアウトの詳細を決定している部分、後半がレイアウトに落とし込んでいる関数になります。
https://github.com/hide-dog/DualReversi/tree/master/app/src/main/java/com/dualreversi/test
public void SetBackGround(ConstraintLayout constraintSet){
// new image view （ImageViewを新たに立ち上げます）
ImageView img_reverse_board = new ImageView(getApplicationContext());
// set image resource （読み込む画像をセットします）
img_reverse_board.setImageResource(R.drawable.reverse_board);
// set id（今後使用するためにidをセットします）
// （このidを使用して相対的な位置を決めるので、各番号をまとめておく必要があります）
img_reverse_board.setId(IdImageBG);
// set on constrain layout（レイアウトに追加します）
constraintSet.addView(img_reverse_board);
// get dp（画面の大きさを取得します）
float dp = getResources().getDisplayMetrics().density;
// size of BG
int widthBG = (int) (360 * dp); //(画像の横幅)
int heightBG = (int) (360 * dp); //(画像の縦幅)
int bottomBG = (int) (200 * dp); //(親の下面からの距離)
int leftBG = (int) (0 * dp); //(親の左側からの距離)
// set
SetConstrainSetBackground(constraintSet,
IdImageBG,
heightBG,
widthBG,
bottomBG,
leftBG);
}
// --------------------------------------
// set constraint set
// --------------------------------------
public void SetConstrainSetBackground(ConstraintLayout constraintSet, int id, int height, int width, int FromBottom, int FromLeft){
// clone set (constraintSetを新たに立ち上げ)
ConstraintSet tempCS = new ConstraintSet();
tempCS.clone(constraintSet);
// adjust layout height (高さをセット)
tempCS.constrainHeight(id, height);
// adjust layout width (横幅をセット)
tempCS.constrainWidth(id, width);
// （背景のボードのみ画面の中央に来るようにセットします。id=1
// そのため、PARENT_IDという画面全体のIDを使用しています）
// （それ以外はボードとの相対位置でセットします。
// そのため、ボードのidである1をいれています。）
if (id ==1){
// set
tempCS.connect(
id, // ボードのid
ConstraintSet.TOP,
ConstraintSet.PARENT_ID, // 画面全体のid
ConstraintSet.TOP,
0); // 距離
// set
tempCS.connect(
id, // ボードのid
ConstraintSet.RIGHT,
ConstraintSet.PARENT_ID, // 画面全体のid
ConstraintSet.RIGHT,
0); // 距離
// set
tempCS.connect(
id, // ボードのid
ConstraintSet.BOTTOM,
ConstraintSet.PARENT_ID, // 画面全体のid
ConstraintSet.BOTTOM,
0); // 距離
// set
tempCS.connect(
id, // ボードのid
ConstraintSet.LEFT,
ConstraintSet.PARENT_ID, // 画面全体のid
ConstraintSet.LEFT,
0); // 距離
}else {
// set
tempCS.connect(
id, // SWButtonなど
ConstraintSet.BOTTOM,
1, // back ground
ConstraintSet.BOTTOM,
FromBottom); // 距離
// set
tempCS.connect(
id, // SWButtonなど
ConstraintSet.LEFT,
1, // back ground
ConstraintSet.LEFT,
FromLeft); // 距離
}
// apply
tempCS.applyTo(constraintSet);
// ConstraintLayout set on ContentView
setContentView(constraintSet);
}
後者の関数に各値を入力してあげれば、ボタンでもなんでも配置することができます。
今回はリバーシであるためマス目がすべてクリック可能なボタンとなります。（8×8=64個）
ここで、idが被ってしまうといけないのでその点に注意してください。
自分は下記のように整理しています。
・背景などの基本的なものは1桁
・マス目に置く3つの素材は次のように番号を決めた。ボタン（011-088）、黒石（111-188）、白石（211-288）。
・それ以外のものは900番台
あとは、実際に画面に配置しながらサイズを調整し、下記のようにボタンを設定しました。
すでに動きそうですね。
ただ、まだボタンの役割を決めていませんので、ここから詳細を確定させていく必要があります。
僕は愚直にコードを書いている所為もあり
コードの半分は配置になっています。
次回は、ボタンに触れられたときの設定、リバーシの判定等について下記進めていきたいと思います。
hide
コメントを残す