dentaku_syoumen_small



前回→ 【Android Studio】電卓アプリを作る Part1

次回→ まだ






アプリ開発初心者ですが、Android Studioを使って電卓を作っていきたいと思います。

使用言語はKotlinです。

完成したアプリはリリースする予定なので、コードはあまり載せない方針でいきます。



Part2では、デザインをほぼ完成させていきたいと思います。



概要



bandicam 2019-03-06 19-13-57-695

前回の最後に作ったこれが、


bandicam 2019-03-24 16-53-11-163

こうなりました。

ぼーっとしてたらデザインを作る過程のスクショを撮り忘れたので最終形態だけ貼りました。

一応フォントは仮なので、後で変える予定です。


それでは簡単に解説していきます。




テキスト



bandicam 2019-03-24 17-06-09-625


前回説明しましたが、入力した式を表示する部分答えを表示する部分に分かれています。

桁数は上の画像に入力されている数が限界です。

限界と言ってもあくまで表示される限界なので、さらに入力を続けると、


bandicam 2019-03-24 17-09-30-320


このように左側に「…」が現れる仕様になっています。

これは、TextViewのxmlファイルに、


と書いてあげるだけでOKです。

ellipsizestartにすると左側が「…」になり、endにすると右側が「…」になります。

のちの計算部分でこれらを切り替える処理を使用します。


singleLineは名前の通り1行に固定します。これが無いとテキストボックスが勝手に複数行になりボタンがどんどん潰れていきます。




ボタン



bandicam 2019-03-24 17-14-17-282


前回から随分派手になりましたが、どこをどう変えたか解説していきます。

ボタンの背景を装飾するには、app/res/drawable の中にxmlファイルを作り、activity_main.xmlのButtonのところで、


と書いてスタイルを適用します。


Cボタン=ボタンは目立つようにをつけたのですが、これはどうなんでしょうね。

なるべく白黒で統一したかったんですけど、あまりにも目立たなさすぎたので…




・グラデーション



滅茶苦茶分かりにくいですが、一応ボタンにグラデーションつけてます。

わずかに立体的に見えます…よね…?


グラデーションは先ほど作ったxmlファイルにこのように書いてやればOKです。

色と角度は自由です。

グラデーションの開始色と終了色に差がありすぎると、安っぽく見えるのであまりお勧めしません。



・縁



"みどり"じゃなくて"ふち"です。


strokeはまさに縁取りの部分です。

色と幅を設定してます。

また、cornersを上のようにしてボタンを角丸にしています。



・押下時の設定



bandicam 2019-03-24 17-14-33-915


ボタンを押したということが分かり易いように、押したときは色を変えるようにしています。

(上の画像では「6」を押しています。)


これは、1つのボタンに対して、

・押されていない状態のxmlファイル
・押された状態のxmlファイル

の2種類を作っておき、

もう1つ、状態を変更するxmlファイルを作り、そこにそれぞれを切り替える処理を記述します。

こちらのサイトで非常に分かり易く解説されています[Android] shapeを使ってカスタムボタン作成




ボタンに関しては、その他フォントを大きくしたぐらいです。


背景



前回の背景は白でしたが、黒にしました。

以前までは、ツール→テーマエディターで背景を簡単に変更できていたのですが、

AndroidStudio 3.3からテーマエディターは無くなってしまったので、styles.xmlから背景色を変更しました。









ということで今回でデザインの解説は終了です。

次回からはいよいよソースコードを書いていきたいと思います。


Part3では、計算処理について解説する予定です。



前回→ 【Android Studio】電卓アプリを作る Part1

次回→ まだ