平凡エンジニアからの出発

一に努力、二に理想、三に積小為大。

【AndroidTraining】EditText 1

Lesson

EditText 1

Mission

下記の仕様を満たすアプリを作りましょう。

  • ユーザーが入力した文字を画面に表示する

Snap Shot

f:id:atuyan39:20210406233257p:plainf:id:atuyan39:20210406233302p:plainf:id:atuyan39:20210406233308p:plain

Step by Step

  1. 新しくActivity(TrainingEditTextActivity.java)を追加する。
  2. xmlに、TextView, EditView, ButtonのViewを追加する。
  3. Viewを取得する
        // Viewを取得する
        TextView textView = findViewById(R.id.edit_text_1_text);
        EditText editText = findViewById(R.id.edit_text_1_edit_text);
        Button button = findViewById(R.id.edit_text_1_button);

4 . ボタンのクリックリスナーを設定する

        // Buttonのクリック時の処理を追加する
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
              // 処理
            }
        });

5 . TextViewにEditTextに入力された値を設定する

                // TextViewにEditTextに入力された値を設定する
                textView.setText(editText.getText());

ラムダ式だと読みやすい

        // ※ラムダ式を使う場合
        // button.setOnClickListener(v -> textView.setText(editText.getText()));

Code

EditText 1 · atuyan39/AndroidTraining@ad0d836 · GitHub

Reference

EditText

EditText  |  Android Developers

属性(android:autofillHintsandroid:hint)を追加しないと注意される。

Memo

レイアウトは自由に。

【AndroidTraining】ListView 2

Lesson

ListView 2

Mission

下記の仕様を満たすアプリを作りましょう。

  • 動的に、ListViewに曜日の一覧を表示する。

Snap Shot

f:id:atuyan39:20210405234532p:plain
ListView 2

Step by Step

1 . ListView 1で作ったコードのxmlからentriesの属性を消去する
2 . リストを用意する

 // ListViewに表示するリストを用意します。
        List<String> list = new ArrayList<>();
        list.add("月曜日");
        list.add("火曜日");
        list.add("水曜日");
        list.add("木曜日");
        list.add("金曜日");
        list.add("土曜日");
        list.add("日曜日");

3 . ListViewのViewを取得する

        // ListViewのViewを取得します。
        ListView listView = findViewById(R.id.list_view);

4 . Adapterを作成する

        // ListViewにリストをセットするために、Adapterを用意します。
        // android.R.layout.simple_list_item_1は、Androidがすでに用意しているリソースになります。
        // →TextViewがあるLayoutというシンプルなレイアウト。
        ArrayAdapter<String> adapter = new ArrayAdapter<>(this, android.R.layout.simple_list_item_1, list);

5 . ListViewにAdapterをセットする

        // ListViewに作成したAdapterをセットして完了。
        listView.setAdapter(adapter);

Code

ListView 2 · atuyan39/AndroidTraining@620e551 · GitHub

Reference

レイアウトについて勉強(前編)

developer.android.com

View=ウィジェット

View オブジェクトは、通常「ウィジェット」と呼ばれ、Button や TextView など、多くのサブクラスのいずれかになります。

ViewGroup=レイアウト

ViewGroup オブジェクトは、通常「レイアウト」と呼ばれ、LinearLayout や ConstraintLayout など、さまざまなレイアウト構造を提供する多くのタイプのいずれかになります。

責務を分けることが大事

XML で UI を宣言すると、アプリの動作を制御するコードから、アプリの表示を切り離すことができます。また、XML ファイルを使用することで、画面サイズと画面の向きに合わせてさまざまなレイアウトを簡単に提供できます

Viewリソースとは?

アプリをコンパイルすると、各 XML レイアウト ファイルは View リソースにコンパイルされます。

属性=attributes

View オブジェクトと ViewGroup オブジェクトはすべて、独自のさまざまな XML 属性をサポートしています。

コンパイルによって、参照しやすくなる

アプリがコンパイルされると、この ID が整数として参照されますが、この ID は通常、レイアウト XML ファイルの id 属性で、文字列として割り当てられます。

@+に、そんな意味があったのか。。

android:id="@+id/my_button"
文字列の先頭にあるアットマーク(@)は、XML パーサーが残りの ID 文字列をパースして展開し、ID リソースとして識別する必要があることを示します。プラス記号(+)は、これが新しいリソース名であり、リソースを作成して追加する(R.java ファイル内)必要があることを示します。

XMLパーサ : XMLファイルの中身を使いやすい形に整形してくれるプログラム
from : https://wa3.i-3-i.info/word13628.html

すでにAndroidリソースIDが振ってあるものは、@android:を付ける。

Android リソース ID を参照するときは、プラス記号は必要ありませんが、次のように android パッケージ名前空間を追加する必要があります。
android:id="@android:id/empty"
android パッケージの名前空間を指定することで、ローカル リソースクラスではなく、android.R リソースクラスの ID を参照するようになります。

idはスネークケースsnake_caseが公式?

android:id="@+id/my_button"

Relativelayoutで必須

ビュー オブジェクトの ID を定義することは、RelativeLayout を作成する際に重要です。相対レイアウトでは、兄弟ビューは一意の ID によって参照される別の兄弟ビューに対して相対的にレイアウトを定義できます。

いつか記事にまとめたい

Android Studio 3.6 以降では、ビュー バインディング機能を使用して...

親のViewGroupの属性を子のViewは引き継ぐが、子のViewGroupの属性は親の属性を引き継ぐわけではない、ということか?

すべての ViewGroup クラスでは、ViewGroup.LayoutParams を拡張するネストされたクラスが実装されます。このサブクラスには、各子ビューのサイズと位置を ViewGroup に合うように定義するプロパティ タイプが含まれています。

いつもお世話になっております

wrap_content は、ビューのサイズをそのコンテンツに必要なサイズにします。 match_parent は、ビューのサイズを親ビューグループで許容される最大サイズにします。

Memo

Android Developerをゆっくり読む時間がなかなか取れないが、結構面白い。

【AndroidTraining】ListView 1

Lesson

ListView 1

Mission

下記の仕様を満たすアプリを作りましょう。

  • ListViewに曜日の一覧を表示する。

Snap Shot

f:id:atuyan39:20210404225844p:plain
ListView 1

Step by Step

  1. 新規にEmptyActivityとしてTrainingListViewActivityを追加する。(自動でxmlはimportされる)
  2. R.layout.activity_training_list_viewにListViewを追加する(android:id="@+id/list_view")
    →Desine > palette > ListViewのウィジェットをドラック&ドロップ > 制約(constraint)をつける
  3. strings.xmlに配列リソースを定義する。
    <string-array name="week">
        <item>Monday</item>
        <item>Tuesday</item>
        <item>Wednesday</item>
        <item>Thursday</item>
        <item>Friday</item>
        <item>Saturday</item>
        <item>Sunday</item>
    </string-array>

4 . 追加したListViewの属性にandroid:entries="@array/week"を追加する。

Code

AndroidTraining/TrainingListViewActivity.java at main · atuyan39/AndroidTraining · GitHub

Reference

文字列リソースについての詳しい説明

https://developer.android.com/guide/topics/resources/string-resource?hl=ja

Memo

動的にコードする方法は次回行います。

HTMLが使えるとのことだったので、試してみた。
太字、イタリック、拡大、縮小はarray-stringで指定出来た。

    <string-array name="week">
        <item><b>Monday</b></item>
        <item><i>Tuesday</i></item>
        <item><big>Wednesday</big></item>
        <item><small>Thursday</small></item>
        <item><s>Fri</s>day</item>
        <item><u>Saturday</u></item>
        <item>Sunday</item>
    </string-array>

f:id:atuyan39:20210404232128p:plain
ListView書式変更

書式設定を適用していない場合は、setText(java.lang.CharSequence) を呼び出して TextView テキストを直接設定できます。

とのこと。

【AndroidTraining】Button 1

Lesson

Button 1

Mission

下記の仕様を満たすアプリを作りましょう。

  • Buttonを押下すると、Toastを表示する

Snap Shot

f:id:atuyan39:20210402001059p:plain
Button 1

Step by Step

  1. src\main\res\layout\activity_main.xmlにButtonを追加する(android:id="@+id/button")
    →Desine > palette > Buttonのウィジェットをドラック&ドロップ > 制約(constraint)をつける
  2. findViewId(R.id.button)を使い、ButtonのViewを取得する
    R.layout.activity_mainに定義されているidのView(TextView)を取得する。
  3. Buttonに対して、View.OnClickListenerを設定する
        Button button = findViewById(R.id.button);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // Button押下時の処理を記載する
            }
        });

4 . Toastを表示する

Toast.makeText(getApplicationContext(), "Click!!", Toast.LENGTH_SHORT).show();

Code

AndroidTraining/Button/app/src/main at main · atuyan39/AndroidTraining · GitHub

Reference

https://developer.android.com/guide/topics/ui/controls/button?hl=ja

https://developer.android.com/guide/topics/ui/notifiers/toasts?hl=ja

Memo

実装の方法は色々とあるので、覚えておきましょう。

ラムダ式活用

        Button button = findViewById(R.id.button);
        button.setOnClickListener(v -> {
            // Button押下時の処理を記載する
            Toast.makeText(getApplicationContext(), "Click!!", Toast.LENGTH_SHORT).show();
        });

◆layout側でandroid:onClick属性を追加をすることで、setOnClickListenerを記載不要になります。

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        android:onClick="showToast"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView" />
public class MainActivity extends AppCompatActivity {

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

    public void showToast(View view) {
        Toast.makeText(getApplicationContext(), "Click!!", Toast.LENGTH_SHORT).show();
    }
}

【AndroidTraining】TextView 2

Lesson

TextView 2

Mission

下記の要求を満たすアプリを作りましょう。

  • onCreate内で、「See You!!」をsetTextして、画面の中央に表示

Snap Shot

f:id:atuyan39:20210401005952p:plain
TextView 2

Step by Step

  1. src\main\res\layout\activity_main.xmlのTextViewにidを付与する
  2. src\main\res\values\strings.xmlに、keyとValue(See You!!)を設定する
  3. findViewId(R.id.XXXXX)を使い、TextViewを取得する
    →Activityに設定されたR.layout.activity_mainに定義されているidのView(TextView)を取得する。
  4. TextView#setText(R.string.XXXXX)で設定する

Code

https://github.com/atuyan39/AndroidTraining/tree/main/TextView/TextView1/app/src/main

Reference

onCreate
Androidシステムが最初にActivityを作成する際に呼ばれるコールバック。

f:id:atuyan39:20210401001201p:plain
図 1. アクティビティのライフサイクルに関する簡略な図

※詳しくは公式のリファレンス参照

アクティビティのライフサイクルについて  |  Android デベロッパー  |  Android Developers

setText
TextViewにテキストを設定するメソッド。

TextView  |  Android Developers

Memo

emulatorのスクショの保存場所忘れないように!
git mergeの使い方ようやくわかった?

【AndroidTraining】TextView 1

Lesson

TextView 1

Mission

下記の要求を満たすアプリを作りましょう。

Code

https://github.com/atuyan39/AndroidTraining/tree/main/TextView/TextView1

Reference

https://developer.android.com/reference/android/widget/TextView

Memo

Empty Activityを選択した際に自動で作られる。

Androidアプリを作ろう! part2

目次

機能仕様

ほしいもの情報一覧表示

  • ほしいもの情報一覧を表示する

一覧には、下記のほしいもの情報を表示する。

一覧に表示するほしいもの情報
登録日
ほしいもの
優先度
手に入れたかどうか
  • ほしいもの情報のソートができる
    • 登録順(デフォルト)
    • 種別順
    • 優先度順
    • 手に入れたもの/手に入れていないもの

ほしいもの情報の追加/削除/更新

  • ほしいもの情報を追加する
  • ほしいもの情報を削除する
  • ほしいもの情報を更新する
ほしいもの情報の構成 詳細
ほしいもの ほしいものの名前を設定する
種別 ほしいものの種類を設定する
優先度 S, A, B, Cの優先度を設定する
手に入れたかどうか ほしいものが手に入ったかを設定する
メモ 自由記入欄

ほしいもの情報の種別の追加/削除

  • ほしいもの情報の種別を追加する
  • ほしいもの情報の種別を削除する

ほしいもの情報の完全消去

  • 登録したすべてのほしいもの情報をデータベースから消去する

データ出力

  • csv形式でデータベースの情報を外部に出力することができる

メモ

機能仕様書の書き方 - Qiita
「非機能仕様(非機能要件)」の存在に気付く。
非機能要件について、調べてみる。

非機能要件とは?顧客の隠れた要件を引き出すための4つのポイント

非機能要件とは、システムを構築するに当たり、性能面やセキュリティ面等において実現するべき要件であり、顧客が潜在的に持っている「隠れた要件」のことです。(略)

それに対して、「画面が表示されるまでの待ち時間は3秒以内」や「障害復旧時は、障害発生時点とすべて同じ状態に戻して欲しい。」、「全社員が一斉にアクセスしても、システムがダウンしないようにして欲しい。」等、性能面を始めとするシステムの安心・安全を実現するために必要な要件が「非機能要件」なのです。(略)

「非機能要件」とは、前章でも説明したように、顧客の目に見える要件の裏に隠れた「機能要件以外の要件」のことです。(略)

「非機能要件」とは、システムが安心、安全に稼働するためには「あって当然」「普通に動いて当然」と、顧客が無意識のうちに思っている、言ってみれば、システム上の「縁の下の力持ち」的な要件であり、システムに必要不可欠な「質」の部分を支える要件なのです。

f:id:atuyan39:20210104102759p:plain
非機能要求グレートの6大項目

(基本情報の知識が役に立つ時が来た。。。
このアプリに関しては、「性能・拡張性」「セキュリティ」意識しよう。
非機能要件の文章化されたイメージができていないため、実装しつつ最後にまとめる。

TODO

  • アプリ名を考えよう
  • 日本語と英語で対応しよう
  • ダークモード対応。。。できたらやる
  • 画面設計書作る

作業時間

今日:2h
通算:9h
※構想練ったり、このブログ立ち上げたりするのに使った5hも追加。