ハジカラ 〜はじめからでも、プログラミング勉強〜

入門向けに、IT関連(javaやKotlin)をコツコツ書いたり検証したりします。

【Android Studio】[画面作成]ボール傾きアプリを作成する2

calendar

こんにちは😀

Android Studioでスマホの傾きでボールを転がすアプリ作成の続きです。
今回は、主に画面の整形を行います。

スポンサーリンク

作成前のAndroid Studio画面

前回は、新規作成まで行ったので以下の状態です。ボール傾き2−1

主にactivity_main.xmlとMainActivity.ktを編集していきます。
2つのファイルは新規作成時に作られます。

activity_main.xmlの編集で画面の作成を行い、MainActivity.ktの編集でアプリの動きの作成を行います。

今回は、activity_main.xmlの編集を行います。

activity_main.xmlのDesignタブ編集

activity_main.xmlのDesignタブを開きます。

「TextView」をドラッグして、右枠のスマホイメージ画面へ移動させます。
ボール傾き2−2

同じように「ImageView」をドラッグします。ボール傾き2−3

別ウィンドウが開きます。
ボール傾き2−4
予めイメージ図がいくつか用意されています。
「Project」や「android」を押すとアイコンが表示されます。
ボール傾き2−5

左枠の「Color」を選ぶと色も付けることができます。
ボール傾き2−6

まずボールを入れるゴールを作りたいので、左枠の「Drawable」を選択し、この四角アイコンを選びましょう。
アイコンを選択して、右下の「OK」ボタンをクリックします。
ボール傾き2−7

するとスマホイメージ上にアイコンが作られます。
ボール傾き2−9

アイコンを大きくして、右下に配置します。
ボール傾き2−10

同じように「ImageView」で今度はボールを配置します。

アイコンは、丸くないですがこれにしましょう。
右下の「OK」ボタンをクリックします。
ボール傾き2−11

配置できました。
ボール傾き2−12

activity_main.xmlのTextタブ編集

Textタブを選択すると、コードで編集ができます。

タブ(<……../>)のところで、エラーが出ていますね。
ボール傾き2−14

毎度のことなので、それぞれのタブ(<……../>)に以下のコードを追加します。

 

エラーが消えました。
ボール傾き2−15

「Design」タブに戻ると警告出てますね。
この解決は次回にしようと思います。
ボール傾き2−16

 

最後に一言・・・

今回は、画面の作成なので復習になります。
まずは大枠を作って、処理を作成してから、画面の細かい修正を行います。

今回はここまで🤚

では、また次回。

この記事をシェアする

コメント

  • はじめまして、
    なぜか、スクリーンショット画像が、表示されていないようで、分かりにくい状況ではないでしょうか。

    by 初心者 2019年3月23日 8:40 PM

  • はじめまして
    連絡ありがとうございます。
    こちらでChromeとFirefoxで確認したところ、PCでもスマホでもスクリーンショットは見ることができてます・・・。
    ブラウザ変えたりページ更新しても表示されないでしょうか

    by K.K 2019年3月23日 8:57 PM

down コメントを残す