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

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

Home » Android Studio » 【Mac・Android Studio】アプリにボタンを配置

【Mac・Android Studio】アプリにボタンを配置

calendar

reload

こんにちは。

前回の続きです。
今回はボタンを設置してみましょう。

Text Viewと同じように書けばいいのかなと。。。

↓ <B….. と打ち込むと、予測変換で、<Button…と出してくれますね。
ボタン設置1−1

↓ 予測変換から<Button…を選ぶと、設定を自動で記述してくれます✌
ボタン設置1−2

↓ 幅(layout_width)と高さ(layout_height)は、Text Viewと同じようにwrap_content
  と入れておきましょう。

<Button
android:layout_width=”wrap_content”
android:layout_height=”wrap_content” />
 

↓ それから、AVDを起動すると、左上にボタンのようなものが出現します⁉
ボタン設置1−3

↓ こちらもText Viewと同じように、ボタンに表示する文字を記述しておきましょう。

<Button
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”ボタン” />
 

↓ 見てみると、ボタンに「ボタン」と表示されました✌
ボタン設置1−3

あとは、ボタンの位置を変更したいですね。。。

↓ 左下とみると、「Design」「Text」と書かれているタブがありますね。
今は、「Text」タブなので、「Design」タブを押してみましょう。
ボタン設置1−4

↓ 「Design」タブに切り替わりました。直感的に操作できそうなので、ボタンを動かしてみましょう。
ボタン設置1−5

↓ ボタンを真ん中下に持って行きましょう。
ボタン設置1−6

↓ 「Text」タブに切り替えてみると、位置情報の記述が増えています。

<Button
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”ボタン”
tools:layout_editor_absoluteX=”148dp”
tools:layout_editor_absoluteY=”185dp”
/>
 

↓ それで、AVDを見てみると。。。。
  あれ?変更されていない💦
ボタン設置1−7

↓ コードをよく見ると、エラーが出てますね💧
  「This view is not constrained.・・・」というエラーが。。。
ボタン設置1−8

↓ Text Viewにも書かれていますが、ConstraintLayoutの制約で、
  以下の4つの記述が必要なのだと。
  まず定める位置を定義する必要があるんでしょうかね😞

<Button
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”ボタン”
tools:layout_editor_absoluteX=”148dp”
tools:layout_editor_absoluteY=”185dp”
app:layout_constraintBottom_toBottomOf=”parent”
app:layout_constraintLeft_toLeftOf=”parent”
app:layout_constraintRight_toRightOf=”parent”
app:layout_constraintTop_toTopOf=”parent”
/>
 

↓ これで想定通りの場所にボタンが移動しました。
ボタン設置1−9

結構手探りで弄り回している感じですが、今日はここまで。

そろそろ、javaとの連携をさせてみたいな😃