アプリ開発初心者ですが、Android Studioを使って電卓を作っていきたいと思います。
使用言語はKotlinです。
完成したアプリはリリースする予定なので、コードはあまり載せない方針でいきます。
Part2では、デザインをほぼ完成させていきたいと思います。
概要
前回の最後に作ったこれが、
こうなりました。
ぼーっとしてたらデザインを作る過程のスクショを撮り忘れたので最終形態だけ貼りました。
一応フォントは仮なので、後で変える予定です。
それでは簡単に解説していきます。
テキスト
前回説明しましたが、入力した式を表示する部分と答えを表示する部分に分かれています。
桁数は上の画像に入力されている数が限界です。
限界と言ってもあくまで表示される限界なので、さらに入力を続けると、
このように左側に「…」が現れる仕様になっています。
これは、TextViewのxmlファイルに、
と書いてあげるだけでOKです。
ellipsizeをstartにすると左側が「…」になり、endにすると右側が「…」になります。
のちの計算部分でこれらを切り替える処理を使用します。
singleLineは名前の通り1行に固定します。これが無いとテキストボックスが勝手に複数行になりボタンがどんどん潰れていきます。
ボタン
前回から随分派手になりましたが、どこをどう変えたか解説していきます。
ボタンの背景を装飾するには、app/res/drawable の中にxmlファイルを作り、activity_main.xmlのButtonのところで、
と書いてスタイルを適用します。
Cボタンと=ボタンは目立つように色をつけたのですが、これはどうなんでしょうね。
なるべく白黒で統一したかったんですけど、あまりにも目立たなさすぎたので…
グラデーション
滅茶苦茶分かりにくいですが、一応ボタンにグラデーションつけてます。
わずかに立体的に見えます…よね…？
グラデーションは先ほど作ったxmlファイルにこのように書いてやればOKです。
色と角度は自由です。
グラデーションの開始色と終了色に差がありすぎると、安っぽく見えるのであまりお勧めしません。
縁
“みどり”じゃなくて”ふち”です。
strokeはまさに縁取りの部分です。
色と幅を設定してます。
また、cornersを上のようにしてボタンを角丸にしています。
押下時の設定
ボタンを押したということが分かり易いように、押したときは色を変えるようにしています。
（上の画像では「6」を押しています。）
これは、1つのボタンに対して、
・押されていない状態のxmlファイル
・押された状態のxmlファイル
の2種類を作っておき、
もう1つ、状態を変更するxmlファイルを作り、そこにそれぞれを切り替える処理を記述します。
（こちらのサイトで非常に分かり易く解説されています→[Android] shapeを使ってカスタムボタン作成）
ボタンに関しては、その他フォントを大きくしたぐらいです。
背景
前回の背景は白でしたが、黒にしました。
以前までは、ツール→テーマエディターで背景を簡単に変更できていたのですが、
AndroidStudio 3.3からテーマエディターは無くなってしまったので、styles.xmlから背景色を変更しました。
ということで今回でデザインの解説は終了です。
次回からはいよいよソースコードを書いていきたいと思います。
Part3では、計算処理について解説する予定です。
＜前回＞
＜次回＞
多分永遠になし
コメント