トップ   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS

数字の入力 の履歴の現在との差分(No.1)


  • 追加された行はこの色です。
  • 削除された行はこの色です。
#author("2024-06-05T22:24:12+09:00","","")
''このページは,古いバージョンのAndroidStudioに沿った説明になっています.''~
''新しいバージョンで動作するか未確認,かつ,未更新の部分もあるので,参考にする場合はそれを踏まえておいてください.''

#author("2024-06-06T16:53:46+09:00","","")
** 数字の入力 [#ve4275ab]
*** 新しいプロジェクトの準備 [#s9b3606f]
*** 入力欄の準備 [#s9b3606f]

画面上に入力欄を作って,数字やテキストを入力できるようにします.~
#BR

少し画面がごちゃごちゃしてきたので,新しくProjectを作り直します.
[[プログラムの作り方]]のところでやったのと同じように,Projectを作成します.Androidのバージョンやactivityの種類も全く同じです.

*** レイアウト方法 [#a47ed21e]

前回のレイアウト方法は,ある一つの基準をもとに相対的に他のパーツの配置を決めていく「RelativeLayout」でした.今回は,水平方向・垂直方向にパーツを配置していく「LinearLayout」を使用します.~
#BR
まず,&color(red){activity_main.xml};を開きます.左上にある「Hello World!」は使わないので消しておきます.~
#BR
次に,画面左側の Paletteの中に「Layouts」の個所があるので,その中から「LinearLayout(horizontal)」を選択して画面上に配置します.
図1が配置後の様子です.~
IDの欄が空白になっていますので「LinearLayout1」と入れておいてください.

#BR
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/5-1.png, ,60%)
CENTER:図1
#BR

次に,Widgetsの中にあるテキスト(TextView)を配置してください.配置後,Propertiesの欄の
まず,Widgetsの中にあるテキスト(TextView)を配置してください.配置後,Propertiesの欄の
- IDを「entrance_year」にかえてください.文字の内容はなんでもいいです.
- textを「入学年」にかえてください.文字の内容はなんでもいいです.
-- strings.xmlに,たとえば「<string name="entrance_text">入学年</string>」と追記するような形で.

#BR
これは,入力欄の見出しになります.実際の数字の入力欄は,Palette欄のTextの中にある Plain Text(EditText)で作成します.Plain Textを「入学年(TextView)」の近くに配置してください.図1では「こんばんは」と「こんにちは」の間に見出しと入力欄を配置しています.

これは,入力欄の見出しになります.実際の数字の入力欄は,TextFields(EditText)の中にある Plain Textで作成します.Plain Textを「入学年(TextView)」の近くに配置してください.図2左下の,Component Treeの LinearLayout上に持っていくと配置しやすいです.

#BR
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/5-2.png, ,60%)
CENTER:図2
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/5-1.png,600x400)
CENTER:図1
#BR

IDは「editText1」,textは「西暦」にしておいてください.
これらの配置後に,linearLayoutの layout_heightの欄で「wrap_content」を選択します(先に選択してしまうとややこしくなるので,文字等の配置後に変更します).
EditTextのIDは「year_text」,textは「西暦」にしておいてください.~
配置場所は自由にしてもらっていいです.~

#BR
ボタンは「[[ボタンの追加]]」のところで作ったものを再利用します.~
ボタンのIDは「press_button」です.

その他の入力欄を作成します.~
入学年の下に,新しくLinearLayoutを配置して,まったく同じように
IDに「LinearLayout2」を設定します.layout_heightの欄に「wrap_content」を設定するのは,以下の文字の配置後です.~
「入学年」のときと同じように,「今日の日付」というPlain Textを配置してください.IDは好きな文字列でOKです.ここでは「today」というIDにしておきます.

#BR

最後に,ボタンを二つ配置します.一つは「今日の日付」の横に配置してください.このボタンのIDを「date」とします.~
もう一つは,画面の下側に配置します.IDは「button」とします.
ボタン類の配置を完了したイメージが図2です.

#BR

ボタン類の配置を完了したイメージが図3です.

#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/5-2.png,600x400)
CENTER:図2
#BR
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/5-3.png, ,60%)
CENTER:図3
#BR

計算ボタンの下に,もう一つtextViewを配置して,計算結果を表示する場所を用意します.IDは「result」とします.


*** 入力した数字の取得 [#tcbd1d90]

EditText欄に入力されたテキストは,下記の方法で取得できます.
EditText欄に入力されたテキストは,下記の方法で取得できます.~
下記の内容を&color(red){MainActivity.java};ファイルの「onClick」の中に追記します.~
他のページで試しに書いていたテキスト書き換えや画像入れ替えに関連する記述は,一番上の「TextView2」を取得する行以外はコメントアウトしてください.

        // 入力欄の内容をIDから取得
        EditText editText1 = (EditText)findViewById(R.id.editText1);
        // 取得した内容を文字列として認識
     // 入力欄の内容をIDから取得
        EditText editText1 = (EditText) findViewById(R.id.year_text);
     // 取得した内容を文字列として認識
        String str1 = editText1.getText().toString();
        // 入力されたのは数字なので,数字になおす
     // 入力されたのは数字なので,数字になおす
        int entranceYear = Integer.parseInt(str1);
  
     // 現在の西暦は2024年なので,入学してから何年経つかを引き算で計算する
        int thisYear = 2024;
        int calc = thisYear - entranceYear;

*** ボタンを押して計算 [#e188c321]

「計算」ボタンを押すと,2017年から入学年の個所に入力した数字を引いた数を出力するようにします.~
画面上部の「押しボタン」を押すと,2024年から入学年の個所に入力した数字を引いた数を出力するようにします.~

#BR

まず,「計算」ボタンを選択して,PropertiesのonClick欄に「button_click」と直接入力します.~
次に,&color(red){MainActivity.java};に,ボタンが押されたときの動作の内容を追記します.~
「public class MainActivity extends AppCompatActivity { 」の中に,下記の内容を追記してください.
&color(red){MainActivity.java};に,ボタンが押されたときの動作の内容を追記します.~
上記の引き算の記述のあとに,さらに以下の内容を足してください.~
全部合わせると,図3のような感じになっているはずです.~

       // 計算結果を出力
          String str2 = String.valueOf(calc);
          textView2.setText("入学してから"+str2+"年です");

    static int thisYear = 2017;
    
    // 計算ボタンがクリックされたときの動作
    public void button_click(View view){
        // 入力欄の内容をIDから取得
        EditText editText1 = (EditText)findViewById(R.id.editText1);
    
        // 取得した内容を文字列として認識
        String str1 = editText1.getText().toString();
        // 入力されたのは数字なので,数字になおす
        int entranceYear = Integer.parseInt(str1);
        // 現在の西暦は2017年なので,入学してから何年経つかを引き算で計算する
        int calc = thisYear - entranceYear;
    
        // 計算結果を出力
        TextView textView1 = (TextView)findViewById(R.id.result);
        String str3 = String.valueOf(calc);
        textView1.setText("入学してから"+str3+"年です");
    }

#BR
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/5-3.png,600x400)
CENTER:図3
#BR

数字を取得して,計算に使う方法は以上です.~
数字の入力欄を2つ作ることで,簡単な計算アプリが作れます.~
ここまでで,エミュレータを動かしてみてください.~
図4のように,エミュレータ内で数字が入力できるようになっているので,何か数字を入れて,上のボタンを押してください.~
すると,入力内容を使って計算された結果が,赤い文字の箇所に表示されます(図5).

*** 日付設定ダイアログを使ってみる [#a4d9c1b2]
#BR
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/5-4.png,600x400)
CENTER:図4
#BR

直接文字で入力するほかに,ダイアログから選択させる方法もあります.~
少し長いですが,以下の内容を追記します.

    public static class DatePickerFragment extends DialogFragment implements
            DatePickerDialog.OnDateSetListener {
    
        @Override
        public Dialog onCreateDialog(Bundle savedInstanceState) {
            Calendar calendar = Calendar.getInstance();
            int year = calendar.get(Calendar.YEAR);
            int month = calendar.get(Calendar.MONTH);
            int dayOfMonth = calendar.get(Calendar.DAY_OF_MONTH);
    
            DatePickerDialog datePickerDialog = new DatePickerDialog(getActivity(),this, year, month, dayOfMonth);
    
            return datePickerDialog;
        }
    
        public void onDateSet(DatePicker view, int year, int month, int day) {
            //日付が選択されたときの処理
            thisYear = year;
        }
    }
    
    public void onDateButtonTapped(View view) {
        DialogFragment picker = new DatePickerFragment();
        picker.show(getFragmentManager(), "datePicker");
        TextView textView1 = (TextView)findViewById(result);
        textView1.setText("ボタンが押されました");
    }

次に,&color(red){activity_main.xml};の画面で,「タップで入力」としていたボタンを選択し,PropertiesのonClick欄に「onDateButtonTapped」を直接入力します.

これでボタンの設定は終了です.~
実行して,動作内容を確認してみてください.

#BR
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/5-5.png,600x400)
CENTER:図5
#BR

数字を取得して,計算に使う方法は以上です.~
数字の入力欄を2つ作ることで,簡単な計算アプリが作れます.~

[[一週目の作業]]に戻る