Shapeでアクアボタン風リソース
Shapeで作ってみた
前回記事と同様に、こんどは横長のアクアボタン風リソースを作ってみました。
ちょっと違うけど、なんとなくそれっぽいのではないかと思います。
緑のボタンはテキストシャドウを設定しています。
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item> <layer-list> <item> <shape android:shape="rectangle" > <corners android:radius="100dp" /> <gradient android:endColor="#15000000" android:startColor="#23000000" android:angle="90"/> <padding android:top="3dp" android:bottom="3dp" android:left="3dp" android:right="3dp"/> </shape> </item> <item > <shape android:shape="rectangle" > <corners android:radius="100dp" /> <solid android:color="#00bfff"/> </shape> </item> <item> <shape android:shape="rectangle" > <corners android:radius="100dp" /> <gradient android:startColor="#b7000000" android:endColor="#00ffffff" android:angle="270" /> </shape> </item> <item android:top="3dp" android:left="3dp" android:right="3dp" android:bottom="3dp"> <shape android:shape="rectangle" > <corners android:radius="100dp"/> <gradient android:centerY="0.7" android:startColor="#b0ffffff" android:centerColor="#3b8b8b8b" android:endColor="#d0ffffff" android:angle="90" /> </shape> </item> </layer-list> </item> </selector>
今回も、レイヤーリストでいくつかの画像を重ねています。
Buttonのバックグラウンドとして使うと、
一部が伸びてしまったりしてバランスが変になります。
(ImageViewだと綺麗に表示されるが、テキストも表示したい)
また、Shapeはボカした感じの表現が難しいので、
ふちがくっきりしすぎています。
少しでも雰囲気をプラスするために、
グリーンのボタンには
テキストにシャドウを施してみました。
AQUAなボタン、なんか押したくなりますよね♪
Shapeでアクアなボタンを作ってみた
以下のようなリソースを作ってみました。
レイヤーリストに、左から①②③④のアイテムを順次描画しています。
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item> <layer-list> <!--①--> <item > <shape android:shape="oval" > <size android:height="100dp" android:width="100dp"/> <solid android:color="#0000ff"/> </shape> </item> <!--②--> <item> <shape android:shape="oval" > <gradient android:centerColor="#a8000000" android:centerX="0.5" android:centerY="0.7" android:gradientRadius="100dp" android:type="radial" /> </shape> </item> <!--③--> <item> <shape android:shape="oval" > <gradient android:startColor="#7affffff" android:centerX="0.5" android:centerY="0.9" android:gradientRadius="100dp" android:type="radial" /> </shape> </item> <!--④--> <item android:top="4dp" android:left="16dp" android:right="16dp" android:bottom="48dp" > <shape android:shape="oval" > <gradient android:startColor="#00ffffff" android:endColor="#ffffff" android:angle="90"/> </shape> </item> </layer-list> </item> </selector> <|| 汎用性を考え、色味の部分は①だけです。 ②や③で上手く色を混ぜられたら、より深みのある表現になりそうです。 縁取りをぼかせていないので、アクアというより、ガラス玉のような質感になってしまいました。
電卓アプリ【お買い物電卓】リリースしました!
お買い物電卓【割引・割り勘・消費税を簡単計算!】 - Google Play の Android アプリ
お買い物電卓~☆
・・・いいタイトルが思いつかなかった(笑)
「何が出来るか」がわかることと、文字が全て表示されることが大事ということでコレにしました。
式と答えが見える電卓!
式を入力していくと、答えが随時更新されて表示されます。
ちゃんと四則演算に対応。
%は先に計算。
カッコ()には未対応。普段の買い物ではカッコはたぶん使わないからね(笑)
ターゲティングをしっかりしてみる!
割引計算
極力シンプルに。ツマミを動かしてチェックマークを押したら式に適用されます。
背景のグラデーションが引き締まるように、このようなビューは黒くしました。
ちょっと簡素すぎるかな。。。
割り勘計算
右のナンバーピッカーをコロコロすると一人当たりの金額と端数が計算されます。
現時点で、最小単位は10(円)です。
外国の通貨とかよくわからないから最小単位を固定してますが、
割り勘のときは100円単位が多いから、実装を検討中。
計算履歴
値段の比較をしたりするので、やはり履歴は欠かせない!
シンプルな感じで、画面を切り替えずに閲覧できるようにしました。
あまり使われないかもしれないけど、
式をタップ → 現在の式と置き換える
答えをタップ → 現在のフォーカス位置に挿入
ができるようにしました。
Androidで、あまりしっくりくる電卓に出会ったことがありません。
字体だったり色だったり、タッチ振動も意外と重要。
なので、自分が本当に使いたい電卓を作ってみました。
けっこう他からインスパイアされまくりですけど(笑)
ただ、その「自分が本当に使いたいデザイン」が、漠然と頭にあっても、
作品として落とし込むと、
「なんか違うな~」
という部分が、潰しきれていないです。
私の本業の美容師の現場でもそれはあります。
なので、これからも「お買い物電卓(仮)」のデザインは磨いていきたいと思います!
お読みいただきありがとうございました☆
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のサイズと、文字列がわかった時点で実行してください。
ご注意。独自フォントを設定していると、フォントによってはテキストサイズがはみ出してしまったり、
期待通りの結果にならないことがあるようです。
その場合の解決策は、まだ自分で試していないので、確認したら追記します。