Androidプログラムの基本から

Index

• 概要
• アプリケーション起動時の動作
  • Activity
  • AndroidManifest.xml
  • Hello Android!
  • デフォルトのLayout?
  • Activityの追加と遷移
  • 遷移先からの戻り方
  • 引数を渡して遷移
  • 遷移先からデータを返す
  • ActivityResultLauncherの使用例（250802）
• Layout
  • Layoutリソースの追加
  • ActivityにLayoutをセット
  • LayoutのWarning
  • 文字列の定義
  • リソースの参照
  • ボタンの動作記述
  • Clickイベントのメモ（250820）
• Layoutについて補足（250825追記）
  • LinerLayout
  • RelativeLayout
  • ConstraintLayout
  • FrameLayout
  • include
  • xmlns記述について
• ListView
  • セルのレイアウト
  • ListViewのレイアウト
  • ListViewにデータをセット
  • ListViewのクリック動作記述
• ListViewのカスタマイズ
  • アニメーションのXML
  • Adapterのカスタマイズ
  • getViewについて
  • カスタムAdapterを使ってみる
• Holderを使わないListView
  • Layoutクラスのカスタマイズ
  • CustomLayoutクラスを使う
  • Holderを使わないカスタムAdapter
  • Holderを使わないListViewを使う
• OverScrollListView
  • ListViewのカスタマイズ
  • OverScroll用のLayout
  • カスタムListViewを使う
• グラフィックス
  • View
  • Viewに描画
  • View Group
  • カスタムのViewクラスの作成
  • カスタムViewクラスを使ってみる
• アクションバー
  • アクションバーを使う
  • Optionメニュー
  • menuリソースで
  • Optionメニュー選択時の処理
  • Optionメニューの無効化
  • onPrepareOptionsMenuが呼ばれない
  • サブメニューにアイコンを付ける
  • Spinnerのリソース
  • Spinnerを使う
• Mouseの動きで描画
  • ViewにMouseで描画
  • プログラムによるレイアウト
  • LayoutInflaterを使う
  • LayoutInflaterについて
  • Databinding（250828追記）
• オフスクリーン
  • オフスクリーンの生成
  • オフスクリーンを使った描画
  • オフスクリーンを使ったCanvas
  • Viewのメソッド呼び出し
  • Viewの保存
• ファイルアクセス（250803追記）
  • 共有ストレージのファイルにアクセスする
  • URIの表示
  • ファイル削除
  • Textファイル読み込み
  • Textファイル書き込み
  • Imageファイル読み込み
  • Imageファイル書き込み
  • 共有ストレージのフォルダを選択
  • システムに保存された作業フォルダの読み出し
  • フォルダ内ファイル一覧
  • フォルダ内全ファイル消去
  • フォルダへのファイル保存
• その他
  • Toast
• まとめ
• エラーメッセージ
  • Error parsing XML: not well-formed (invalid token)
  • No speakable text present
  • ClassCastException
  • NullPointerException
  • No such file or directory
• 参考

概要

• Androidのプログラミングは、他のプログラム環境と較べて、
• ちょっと取っ付きにくい感じがする

• 開発環境がGUIになってるので、その操作方法にばかり目が行ってしまい、
• 肝心のプログラムの構成が分かり辛く、なかなかイメージが湧かないためだと思う。

• まぁAndroidのプログラムについては、基本からよく分かっていなかったので、
• 起動時の動作から、ちゃんと考えてみた。

• Eclipseの操作とか、そこらへんは出来るだけ省略して、
• 分かったことを少しづつ書いていこうと思う。

アプリケーション起動時の動作

• Androidのプログラムは、どのように動いているのか、考えてみる。
• Cのコンソールプログラムなら、起動すると、main関数が実行される
• Windowsのプログラムならば、WinMain関数が最初に実行される

• では、Androidでは何が最初に実行されるんだろう？
• 最初に、EclipseでAndroidアプリケーションのProjectを作っておく
  • 但し、Activityは作成しないでおくので、srcフォルダは空の状態から始める

Activity

• Androidでは、Activityという単位でプログラムが実行されるらしい
• Activityは、１つの画面に対応している様なので、Windowのようにも思えるが、
• 実行中のメインループを指しているのかもしれない

• とりあえず、１つだけのActivityを持つ javaプログラムを用意して、srcフォルダに入れてやる¹
• こんな風に、Activityを継承したクラスを作れば良い（src/HelloAndroid.java）

  package hm.orz.bluefish.helloandroid;
  
  import android.app.Activity;
  import android.os.Bundle;
  
  public class HelloAndroid extends Activity {
  
          @Override
          protected void onCreate(Bundle savedInstanceState) {
                  super.onCreate(savedInstanceState);
          }
  }
  

• でも、複数のActivityがあった場合、どれが最初に実行されるんだろう？

• そもそも、Activityを用意するだけでは、プログラムは実行されないようだ。
• では、最初に実装されるActivityは、どうやって決まるんだろう？

AndroidManifest.xml

• 使用するActivityは、AndroidManifest.xmlで定義しておかなければならない。
• Projectの作成時に、AndroidManifest.xmlファイルは生成されているので、それに必要な記述を追加する²

  <manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="hm.orz.bluefish.helloandroid"
      android:versionCode="1"
      android:versionName="1.0" >
  
      <uses-sdk
          android:minSdkVersion="17"
          android:targetSdkVersion="21" />
  
      <application
          android:allowBackup="true"
          android:icon="@drawable/ic_launcher"
          android:label="@string/app_name"
          android:theme="@style/AppTheme" >
          <activity
              android:name=".HelloAndroid"
              android:label="@string/app_name" >
              <intent-filter>
                  <action android:name="android.intent.action.MAIN" />
                  <category android:name="android.intent.category.DEFAULT" />
                  <category android:name="android.intent.category.LAUNCHER" />
              </intent-filter>
          </activity>
      </application>
  
  </manifest>
  

• 特に、最初に実行されるActivityには、intent-filterの記述が必要³になる
• これは、アプリケーション実行のIntent（ACTION_MAIN）を受け付ける
• さらに、ランチャーで登録可能なアプリケーションであることを示しているらしい

• Intentというのは、Androidでデータをやり取りする際に使用する、メッセージオブジェクトのことで、
• Intent-filterはアプリがどのようなIntentを受け取れるか、アプリの動作とか条件を設定するものらしい
  • 例えば、action=MAINは、最初に起動するActivityに設定し、
  • category=LAUNCHERは、ホーム画面のアイコンから起動されることを示す

• ちなみにintent-filterに、category.DEFAULTを指定しないと、暗黙的IntentにActivityが応答しないらしい。
• でも暗黙的Intentは、を連携して動作させる場合に使うものらしいので、必ずしも定義する必要は無いように思う

Hello Android!

• ここまでで、メインのActivityのjavaファイルを用意して、
• AndroidManifest.xmlに、Activityの定義をしたので、Androidでちゃんと起動するプログラムになる。

• でも、何もないActivityが表示されるだけのアプリケーションなので、
• とりあえず、Toastの記述を追加して、"Hello Android!"と表示されるようにしてみる。

  package hm.orz.bluefish.helloandroid;
  
  import android.app.Activity;
  import android.os.Bundle;
  import android.widget.Toast;
  
  public class HelloAndroid extends Activity {
  
          @Override
          protected void onCreate(Bundle savedInstanceState) {
                  super.onCreate(savedInstanceState);
                  Toast.makeText(this, "Hello Android!", Toast.LENGTH_SHORT).show();
          }
  }
  

• たぶん、これが最小限のAndroidアプリケーションじゃないかと思う。

デフォルトのLayout?

• Activityの画面レイアウトは、res/layoutフォルダに入れる
• Eclipseでプロジェクトを作成する際に、Activityを作っていなかったので、layoutフォルダは空になっている

• でも、デフォルトのアプリケーションアイコンは、res/drawableフォルダに入っている
• また、アプリケーション名は、res/values/strings.xmlで、定義されている

• Androidでは、表示データはres/valueフォルダに入れることになっているらしい
• 文字列のリソースは、string.xmlに定義するようだ

• 前項で作成したアプリケーションは、なにもレイアウトの指定をしていないが、
• 何もないActivityの上の方に、アイコンと、アプリケーション名は表示されている。

• これが、デフォルトのLayoutなのかな
  • 或いは、デフォルトのActivityってことなのかな？

• このデフォルトのレイアウト？の状態を変えることも出来るのかもしれない

Activityの追加と遷移

• Activityを追加したら、
• まずAndroidManifest.xmlに追加するのを忘れないように！

          <activity android:name=".subActivity" </activity>
  

• あとは、IntentでActivityを遷移する

        Intent intent=new Intent(this,subActivity.class);
        startActivity(intent);

• 或いは、後からパッケージ名とクラス名を指定する

        Intent intent = new Intent();
        intent.setClassName(getPackageName(),GDSlayer.class.getCanonicalName());
        startActivity(intent);

遷移先からの戻り方

• 転移先から戻るには、やはりIntentを使うのかと思ったら、
• なんと、これだけで良いらしい。

          finish();
  

• Activityは、デフォルトでは順にスタックに積まれて行くので、
  • 一つ前に戻るだけなら、Activityを終了させるだけで、Backボタンを押した時も同じ動作になる

• intent.setFlagsで、ここら辺は、いろいろ設定できるみたいだが、
• まぁ面倒なので、今は考えない。

引数を渡して遷移

• Activityの遷移で、引数を渡す
• Bundleで、データを束ねて送るらしい

  final Intent intent = new Intent(this,subActivity.class);
  intent.putExtra("str","ABC");
  intent.putExtra("num",123);
  startActivity(intent);
  

• 遷移先のActivityで、以下の様に引数を受け取ることが出来る

public class subActivity extends Activity {
        @Override
        public void onCreate(Bundle savedInstanceState) {
                String str = getIntent().getStringExtra("str");
                int num = getIntent().getIntExtra("num", -1);
        }
}

• キーが無い時は、getStringExtraはnull、getIntExtraは第2引数の値を返す

遷移先からデータを返す

• 起動先アクティビティから結果を送り返してもらう方法
• startActivityではなく、startActivityForResultで起動、
• 起動先で、setResultでIntentを返して、
• onActivityResultで受け取ってデータを処理する

• でも今は、ActivityResultLauncherを使う方法が推奨されているらしい（250729追記）
• 予め、ActivityResultLauncherでコールバックを登録（registerForActivityResult）する
  • コールバック内で、ActivityResultContracts.StartActivityForResultで返されたデータを処理するプログラムを記述しておく
• .launchで起動して、起動先からは、setResultでIntentが返される（起動先のプログラムは同じ）

• Intentで起動元に値を返す方法（ActivityResultLauncher）
• onActivityResultが非推奨に…ActivityResultLauncherへの乗り換え方
• まぁ古いプログラムを全部書き換えなきゃいけないというわけではなさそうだ。

ActivityResultLauncherの使用例（250802）

• ActivityResultLauncherによる遷移と、処理の例

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private Intent intent_subActivity;
    private ActivityResultLauncher<Intent> launcher_subActivity;

    private Button button1;
    private Button button2;

    protected void onCreate(Bundle savedInstanceState) {
                ：
// OnClickListenerでボタンを登録（onClickでViewを判別する必要がある）

        button1 = findViewById(R.id.button1);
        button1.setOnClickListener(this);
        button2 = findViewById(R.id.button2);
        button2.setOnClickListener(this);
                ：
        setIntentSubActivity();
                ：
    }

// ActivityResultLauncherでSubActivityを登録

    private void setIntentSubActivity() {
        intent_subActivity = new Intent();      // 実際はIntentに属性とかを付けたりする
        launcher_subActivity = registerForActivityResult(
            new(ActivityResultContracts.StartActivityForResult(),
                result -> {
                        if (result.getResultCode() == Activity.RESULT_OK && null != result.getData()) {
                                ：
                                //処理
                                ：
                        }
                }
            }
        );
    }

// ボタンで、SubActivityをlaunchする

    public void onClick(View view) {
        if (view == button1) {
            intent_subActivity.putExtra("str","ABC");
            launcher_subActivity.launch(intent_subActivity);
        }
        else if (view == button2) {
                ：
        }
    }

}

• 画面を持たないActivityは、Manifestファイルに記述する必要はない

Layout

• Activityの上に、いろいろ表示するために、Layoutリソースを使う

Layoutリソースの追加

• Layoutのリソースを用意して、表示してみる
• src/layoutフォルダに、main.xmlファイルを追加
• 試しに、簡単なレイアウトを作る

• main.xmlをダブルクリックして、グラフィカル・レイアウトでPaletteから、
• レイアウト→LinerLayout(Vertical)を配置
• フォーム・ウィジェット→LargeTextを配置
• テキスト・フィールド→プレーン・テキストを配置
• フォーム・ウィジェット→ボタンを配置
• 最初の行の、xmlの記述はテキストで追加した

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

    <TextView
        android:id="@+id/textView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Large Text"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <EditText
        android:id="@+id/editText1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10" >
                                                ////green
        <requestFocus />
    </EditText>

    <Button
        android:id="@+id/button1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button" />

</LinearLayout>

• 下にあるタブで、main.xmlのテキストファイルを見てみると、
• 最初の行に、エラーマークが付いている

  エラー: Error parsing XML: no element found
  

• ファイル→全て保存とすると、エラーが消えた。何故？⁴
• エラーじゃないけど、Infoのアイコンがいくつか表示されている

• エラーじゃないので、とりあえず無視する

ActivityにLayoutをセット

• Layoutリソースを定義して、gen/hm.orz.bluefish.helloandroid/R.javaを見ると、
• main.xmlに定義した内容が、Rクラスにも定義されているのが分かる
• R.javaは、自動生成されるので、これを直接編集する必要はない

• Activityに、Layoutをセットするには、
• setContentViewで、Rクラスのlayout.mainを指定すれば良い

          @Override
          protected void onCreate(Bundle savedInstanceState) {
                  super.onCreate(savedInstanceState);
                  Toast.makeText(this, "Hello Android!", Toast.LENGTH_SHORT).show();
  
                  setContentView(R.layout.main);
          }
  

• 実行してみると、layout/main.xmlで定義したレイアウトが表示される

• でも、この状態ではLayoutを表示しているだけで、機能を記述していないので、ボタンを押しても何も反応しない。

LayoutのWarning

• Layout定義で表示されていた、infoというよりWarningかな。
• いちおう確認しておく

• これは、Textはリソースを使いなさいということか

[I18N] Hardcoded string "****", should use @string resource

• Androidでは、res/valuesで定義するのが流儀ということなんだろう。

• これは、inputTypeとhintが指定されていないと言っているのか？
• labelFor云々は、わからん。。

  この行で見つかった複数の注釈:
          - No label views point to this text field with an
           android:labelFor="@+id/@+id/editText1" attribute
          - This text field does not specify an inputType or a hint
  

• main.xmlの、EditTextに以下を追加しておく
• android:hint="EditTextに表示される文字列"
• android:inputTyte="text" //文字列入力の場合、textを指定

文字列の定義

• Androidでは、文字列は基本的にstringリソースで定義するのが作法らしい
• Warningが出た箇所の文字列を定義してみよう

• res/values/string.xmlに以下を追加
• stringリソースの名前と文字列を定義

  <resources>
  
      <string name="app_name">HelloAndroid!!</string>
      <string name="textview_text">名前</string>
      <string name="edittext_hint">名前を入れてください</string>
      <string name="button_text">入力</string>
      
  </resources>
  

• res/layout/main.xmlで、以下の変更または追加

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

    <TextView
        android:id="@+id/textView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/textview_text"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <EditText
        android:id="@+id/editText1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10"
        android:hint="@string/edittext_hint"
        android:inputType="text" >
        <requestFocus />
    </EditText>

    <Button
        android:id="@+id/button1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/button_text" />

</LinearLayout>

• TextViewのラベル文字列の設定
• EcitTextのhint文字列と、inputTypeの設定
• Buttonの文字列の設定

• で、こうなる。

リソースの参照

• 定義したリソースは、Rクラスでは以下の様に参照する
• R.リソース種別.リソース名

  Ex.     R.string.textview_text
  

• 別のリソースファイルからは、以下の様に参照する
• @リソース種別/リソース名

  Ex.     @string/textview_text
  

• XMLファイルのlayout定義で、以下のような記述がある

android:id="@+id/textView1"

• これは、新規のIDを生成して、Rクラスに追加するという意味らしい

• ＋の無い以下のような記述は、IDの参照になる

@id/textView1

ボタンの動作記述

• Layoutだけ定義しても、何も動かない。
• GUIの操作に対して、どのように動作するかを記述しなければならない。

• Androidではイベントに対する処理を、イベントリスナーと呼ばれる割り込み処理のようなもので登録する
• setOnClickListenerで、ボタンクリック時の処理を定義する

  package hm.orz.bluefish.helloandroid;
  
  import android.app.Activity;
  import android.os.Bundle;
  import android.widget.Toast;
  import android.text.Editable;
  import android.view.View;
  import android.view.View.OnClickListener;
  import android.widget.EditText;
  
  public class HelloAndroid extends Activity {
          private EditText edit;
          
          @Override
          protected void onCreate(Bundle savedInstanceState) {
                  super.onCreate(savedInstanceState);
                  Toast.makeText(this, "Hello Android!", Toast.LENGTH_SHORT).show();
  
                  setContentView(R.layout.main);
                  
                  edit = (EditText)this.findViewById(R.id.editText1);
                  findViewById(R.id.button1).setOnClickListener(new OnClickListener() {
                          public void onClick(View v) {
                                  Editable name = edit.getText();
                                  Toast.makeText(HelloAndroid.this, "こんにちは！ "+ name +"さん", Toast.LENGTH_LONG).show();
                          }
                  });
          }
  }
  

• ボタンが押された時、Toastで挨拶を表示するようにした

Clickイベントのメモ（250820）

• View.OnClickListenerをインプリメントして、onClickで受ける方法⁵

public class MainActivity extends Activity implements View.OnClickListener {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

                :
        
        Button button1 = findViewById(R.id.button1);
        Button button2 = findViewById(R.id.button2);

        button1.setOnClickListener(this);
        button2.setOnClickListener(this);
    }

//// onClickメソッドを別に記述する

    @Override
    public void onClick(View v) {
        if (v == button1) {
                //処理１;
        }
        else if (v == button2) {
                //処理２/
        }
    }
}

• xmlでメソッド名を指定する方法⁶

<Button
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:onClick="clickButton" />

• その場合の呼出し側メソッド記述

  public void ClickButton(View v) {
      //処理
  }
  

• ViewBindingでボタン毎にリスナーを設定する方法

binding.myButton.setOnClickListener {
        // ボタン処理
}

• ボタン毎の設定は面倒なので、OnClickListenerをimplementして ViewBindingを使った方が良いと思う。

Layoutについて補足（250825追記）

• 最近、AndroidStudioを改めて使い始めて、新規プロジェクトを作ると、
• LayoutにConstraintLayoutというのが使われている

• 自分は、今までほとんどLinerLayoutを使っていたが、ConstraintLayoutって何だろう
• ってことで、記述方法を復習する

• かなり記述を端折っているので、文法的にちょっと足りないし間違いもあると思う⁷

LinerLayout

• LinerLayoutは、単純に縦（vertival）、或いは横方向（horizontal）に、一列に並べる

<LinerLayout android:orientation="vertival">            ⇒以下を縦方向に並べる
  <LinerLayout android:orientation="horizontal">          ⇒以下を横方向に並べる
    <TextView android:text="A" />
    <TextView android:text="B" />
    <TextView android:text="C" />
  </LinerLayout>
  <LinerLayout android:orientation="horizontal">          ⇒以下を横方向に並べる
    <TextView android:text="D" />
    <TextView android:text="E" />
    <TextView android:text="F" />
  </LinerLayout>
  <LinerLayout android:orientation="horizontal">          ⇒以下を横方向に並べる
    <TextView android:text="G" />
    <TextView android:text="H" />
    <TextView android:text="I" />
  </LinerLayout>
</LinerLayout>

• こんな感じに左上から順に詰めて配置される
• 階層構造になっている

RelativeLayout

• RelativeLayoutは、画面全体、或いは指定したViewの相対的な位置を指定して配置する
• いろんなパターンがあるが、以下は画面全体を親として指定する例

  <RelativeLayout>
    <TextView android:text="A"
      android:layout alignParentLeft="true"       ⇒親の左側に合わせる
      android:layout alignParentTop="true" />     ⇒親の上側に合わせる
    <TextView android:text="B"
      android:layout centerHorizontal="true"      ⇒水平方向の中心に
      android:layout alignParentTop="true" />     ⇒親の上側に合わせる
    <TextView android:text="C"
      android:layout alignParentRight="true"      ⇒親の右側に合わせる
      android:layout alignParentTop="true" />     ⇒親の上側に合わせる
    <TextView android:text="D"
      android:layout alignParentLeft="true"       ⇒親の左側に合わせる
      android:layout centerVertical="true" />     ⇒垂直方向の中心に
    <TextView android:text="E"
      android:layout centerInParent="true"        ⇒親の中心に
    <TextView android:text="F"
      android:layout alignParentRight="true"      ⇒親の右側に合わせる
      android:layout centerVertival="true" />     ⇒垂直方向の中心に
    <TextView android:text="G"
      android:layout alignParentLeft="true"       ⇒親の左側に合わせる
      android:layout alignParentBottom="true" />  ⇒親の下側に合わせる
    <TextView android:text="H"
      android:layout centerHorizontal="true"      ⇒水平方向の中心に
      android:layout alignParentBottom="true" />  ⇒親の下側に合わせる
    <TextView android:text="I"
      android:layout alignParentRight="true"      ⇒親の右側に合わせる
      android:layout alignParentBottom="true" />  ⇒親の下側に合わせる
  </RelativeLayout>
  

• 親に対しての相対的な位置で配置される

• これ以外にも、指定したViewとの相対的な指定がいろいろある
• ちょっと指定が面倒なので、LinerLayoutと組み合わせることが多い気がする

• RelativeLayoutの使い方
• ビューの配置-LinearLayoutとRelativeLayout

ConstraintLayout

• それぞれのアイテムについて、自分と他者との関係性を制約（Constraint）として記述する

• 以下のように、関係性を記述する

app:layout_constraint[自分の辺]_to[相手の辺]Of="@+id/相手のid"

• 関係した辺を合わせるように配置される。
• 両側を指定すると、両方から引かれて結果的にセンタリングになる

• Left-Rightで記述しても良いが、Start-Endと記述するのは、
• 多くの言語はLTR（Left to Right）だが、RTLの言語にも対応できるように定義するため
• RTL言語の場合、Start-Endが逆になり、レイアウトを左右逆にしてくれるらしい

<androidx.constraintlayout.widget.ConstraintLayout>

    <TextView android:text="A"
        android:id="@+id/A"
        app:layout_constraintTop_toTopOf="parent"       ⇒AのTopを親のTopに合わせる
        app:layout_constraintStart_toStartOf="parent"   ⇒AのStartを親のStartに合わせる
        app:layout_constraintEnd_toStartOf="@id/B" />   ⇒AのEndをBのStartに合わせる

    <TextView android:text="B"
        android:id="@+id/B"
        app:layout_constraintTop_toTopOf="@+id/A"       ⇒BのTopを親のTopに合わせる
        app:layout_constraintStart_toEndOf="@+id/A"     ⇒BのStartをAのEndに合わせる
        app:layout_constraintEnd_toStartOf="@+id/C" />  ⇒BのEndをCのStartに合わせる

    <TextView android:text="C"
        android:id="@+id/C"
        app:layout_constraintTop_toTopOf="@+id/B"       ⇒CのTopを親のTopに合わせる
        app:layout_constraintStart_toEndOf="@+id/B"     ⇒CのStartをBのEndに合わせる
        app:layout_constraintEnd_toEndOf="parent" />    ⇒CのEndを親のEndに合わせる

</androidx.constraintlayout.widget.ConstraintLayout>

• 親⇔A⇔B⇔C⇔親と定義しているので、結果的に等間隔で配置される

• 制約の記述が面倒だと思ったが、実際にやってみるとそれほどでもない
• Layoutを細かく設定したい場合は、便利かもしれない

• ConstraintLayoutを使いたい-基本編
• XMLで始めるConstraintLayout

FrameLayout

• FrameLayoutでは、位置の指定はできず、配置したパーツが左上に重なって表示される
• 例えば、重なったレイアウトの表示・非表示を切り替えて使う

  layout1.setVisibility(View.VISIBLE);
  layout2.setVisibility(View.INVISIBLE);
  layout3.setVisibility(View.INVISIBLE);
  

include

• 予め、部品となるレイアウトを定義しておき（layout_btn.xml）

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

    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="button" />

</FrameLayout>

• includeで、何度も使いまわすことができる（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="vertical">

    <include
        android:id="@+id/inc1"
        android:text="BUTTON1"          ⇒これは出来ない
        layout="@layout/layout_btn" />

    <include
        android:id="@+id/inc2"
        android:text="BUTTON2"          ⇒なんで出来ないんだ
        layout="@layout/layout_btn" />
</LinearLayout>

• XMLのincludeは、パラメータの書き換えとかは出来ないっぽい⁸

• 呼出し例（DataBindingを使用）

    private ActivityMainBinding binding;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        binding = ActivityMainBinding.inflate(getLayoutInflater());
        setContentView(binding.getRoot());

        Button bv1 = binding.inc1.button
        Button bv2 = binding.inc2.button

        bv1.setText("BUTTON1"); // プログラムからパラメータの書き換え
        bv2.setText("BUTTON2"); // は出来るんだけど。。
    }

• プログラムでの書き換えは出来るけど、これじゃリソースにしている意味が無いよね。。

xmlns記述について

• xmlnsは、XMLのnamespaceの指定で、Androidの標準的なリソースを正しく利用するために必須の記述らしい。

• でも自分は、いつも参考にしたサンプルプログラムや、過去の自分のソースから機械的にコピペするだけで、
• 未だに、全く何も考えずに xmlns記述を使っている。。

• だいたい、良く使われるのは、これぐらいのものじゃないかな⁹
• xmlns:android="http://schemas.android.com/apk/res/android"
• xmlns:app="http://schemas.android.com/apk/res-auto"
• xmlns:tools="http://schemas.android.com/tools"

• レイアウトのXMLとか、デフォルトのnamespaceを設定して、省略しても良いんじゃないかな。。

ListView

• 最初に何をやるか考えたけど、Androidのインターフェースとして、よく使われる
• リスト表示して選択させる ListViewをやってみようと思う

セルのレイアウト

• まず、セルというか、１行分のレイアウトをXMLで定義する。
• この基本となるレイアウトには、TextViewの定義を必ず入れる（res/layout/list.xml）
• この例では、ImegeViewでアイコンのイメージも入れるようにしてみた

  <?xml version="1.0" encoding="utf-8"?>
  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent" >
  
      <ImageView
          android:id="@+id/imageView1"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:src="@drawable/ic_launcher" />
  
      <TextView
          android:id="@+id/list_textView1"
          android:layout_width="match_parent"
          android:layout_height="45dp"
          android:gravity="center_vertical|center_horizontal"
          android:textAppearance="?android:attr/textAppearanceLarge" />
  
  </LinearLayout>
  

• TextView以外の部品があるときは、TextViewのIDを指定する必要があるので、
  • IDはユニークな名前にしておくこと

ListViewのレイアウト

• とりあえずActivityには、ListViewだけを配置したものを用意した（res/layout/main.xml）

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

    <ListView
        android:id="@+id/listView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
    </ListView>

</LinearLayout>

• ListViewはGraphicalLayoutで作ったまま使ってはいけないによると、wrap_contentではなく、match_parentにすべきかも¹⁰。

ListViewにデータをセット

• ArrayAdapterに、ActivityのContext、１行分のリソースとTextViewのID、配列データを渡して
• それを、ListViewにセットする

  package hm.orz.bluefish.hellolistview;
  
  import android.app.Activity;
  import android.os.Bundle;
  import android.widget.ArrayAdapter;
  import android.widget.ListView;
  
  public class HelloListView extends Activity {
      private ListView list;
  
      @Override
      public void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
          setContentView(R.layout.main);
  
          String[] ldata = {"AAA","BBB","CCC","DDD","EEE","FFF"};
  
          list = (ListView)this.findViewById(R.id.listView1);
          ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, R.layout.list, R.id.list_textView1, ldata);
          list.setAdapter(adapter);
      }
  }
  

• これで、ListViewにデータが表示される

ListViewのクリック動作記述

• ListViewのアイテムをクリックした時のイベントリスナ
• OnItemClickListenerを実装する

  package hm.orz.bluefish.hellolistview;
  
  import android.app.Activity;
  import android.os.Bundle;
  import android.view.View;
  import android.widget.AdapterView;
  import android.widget.AdapterView.OnItemClickListener;
  import android.widget.ArrayAdapter;
  import android.widget.ListView;
  import android.widget.Toast;
  
  public class HelloListView extends Activity {
      private ListView list;
  
      @Override
      public void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
          setContentView(R.layout.main);
  
          String[] ldata = {"AAA","BBB","CCC","DDD","EEE","FFF"};
  
          list = (ListView)this.findViewById(R.id.listView1);
          ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, R.layout.list, R.id.list_textView1, ldata);
          list.setAdapter(adapter);
  
          list.setSelection(1);
          list.setOnItemClickListener(new OnItemClickListener() {
              @Override
              public void onItemClick(AdapterView<?>adapter, View view, int pos, long id) {
                  Toast.makeText(HelloListView.this, list.getAdapter().getItem(pos) +" が選択されました", Toast.LENGTH_LONG).show();
              }
          });
      }
  }
  

• ListViewをクリックすると、選択内容をToastで表示する

ListViewのカスタマイズ

• ListViewのいろんな設定は、基本的にXMLでやるみたいなんだけど、
• 選択状態の表示とか、いろいろやろうとすると、カスタマイズする方が簡単に思えてきた。

• 超簡単！ListViewをオシャレにカスタマイズ！横からスライドしてくるリストアイテムを作るという記事をそのままやってみる。
• この記事はとても分かり易いので、おすすめ！ とりあえず、要点だけメモしておく。

アニメーションのXML

• セルのレイアウト、 ListViewのレイアウトは、前述の普通のListViewと同様に作成すれば良い。
• あとは、スライドのアニメーションを定義するXMLを作成¹¹しておく（src/anim/list_motion.xml）

  <?xml version="1.0" encoding="utf-8"?>
  <set xmlns:android="http://schemas.android.com/apk/res/android"
      android:duration="700" >
  
      <alpha
          android:fromAlpha="0"
          android:toAlpha="1.0" />
  
      <translate
          android:fromXDelta="-100%"
          android:fromYDelta="0"
          android:toXDelta="0"
          android:toYDelta="0" />
  
  </set>
  

• これだけで、700msかけて以下のように変化することを定義できるらしい
  • Alpha値（透明度）を、0（透明）→1（不透明）
  • Viewの位置を、-100％（左側に隠した状態）→0（元の位置）に移動

• ようするに、左側からメニューがスルスルと出てくるように表示することができる

Adapterのカスタマイズ

• Adapterというのは、ListViewにデータを割り当てるためのプログラムらしい（src/CustomAdapter.java）
• これをカスタマイズする

  package hm.orz.bluefish.sidesliderlistview;
  
  import java.util.ArrayList;
  
  import android.content.Context;
  import android.graphics.Color;
  import android.text.TextUtils;
  import android.view.LayoutInflater;
  import android.view.View;
  import android.view.ViewGroup;
  import android.view.animation.Animation;
  import android.view.animation.AnimationUtils;
  import android.widget.ArrayAdapter;
  import android.widget.TextView;
  
  public class CustomAdapter extends ArrayAdapter<String>{
  
      static class ViewHolder {
          TextView labelText;
      }
  
      private LayoutInflater inflater;
  
      // コンストラクタ
      public CustomAdapter(Context context,int textViewResourceId, ArrayList<String> labelList) {
          super(context,textViewResourceId, labelList);
      }
  
      @Override
      public View getView(int position, View convertView, ViewGroup parent) {
  
          ViewHolder holder;
          View view = convertView;
  
          // Viewを再利用している場合は新たにViewを作らない
          if (view == null) {
              inflater =  (LayoutInflater)getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
              view = inflater.inflate(R.layout.list, null);
              TextView label = (TextView)view.findViewById(R.id.list_textView1);
              holder = new ViewHolder();
              holder.labelText = label;
              view.setTag(holder);
          } else {
              holder = (ViewHolder) view.getTag();
          }
  
          // 特定の行のデータを取得
          String str = getItem(position);
  
          if (!TextUtils.isEmpty(str)) {
              // テキストビューにラベルをセット
              holder.labelText.setText(str);
          }
  
          // 行毎に背景色を変える
          if(position%2==0){
              holder.labelText.setBackgroundColor(Color.parseColor("#aa0000"));
          }else{
              holder.labelText.setBackgroundColor(Color.parseColor("#880000"));
          }
  
          // XMLで定義したアニメーションを読み込む
          Animation anim = AnimationUtils.loadAnimation(getContext(), R.anim.list_motion);
          // リストアイテムのアニメーションを開始
          view.startAnimation(anim);
  
          return view;
      }
  }
  

getViewについて

• Adapterで、肝心となる処理がgetViewで、
• データを「取ってきて描く」という感じのルーチンだと思う

• 特に、気をつけなければならないのが、引数のconvertView
• これがnullの時だけViewを生成すること
• nullじゃ無いときは、既に生成されたViewがあるので、データの入れ替えだけ行うということらしい。

• inflaterっていうのは、「膨らませる」というような意味みたいだが、
• まぁ、XMLから実際のViewを作るというようなものらしい

• holderっていうのは、生成したViewのデータを保持するキャッシュのようなもの？なのかな
• ここらへんは、決まり文句みたいなものらしいけど、ちょっと面倒¹²だなぁ。

• あとは、「行毎に背景色を変える」で、奇数行、偶数行で背景色を変えている
• これは、リストViewの表示方法をカスタマイズする参考になるだろう。

• さらに、「XMLで定義したアニメーションを読み込む」で、XMLで定義したアニメーションを実行している
• これだけでスライドの動きを出せるのは、簡単でいいなぁ

カスタムAdapterを使ってみる

• あとは、標準のAdapterの代わりに、カスタムAdapterを使うようにするだけ（src/SideSliderListView.java）

package hm.orz.bluefish.sidesliderlistview;

import java.util.ArrayList;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ListView;
import android.widget.Toast;

public class SideSliderListView extends Activity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        // ListViewのインスタンスを取得
        ListView list = (ListView)findViewById(R.id.listView1);
 
        // リストアイテムのラベルを格納するArrayListをインスタンス化
        final ArrayList<String> labelList = new ArrayList<String>();
 
        // "List Item + ??"を20個リストに追加
        for(int i=1; i<=20; i++){
            labelList.add("List Item "+i);
        }

        CustomAdapter mAdapter = new CustomAdapter(this, R.layout.list, labelList);
        list.setAdapter(mAdapter);

        list.setSelection(1);
        list.setOnItemClickListener(new OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?>adapter, View view, int pos, long id) {
                Toast.makeText(SideSliderListView.this, labelList.get(pos) +" が選択されました", Toast.LENGTH_LONG).show();
            }
        });
    }
}

• このカスタムViewは、とても動きがとても面白いので、本当におススメです。 →元記事
  • まぁ、説明がわかりやすいというのが、一番良いところなんだけれども。

Holderを使わないListView

• ViewHolderを使わないでListViewを高速化するという記事を参考に、やってみた
• 前項のsidesliderlistviewを、Holderを使わない様に書き換えてみる

Layoutクラスのカスタマイズ

• LinearLayoutを継承して、CustomLayoutクラスを作る（src/CustomLayout.java）
• Itemとして、icon（ImageView）と、title（TextView）を持つようにする

  package hm.orz.bluefish.sidesliderlistview;
  
  import android.content.Context;
  import android.util.AttributeSet;
  import android.widget.ImageView;
  import android.widget.LinearLayout;
  import android.widget.TextView;
  
  public class CustomLayout extends LinearLayout {
          TextView mTitleView;
          ImageView mIconView;
  
          public CustomLayout(Context context, AttributeSet attrs) {
                  super(context, attrs);
          }
  
          @Override
          protected void onFinishInflate() {
                  super.onFinishInflate();
  
                  mTitleView = (TextView) findViewById(R.id.list_textView1);
                  mIconView = (ImageView) findViewById(R.id.imageView1);
          }
  
          public void bindView(Item item) {
                  mTitleView.setText(item.title);
                  mIconView.setImageResource(item.icon);
          }
  
  }
  

• onFinishInflateで、findViewByIdするのが肝心のようだ
  • Handlerは、findViewByIdの呼び出し回数を減らす（生成済みなら使いまわす）ためなので、同様の効果があるらしい

• Itemクラスの定義（src/Item.java）

package hm.orz.bluefish.sidesliderlistview;

public class Item {
        public String title;
        public int icon;
}

CustomLayoutクラスを使う

• CustomLayoutクラスを使って、XMLでレイアウトを定義する（res/layout/list.xml）
• って言っても、LinearLayoutを作成した作成したクラス名に入れ替えただけ

  <?xml version="1.0" encoding="utf-8"?>
  <hm.orz.bluefish.sidesliderlistview.CustomLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent" >
  
      <ImageView
          android:id="@+id/imageView1"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:src="@drawable/ic_launcher" />
  
      <TextView
          android:id="@+id/list_textView1"
           android:layout_width="match_parent"
          android:layout_height="45dp"
          android:gravity="center_vertical|center_horizontal"
          android:textAppearance="?android:attr/textAppearanceLarge" />
  
  </hm.orz.bluefish.sidesliderlistview.CustomLayout>
  

Holderを使わないカスタムAdapter

• Holderを使わないと、Adapterの処理はかなりすっきりする（src/CustomAdapter.java）

package hm.orz.bluefish.sidesliderlistview;

import java.util.ArrayList;

import android.content.Context;
import android.graphics.Color;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ArrayAdapter;

public class CustomAdapter extends ArrayAdapter<Item>{
    private LayoutInflater inflater;
    private int mItemLayoutResource;

    // コンストラクタ
    public CustomAdapter(Context context,int resource, ArrayList<Item> object) {
        super(context,resource, object);
        inflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        mItemLayoutResource = resource;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        final CustomLayout view;

        // Viewを再利用している場合は新たにViewを作らない
        if (convertView == null) {
            view = (CustomLayout)inflater.inflate(mItemLayoutResource, null);
        } else {
            view = (CustomLayout)convertView;
        }

        view.bindView(getItem(position));

        // 行毎に背景色を変える
        if(position%2==0){
                view.mTitleView.setBackgroundColor(Color.parseColor("#aa0000"));
        }else{
            view.mTitleView.setBackgroundColor(Color.parseColor("#880000"));
        }

        // XMLで定義したアニメーションを読み込む
        Animation anim = AnimationUtils.loadAnimation(getContext(), R.anim.list_motion);
        // リストアイテムのアニメーションを開始
        view.startAnimation(anim);

        return view;
    }
}

Holderを使わないListViewを使う

• メインは基本的に変わらないが、ArrayListをItem単位に変更（src/SideSliderListView.java）

package hm.orz.bluefish.sidesliderlistview;

import java.util.ArrayList;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ListView;
import android.widget.Toast;

public class SideSliderListView extends Activity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        // ListViewのインスタンスを取得
        ListView list = (ListView)findViewById(R.id.listView1);

        // リストアイテムを格納するArrayListをインスタンス化
        final ArrayList<Item> labelList = new ArrayList<Item>();

        // Itemを20個リストに追加
        for(int i=1; i<=20; i++){
            Item item = new Item();
            item.title = "List Item "+i;
            item.icon = R.drawable.ic_launcher;
            labelList.add(item);
        }

        CustomAdapter mAdapter = new CustomAdapter(this, R.layout.list, labelList);
        list.setAdapter(mAdapter);

        list.setSelection(1);
        list.setOnItemClickListener(new OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?>adapter, View view, int pos, long id) {
                Toast.makeText(SideSliderListView.this, labelList.get(pos) +" が選択されました", Toast.LENGTH_LONG).show();
            }
        });
    }
}

• Layoutのカスタマイズは、ちょっと面倒だけど、
• Holderの動作が、いまいち分かり辛かったので、むしろこの方が分かり易いかもしれない。

OverScrollListView

• ListViewをスクロールして、範囲外になった時、
• ミョーンと伸びてまた戻るという動作を、OverScrollというらしい

• これの実装の仕方が紹介されていたので、カスタムListViewを作ってみた。
• OverScrollでListViewをビョーンってする方法
• Android_Overscrollを使う簡単な方法
• オーバースクロールを実装する

• ListViewのカスタマイズ例として、ほとんどそのままやってみました。

ListViewのカスタマイズ

• OverScroll用に、ListViewをカスタマイズする（src/CustomListView.java）
• といっても、元々その機能は持っているので、overScrollByメソッドの、maxOverScrollYを設定するだけで良い。

  package hm.orz.bluefish.overscrolllistview;
  
  import android.content.Context;
  import android.util.AttributeSet;
  import android.widget.ListView;
  
  public class CustomListView extends ListView {
  
          private int maxOverScrollY = 0;
  
          public CustomListView(Context context) {
                  super(context);
          }
  
          public CustomListView(Context context, AttributeSet attrs) {
                  super(context, attrs);
                  this.maxOverScrollY = attrs.getAttributeIntValue(null, "maxOverScrollY", 0);    }
  
          public CustomListView(Context context, AttributeSet attrs, int defStyle) {
                  super(context, attrs, defStyle);
                  this.maxOverScrollY = attrs.getAttributeIntValue(null, "maxOverScrollY", 0);    }
  
  
          @Override
          protected boolean overScrollBy(int deltaX, int deltaY, int scrollX, int scrollY,
                          int scrollRangeX, int scrollRangeY, int maxOverScrollX, int maxOverScrollY, boolean isTouchEvent) {
                  return super.overScrollBy(deltaX, deltaY, scrollX, scrollY,
                                  scrollRangeX, scrollRangeY, maxOverScrollX, this.maxOverScrollY, isTouchEvent);
          }
  }
  

• コンストラクタで使っている、attrs.getAttributeIntValueで、XMLの設定を読むことが出来るようだ。
  • カスタマイズしたViewのパラメータ設定に、いろいろ使えそうな機能だ

OverScroll用のLayout

• そして、カスタマイズしたListViewを使って、OverScroll設定するLayoutファイルを作成する（res/layout/main.xml）
• 以下のように、作成したCustomListViewを、パッケージ名も含めて記述する

  <?xml version="1.0" encoding="utf-8"?>
  <hm.orz.bluefish.overscrolllistview.CustomListView xmlns:android="http://schemas.android.com/apk/res/android"
      android:id="@android:id/list"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
  
      android:overScrollMode="always"
      android:overScrollHeader="@drawable/ic_launcher"
      android:overScrollFooter="@drawable/ic_launcher"
      maxOverScrollY="500"
  />
  

• overScrollHeader、Footerは、ListViewの上部、下部の空きに表示される色（Ex.#000000）、或いはImageを指定できる
• で、maxOverScrollYを、0より大きく設定すれば、OverScroll機能が働く

• １行分のリストは、前に使ったものの使いまわし（res/layout/list.xml）

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

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher" />

    <TextView
        android:id="@+id/list_textView1"
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:gravity="center_vertical|center_horizontal"
        android:textAppearance="?android:attr/textAppearanceLarge" />

</LinearLayout>

カスタムListViewを使う

• あとは普通に、ListViewを呼び出すだけ（OverScrollListView.java）
• 特に通常のListViewの呼び出しと変わりなし

  package hm.orz.bluefish.overscrolllistview;
  
  import android.app.ListActivity;
  import android.os.Bundle;
  import android.widget.ArrayAdapter;
  
  public class OverScrollListView extends ListActivity {
  
      String[] ldata = {"AAA","BBB","CCC","DDD","EEE","FFF","GGG","HHH"};
  
      @Override
      public void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
          setContentView(R.layout.main);
  
          ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, R.layout.list, R.id.list_textView1, ldata);
          setListAdapter(adapter);
      }
  }
  

• OverScrollは、たいしたことは無い機能だが、iPhoneでは標準的な動作であり、
  • ListViewが全く動かないより、レスポンスがあった方が、やっぱりしっくりくる。

グラフィックス

• Androidで、グラフィックスを表示する

View

• Androidは、Viewと呼ばれる部品を配置して、画面を構成している
• TextViewや、ボタンは、それぞれViewになっている。
• AppleのiOSでは、Viewを階層的に作れたと思うけど、AndroidのViewは直接階層を持てないようだ。

• その代わりに、View GroupでViewを配置する
• View GroupもViewだが、これは階層を持てるので、複雑な構造を定義できる

• ActivityにLayoutをセットするときに、setContentViewで、リソースファイルのIDを指定したが、
• setContentViewは、Viewクラスを継承したクラスを指定することも出来る

          DrawView view = new DrawView(this);
          setContentView(view);
  

• ちなみにViewの引数は Contextで、
• Contextというのは、アプリケーション環境の情報へアクセスするためのインターフェースらしい

• 余談になるが、thisは この場合はActivityのことだが、ActivityはContextクラスを継承したものなので、ActivityのContextを指す
• ApplicationのContextは、getApplicationContextで取得できるが、この場合はそれも使える

• ActivityのContextを使うか、ApplicationのContextを使うべきかは、場合によって違うらしい
• 動いていたとしても、メモリリークの原因になることもあるらしい

• 自分は、まだよく分かっていないので、現状は動けば良いという事で保留としておく。
• 以降、Application Contextを使った例が多いが、間違っているかもしれない。

Viewに描画

• Viewクラスを継承した、DrawViewというクラスを作成する（src/HelloGraphics.java）
• onDrawイベントで、描画を行う

  package hm.orz.bluefish.hellographics;
  
  import android.app.Activity;
  import android.content.Context;
  import android.graphics.Canvas;
  import android.graphics.Color;
  import android.graphics.Paint;
  import android.graphics.RectF;
  import android.os.Bundle;
  import android.view.View;
  
  public class HelloGraphics extends Activity {
  
          @Override
          public void onCreate(Bundle savedInstanceState) {
                  super.onCreate(savedInstanceState);
                  DrawView view = new DrawView(getApplication());
                  setContentView(view);
          }
  
          class DrawView extends View {
  
                  public DrawView(Context context) {
                          super(context);
                  }
  
                  public void onDraw(Canvas c) {
                          c.drawColor(Color.BLACK);
          
                          Paint fill_paint = new Paint();
                          fill_paint.setStyle(Paint.Style.FILL);
                          fill_paint.setColor(Color.BLUE);
                          c.drawRect(500f, 500f, 1000f, 1000f, fill_paint);
          
                          fill_paint.setColor(Color.RED);
                          c.drawOval(new RectF(0f, 0f, 500f, 500f), fill_paint);
                  }
          }
  }
  

• これで、とりあえず Activityに図形を描画することが出来た

View Group

• でも実際、アプリケーションを作るとしたら、Viewが１つだけというのは、ちょっと困る
• View Groupを使って、Viewを並べることになると思う。

• しかし例えば、TextViewと、DrawViewと、Buttonを並べて、
• DrawViewに描画するのは、どうすれば良いんだろう？

• ActivityにViewGroupを、プログラムで配置する例はいろいろ見つけられたんだけど、
• その配置したViewに、描画する例を見つけることが出来なかった。

• それに部品の配置は、xmlファイルでやった方が楽なので、
• プログラムで配置することは、そもそもあまり考えていない。

• 例えば、Windowsのプログラムであれば、
• Dialogリソースに、Textコントロール、Pictureコントロール、Buttonを配置して、
• Windowに、Dialogリソースを貼り付けて、Dialogリソース用のWindowProcedureを定義するという感じになると思う

• Androidでも、同じようにやりたいんだけどなぁ。

カスタムのViewクラスの作成

• Viewクラスを継承して作成した描画用のViewを、XMLで配置することが出来れば良いんじゃないか？
• ということで検索してみると、 こちらの記事を見つけた

• それを基に、カスタムのViewクラスを作成してみる（src/CustomView.java）

package hm.orz.bluefish.hellographics;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;

public class CustomView extends View {
        public CustomView(Context cont) {
                super(cont);
        }

        public CustomView(Context cont, AttributeSet attr) {
                super(cont,attr);
        }

        @Override
        protected void onDraw(Canvas c){
                c.drawColor(Color.BLACK);

                Paint fill_paint = new Paint();
                fill_paint.setStyle(Paint.Style.FILL);
                fill_paint.setColor(Color.BLUE);
                c.drawRect(500f, 500f, 1000f, 1000f, fill_paint);

                fill_paint.setColor(Color.RED);
                c.drawOval(new RectF(0f, 0f, 500f, 500f), fill_paint);
        }

        @Override
        protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec){
                int widthSize = MeasureSpec.getSize(widthMeasureSpec);
                int heightSize = MeasureSpec.getSize(heightMeasureSpec);
                setMeasuredDimension(widthSize,heightSize);
        }
}

• XMLファイルで、Layout可能にするためには、
• XML用のコンストラクタと、大きさを返すonMeasureメソッドを追加する必要があるらしい

カスタムViewクラスを使ってみる

• XMLファイルは普通にGUIで、TextViewとButtonをLinerLayoutで配置した後、
• 以下のように、作成したCustomViewを、Package名も含めて記述する（res/layout/main.xml）

  <?xml version="1.0" encoding="utf-8"?>
  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      android:orientation="vertical" >
  
      <TextView
          android:id="@+id/textView1"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:layout_weight="0.04"
          android:gravity="center_vertical|center_horizontal"
          android:text="Title"
          android:textAppearance="?android:attr/textAppearanceLarge" />
  
      <hm.orz.bluefish.hellographics.CustomView
          android:id="@+id/customView1"
          android:layout_width="wrap_content"
          android:layout_height="290dp"
          android:layout_weight="0.20" />
  
      <Button
          android:id="@+id/button1"
          android:layout_width="match_parent"
          android:layout_height="41dp"
          android:text="Button" />
  
  </LinearLayout>
  

• main.xmlをグラフィカル・レイアウトで見ると、ちゃんと中身が表示されているし、
  • 標準の部品と同じように、大きさを変更することも出来る¹³。。

• Activityは、Layoutリソースを参照するだけで良い。（src/HelloGraphics.java）

package hm.orz.bluefish.hellographics;

import android.app.Activity;
import android.os.Bundle;

public class HelloGraphics extends Activity {

        @Override
        public void onCreate(Bundle savedInstanceState) {
                super.onCreate(savedInstanceState);
                setContentView(R.layout.main);
        }
}

• これでやりたいことが、少し出来るようになってきたかな。

アクションバー

• アクションバーは、画面の一番上のタイトルバーに、いろいろなウィジェットを仕込むことが出来る
• デフォルトでは、アプリケーションのアイコンとアプリケーション名が入っている

• 参考
• アクションバーの使用
• アクションバー内のドロップダウン

アクションバーを使う

• res/values/themes/themes.xmlを開いて、parentから.NoActionBarを削除する

    <style name="Base.Theme.TestApp" parent="Theme.Material3.DayNight">

Optionメニュー

• ActionBarにメニューを付ける
• onCreateOptionsMenuをオーバーライドすれば良い

          @Override
          public boolean onCreateOptionsMenu( Menu menu ) {
                  super.onCreateOptionsMenu( menu );
  
                  menu.add( 0, MENUID_FILE, 0, "Select Open File..." );
                  menu.add( 0, MENUID_ABOUT, 0, "About Application..." );
                  return true;
          }
  

• 選択時の処理のために、IDを付けておく
• 実際は、直接記述するのではなく、以下のようにMenuリソースで追加する方が良い

menuリソースで

• リソースで追加する場合は、メニューリソースファイル
• 例えば、src/menu/xxx_menu.xmlを用意する

  <?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/file_open"
   android:icon="@drawable/file_open"
   app:showAsAction="ifRoom"
   android:title="@string/file_open"/>
  
   <item
   android:id="@+id/about"
   android:icon="@drawable/about"
   app:showAsAction="ifRoom"
   android:title="@string/about"/>
  
  </menu>
  

• icon指定で、Bar上に表示する場合のアイコンを指定できる。

• showAsActionで、表示方法を制御する

• Inflateで、リソースからメニューを生成する

        @Override
        public boolean onCreateOptionsMenu( Menu menu ) {
                super.onCreateOptionsMenu( menu );

                MenuInflater inflater = getMenuInflater();
                 inflater.inflate(R.menu.xxx_menu, menu);
                 return true;
        }

Optionメニュー選択時の処理

• Optionメニュー選択時の処理は、
• add時に付加したID、或いはmenuリソースで指定したIDで処理を振り分ける

          @Override
          public boolean onOptionsItemSelected( MenuItem item ) {
  
                  switch( item.getItemId() ) {
                  case MENUID_FILE:
                  case R.id.file_open:
                          // 処理
                          return true;
  
                  case MENUID_ABOUT:
                  case R.id.about:
                          // 処理
                          return true;
                  }
                  return false;
          }
  

• addでMENUIDを指定した場合と、menuリソースのID指定の両方のラベルが付いているが、実際は必要な方だけあれば良い。

• Javaの新しいバージョンでは、R.id.xxxが定数ではなくなったので、以下のように記述する必要がある

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        int itemId = item.getItemId();

        if (itemId == R.id.file_open) {
            // 処理
            return true;
        }
        else if (itemId == R.id.about) {
            // 処理
            return true;
        }
        return false;
    }

Optionメニューの無効化

• メニューの表示前に実行されるonPrepareOptionsMenuをオーバーライドして、
• メニュー項目を、Disable状態にすれば、動的にメニューの状態をコントロールできる。

          @Override
          public boolean onPrepareOptionsMenu(Menu menu)  {
                  super.onPrepareOptionsMenu(menu);
                  
                  MenuItem menu_about = (MenuItem)menu.findItem(R.id.about);
                  
                  menu_about.setEnabled(flag);    // flagで、Enable/Disable状態を制御
                  return true;
          }
  

• 例えば、ファイルを開くまでは出来ない操作等は、Disableにしておくとか。

onPrepareOptionsMenuが呼ばれない

• なんか最初だけ呼ばれるんだけど、それ以降は呼ばれないみたいだ。
• ググって見ると、ActivityでinvalidateOptionsMenuを呼ぶと、onPrepareOptionsMenuが呼ばれてメニューが更新されるらしい。

• 設定変更する度に、いちいちinvalidateしなきゃいけないのは、なんか面倒だ。
• 設定とか別クラスでやってたりするので、その度にActivityで更新しなおすのは嫌だし

• 名前からして動的に設定するためのonPrepareだと思うんだけど、どうしてこんな仕様に¹⁴したんだろう？
• 結局、毎回メニュー表示前に纏めてやるしかないかなぁ。メニュー選択時にやればいいのかな。。

      @Override
      public boolean onMenuItemSelected(int featureId, MenuItem item) {
          this.invalidateOptionsMenu();
          return super.onMenuItemSelected(featureId, item);
      }
  

• うーん、これだと最初だけ更新されないなぁ。onPrepareはちゃんと呼ばれてるんだけど。間に合わないのかな。
• 続けてやると、ちゃんと次からは反映されるようになるから単純に間に合ってないわけじゃなさそうなんだけど。。
• 結局は、仕方ないので、メニューを変更しているクラスで、いちいちinvalidateするようにした。

• もっと良い方法がありそうなんだけど。これじゃ馬鹿みたいじゃないか。。
• 普通に常にPrepareしてくれよ¹⁵。。。

サブメニューにアイコンを付ける

• オーバーフローメニューにアイコンを付ける方法を調べたけど、分からなかった。
• サブメニューにアイコンを付けることは出来るので、サブメニューをオーバーフローのアイコンにすると見た目はそれらしくなる。

• メニューリソースの例

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

 <item
 android:id="@+id/item1"
 android:icon="@drawable/item1"
 android:showAsAction="always"
 android:title="@string/item1"/>

 <item
 android:id="@+id/item2"
 android:icon="@drawable/item2"
 android:showAsAction="always"
 android:title="@string/item2"/>

 <item
 android:id="@+id/item3"
 android:icon="@drawable/item3"
 android:showAsAction="always"
 android:title="@string/item3"/>

 <item
 android:id="@+id/overflow"
 android:icon="@drawable/overflow"
 android:showAsAction="always"
 android:title="@string/overflow">
         <menu>
                 <item
                 android:id="@+id/sub1"
                 android:icon="@drawable/sub1"
                 android:showAsAction="never"
                 android:title="@string/sub1"/>

                 <item
                 android:id="@+id/sub2"
                 android:icon="@drawable/sub2"
                 android:showAsAction="never"
                 android:title="@string/sub2"/>

                 <item
                 android:id="@+id/sub3"
                 android:icon="@drawable/sub3"
                 android:showAsAction="never"
                 android:title="@string/sub3"/>
        </menu>
 </item>

</menu>

Spinnerのリソース

• Spinnerは、メニューというか、ComboBoxのようなインターフェース
• まずSpinnerに表示するデータを用意する（res/values/strings.xml）

  <resources>
          <string name="app_name">CanvasTest</string>
          <string-array name="color_list">
              <item>Black</item>
              <item>Red</item>
              <item>Green</item>
              <item>Blue</item>
              <item>Cyan</item>
              <item>Magenta</item>
              <item>Yellow</item>
          </string-array>
  </resources>
  

• アクションバー上の表示用リソース（res/layout/spinner.xml）
• 普通のTextViewを置いただけだが、textColorを#FFFFFF（白色）にしておく

  <?xml version="1.0" encoding="utf-8"?>
  <TextView xmlns:android="http://schemas.android.com/apk/res/android"
      android:id="@+id/textView1"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="TextView"
      android:textAppearance="?android:attr/textAppearanceLarge"
      android:textColor="#ffffff" />
  

• ドロップダウン時の表示用リソース（res/layout/spinner_down,xml）
• TextViewのtextColorを白色にして、さらにpadding（Textの周りの余裕）の設定を追加

  <?xml version="1.0" encoding="utf-8"?>
  <TextView xmlns:android="http://schemas.android.com/apk/res/android"
      android:id="@+id/textView1"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:height="40dp"
      android:paddingLeft="10dp"
      android:paddingRight="40dp"
      android:textAppearance="?android:attr/textAppearanceLarge"
      android:textColor="#ffffff" />
  

Spinnerを使う

• Spinner用のリソースを用意したら、ActionBarにSpinnerを設定する

public class CanvasTest extends Activity
        implements OnNavigationListener {

        @Override
        public void onCreate(Bundle savedInstanceState) {
                super.onCreate(savedInstanceState);

                setContentView(R.layout.main);

                getActionBar().setDisplayShowTitleEnabled(false);
                getActionBar().setNavigationMode(ActionBar.NAVIGATION_MODE_LIST);
                ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource(this, R.array.color_list, R.layout.spinner);
                adapter.setDropDownViewResource( R.layout.spinner_down);
                getActionBar().setListNavigationCallbacks(adapter, this);
                getActionBar().setSelectedNavigationItem(pos)   //初期位置
        }

        @Override
        public boolean onNavigationItemSelected(int pos, long id) {
                Toast.makeText(this, "pos = " + pos, Toast.LENGTH_SHORT).show();
                return true;
        }
}

• まず、ActionBarのタイトル表示をしない様にして、モードを設定
• Spinnerのデータと表示方法をリソースで設定
• さらに、DropDown時の表示方法もリソースで設定
• あとは、リスト選択時のコールバックを設定？して、
• onNavigationItemSelectedメソッドで、選択時の動作を記述する
• 初期位置は無指定の場合、0（一番上）になる

Mouseの動きで描画

• Mouseの動きで描画するにはどうすれば良いんだろう
• CanvasとPathによる手書きViewの簡単な実装がとても分かりやすかったので、これに沿ってやってみる。

ViewにMouseで描画

• Mouseで描画可能なカスタムViewを作成する（src/CustomVew.java）
• Mouseの動きで、線（Path）を描画する

  package hm.orz.bluefish.canvastest;
  
  import android.content.Context;
  import android.graphics.Canvas;
  import android.graphics.Paint;
  import android.graphics.Path;
  import android.graphics.PorterDuff.Mode;
  import android.util.AttributeSet;
  import android.view.MotionEvent;
  import android.view.View;
  
  public class CustomView extends View {
          private Paint  paint;
          private Path  path;
  
          public CustomView(Context cont) {
                  super(cont);
                  initView();
          }
  
          public CustomView(Context cont, AttributeSet attr) {
                  super(cont,attr);
                  initView();
          }
  
          private void initView() {
                  path = new Path();
  
                  paint = new Paint();
                  paint.setColor(0xFF008800);
                  paint.setStyle(Paint.Style.STROKE);
                  paint.setStrokeJoin(Paint.Join.ROUND);
                  paint.setStrokeCap(Paint.Cap.ROUND);
                  paint.setStrokeWidth(10);
          }
  
          @Override
          protected void onDraw(Canvas c){
                  c.drawPath(path, paint);
          }
  
          @Override
          public boolean onTouchEvent(MotionEvent event) {
  
                  float x = event.getX();
                  float y = event.getY();
  
                  switch(event.getAction()){
                  case MotionEvent.ACTION_DOWN:
                          path.moveTo(x, y);
                          invalidate();
                          break;
                  case MotionEvent.ACTION_MOVE:
                          path.lineTo(x, y);
                          invalidate();
                          break;
                  case MotionEvent.ACTION_UP:
                          path.lineTo(x, y);
                          invalidate();
                          break;
                  }
                  return true;
          }
  
          @Override
          protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec){
                  int widthSize = MeasureSpec.getSize(widthMeasureSpec);
                  int heightSize = MeasureSpec.getSize(heightMeasureSpec);
                  setMeasuredDimension(widthSize,heightSize);
          }
  }
  

• コンストラクタで、Pathを生成して、色と線幅を設定する
  • Mouseをクリックしたところに、線の開始ポイントを移動して、
  • Mouseの動きに合わせて、線を描画する

プログラムによるレイアウト

• 作成したCustomViewを、Activityに直接置くだけなら、以下のようにすれば良い

public class CanvasTest extends Activity {

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(new CustomView(this));
  }
}

• せっかくなので、レイアウトして置きたいんだけど、どうすれば良いんだろうか？
• 普通は、XMLファイルを指定すれば良いんだけど。。

  setContentView(R.layout.main);
  

• でもこの場合に、CustomViewのViewを求める方法が分からない
  • 後々、ちょっかいを掛けたいので、個別のViewを求めたいんだけどなぁ。

• プログラムでレイアウトすれば、それぞれの部品のViewを求めることが出来るんだけど。。

        LinearLayout layout = new LinearLayout(this);
        setContentView(layout);

        final TextView   tv = new TextView(this);
        final CustomView cv = new CustomView(this);
        final Button     bt = new Button(this);

        tv.setHeight(150);
        tv.setText("Title");
        tv.setTextSize(50);
        tv.setGravity(1);
        bt.setHeight(200);
        bt.setText("Button");
        bt.setTextSize(50);
        layout.addView(tv);
        layout.addView(btn);
        layout.addView(cv);

• この方法では、レイアウトの設定がかなり面倒だ。。というか、やってられない。。。

• あとから考えてみると、単に以下のように記述すれば出来そうな気がするんだけど、（141005追記）

public class CanvasTest extends Activity {
  CustomView cv;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
    cv = (CustomView)findViewById(R.id.customView1);
  }
}

• Inflaterを使う必要は無いんじゃないか？ なんで出来ないと思ったんだろう。。

LayoutInflaterを使う

• いろいろ調べると、LayoutInflaterを使うとViewの設定を個別に出来る様だ（src/CanvasTest.java）
• これで、TextView,CustomView,ButtonのViewを、それぞれ tv,cv,btとして取得できる

  package hm.orz.bluefish.canvastest;
  
  import android.app.Activity;
  import android.os.Bundle;
  import android.view.LayoutInflater;
  import android.view.View;
  import android.view.View.OnClickListener;
  import android.widget.Button;
  import android.widget.TextView;
  import android.widget.Toast;
  
  public class CanvasTest extends Activity {
  
          @Override
          public void onCreate(Bundle savedInstanceState) {
                  super.onCreate(savedInstanceState);
  
                  LayoutInflater inflater = getLayoutInflater();
                  View layout = inflater.inflate(R.layout.main, null);
                  setContentView(layout);
  
                  TextView tv = (TextView)layout.findViewById(R.id.textView1);
                  CustomView cv = (CustomView)layout.findViewById(R.id.customView1);
                  Button bt = (Button)layout.findViewById(R.id.button1);
                  
                  bt.setOnClickListener(new OnClickListener() {
                          public void onClick(View v) {
                          Toast.makeText(CanvasTest.this, "Click!", Toast.LENGTH_LONG).show();
                  }
              });
          }
  }
  

• Inflaterの仕組みが、いまいち分かってないんだけど。。

• Layoutは、XMLファイルで指定すれば良い（res/layout/main.xml）

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

    <TextView
        android:id="@+id/textView1"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:gravity="center_vertical|center_horizontal"
        android:text="Title"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textSize="50sp"
        android:layout_weight="1"/>

    <hm.orz.bluefish.canvastest.CustomView
        android:id="@+id/customView1"
        android:layout_width="wrap_content"
        android:layout_height="500dp"
        android:layout_weight="10"/>

    <Button
        android:id="@+id/button1"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:text="Claer"
        android:textSize="50sp"
        android:layout_weight="1"/>

</LinearLayout>

LayoutInflaterについて

• LayoutInflaterは、基本的にはXMLのレイアウトを動的にセットするためのものらしい。

• 普通はsetContentViewしていないと、findViewByIdは使えないっぽい。
• でもLayoutInflaterを使えば、セットしていなくてもfindViewByIdが使えるみたいだ。（ここら辺は、ちょっと未確認だけど）

• 今のところ、動的にセットするために使っていないので、ViewGroupをnullにして使ってるけど、
• まぁこれは本来の使い方では無いのかもしれない。

• LayoutInflater関連参考
• LayoutInflaterの挙動のメモ
  • 親をちゃんと指定しないとダメな時もあるらしい
• LayoutInflaterについて勉強する

Databinding（250828追記）

• 自分は、以前はEclipseを使っていたが、最近、AndroidStudioに乗り換えたが、
• 忘れていることも多いが、いろいろ変わってしまったものも多いみたいだ。。

• AndroidStudioで、C++Nativeの新規プロジェクトを作ると、Databindingというものを使っている。
• LayoutInflaterで、XMLのレイアウトからViewオブジェクトを扱うことが出来るが、
• Databindingも同じような事をやっている様に見える

      private ActivityMainBinding binding;
  
      @Override
      protected void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
  
          binding = ActivityMainBinding.inflate(getLayoutInflater());
          setContentView(binding.getRoot());
  
          // Example of a call to a native method
          TextView tv = binding.sampleText;
          tv.setText(stringFromJNI());
      }
  

• でもソースを見ても、xmlファイル名を何処で指定しているのか良く分からない。
• ActivityMainBindingクラスというのは何だろう？

• いろいろ調べてみると、ActivityMainBindingクラスというのは、
• activity_main.xmlの名前を、キャメルケースに変換してBindingを付加した名前で、
• Databindingのクラスが生成されるということらしい¹⁶

• Databindingを使うには、
• build.gradleでdataBindingをtrueに設定する必要があるようだ

  android {
          ：
      buildFeatures {
          viewBinding = true
      }
  }
  

• で、build.gradleを確認してみると、上記のようにviewBindingをtrueにしている。
• viewBinding？、Databindingじゃないのか。。

• いろいろググって、自分が理解したところでは、こんな感じなのかな？
• xmlファイルのViewにアクセスするには、setContentViewで実体化しないと、findViewByIdを使ってViewを求められない
• LayoutInflaterを使って、xmlを実体化？¹⁷すれば、findViewByIdを使ってViewにアクセスできる ⇒ここまでが過去の自分の知識
• Databindingを使うと、xmlファイルから専用のクラスが作られて、findViewByIdを使わなくても、Viewに直接アクセスできる¹⁸ ⇒2015年ぐらいに登場
• Kotlin Android ExtensionsというXMLにアクセスできる仕組みもあったらしい（Kotlinからしか使えない。現在は非推奨） ⇒2017年ぐらいに登場
• Viewbindingは、基本的にはDatabindingと同じもので、機能を整理して軽量にしたものらしい ⇒2019年ぐらいから

• 最初は、また面倒なものを追加しやがってと思ったが、いちいちfindViewById使うのは面倒だったし、
• ちょっと使ってみたところでは、ソースもスッキリするのでなかなか良い感じ
• これからは、Databindingか、特に必要なければ Viewbindingを使うのが良いみたいだ

• DataBindingとViewBindingの使い方と使い分け
• KotlinAndroidExtensions(views)はやめてViewBindingを使おう
• ViewBindingの使い方と旧手法からの移行

オフスクリーン

• 画面に直接描画するんじゃなくて、表示されないCanvasに描いておいて、
• 表示画面に転送するようなやり方を、オフスクリーンとかダブルバッファとか言う

• オフスクリーン・キャンバスの利用によるお絵かきソフトの開発を参考にして、オフスクリーンを使ってみる

オフスクリーンの生成

• 表示用のCanvasとは別に、同じ大きさのCanvasを用意する。
• 実際に描画する実体のBitmapを生成して、Canvasに貼り付ける感じ

  Bitmap bitmap = Bitmap.createBitmap(width,height,Bitmap.Config.ARGB_8888);
  Canvas canvas = new Canvas(bitmap);
  

• Bitmap.config.ARGB_8888というのは、Bitmapの１ピクセルあたりのデータを定義している
• これ以外にも、以下のようなBitmapを定義することが出来るらしい

• View生成時にCanvasを生成すれば良いが、
• とりあえずは、onSizeChanged（Viewのサイズ変更時）で、オフスクリーンを生成する
  • これだと、画面の向きを変えた時も再生成されてしまうが、今回はそれでよしとする

オフスクリーンを使った描画

• オフスクリーンを使った描画の手順を考えてみる

• いままでは、Mouseの動きに合わせて、Pathを記録しながら描画していた
• Pathは１つしかないので、色を変えても全部の色が変わってしまう。

• 今度は、Pathを描き終わったら、オフスクリーンへも描画するようにする

• で、描き始める前に、オフスクリーンを表示画面にコピーしてから、
• その上に、追加で描画するようにする
• 最後に、やはりオフスクリーンに、表示画面が保存されることになる

• こうすると、オフスクリーンには、いままで描いた絵が保存され、
• Mouseで描いている間は、最後のPathのみ描くことになる

• 描いているPathの色を変えても、今まで描いた絵には影響しないし、
• onDrawで描くのは、最後のPathのみになるので、処理も軽くなる

オフスクリーンを使ったCanvas

• オフスクリーンを使って、カスタムViewを作り直してみる

package hm.orz.bluefish.canvastest;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

public class CustomView extends View {
        private Canvas canvas;
        private Bitmap bitmap;
        private Paint  paint;
        private Path   path;
        private Context appCont;

        public CustomView(Context cont) {
                super(cont);
                initView(cont);
        }

        public CustomView(Context cont, AttributeSet attr) {
                super(cont,attr);
                initView(cont);
        }

        private void initView(Context cont) {
                appCont = cont.getApplicationContext();

                path = new Path();
                paint = new Paint();
                paint.setStyle(Paint.Style.STROKE);
                paint.setStrokeJoin(Paint.Join.ROUND);
                paint.setStrokeCap(Paint.Cap.ROUND);
                paint.setStrokeWidth(10);
        }

        @Override
        protected void onDraw(Canvas c){
                c.drawBitmap(bitmap, 0, 0,null);
                c.drawPath(path, paint);
        }

        @Override
        protected void onSizeChanged(int w,int h,int oldw,int oldh) {
                bitmap = Bitmap.createBitmap(w,h,Bitmap.Config.ARGB_8888);
                canvas = new Canvas(bitmap);
        }

        @Override
        public boolean onTouchEvent(MotionEvent event) {

                float x = event.getX();
                float y = event.getY();

                switch(event.getAction()){
                case MotionEvent.ACTION_DOWN:
                        path.reset();
                        path.moveTo(x, y);
                        invalidate();
                        break;
                case MotionEvent.ACTION_MOVE:
                        path.lineTo(x, y);
                        invalidate();
                        break;
                case MotionEvent.ACTION_UP:
                        path.lineTo(x, y);
                        canvas.drawPath(path, paint);
                        path.reset();
                        invalidate();
                        break;
                }
                return true;
        }

        public void setColor(int color) {
                paint.setColor(color);
        }

        public void clearView() {
                canvas.drawColor(Color.TRANSPARENT, android.graphics.PorterDuff.Mode.CLEAR);
                invalidate();
        }

        @Override
        protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec){
                int widthSize = MeasureSpec.getSize(widthMeasureSpec);
                int heightSize = MeasureSpec.getSize(heightMeasureSpec);
                setMeasuredDimension(widthSize,heightSize);
        }
}

• clearViewメソッドは、Canvasをクリアするコマンドを調べて定義したんだけど、
  • この呪文のようなModeは何なんだろう？ ちゃんと動くんだけどね。。

Viewのメソッド呼び出し

• オフスクリーンを使ったViewを呼び出すActivityのプログラム
• Buttonで、Viewのメソッドを呼び出すようにしてみた

  package hm.orz.bluefish.canvastest;
  
  import android.app.ActionBar;
  import android.app.ActionBar.OnNavigationListener;
  import android.app.Activity;
  import android.graphics.Color;
  import android.os.Bundle;
  import android.view.LayoutInflater;
  import android.view.View;
  import android.view.View.OnClickListener;
  import android.widget.ArrayAdapter;
  import android.widget.Button;
  import android.widget.TextView;
  import android.widget.Toast;
  
  public class CanvasTest extends Activity
  implements OnNavigationListener {
  
          TextView tv;
          CustomView cv;
          Button bt;
  
          @Override
          public void onCreate(Bundle savedInstanceState) {
                  super.onCreate(savedInstanceState);
  
                  LayoutInflater inflater = getLayoutInflater();
                  View layout = inflater.inflate(R.layout.main, null);
                  setContentView(layout);
  
                  tv = (TextView)layout.findViewById(R.id.textView1);
                  cv = (CustomView)layout.findViewById(R.id.customView1);
                  bt = (Button)layout.findViewById(R.id.button1);
  
                  bt.setOnClickListener(new OnClickListener() {
                          public void onClick(View v) {
                                  Toast.makeText(CanvasTest.this, "Click!", Toast.LENGTH_LONG).show();
                                  cv.clearView();
                          }
                  });
  
                  getActionBar().setDisplayShowTitleEnabled(false);
                  getActionBar().setNavigationMode(ActionBar.NAVIGATION_MODE_LIST);
                  ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource(
                                  this, R.array.color_list, R.layout.spinner);
                  adapter.setDropDownViewResource( R.layout.spinner_down);
                  getActionBar().setListNavigationCallbacks(adapter, this);
          }
  
          @Override
          public boolean onNavigationItemSelected(int pos, long id) {
                  Toast.makeText(this, "pos=" + pos, Toast.LENGTH_SHORT).show();
                  int color = Color.WHITE;
                  switch(pos){
                  case 0: color = Color.BLACK; break;
                  case 1: color = Color.RED; break;
                  case 2: color = Color.GREEN; break;
                  case 3: color = Color.BLUE; break;
                  case 4: color = Color.CYAN; break;
                  case 5: color = Color.MAGENTA; break;
                  case 6: color = Color.YELLOW; break;
                  }
                  cv.setColor(color);
                  return true;
          }
  }
  

• CustomViewのメソッドにアクセスするために、inflaterを使って、CustomViewのViewを個別に取得している
  • Buttonで、画面クリアするために、clearViewを呼び出している
• 色の設定は、ActionBar上にSpinnerDropDownリストで選択して、setColorを呼び出す
  • 前述の、 Spinnerのリソースをそのまま使用した。Spinnerの使い方はそちらを参照

Viewの保存

• ViewをPNGファイルとして保存する saveAsPngImageメソッドを追加する

        public void saveAsPngImage(){
                try {
                        File extStrageDir =
                                        Environment.getExternalStorageDirectory();
                        File file = new File(
                                extStrageDir.getAbsolutePath() + "/" + Environment.DIRECTORY_DCIM,
                                getFileName());
                        FileOutputStream outStream = new FileOutputStream(file);
                        bitmap.compress(CompressFormat.PNG, 100, outStream);
                        outStream.close();

                        Toast.makeText(appCont,"Image saved",Toast.LENGTH_SHORT).show();
                } catch (FileNotFoundException e) {
                        Toast.makeText(appCont,"FileNotFoundException!!",Toast.LENGTH_SHORT).show();
                        e.printStackTrace();
                } catch (IOException e) {
                        Toast.makeText(appCont,"IOException!!",Toast.LENGTH_SHORT).show();
                        e.printStackTrace();
                }
        }

        protected String getFileName(){
                Calendar c = Calendar.getInstance();
                String s = c.get(Calendar.YEAR)
                                + "_" + (c.get(Calendar.MONTH)+1)
                                + "_" + c.get(Calendar.DAY_OF_MONTH)
                                + "_" + c.get(Calendar.HOUR_OF_DAY)
                                + "_" + c.get(Calendar.MINUTE)
                                + "_" + c.get(Calendar.SECOND)
                                + "_" + c.get(Calendar.MILLISECOND)
                                + ".png"; 
                return s;
        }

• StrageDir（普通は/sdrom/）の下のDCIMフォルダに日付を表すファイル名で保存する

• でも、FileNotFoundExceptionになってしまい、保存出来ない。
• しばらく悩んだんだけど、結局、AndroidManifestにパーミッションの設定を加える必要があるらしい

  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
  

ファイルアクセス（250803追記）

• Androidのファイルアクセスは、いろいろ変遷があって以前の方法では、共有ストレージにアクセス出来なくなったみたい
• 現状での、基本的なやり方をあらためてまとめておく。

• プログラムは、 共有ストレージでのファイル操作(API30以降)の内容ほぼそのままです。。

• Android対象範囲別ストレージの導入と外部ストレージにおけるファイルアクセス制限

共有ストレージのファイルにアクセスする

• 標準ファイルピッカーでURIを取得する場合（ACTION_OPEN_DOCUMENTを使う）

Intent intent = new Intent(Intent.ACTION_OPEN_DOCUMENT);
intent.addCategory(Intent.CATEGORY_OPENABLE);
intent.setType("*/*"); // ここでは全てのファイルタイプを許可、Textなら（"text/plain")のように指定

startActivityForResult(intent, READ_REQUEST_CODE);

• 書き込みの場合は、Intent.ACTION_CREATE_DOCUMENTを使う
  

• 暗黙的インテントでアプリを使って取得する場合

Intent intent = new Intent(Intent.ACTION_PICK, MediaStore.Images.Media.EXTERNAL_CONTENT_URI);
intent.setType("image/*");      // 画像ファイルを指定

startActivityForResult(intent, READ_REQUEST_CODE);

• URIを取得してファイルを処理する

@Override
public void onActivityResult(int requestCode, int resultCode, Intent resultData) {
    if (requestCode == READ_REQUEST_CODE && resultCode == Activity.RESULT_OK) {
        if (resultData != null) {
            Uri uri = resultData.getData();
            // URIを使ってファイル処理
        }
    }
}

URIの表示

• URIを表示する

String uritext = String.format(Locale.US, "Uri: %s", uri.getPath());
textView.setText(uritext);
Log.i(TAG, ">>>> File > " + uritext);

ファイル削除

• URIで指定されたファイルを削除する

try {
        DocumentsContract.deleteDocument(this.getContentResolver(), uri);
} catch (FileNotFoundException e) {
        e.printStackTrace();
}

• ContentProvider,ContentResolverは、Androidのデータを管理・利用するためのものらしい

Textファイル読み込み

• URIで指定されたTextファイルをtextViewに読み込む

StringBuilder text = new StringBuilder();
try(InputStream inputStream = getContentResolver().openInputStream(uri);
        InputStreamReader inputStreamReader = new InputStreamReader(inputStream);
        BufferedReader reader = new BufferedReader(inputStreamReader)) {
        String lineBuffer;
        lineBuffer = reader.readLine();
        while (lineBuffer != null) {
                text.append(lineBuffer).append("\n");
                lineBuffer = reader.readLine();
        }
        Log.i(TAG, ">>>> Read> [" + text + "]");
        textView.setText(text.toString());
} catch(Exception e) {
        e.printStackTrace();
}

Textファイル書き込み

• URIで指定されたTextファイル名で、textdataを書き込む

try(OutputStream outputStream = getContentResolver().openOutputStream(uri)) {
if(outputStream != null){
        outputStream.write(textdata.getBytes());
}

} catch(Exception e){
        e.printStackTrace();
}

Imageファイル読み込み

• URIで指定されたImageファイルをimageViewに読み込む

try(InputStream inputStream = getContentResolver().openInputStream(uri);
        BufferedInputStream bufferedInputStream = new BufferedInputStream(inputStream)) {
        Bitmap bitmap = BitmapFactory.decodeStream(bufferedInputStream);
        imageView.setImageBitmap(bitmap);
} catch(Exception e){
        e.printStackTrace();
}

• MediaStoreを使う方法

try {
        Bitmap bitmap = MediaStore.Images.Media.getBitmap(getContentResolver(), uri);
        imageView.setImageBitmap(bitmap);

} catch (IOException e) {
        e.printStackTrace();
}

Imageファイル書き込み

• URIで指定されたImageファイル名でimagedataを書き込む

imagedata = BitmapFactory.decodeResource(getResources(), R.drawable.imagesample);
imageView.setImageBitmap(imagedata);

try(OutputStream outputStream = getContentResolver().openOutputStream(uri)) {
        if(outputStream != null){
                imagedata.compress(Bitmap.CompressFormat.JPEG, 100, outputStream);
        }
} catch(Exception e){
        e.printStackTrace();
}

共有ストレージのフォルダを選択

• 標準フォルダピッカーで作業フォルダを選択の準備（ACTION_OPEN_DOCUMENT_TREEを使う）
• 選択された場合、システムに作業フォルダを保存する

  intent_getFolder = new Intent(Intent.ACTION_OPEN_DOCUMENT_TREE);
  launcher_getFolder= registerForActivityResult(
      new ActivityResultContracts.StartActivityForResult(),
      result -> {
          if (result.getResultCode() == Activity.RESULT_OK && null != result.getData()) {
              Uri uri = result.getData().getData();
              if (uri != null) {
                  workUri = uri;
                  // WorkUri ⇒ workUri.toString()
                  Toast.makeText(this, "WorkUri path="+workUri.getPath(), Toast.LENGTH_SHORT).show();
  
                  // takePersistableUriPermissionでシステムにフォルダのURIを保存する
                  getContentResolver().takePersistableUriPermission(workUri,
                          (Intent.FLAG_GRANT_READ_URI_PERMISSION | Intent.FLAG_GRANT_WRITE_URI_PERMISSION));
  
                  workDir = DocumentFile.fromTreeUri(getApplicationContext(), workUri);
                  Toast.makeText(this, "WorkDir="+workDir.getName(), Toast.LENGTH_SHORT).show();
  
              } else {
                  Log.i(TAG, "フォルダが選択されていません");
              }
          }
      }
  );
  

• ただのActivityを継承したクラスでは、registerForActivityResultは使えない。
• 例えばAppCompatActivityを継承したクラスなら使える

• 作業フォルダ選択を実行する

    private void assignWorkDir() {
        intent_getFolder.addFlags(FLAG_GRANT_READ_URI_PERMISSION);
        launcher_getFolder.launch(intent_getFolder);
    }

システムに保存された作業フォルダの読み出し

• システムに保存された作業フォルダを確認して、未設定時は設定を促す

String message;
// getPersistedUriPermissionsでシステムに保存されたフォルダのURIを読みだす
List<UriPermission> permissionlist = getContentResolver().getPersistedUriPermissions();

if (permissionlist.size()!=0 && permissionlist.get(0).getUri()!=null) { // 設定済の場合
    workUri = permissionlist.get(0).getUri();
    DocumentFile dir = DocumentFile.fromTreeUri(getApplicationContext(), workUri);
    if (dir != null && dir.getName() != null && dir.exists()) {
        workDir = dir;

        assignOwnDir.setEnabled(false);
        message = "作業フォルダ： [" + workDir.getName() +"]";
    } else {
        message = "作業フォルダを設定してください";
    }
} else {
    message = "作業フォルダを設定してください";
}
textview.setText(message);

• 例えば、再起動時にonResumeで実行する

フォルダ内ファイル一覧

• フォルダ内のファイル一覧を求める

private void showOwnFolder() {
    if (workDir == null) return;
    StringBuilder message = new StringBuilder(workDir.getName() + "\n");
    for (DocumentFile docfile : workDir.listFiles()) {
        if (docfile.isFile()) {
            message.append("  ").append(docfile.getName()).append("\n");
        }
    }
    textview.setText(message.toString());
}

フォルダ内全ファイル消去

• フォルダ内の全部のファイルを消去する

private void deleteAllFiles() {
    if (workDir == null) return;
    for (DocumentFile docfile : workDir.listFiles()) {
        if (docfile.isFile()) {
            docfile.delete();
        }
    }
    textview.setText("全てのファイルを消去しました");
}

フォルダへのファイル保存

• 指定フォルダへのTextファイル保存・既存ファイルがあれば上書き

private void saveFile(DocumentFile dir, String filename, String text) {
    DocumentFile file = dir.findFile(filename);
    if (file == null) {//ファイルがなかった
        file = dir.createFile("*.*", filename);
    }
    assert file != null;
    saveFile0(file.getUri(),text);
}

• 指定フォルダの既存ファイルにText追記・既存ファイルが無ければ、単にファイル保存する

private void appendFile(DocumentFile dir, String filename, String text) {
    DocumentFile file = dir.findFile(filename);
    if (file == null) {
        file = dir.createFile("*.*", filename);
    }
    assert file != null;
    appendFile0(file.getUri(),text);
}

• Text上書き保存ルーチン

private void saveFile0(Uri uri, String text) {
    try {
        // w指定だけだと、上書きするファイルが小さい時、既存ファイルの後半が残るので、t指定で切り捨てる
        OutputStream out = getContentResolver().openOutputStream(uri, "wt");
        out.write(text.getBytes());
        out.close();
    } catch (Exception e) {
        e.printStackTrace();
    }
}

• Text追記保存ルーチン

private void appendFile0(Uri uri, String text) {
    try {
        // wa指定で、追記書き込みとなる
        OutputStream out = getContentResolver().openOutputStream(uri,"wa");
        out.write(text.getBytes());
        out.close();
    } catch (Exception e) {
        e.printStackTrace();
    }
}

その他

Toast

• 短いメッセージを短時間表示する

Toast.makeText(this,"基本的な使い方",Toast.LENGTH_SHORT).show();

• ナビゲーションバーを非表示にする¹⁹ｂ

View decorView = getWindow().getDecorView();

int uiOptions = View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
              | View.SYSTEM_UI_FLAG_FULLSCREEN;
decorView.setSystemUiVisibility(uiOptions);

• View.SYSTEM_UI_FLAG_VISIBLEで表示

• 参考
• KitKat(Android4.4)のUIについて

まとめ

• というか、例によって感想だけど、

• Androidは、いろいろ面倒な手続きが多い気がする
• リソースをXMLで書かなきゃ²⁰いけないし、デフォルトの設定だと、ちょっと見づらかったり
• Inflaterとか、Intentとか、Adapterとか、Holderとか、独自の用語、仕組みが多すぎる

• マルチウィンドウでも無いわけなので、プログラム構造的にはWindowsより簡単で良いと思うんだけど。。
• もうちょっと、シンプルなものにして欲しかったなぁ。

• でも、オフスクリーンが作れることが分かったので、自分の作りたいプログラムが出来そうな気がしてきた。
• まぁ、わかんないことは、まだまだ、いろいろあるんだけど。

エラーメッセージ

Error parsing XML: not well-formed (invalid token)

• リソース定義の、XMLファイルのフォーマットに誤りがあるというエラー

• このエラーが出て、実際、xmlファイルのフォーマットが間違っていたんだけど、
• 直した後、エラーマークが出ないのに、パッケージエクスプローラのエラーが消えない

  エラー: Error parsing XML: not well-formed (invalid token)
  

• 結局、すべて保管とか、Cleanとか、全体を一旦コピーしてPasteし直して保管とか
• いろいろやってる内に直った。原因不明²¹

• フォーマットが正しいのに、このエラーになる場合、
• 一旦、エラー部分を全部Cutして、エラーが無いことを確認してから、もう一度、Pasteすると直るみたいだ。

No speakable text present

• レイアウトファイルで、赤く表示されるのでエラーかと思ったが、補助機能用の説明がないためのワーニングらしい

android:contentDescription="機能の説明等"

• 例えば、こんな感じで説明を追加すれば良い

ClassCastException

• FloatingActionButtonを使って、setOnClickListenerしようとしたら、

findViewById<Button>(R.id.fab).setOnClickListener { ... }

• 実行時に、エラーでアプリケーションが落ちる
• LogCatで、FATAL EXCEPTIONを追ってみると、以下のようにClassCastExceptionが出ている

  Caused by: java.lang.ClassCastException: com.google.android.material.floatingactionbutton.FloatingActionButton
   cannot be cast to android.widget.Button
  

• ＜Button＞を＜FloatingActionButton＞に書き換えたら、直った

findViewById<FloatingActionButton>(R.id.fab).setOnClickListener { ... }

NullPointerException

• 未定義のオブジェクトにアクセスしたというエラー。

Caused by: java.lang.NullPointerException: Attempt to invoke virtual method     ...

• これは分かりやすいので、このエラーの場合、むしろ安心する。²²

No such file or directory

• アプリ起動時に、LogCat に No such file or directory がやたら出るけど、

 LB                      com.example.projectname              E  fail to open node: No such file or directory

• 何が出しているのか良く分からない。起動後は出ないし、特に問題は起こっていないけど。。 ⇒未解決

参考

• 美しいOnClickListenerの実装方法 →OnClickListenerのいろいろな実装方法を比較されている

• 自作のViewを作成してxmlファイルでレイアウト →この記事のおかげで、Viewを自由にレイアウトできるようになった

• オリジナル・ウィジットを作ろう →上記と同様の記事。後から見つけた。