ボタンを置く(Android)

Android

前回はフラグメントが２つのHello Worldから始めてしまいました。 ちょっと改造するには、ややこしいので、アクティビティが１つだけの簡単なハローワールド にボタンを配置してみます。

Android Studioを起動したら、上のメニューバーから「File」→「New」→「New Project...」を選んで 出てきたTemplateから「Empty Acitivity」を選んで「Next」を押します。

f:id:kuukaix:20210429151659j:plain

（１）名前とか保存場所を適当に変更して「Finish」を押します。

（２）とても簡単なMainActivityができました。

f:id:kuukaix:20210429152110j:plain

（３）res→layout にある activity_main.xml はこんな感じ。TextViewが１つだけ。

f:id:kuukaix:20210429152232j:plain

（４）接続しているデバイス名の右の緑三角を押して、実行すると、端末に Hello World!の文字がでます。

f:id:kuukaix:20210429152632j:plain

（５）ここからボタンを画面に配置していきます。res→layout にある activity_main.xmlをクリックして、「Design」画面にします。中央やや左のPaletteにあるButtonsをクリックして、その右の一覧にあるButtonをドラッグ。マウスボタンを押した状態で、その下のComponent TreeのTextViewの下にドロップ（マウスのボタンを離す）します。 　この時点ではエラー状態です。

f:id:kuukaix:20210429152823j:plain

（６）一度「Code」（右上のボタン）を確認してみます。（別にしなくてもいいのですが）TextViewの下に Buttonが追加されて、赤文字（エラーだよ）になっています。TextにあるButtonが黄色になっているのは警告です。（今回警告は無視します）

f:id:kuukaix:20210429153249j:plain

（７）「Design」（右上のボタン）画面にして、中央やや左のPaletteにあるLayoutsをクリックして、その右の一覧にあるLinearLayout(vertial) （横線が２本あるやつ）をドラッグして、その下のComponent Treeのbuttonの下にドロップします。 　この時点ではエラー状態です。

f:id:kuukaix:20210429153525j:plain

（８）Component TreeのTextViewをドラッグして、LinearLayoutの中にドロップします。buttonも同様にLinearLayoutの中にドロップします。 　これでエラーが解消します。警告が残っていますが、無視で。

f:id:kuukaix:20210429154032j:plain

（９）「Code」（右上のボタン）で確認してみます。LinearLayoutの中にButtonとTextViewが入っていることがわかります。ButtonとTextViewを表示したい場合は、その並び方を指示しないといけないので、LinearLayoutの中にいれる必要があります。LinearLayoutにandroid:orientation="vertical"とあるのが並び方で、縦に２つを並べることを意味します。ちなみにtextの"Button"が黄色なのは、多言語対応するとき、ここに文字があると色々な言語にできないので、strings.xmlを使って間接参照にする必要があるからです。今回言語で文字を変える予定がないので、警告は無視しています。

f:id:kuukaix:20210429154331j:plain

（１０）ボタンが置けたので、実行してみます。接続しているデバイス名の右の緑三角を押して、実行すると、端末に ButtonとHello World!の文字が出ます。ボタンと文字が左上にあるのが気になる人がいると思いますが、画面中央に持ってくるのは面倒なので、今回はこれで進めます。 　なお、ボタンをタップしても何も起きません。

f:id:kuukaix:20210429155156j:plain

（１１）ボタンをタップすると何か起きるようにします。MainActivityにボタンが押された時の機能を実装します。 importに２つのwidget（ButtonとToast)を追加します。 findViewById<Button>(R.id.button)の、findViewById(R.id.button)で activity_main.xmlにあるandroid:id="@+id/button"にあるボタンを取ってきて<Button>でButton widgetにします。続く.setOnClickListener {...}でボタンが押されたときの動作を記述します。Toastは数秒だけ画面（の下に）文字を出すWidgetで、"button clicked"の文字が、画面の下に出てそのうち消えます。

  import androidx.appcompat.app.AppCompatActivity
  import android.os.Bundle
  import android.widget.Button
  import android.widget.Toast

  class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        findViewById<Button>(R.id.button).setOnClickListener {
            // ボタンが押されたら実行される
            Toast.makeText(this, "button clicked", Toast.LENGTH_LONG).show()
        }
    }  
  }

f:id:kuukaix:20210429155429j:plain

（１２）実際に実行して、ボタンをタップすると、こんな感じで画面の下に文字が出て消えます。Toastはちょっとした動作確認に使うWidgetです。

f:id:kuukaix:20210429161323j:plain