第2回： Android GUI

Androidにおける GUI ( Graphical User Interface) の仕組み

ACTIVITYの役割（一般的な説明）

ActivityはAndroidアプリの基本的なコンポネントである。Activityの役割はUser Interfaceを提示することとともに、システムやユーザの入力に反応することである。
ユーザインタフェイスを用いるアプリは少なくとも１つのActivityもしくは複数のActivitiesで構成される。 存在しているActivityは他の新しいActivityに入れ替えられることが可能である。
なお新しいActivityは同じ制約（Manifest.xmlに記載されているIntent）を守らなければならない。 Android Projectに新しいActivityを追加する手順は下記の通りになる。

• 新しいJava Classを作成し、Activity (もしくはAppCompatAcitivity) Classを継承 (extends予約語) させる。
  例えばアプリの関連情報をユーザに入力させるための設定画面が用意したい。
• 作成した“Settings” ActivityアプリのManifest.xmlに定義しておく。

                
        <?xml version="1.0" encoding="utf-8"?>
        <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="jp.aoyama.a5822000.sample1_1" >
          <application>
            android:allowBackup="true"
            android:icon="@mipmap/ic_launcher"
            android:label="@string/app_name"
            android:theme="@style/AppTheme" >
            //既存のActivity
            <activity
              android:name=".Sample1_1" android:label="@string/app_name" >
              <intent-filter>
                  //アプリ起動時、最初に起動可能と設定したいActivity
                  <action android:name="android.intent.action.MAIN" />
                  <category android:name="android.intent.category.LAUNCHER" />
              </intent-filter>
            </activity>
            //以下新しく追加したActivity
            <activity
              android:name=".Settings" android:label="@string/settings" >
                  <intent-filter>
                    <action android:name="android.intent.action.MAIN" />
                  </intent-filter>
            </activity>
          </application>
        </manifest>
                
              

ACTIVITYによるGUI表示の仕組み

今回の目標はAndroidアプリのGUI開発の基礎を把握することです。本資料を注意深く読めば、各演習課題は十分実施できる内容です。UI開発に関するより詳細な説明は、Android Developersサイトの「Develop a UI with Views」を参照することをお勧めします（それでも分からない場合はネット・○○GPTで検索してみましょう）。

各Activityに対して、テキストなどのUI要素が描けるように、デフォルトのウィンドウが与えられている。
基本的にウィンドウは画面全体を埋めるが、画面より小さくしたり、他のウィンドウの上にポップアップのように浮かせたりすることが可能。
Activityの視覚的な内容はViewというObject類の階層組織が提供と制御を行なっている。

• 殆どのActivityは情報・画像提示もしくはユーザに情報入力させるためのView階層を提示している。
• 基礎的なView Classに起源をもつObjects（自分のオリジナルなViewが作れる）
• 予め用意されている基本的なViewがある：Layout、TextView、Button、CheckBox、ImageView．．．
• Activity.setContentView(...) methodを用いてユーザが定義したView階層をActivityウィンドウ内に置く。
• 各Activityは複数Viewを作成することができる。
• 各Viewは図画オブジェクトで構成され、その図画が全面、もしくは画面の一部を埋める。
• View階層に含まれているすべてのオブジェクトをXMLで定義・記述することができる。なお、一部の高度な属性はXMLで設定できないこともある。

Android におけるGUI開発、デザイン編集機能と、コード編集機能

（第２回の演習課題説明はここから！）

Androidの開発において、プログラミング（実現したい機能、動作など）はJavaファイルとして作成、レイアウトのデザイン（実装したい見た目、画面構成など）はXMLファイルとして作成する。

第２回～利用する新しいプロジェクトの作成

下記の属性を持った新しいAndroid Projectを作成する。ただし、自分の名前の頭文字・自分の学生番号を使用すること（LGのままにしないこと！LGとはLopez Guillaumeの頭文字．．．）。

                
      Activity: Empty Views Activity
      Name: LG First Android GUI
      Package name: jp.aoyama.a5822000.lgfirstandroidgui
      Save location: 任意
      Language: Java
                
              

ソースコードEDITOR機能の使い方

XML形式で作成したリソース（Layout、Strings等々）をJavaのコードで扱う方法

XMLで定義した各Viewオブジェクトに対応したIDを設定することができる。そのため、XMLファイル内のViewの開始～終了タグ間下記のようなコードを追加する。例えば、「res/layout」にある"activity_main.xml"にある"TextView"オブジェクトの場合、以下のように、android:id="@+id/author"を追加することがで、IDが付与されます。UIのDesignモードでそのオブジェクトを選択したうえで、Attributes（属性）リストの一番上にある「id」に直接入力することも可能です。

  <TextView
     android:id="@+id/author"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="©LG23428"
     ...
  />                      
                

TextView appliAuthor = (TextView)findViewById(R.id.author);

appliAuthor.setText("");

XMLレイアウト編集ウィンドウ右上にあるタブを用いて "Code"（図６）と"Design"（図７）で直接XMLタグコーディング（"code"）で行なうか、レイアウトの設計を drag & drop などでグラフィカル（"design"）で行なうかは切り替えができる。基本的に design モードを利用した方が便利で速い。

Viewオブジェクトをタップした際のイベントを発生させる方法

Button をクリックした際のアクションも下記のようにXML内に事前定義することができる。定義したクリック時イベント名が Java プログラムコード内の method 名と紐づけられる。 クリックアクション用のメソッドの引数として、View オブジェクトを設定することで複数の View（例：複数のボタン）が同じクリック時アクション method を用いる際。 その method の処理コード内に、例えばどの Button がクリックされたかによって、処理を変えることができる。

  <Button
    android:id="@+id/btn1"
    android:onClick="myBtnClick"
    android:text="@string/btn1_str"
    ...
    />
                  

                    
    public void myBtnClick(View v){
      if (v.getId()==R.id.btn1){
        //ボタン１を栗生した場合の処理
      }
      else if (v.getId()==R.id.btn2){
        //ボタン２を栗生した場合の処理
      }
    }
                  

レイアウト（LAYOUT）でviewの配置を整える

Androidアプリ開発では、アプリの画面を簡単に作成できるレイアウトが数多く用意されている。レイアウトを上手く活用することで、テキスト、ボタン、イメージなどの各 View 要素の配置がシンプルとなるだけではなく、端末の Portrait/Landscape 切り替えや、様々な端末のサイズに合わせて自動的に調整される。

GUI（activity_main.xml）のデフォールトレイアウトは ConstraintLayout ですが、本実験（演習2_2～7）では、LinearLayout （リニアレイアウト）を上手に活用すれば、GUIの要素の配置が素早くできるため、その仕組みを理解することが大事（以下簡易紹介されている）。

主なレイアウトを紹介する。画像も見ながらイメージをつかむこと。各レイアウトの詳細な使い方はAndroid Developerウェブサイト、Tutorialウェブサイトや、市販の教科書を参照。
（続く各レイアウトのサンプル画像はTECHACADEMY MAGAZINEの“覚えておくと便利！ANDROIDアプリ開発のLAYOUTの使い方”から引用）

RelativeLayout

他のパーツなどと相対的な関係で位置を配置したい場合に使用する。「パーツＢはパーツＡの下に配置する」という指定の仕方ができる。この場合、パーツＡを動かすと一緒にパーツＢも移動する。

ConstraintLayout

ConstraintLayout を使用すると、フラットなビュー階層を持つ大きくて複雑なレイアウトを作成できる（ビューグループのネストはない）。すべてのビューが兄弟ビューや親のレイアウトとの関係に従って配置される点で、これは RelativeLayout と似ているが、RelativeLayout よりも柔軟性があり、Android Studio の Layout Editor で使用しやすくなっている。

ConstraintLayout 内でビューの位置を定義するには、ビューに対して最低 1 つの水平方向の制約と 1 つの垂直方向の制約を設定する必要がある。各制約は、別のビュー、親のレイアウト、非表示のガイドラインとの接続や位置揃えを表す。各制約により垂直軸または水平軸に沿ったビューの位置を定義する。各ビューには軸ごとに少なくとも 1 つの制約が必要ですが、それより多く必要になることもよくある。

Layout Editor にビューをドロップすると、制約を設定していなくても、ビューはドロップした場所に配置される。ただし、これは編集を簡単にするだけの機能です。デバイスでレイアウトを表示すると、制約が設定されていないビューは、[0,0]（左上の隅）の位置に描画される。

Viewの制約を設定するには、

1. 4つの角にサイズ変更ハンドル(正方形)が表示されます。また、4つの側面に制約アンカー(円)が表示されます。
2. 上部のアンカーをクリックし、レイアウトの上部にスナップするまでドラッグして放します。制約が適用され、ビューをレイアウトの上部から8dp離れた位置に配置するように指定されます。(8dpはデフォルトの設定です。)
3. 同様にビューの左側からレイアウトの左側に対して制約を適用します。

図 12 のレイアウトは、エディタ内では正常に見えますが、ビュー C には垂直方向の制約がありません。このレイアウトをデバイス上で描画すると、ビュー C の水平方向は、ビュー A の左右の外辺と同じ位置になるが、垂直方向の制約がないため、画面の一番上に表示される。

詳しくはAndroid Developers Guideの「ConstraintLayout でレスポンシブ UI を作成する」を参照すること。

LinearLayout

LinearLayoutとは、パーツを縦一列（vertical）もしくは横一列（horizontal）に並べる場合に使用するレイアウト。View の要素（テキスト、ボタン等）を１列に並べたいとき一番便利。「orientation」属性を「vertical」と「horizontal」に切り替えることで、並べ方を縦と横に切り替えることができる。
また、レイアウトの「gravity」属性を用いることで、レイアウト内の View 要素を左詰め（left）・中央揃え（center_horizontal）・右詰め（right）・幅を埋める（fill）・上詰め（top）・下詰め（bottom）等々、様々な並び方の自動調整が可能になる。
例えば、二つのボタンを画面の中央に横並びにしたい場合、horizontalなLinearLayoutの中に２つのボタンを配置し、gravityをcenterにすれば良い。

TableLayoutとGridLayout

TableLayoutはパーツを格子状に配置したい場合に使用する。HTMLの<table>タグと同じようにレイアウトを作成することができる。
GridLayout はTableLayoutと同じくパーツを格子状に配置したい場合に使用する。TableLayoutとの違いはTableLayoutは縦方向のセルの結合はできないが、GridLayoutでは可能である。

FrameLayout

基本的には1つのパーツを配置するためのレイアウトである。複数のパーツを配置した場合、後から配置したパーツが前面に重なった状態で配置される。
FrameLayoutを応用として右図のようにボタンを押すことで表示される内容が変わる画面。

Action Bar を用いた UI の実装

Action Bar とは、Android 2.x 以前のタイトルバーを置き換えつつ、ロゴ、ボタン、タブなどを配置できるツールバーである。

メニューの作成

メニュー要素は、レイアウトと同じように、xml ファイルのリソースとして事前設定が可能（java で動的に作成することも可）。メニューのリソースファイルは res/menu フォルダーに置く。作成した Empty View Activity の初期状態では menu リソースはないため、新規に作成する必要がある。Android Studio の左側に（通常）表示される navigation bar の「res」フォルダーに右クリックし、「New>Android Resource File」にて新規作成できる（図２０を参照）。
図２１に示すように、menu タイプのリソースファイルを作成するため、「Resource type」を「Menu」に設定する必要がある。OK を押して、res フォルダーに menu フォルダーと menu_action_bar.xml （図２１設定の名前の場合）ができていることを確認する。

具体例として Action Bar の例は図２２に示す。アイコン・文字の全てが表示される場合もあれば、一部隠れている場合もある。例えば、縦向きと横向きで表示のされ方が異なることに注意が必要。以下はメニューリソースに実際メニュー要素（menu item）を追加した場合のソースコード例（抜粋）。各メニュー要素を item タグにて定義し、その主な属性は次のものがある。

• 「android:title」メニュー要素の文字列を指定する属性。サンプルコードでは、string.xml で定義されている文字列に設定
• 「android:icon」メニュー要素のアイコンを指定する属性。サンプルコードでは、Android で用意されているアイコンが指定されているが、カスタマイズ可能。"@android:drawable/ic_menu_○○" から、一般的な編集・表示・保存のアイコンもある。
• 「app:showAsAction」UI の空きスペースとメニュー要素のテキスト・アイコン表示に必要なスペースによって、どう表示するか（アイコンのみ、テキスト必須等々）を指定する属性。多くのケースで有効なのが「ifRoom|withText」。表示されるアイコンを見て、機能が確実に推測できるのであればwithTextを省略するのも方法の1つである。
  alwaysは表示するスペースがなくても強制的に表示するため、使用する際に注意が必要。

Action Bar に表示する MenuItem が2つまでなら、図２２上部の Action Bar に表示されるため分割されない。一方、縦画面では3つ目以降表示されなくなる。 分割した場合、5つまでなら表示され、6つ目から表示されなくなる。Menu Item を2つに抑える、または3つ目以降の使用頻度が低いなどの場合は分割しない、横画面専用にする、などの方針をアプリ設計時に行うようにする必要がある。
Action Bar は従来のメニューを置き換えるものであることから、アイコンは、従来のメニューの Menu Item と同じものを使用する。以下は本サンプルの「menu_action_bar.xml」の内容。 重要なのは、item要素の「app:showAsAction」という属性。この属性を用いて Action Bar 上でメニューアイテムがどのように配置、表示されるかを指定できる。

        <?xml version="1.0" encoding="utf-8"?>
        <menu xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:app="http://schemas.android.com/apk/res-auto">
            <item android:id="@+id/action_settings" android:title="@string/action_settings"
                android:icon="@android:drawable/ic_menu_preferences"
                app:showAsAction="ifRoom|withText" />
        </menu>
                

作成したメニューをAction Bar（タイトルバー）に表示させる

Action Barを表示させるため、下記のメソッドを MainActivity に追加する必要があります。

OnCreateOptionsMenu は MainActivity の親クラス（Activity もしくは AppCompatActivity）の OnCreate で自動的に呼び出されるメソッドのため、これまで追加しなくても、デフォールトの Action Bar が表示されていた。プロジェクト作成時、Activity のタイトル（Name）を設定した（LG First Android GUI）ため、それだけ表示されている。

getMenuInflater() メソッドから引き出せる MenuInflater の instance を用いてに作成したメニュー（例えば上記作成した menu_action_bar.xml） の中身をAction bar にメニューをinflateさせない（“膨らませる”）とメニューが表示されない。

      @Override
      public boolean onCreateOptionsMenu(Menu menu){
        //Inflate（膨らます）the menu. This adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_action_bar, menu);
        return true;
      }
                

アプリケーションアイコンに機能を追加する

Android 2.3以前のアプリ内でのナビゲーションはシステムの戻るボタン（Back ボタン）を使って行われていた。Android 3.0よりアクションバー（Action Bar）が導入され、
第2のナビゲーションメカニズムとして ホームボタン（正式にUpボタン）が登場した。このボタンはアプリアイコンと左向きのキャラットで構成されている。
Action Barにはアプリケーションのブランディングの意味も含め、アプリケーションアイコンが表示されている。
このアイコンにナビゲーション機能を持たせるためUpボタン機能を追加する方法として、onCreateOptionsMenu() メソッド内、ActionBar オブジェクトの下記メソッドを用いる。

• setDisplayShowHomeEnabled(boolean)：アプリアイコンの表示・非表示させる
• setIcon(R.mipmap.ic_launcher)：アプリアイコンを表示する。上述のsetDisplayShowHomeEnabledと一緒に使用する
• setDisplayHomeAsUpEnabled(boolean)：アプリアイコンの横にUpボタンを追加する
• setHomeButtonEnabled(boolean)：タップイベントを可能・不可能にする

ActionBarオブジェクトのインスタンスは getSupportActionBar() メソッドで取得可能（例：getSupportActionBar().setHomeButtonEnabled(boolean);）。
各メニュー要素のテキストもしくはアイコンがタップされた場合、ボタンと違って、onClick属性は使いません。MainActvity に onOptionsItemSelected(…) というメソッドを実装すれば、自動的にそのメソッドに通知される。下記コード例のように、引数の item を使って、どのメニュー要素がタップされたかを判定して、適切な処理を実装する（注意：ホームボタンのIDは「android.R.id.home」）。

  @Override
  public boolean onOptionsItemSelected(MenuItem item) {
    if(item.getItemId()==R.id.action_settings){
      ...
    }
    ...
  }
                

Back と Up を使用したナビゲーションについてガイドラインがありますので、詳細はAndroid Developer Siteを参照して下さい。
さらにAndroid Design Principles（style、color、navigation等）というものも存在しているので、Google Playで配布予定のApplicationを開発する際、そこを良く勉強しておくことをお薦めします。

Androidアプリで“アニメーション”するための基礎知識

ANDROIDはアニメーションを最初から重要視

「アニメーション」機能は、Androidが提供するそのほかの機能に比べると、実用度は低いように感じられますが、実はバージョン1.0よりも以前からアニメーションはAPIとして開発者に提供されています。
その後、追加された機能に優先してアニメーションが初めから用意されているのはなぜでしょうか。Androidはシステム全体を通してアニメーションが駆使できるように設計されています。
「メニューを開く」「アクティビティを起動する」「ダイアログを表示する」というような基本的な動作にもアニメーションが使用されています。
アクティビティの切り替え時や、ダイアログ表示時のアニメーションは次回解説します。今回は、GUIコンポネントに対するアニメーションを見ていきましょう。

ANDROIDのアニメーションの4つの基本動作と合成

Androidのアニメーションは、「android.view.animation」パッケージで実現する。このパッケージには、Animationクラスと、そのサブクラスが用意されている。

クラス名	概要
Animation	すべてのアニメーションの基底の抽象クラス
AlphaAnimation	フェードイン/アウト
RotateAnimation	回転
ScaleAnimation	拡大・縮小
TranslateAnimation	移動
AnimationSet	複数のアニメーションを合成

フェードイン/アウト

下記の属性を持った新しいProjectを作成する。ただし、自分の名前の頭文字・自分の学生番号を使用すること。

演習問題2_4（任意）: 複数のAnimation種類を自由に組み合わせたテストアプリの作成（a~dは参考方法。他の方法有り）

1. AlphaAnimationExampleを完成させ（"hoge"を埋めたものとXMLレイアウト）実機実行にて動作を確認する（図２４を参照）。
2. 同プロジェクト内に新たなActivity ClassとしてMultipleAnimationExample.javaファイルを作成
3. MultipleAnimationExample Class用のレイアウトlayout_multiple_animation.xmlを作成
4. 複数のAnimationを組み合わせるための下記サンプルコード（MultipleAnimationSample.java）を参考にして、図２５のように、CheckBoxとEditTextを用いて、自由にAnimationを組み合わせることができるようにするGUIを作成

                
      Activity: Empty View Activity
      Name: LG Animation
      Package name: jp.aoyama.a00001.lganimation
      Save location: 任意
      Language: Java
      Minimum SDK: 使用端末のAndroidバージョン以下を選択
                
              

アニメーション開始時とアニメーション終了時の透明度を設定して、フェイドイン／フェイドアウトを表現する。
「AlphaAnimationExample」例のソースコードの一部と画面のスクリーンショットを次に示している。

AlphaAnimationExample.java

                
      package jp.aoyama.a00001.animation;

      //importを省略
      import android.view.animation.AlphaAnimation;

      public class AlphaAnimationExample extends Activity {
        @Override
        public void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
          setContentView(R.layout.hoge);
        }

        public void onClick(View v) {
          float fromAlpha = Float.parseFloat(((EditText)hoge).getText().toString());
          float toAlpha = Float.parseFloat(((EditText)hoge).getText().toString());
          AlphaAnimation animation = new AlphaAnimation(fromAlpha, toAlpha);
          //アニメーション時間の設定
          animation.setDuration(5000);
          //Viewがアニメーションを開始
          v.startAnimation(animation);
        }
      }
                
              

AlphaAnimationは開始透明度と終了透明度を指定可能で、図 22は不透明から、80％透明にアニメーションする。

コンストラクタ引数	説明
float fromAlpha	アニメーション開始時の透明度を0.0～1.0の間で指定。0.0は完全透明、1.0は完全不透明
float toAlpha	アニメーション終了時の透明度を0.0～1.0の間で指定。0.0は完全透明、1.0は完全不透明

MultipleAnimationSample.java

                
        public void onClick(View v) {
          // 【1】インスタンスを生成
          AnimationSet set = new AnimationSet(true);

          // 【2】基本のアニメーションを生成
          AlphaAnimation alpha = new AlphaAnimation(0.9f, 0.2f);
          RotateAnimation rotate = new RotateAnimation(0, 360, 50, 25);
          ScaleAnimation scale = new ScaleAnimation(0.1f, 1, 0.1f, 1);
          TranslateAnimation translate = new TranslateAnimation(50, 0, 200, 0);

          // 【3】生成したアニメーションを追加
          set.addAnimation(alpha);
          set.addAnimation(rotate);
          set.addAnimation(scale);
          set.addAnimation(translate);

          // 【4】アニメーション時間を設定して動作開始
          set.setDuration(3000);
          v.startAnimation(set);
        }
                
              

上記サンプルコードはhttps://www.atmarkit.co.jp/ait/articles/1009/15/news120_2.htmlからの引用。
チェックボックスの使い方についてはAndroid Developerサイトを参考に。

参考文献

• ANDROID STUDIOで始めるANDROIDアプリ開発の教科書
• https://developer.android.com/index.html?hl=ja
• http://www.atmarkit.co.jp/ait/articles/1009/15/news120.html
• https://www.raywenderlich.com/2176-android-tutorial-for-beginners-part-2