アプリ開発初心者の暇つぶしAndroid体験記

アプリ開発初心者がAndroidアプリ開発始めました。日々学んだことをアウトプットしていきます。

【Android】ListViewを使ってリストを表示する

今回はListViewを使ったリスト表示の方法をまとめてみました!
それでは見ていきます!

ListViewのレイアウト

まずはListViewのレイアウトを作成していきます。
f:id:mtnanao:20200312223016p:plain
AndroidStudioの場合は、ここにListViewがありますね。

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

ListViewタグを記述することによっても追加できます。

ListViewに値を設定するには?

作成したListViewに値を設定していきます。

public class MainActivity extends AppCompatActivity {

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

        // 表示用のデータを準備
        List<String> list = new ArrayList<>();
        list.add("リスト1");
        list.add("リスト2");
        list.add("リスト3");
        list.add("リスト4");
        list.add("リスト5");

        // Adapterでデータとリストを紐づける
        ArrayAdapter adapter = new ArrayAdapter<>(this, android.R.layout.simple_list_item_1 , list);

        // ListViewにAdapterを設定する
        ListView listView = (ListView) findViewById(R.id.list);
        listView.setAdapter(adapter);
        
    }
}


ポイントは以下になります。

ArrayAdapter adapter = new ArrayAdapter<>(this, android.R.layout.simple_list_item_1 , list);

ListViewに値を設定するためにはAdapterを使って、
リストとデータを紐づける必要があります。
List型のデータを各行に紐づけるにはArrayAdapterクラスを使用します。

第二引数には、1行単位のレイアウトを指定します。
android.R.layout.simple_list_item_1は、デフォルトで用意されているレイアウトです。
1行に1つのデータを表示するシンプルなレイアウトになります。

画面で確認してみる

実装したものを動かしてみましょう。
f:id:mtnanao:20200312221349p:plain

このようにデータがリストで表示されていますね。


今回はここまでです!
お疲れ様でした(^_^)/


最後にアプリの宣伝させてください(*^-^*)

play.google.com

【Android】Intentを使った画面遷移のやり方

今回はAndroidアプリでIntentを使った画面遷移の方法について学んだので
記事にまとめておきます。

Intentとは

Androidでは画面を表示するための部品はアクティビティと呼ばれていますが、
アクティビティから他のアクティビティを呼ぶときにインテントという仕組みを使用します。
この仕組みの中で使われているクラスがIntentになります。
画面間のデータの受け渡しもこのIntentクラスを経由して行うことが出来ます。

画面遷移の実装方法

まずは単純な画面遷移を行うための実装を見ていきます。
遷移元にはボタン1つ配置し、onClickListenerを設定します。

[MainActivity.java]

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

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

        findViewById(R.id.button).setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        Intent subIntent = new Intent(getApplication(), SubActivity.class);
        startActivity(subIntent);
    }
}

onClickメソッドの中が今回紹介する仕組み、インテントになります。
Intentクラスをインスタンス化する際、コンストラクタの第二引数に遷移先画面の
アクティビティクラスを指定します。
startActivityメソッドの引数に渡してあげることで画面遷移が行えます。


遷移先のアクティビティクラスも載せておきます。

[SubActivity.java]

public class SubActivity extends AppCompatActivity implements View.OnClickListener {

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

        findViewById(R.id.button).setOnClickListener(this);

    }

    @Override
    public void onClick(View v) {
        finish();
    }
}

遷移先のonClickメソッドでは、finishメソッドを呼んでいます。
このメソッドを実行することにより、
当アクティビティが終了し元の画面に戻ります。

忘れがちなManifestファイルへの追加

新しいアクティビティを追加した際に忘れがちになるのが、
AndroidManifest.xmlへの追加です。
このファイルに「このアクティビティがあります!」と
宣言しておかないといけません。
SubActivityの宣言を追加したのがこちらになります。

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.test">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name=".SubActivity" />
    </application>
</manifest>

動作確認

それでは実際に動かしてみます。

遷移元の画面がこちらです。
f:id:mtnanao:20200310222031p:plain:w250
ボタンを押すと・・・

f:id:mtnanao:20200310222527p:plain:w250
このようにサブ画面へ遷移しました。
サブ画面でボタンを押せばfinishメソッドが呼ばれて
メイン画面に戻ります。



それでは今回はここまでです!
お疲れさまでした(^_^)/


最後にアプリの宣伝させてください(*^-^*)

play.google.com

【Android】OnLongClickListenerでボタンの長押し処理を実装


今回はボタンを長押しした際の処理の実装についてまとめました。
それではどうぞ。

設定するイベントリスナー

ボタン長押しというイベントを検知させるためには、
OnLongCickListenerを実装します。

findViewById(R.id.button).setOnLongClickListener(this);

長押しを検知した時の処理

次はボタンが押された時の処理を見ていきます。
onLongClickメソッドをオーバーライドして処理を実装します。

@Override
public boolean onLongClick(View v) {
    text2.setText("onLongClickメソッドが呼ばれました");
    return true;
}

メソッドの戻り値の型がbooleanなのが注目ですね!

true、falseでそれぞれ以下のように動きが変わります。

  • trueの場合

onClickメソッドは実行されない。

  • falseの場合

onClickメソッドも続けて実行される。
(もちろん実装してあれば)

実際の動きを確認してみる

サンプルのアプリケーションを作ったので、動かしてみます。

[avtivity_main.xml]

<LinearLayout 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"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    tools:context=".MainActivity">

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

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:textSize="24sp" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="24sp" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="clear" />

</LinearLayout>


[MainActivity.java]

public class MainActivity extends AppCompatActivity implements View.OnClickListener, View.OnLongClickListener {

    TextView text;
    TextView text2;

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

        findViewById(R.id.button).setOnClickListener(this);
        findViewById(R.id.button).setOnLongClickListener(this);

        findViewById(R.id.button2).setOnClickListener(this);

        text = findViewById(R.id.textView);
        text2 = findViewById(R.id.textView2);

    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.button:

                text.setText("onClickメソッドが呼ばれました");
                break;

            case R.id.button2:

                text.setText("");
                text2.setText("");
                break;
        }
    }

    @Override
    public boolean onLongClick(View v) {
        text2.setText("onLongClickメソッドが呼ばれました");
        return true;
    }
}

設置したボタンを長押しした時の動きがこのようになります。
f:id:mtnanao:20200305233619p:plain

onLongClickメソッドがtrueを返していますので、
onLongClickメソッドのみが呼ばれているのが分かると思います。

それでは、falseを返すようにして再度実行してみます。
f:id:mtnanao:20200305233836p:plain

onLongClickメソッドの後に、onClickメソッドが実行されています。


それでは、今回は以上です(^_^)/
お疲れさまでした!!


最後にアプリの宣伝させてください(*^-^*)

play.google.com

【Java】計算にはBigDecimalを使おう

実装していてBigDecimalに躓いたのでまとめておこうと思います。

BigDecimalとは

数字の計算において、誤差を出さないためにはBigDecimalを使う必要があります。
BigDecimalはクラスなので、インスタンスを生成して使います。

BigDecimal bd1 = new BigDecimal("1");

BigDecimalを使わないと?

では、BigDecimalを使わないとどのような計算結果になるか試してみたいと思います。

// BigDecimalなしで計算
System.out.println(1.2 * 3);

結果は3.6となってほしいところですが実際の結果は・・・

3.5999999999999996

誤差が出てしまっていることが分かると思います。

BigDecimalで計算してみよう

誤差を出さないようにBigDecimalを使って計算してみようと思います。

// BigDecimalで計算
BigDecimal bd1 = new BigDecimal("1.2");
BigDecimal bd2 = new BigDecimal("3");

System.out.println(bd1.multiply(bd2));

すると結果はこのようになりました。

3.6

誤差なく計算できていますね。

BigDecimalクラスのメソッド

誤差が出ないことが確認できたので、基本的な使い方を見ていきます。

上から順、足し算、引き算、掛け算、割り算をする時に使います。

四捨五入や切り上げ、切り捨てをするときに使います。
第一引数:変換後の小数点以下の桁数を設定します。
(小数第三位で四捨五入して、少数点以下2桁で表示する場合は2を設定します。)
第二引数:丸め方を指定します。
 四捨五入 BigDecimal.ROUND_HALF_UP
 切り上げ BigDecimal.ROUND_UP
 切り捨て BigDecimal.ROUND_DOWN

実際に動かしたソースと結果を張っておきます。

// BigDecimalで計算
BigDecimal bd1 = new BigDecimal("1.2");
BigDecimal bd2 = new BigDecimal("3");


// 足し算
System.out.println("足し算");
System.out.println(bd1.add(bd2));

// 引き算
System.out.println("引き算");
System.out.println(bd1.subtract(bd2));

// 掛け算
System.out.println("掛け算");
System.out.println(bd1.multiply(bd2));

// 割り算
System.out.println("割り算");
System.out.println(bd1.divide(bd2));


BigDecimal bd3 = new BigDecimal("1.25");

// 四捨五入
System.out.println("四捨五入");
System.out.println(bd3.setScale(1, BigDecimal.ROUND_HALF_UP));

// 切り上げ
System.out.println("切り上げ");
System.out.println(bd3.setScale(1, BigDecimal.ROUND_UP));

// 切り捨て
System.out.println("切り捨て");
System.out.println(bd3.setScale(1, BigDecimal.ROUND_DOWN));

結果はこのようになりました。

足し算
4.2
引き算
-1.8
掛け算
3.6
割り算
0.4
四捨五入
1.3
切り上げ
1.3
切り捨て
1.2

演算を行うときは意識してBigDecimalを使わないと
思わぬバグを作りこんでしまいますね。

それでは今回は以上です(^^)/
お疲れさまでした♪


最後にアプリの宣伝させてください(*^-^*)

play.google.com

drawableリソースのselecterについてまとめてみた

今回は画面の見た目について記事にしていきます。

drawableリソースのselecterというものが興味深かったので今回の題材にします。
それではどうぞ!

selecterとは

このselecterを使うことによって、
そのパーツの状態によってデザインを変えることができるようになります。
例えば、カーソルがあたった時や、クリックされた時です。

どんな状態の時に変えられる?

代表的なものをあげるとこのような状態の時に変えることができます。

これらの状態の時にそれぞれ色や形をかえることができます。

設定方法は?

では実際に設定する方法を見ていきます。
まずはdrawableリソースを書いていきます。

[button_layout.xml]

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" >
        <shape>
            <solid android:color="#ff7f50" />
        </shape>
    </item>

    <item android:state_focused="true" >
        <shape>
            <solid android:color="#000080" />
        </shape>
    </item>

    <item>
        <shape>
            <solid android:color="#a9a9a9" />
        </shape>
    </item>
</selector>

itemタグのstate_XXXX属性がそれぞれどの状態であるかを指しています。
上から、クリック時、フォーカス時、デフォルトです。

作成したファイルをlayoutに適応させます。

[activity_main.xml]

<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button"
    android:background="@drawable/button_layout"/>

動作確認

実装したアプリを動かしてみます。

  • デフォルト時

f:id:mtnanao:20200303145509p:plain

  • クリック時

f:id:mtnanao:20200303145331p:plain

  • フォーカス時

f:id:mtnanao:20200303145320p:plain


button_layout.xmlに定義した内容に合わせて色が変わっていくのが分かりますね。


それではselecterに関するまとめは以上です。
お疲れさまでした!!



最後にアプリの宣伝させてください(*^-^*)

play.google.com

NumberPickerを使って数字選択ダイアログを実装してみる

今回はNumberPickerを使って
ダイアログ上にピッカーを配置していきます。

電卓に新機能として割引計算機能を追加します。
ボタンの追加、イベントリスナーの追加は前回記事と同じなので省略します。
xprogrammingx.hatenablog.com

それではやっていきます。

1. ダイアログ用のレイアウトxmlを作成

ダイアログのレイアウトを定義するxmlファイルを新規に作成します。
sale_dialog.xmlというファイル名にしました。
f:id:mtnanao:20200229193416p:plain

2. NumberPickerを定義する

作成したsale_dialog.xmlにNumberPickerを定義していきます。

<NumberPicker
    android:id="@+id/numberPicker1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

これだけでピッカーが配置できます。

3. SaleDialogFragmentクラスの作成

SaleDialogFragmentを新規に作成します。

public class SaleDialogFragment extends DialogFragment {

    @NonNull
    @Override
    public Dialog onCreateDialog(@Nullable Bundle savedInstanceState) {
        LayoutInflater inflater =  getActivity().getLayoutInflater();
        View view = inflater.inflate(R.layout.sale_dialog, null, false);

        final NumberPicker np1 = (NumberPicker) view.findViewById(R.id.numberPicker1);
        np1.setMinValue(0);
        np1.setMaxValue(9);

        final NumberPicker np2 = (NumberPicker) view.findViewById(R.id.numberPicker2);
        np2.setMinValue(0);
        np2.setMaxValue(9);

        AlertDialog.Builder builder = new AlertDialog.Builder(getActivity());
        builder.setTitle("割引率");
        builder.setPositiveButton("決定", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {

                MainActivity mainActivity = (MainActivity) getActivity();

                int rate = Integer.parseInt(String.valueOf(np1.getValue()) + String.valueOf(np2.getValue()));
                mainActivity.calcSale(rate);

            }
        });
        builder.setView(view);
        return builder.create();

    }
}

NumberPicker#setMaxValueとNumberPicker#setMinValueを使って、
ピッカーの最大値と最小値を設定しています。
今回は割引率を2桁で示すため1~9のピッカーを2つ並べています。

決定ボタンが押された時の処理をonClickのインナーメソッドに書いていきます。
MainActivutyクラス側にcalcSaleメソッドを準備し、
入力された割引率を引数にそのメソッドを呼び出します。

4. 動作確認

それでは動かしてみます。
f:id:mtnanao:20200229195710p:plain
2000を入力して"割引"ボタンを押します。

f:id:mtnanao:20200229195719p:plain
ピッカーが2つ並んだダイアログが表示されましたね!
30%OFFの計算をしてみます。

f:id:mtnanao:20200229195737p:plain
計算結果も大丈夫そうです。


それでは今回はここまでです(^^)/
お疲れさまでした♪


最後にアプリの宣伝させてください(*^-^*)

play.google.com

DialogFragmentを使ってダイアログ表示と消費税計算処理実装!

今回はDialogFragmetでダイアログを扱ってみようと思います!

作った電卓アプリにダイアログを使った消費税計算機能を追加していきます。

1. ダイアログ表示用のボタンを配置

ダイアログを表示するためのボタンを配置していきます。
f:id:mtnanao:20200227221455p:plain

今回は消費税ボタンを追加しました!
8%か10%かをダイアログから選択できるようにしていきたいと思います。

2. ボタンからダイアログ表示処理を実装

消費税ボタンが押された場合にダイアログを表示するように実装をしていきます。

MainActivity#onCreateメソッド

追加したボタンに対してイベントリスナーを設定します。

findViewById(R.id.tax).setOnClickListener(this);

MainActivity#onClickメソッド

onClickメソッドには消費税ボタンが押された場合の処理を書いていきます。
ここで出てくるTaxDialogFragmentクラスについては後述します!

// 消費税が押された場合の処理
case R.id.tax:

    DialogFragment taxDialog = new TaxDialogFragment();
    FragmentManager manager = getSupportFragmentManager();
    taxDialog.show(manager, "tax");

    break;

TaxDialogFragment内で実装したダイアログをshowで表示しています。

TaxDialogFragmenクラス

今回新規に作成したTaxDialogFragmentクラスになります。

public class TaxDialogFragment extends DialogFragment {

    @NonNull
    @Override
    public Dialog onCreateDialog(@Nullable Bundle savedInstanceState) {

        CharSequence[] taxPercent = {"8%", "10%"};
        Activity activity = getActivity();

        AlertDialog.Builder builder = new AlertDialog.Builder(getActivity());
        builder.setItems(taxPercent, new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {

                MainActivity mainActivity = (MainActivity) getActivity();
                switch(which){

                    // 8%が押された場合は、calcTaxメソッドに"8"を渡す
                    case 0:

                        mainActivity.calcTax("8");
                        break;

                    // 10%が押された場合は、calcTaxメソッドに"10"を渡す
                    case 1:

                        mainActivity.calcTax("10");
                        break;
                }
            }
        });
        return builder.create();
    }
}

AlertDialog.Builder#setItemsにダイアログに表示したいリストを設定し、それぞれ選択された場合の処理を実装しています。
今回は選択肢として8%と10%を用意しています。
case文における判断は、設定した配列の何番目かで分岐させます。
呼び出し元のMainActivity#calcTaxで消費税計算と画面表示をしています。

MainActivity#calcTaxメソッド

消費税計算処理です。

public void calcTax(String tax){
    if (tax.equals("8")) {
        resultNum = Math.floor(Double.parseDouble(tmpCalcNum) * 1.08);

    } else if (tax.equals("10")) {
        resultNum = Math.floor(Double.parseDouble(tmpCalcNum) * 1.10);
    }

    viewNum = calc.getText().toString().replaceAll(tmpCalcNum + "$", resultNum.toString()).replace(".0", "");

    tmpCalcNum = resultNum.toString().replace(".0", "");;
    calc.setText(viewNum);
}

受け取った引数を元に消費税計算と表示です。
計算後の小数点以下は切り捨てます。

3. 動作確認

それでは動かして確認してみます!
f:id:mtnanao:20200229113645p:plain

100を入力して消費税ボタンを押すと、ダイアログが出てきました。
8%を押してみます。

f:id:mtnanao:20200229113731p:plain

108になりました!
ここから続けて演算することもできました(^^)/


それでは今回はここまでです!
お疲れさまでした♪