Uzabase Tech Blog

SPEEDA, NewsPicks, FORCASなどを開発するユーザベースの技術チームブログです。

Android Studioに入門しよう ~UI・レイアウト編~

こんにちは。SPEEDA開発チームの佐藤です。
今回はAndroid Studioに入門しようということで、
初心者向けに簡単な使い方から、今回は主にUI部品・レイアウトについて紹介したいと思います!

Android Studioとは?


JetBrains社のIntellJ IDEAをベースとしたAndroidアプリ開発のための統合開発環境で、
Windows、Mac、Linuxなど複数の環境向けに用意されています。
まずはAndroid Studioをインストールして環境を設定しておきましょう。

developer.android.com

初期プロジェクト作成


インストールしたAndroid Studioを起動してください。このような画面がでますので、
Start a new Android Studio Projectを押してください。

f:id:teddy0x0:20200319125229p:plain


そのあとテンプレートを選ぶ画面が出てきますので、 Empty Activityを選択してください。
(※テンプレートにはナビゲーションが下部についたものや、 フローティングアクションボタンが右下に表示されたものなど、様々なパターンが用意されています! 説明は省きますが、自分が作りたいアプリに近いテンプレートを選ぶことができるようになっています)

f:id:teddy0x0:20200319135348p:plain

あとは写真のようにプロジェクトに名前を付けて、
適当なフォルダを指定すれば初期プロジェクトは完成です!
ちなみに開発言語を選ぶこともできて、ひとまずJavaになっていますがKotlinも選べますので、
好きな方で開発できます!

f:id:teddy0x0:20200319135520p:plain

動作確認の方法


次にレイアウトとUI部品について紹介したいと思います。
プロジェクトを作成するとこのような画面に変わって、activity_main.xmlMainActivity.javaの二つが既にOpenされています。

f:id:teddy0x0:20200319141701p:plain

画面のレイアウトの記述はこのactivity_main.xmlに記載します。
それでは試しにボタンを表示させてみましょう。
activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="BUTTON"
        android:id="@+id/id1"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="BUTTON"
        android:id="@+id/id2"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="BUTTON"
        android:id="@+id/id3"/>

</LinearLayout>

記載できたら実行してみたいと思います。
Android Studioにはエミュレータと呼ばれる実行環境が用意されていて、
実機を使用しなくてもレイアウトや挙動の確認をすることができます。
エミュレータを使用するためには、実行するためのVirtual Device環境を設定する必要がありますので、
そちらを設定してからエミュレータを起動させましょう。
画像のとおりAVD Managerをクリックし
Create Virtual DeviceSelect Hardware 画面に進み、デバイスの設定をしてください。

AVD Manager
f:id:teddy0x0:20200319145605p:plain

Create Virtual Device
f:id:teddy0x0:20200319150551p:plain

Select Hardware
f:id:teddy0x0:20200319151021p:plain

System Image
f:id:teddy0x0:20200319151241p:plain

Verify Configuration
f:id:teddy0x0:20200319151431p:plain

ちなみにメモリ設定の部分はわたしの環境だとこのようになっております

f:id:teddy0x0:20200319152021p:plain

設定が終わるとこのようにエミュレータにデバイスが追加されますので
これで実行環境の設定はおしまいです。

f:id:teddy0x0:20200319152446p:plain

あとは今設定したデバイスを選んで実行ボタンを押せば、
さきほど記載したレイアウトの確認ができます。

f:id:teddy0x0:20200319152845p:plain

f:id:teddy0x0:20200319155939p:plain

ボタンが3つ表示されましたね!
エミュレータでの動作確認ができたのでレイアウトの説明に入りたいと思います。

レイアウト


UI部品をどのように配置するかはレイアウトによって決まります。
レイアウトには下記の通りいくつか種類があります。

1. LinearLayout
2. RelativeLayout
3. FrameLayout
4. CoordinatorLayout
5. ConstraintLayout

今回は基本となる1と2のレイアウトについて紹介しようと思います。
(3、4、5は動的なレイアウトを作成したいときに使います!気になる人は調べてみてください)

LinearLayout

LinearLayoutとは縦もしくは横一列に要素を並べて表示させる一番シンプルなレイアウトです。
先ほど記述したactivity_main.xmlでは、このLinerLayoutを使用しました。
それではLinerLayoutの属性について、もう少し詳しく見ていきましょう。

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">
</LinearLayout>
  • xmlns:android=
    XML 名前空間を "http://schemas.android.com/apk/res/android" として定義している必須の記述

  • android:layout_width=
    縦の大きさを指定する属性。設定値はmatch_parentもしくはwrap_contentの二つ。
    match_parentは親の要素と同じ大きさにしたいときに、
    wrap_contentは自身のサイズと同じ大きさにしたいときに指定します。
    一番外側のレイアウトでは親の要素=画面サイズになります。

  • android:orientation=
    並べ方を縦横どちらにするかを指定する属性。設定値はhorizontalverticalの二つ。

RelativeLayout

RelativeLayoutとは要素の位置関係を相対的に決めるレイアウトのことです。
別のUI部品に対して相対的に位置を決めるか、もしくは親に対してどのように配置するかを指定できます。
では先ほどのactivity_main.xmlを次のように書き換えてみてください。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="5dp"
    android:paddingLeft="5dp"
    android:paddingRight="5dp"
    android:paddingTop="5dp"
    tools:context=".MainActivity">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="中央寄せ"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:text="中央上"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:text="中央下"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:text="中央左"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:text="中央右"/>

</RelativeLayout>

書き換えてエミュレータを実行すると写真のようになると思います。

f:id:teddy0x0:20200319165700p:plain

RelativeLayoutの属性についてはpaddingが指定されているだけなので割愛します。
Buttonの中で指定されている属性値については下記のとおりです。

属性名配置方法
layout_centerVerticaltrueにすると親に対して垂直方向中央寄せ
layout_centerHorizontaltrueにすると親に対して水平方向中央寄せ
layout_alignParentToptrueにすると親に対して上寄せ
layout_alignParentBottomtrueにすると親に対して下寄せ
layout_alignParentLefttrueにすると親に対して左寄せ
layout_alignParentRighttrueにすると親に対して右寄せ
layout_centerInParenttrueにすると親に対して水平垂直方向共に中央寄せ


ここまでが親に対して配置する場合の属性値です。
それでは他の部品に対する配置を行うパターンも見てみましょう。
activity_main.xmlを次のように書き換えてから、エミュレータを起動しなおしてみてください。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="5dp"
    android:paddingLeft="5dp"
    android:paddingRight="5dp"
    android:paddingTop="5dp"
    tools:context=".MainActivity">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:text="ボタン1"
        android:id="@+id/id1"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:text="ボタン2"
        android:layout_toLeftOf="@+id/id1"
        android:id="@+id/id2"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:text="ボタン3"
        android:layout_toRightOf="@+id/id1"
        android:id="@+id/id3"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:text="ボタン4"
        android:layout_below="@+id/id1"
        android:id="@+id/id4"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:text="ボタン5"
        android:layout_below="@id/id4"
        android:id="@+id/id5"/>

</RelativeLayout>



f:id:teddy0x0:20200319174013p:plain

他の部品に対する配置方法と属性の種類は次のようなものがあります

属性名配置方法
layout_below指定したUI部品に対し下側に配置
layout_above指定したUI部品に対し上側に配置
layout_toEndOf指定したUI部品に対し右側に配置
layout_toStartOf指定したUI部品に対し左側に配置
layout_toRightOf指定したUI部品に対し右側に配置
layout_toLeftOf指定したUI部品に対し左側に配置
layout_alignRight指定したUI部品の右端の位置とViewの右端を揃えて配置
layout_alignLeft指定したUI部品の左端の位置とViewの左端を揃えて配置
layout_alignBottom指定したUI部品の下端の位置とViewの下端を揃えて配置
layout_alignTop指定したUI部品の上端の位置とViewの上端を揃えて配置


使用するときは、android:layout_below="@id/基準にしたい部品のid"という指定の仕方で配置位置を決めます。
部品のID名はandroid:id="@+id/部品のid名"の記述で決定します。

UI部品


続いてAndroidの代表的なUI部品をいくつか説明したいと思います。
各UI部品にはイベントがあった際に特定のメソッドが呼び出されるイベントリスナーという仕組みがありますが、 本記事ではイベントリスナーの説明は省きます。
UIに対するイベント(メソッド)の設定については別の機会で詳しく説明したいと思います。

1. Button
f:id:teddy0x0:20200330172032p:plain
ボタンです。
クリックされるとonClickメソッドが呼ばれます。

@Override
public void onClick(View v) {
        println("クリックされました");
    }

2. TextView
f:id:teddy0x0:20200330174018p:plain
文字を表示するために使用するUI。

3. EditText
f:id:teddy0x0:20200330175946p:plain
ユーザーからの入力を受け付けるUI。
ボタンとセットで使用し、ボタンのonClickメソッドの中で入力値を受け取る、
というような使い方をします。

@Override
 public void onClick(View v) {
        textView.setText(editText.getText().toString());
    }


4. TimePickerDialog
f:id:teddy0x0:20200330181038p:plain
ユーザーに時刻の入力をさせたいときに使用するUI。
以下のように初期値を設定してダイアログを表示させる。

private void createTimePickerDialog() {
        TimePickerDialog timePickerDialog = new TimePickerDialog(this,
                new TimePickerDialog.OnTimeSetListener() {
                    @Override
                    public void onTimeSet(TimePicker view, int hourOfDay, int minute) {
                        println(String.valueOf(hourOfDay) + ":" + String.valueOf(minute));
                    }
                },13, 0, true);
        timePickerDialog.show();
    }


おわりに

今回はAndroid Studioの代表的なレイアウト、UI部品について紹介してみました。
UI部品の詳細な使い方や簡単なアプリ作成までは本記事で解説できなかったので、 また別の機会で改めてこれらについての説明とアプリ作成のハンズオン記事を書ければと思います。
Android Studioについて少しでも興味が湧いた方は、ぜひ実際に触ってみてください!