kojiko-android’s blog

開発中にハマった時の解決策や、忘れがちなことを残しておきます。

電卓アプリ【お買い物電卓】リリースしました!

f:id:kentaro198477:20170201113217p:plain

お買い物電卓【割引・割り勘・消費税を簡単計算!】 - Google Play の Android アプリ


お買い物電卓~☆

・・・いいタイトルが思いつかなかった(笑)
「何が出来るか」がわかることと、文字が全て表示されることが大事ということでコレにしました。


f:id:kentaro198477:20170201113231p:plain

式と答えが見える電卓!

式を入力していくと、答えが随時更新されて表示されます。
ちゃんと四則演算に対応。
%は先に計算。
カッコ()には未対応。普段の買い物ではカッコはたぶん使わないからね(笑)
ターゲティングをしっかりしてみる!


f:id:kentaro198477:20170201113258p:plain

割引計算

極力シンプルに。ツマミを動かしてチェックマークを押したら式に適用されます。
背景のグラデーションが引き締まるように、このようなビューは黒くしました。
ちょっと簡素すぎるかな。。。

f:id:kentaro198477:20170201113312p:plain

割り勘計算

右のナンバーピッカーをコロコロすると一人当たりの金額と端数が計算されます。
現時点で、最小単位は10(円)です。
外国の通貨とかよくわからないから最小単位を固定してますが、
割り勘のときは100円単位が多いから、実装を検討中。

f:id:kentaro198477:20170201113304p:plain

計算履歴

値段の比較をしたりするので、やはり履歴は欠かせない!
シンプルな感じで、画面を切り替えずに閲覧できるようにしました。
あまり使われないかもしれないけど、
式をタップ → 現在の式と置き換える
答えをタップ → 現在のフォーカス位置に挿入
 ができるようにしました。


f:id:kentaro198477:20170201113240p:plain

Androidで、あまりしっくりくる電卓に出会ったことがありません。
字体だったり色だったり、タッチ振動も意外と重要。
なので、自分が本当に使いたい電卓を作ってみました。
けっこう他からインスパイアされまくりですけど(笑)
ただ、その「自分が本当に使いたいデザイン」が、漠然と頭にあっても、
作品として落とし込むと、
「なんか違うな~」
という部分が、潰しきれていないです。
私の本業の美容師の現場でもそれはあります。
なので、これからも「お買い物電卓(仮)」のデザインは磨いていきたいと思います!

お読みいただきありがとうございました☆

play.google.com

SearchViewを使って検索のインテントを発行する

SearchViewを使って検索のインテントを発行する方法です。

ウィジェットとして任意の位置に配置できるほうのSearchViewです。
画面上部に現れる検索ダイアログや、アクションバーに組み込まれている検索ボックスではありません。

SearchView searchView = (SearchView)baseV.findViewById(R.id.searchView);
searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
    @Override
    public boolean onQueryTextSubmit(String query) {
        Intent intent = new Intent(Intent.ACTION_WEB_SEARCH);
        intent.putExtra(SearchManager.QUERY,query);
        startActivity(intent);
        return true;
    }

    @Override
    public boolean onQueryTextChange(String newText) {
        return false;
    }
 });

検索開始のボタン(虫眼鏡のアイコン)が押された時は、
onQueryTextSubmitが呼ばれ、検索ボックスに入力されたテキストは(String型)queryとして渡されます。
黙示的インテントを発行し、外部アプリで検索を行います。

サーチビューに文字列をセットするときは、
setQuery(CharSequence query,boolean submit)
を使い、第二引数には、すぐに検索するかどうかをboolean型で指定します。

最後にボタンを押してから数秒後に一回だけ処理をする

最後にボタンを押してから数秒後に一回だけ処理をする方法です。

たとえばフローティングアクションボタン(FAB)を設置していて、
ユーザーが何かをしているときはFABは隠しておき、操作が終わった後にちょっと間を置いて再び表示したいときなどに。

private Handler handler;

    //    Handlerのインスタンスをフィールドに宣言

private void doSomethingLater(){

    if (handler != null) {
        handler.removeCallbacksAndMessages(null);

        //    既に予定があればそれはキャンセルする

    }

    handler = new Handler();

    handler.postDelayed(new Runnable() {
        @Override
        public void run() {

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

        }
    },3000l);    //    処理を予約します
}

doSomethingLater()を呼び出してから3秒後にトーストを表示します。
トーストが出る前に、再度 doSomethingLater() が呼ばれた場合は、
そこから3秒後に初めてトーストを表示します。

画面の向きを取得する

現在の画面の向きを取得する方法です。

Configuration configuration = getResources().getConfiguration();
switch(configuration.orientation) {
    case Configuration.ORIENTATION_PORTRAIT:   

    //    縦向き
       
        break;
    case Configuration.ORIENTATION_LANDSCAPE:

    //    横向き

        break;
}

Configurationクラスのorientationフィールドを調べることで、画面の現在の向きを知ることができます。

テキストサイズをButtonに収まるように調整する

テキストサイズをButtonに収まるように調整するためのメソッドです。
TextViewでテキストサイズを自動調整する方法は検索すると多数出てきます。
こちらを参考にさせていただきました。ありがとうございます。
TextViewのフォントサイズを自動調整する。 - monaka android memo

今回はボタンのように、テキストをあまり変えることがないViewでテキストサイズを調整する場合に便利なメソッドを定義しました。

private float resize(Button button) {

        final float MIN_TEXT_SIZE = 10f;//最小サイズを決める

        String text = button.getText().toString();
        int padding = button.getPaddingLeft();//
        Paint paint = new Paint();

        int viewWidth = button.getWidth() - (padding * 2);//Viewのコンテンツ領域を取得
        int viewHeight = button.getHeight() - (padding * 2);//パディングは左右同じとして
        
        float textSize = 200f;//テキストサイズの初期値を適当に決める

        paint.setTextSize(textSize);//テキストサイズをセット

        Paint.FontMetrics fm = paint.getFontMetrics();
        float textHeight = (Math.abs(fm.top)) + (Math.abs(fm.descent));//テキストの高さを取得

        float textWidth = paint.measureText(text);//テキストの幅を取得

        while (viewWidth < textWidth || viewHeight < textHeight) {//ボタンに収まるまでループ

            if (MIN_TEXT_SIZE >= textSize) {//最小サイズを下回ったら最小サイズに設定
                textSize = MIN_TEXT_SIZE;

                break;
            }

            textSize -= 8f;//テキストサイズをデクリメント(間隔は適当に)

            paint.setTextSize(textSize);

            fm = paint.getFontMetrics();
            textHeight = (Math.abs(fm.top)) + (Math.abs(fm.descent));
            textWidth = paint.measureText(text);//テキストの縦横サイズを再取得
        }

        button.setTextSize(TypedValue.COMPLEX_UNIT_PX,textSize);//収まるサイズに設定

        return textSize;

    }

ButtonのプロパティのSingleLineにチェックを入れて下さい。
引数にButtonを渡すと、Buttonのテキストを取得し、サイズを調整します。
調整したサイズをリターンするので、他の同じようなButtonのテキストサイズを調整するには、その値を使えます。
(例:電卓の数字キーなど)
オンクリエイト内等で実行すると、Viewのサイズが0なので文字が小さくなってしまいます。
Viewのサイズと、文字列がわかった時点で実行してください。

ご注意。独自フォントを設定していると、フォントによってはテキストサイズがはみ出してしまったり、
期待通りの結果にならないことがあるようです。
その場合の解決策は、まだ自分で試していないので、確認したら追記します。

EditTextの指定位置にカーソルを移動

EditText備忘録

指定位置にカーソルを移動する

エディットテキストのsetSelection(int型)メソッドの引数にカーソルの位置を指定します。
0で、文字列の先頭になります。

EditText editText;
editText.setSelection(3);
文字列の最後にカーソルを移動する
editText.setSelection(editText.getText().toString().length());

EditText等で、バックスペースの入力を検出する

EditTextの入力中に、ソフトキーボードのバックスペースキーが押されたときのイベントの検出は、以下のようにします。

mEditText.setOnKeyListener(new View.OnKeyListener() {
    @Override
    public boolean onKey(View v, int keyCode, KeyEvent event) {

        if (event.getAction() == KeyEvent.ACTION_DOWN){

            if (keyCode == KeyEvent.KEYCODE_DEL){
                       
            //    バックスペースが押された

            }
        }
        return false;
    }
});

単純に、「押された時」を知るための方法です。
KeyEvent.ACTION_DOWNまたはACTION_UPのどちらかを判別しないと、
タップした時と指を離した時の2回、イベントが呼ばれてしまいます。