はじめに
今回から本格的に中身の機能を作っていきます
下準備編はこちらから
作成するアプリに関して
-
#0の時にもほんの少し触れましたが、今回から「汎用性の高そうなスケジュール・タスク管理アプリ」を目指していきます
目指すにあたって最低限必要のは以下の3機能だと思っています- スケジュール／タスクを登録する画面
- 登録したスケジュール／タスクを表示させる画面
- そもそも登録データを保存するためのDB
-
想定としてはかなりざっくりしていますがこんな感じ
-
まずはスケジュール／タスクを登録する画面から手を付けていきます
スケジュール／タスクを登録する画面を作成する
-
登録画面に必要な項目としては以下を想定しています
- タスク／スケジュール本文
- 日時
- 優先度
- 備考
- 登録ボタン
- 画面遷移（一覧へ）ボタン
-
日時はスケジュールのみだろとか、優先度はタスクだけだろなどの細かい仕様は後でつめていきます
では画面を作っていきます -
app/res/layout フォルダの中に「activity_main.xml」というファイルがデフォルトで入っています
-
#0でなにも触っていないアプリを起動させたときに表示された画面がこれです
このままGUIベースだけで画面を作っていくこともできますが、右上の「code split design」の３種類のボタンで表示を変更できます
codeを選択するとこんな感じ
-
まずはデザインの作成なので、このままGUIベースで画面を作っていきます
出来上がったデザインがこちら
-
基本的にはスクショ左側のpaletteから必要なものをドラッグ＆ドロップでもってきて、幅とか高さを調整しただけです
ただし、備考欄を作成した際に少し詰まったので以下の記事を参考にして、直接XMLを触っている部分もあります -
備考欄の幅を広げる
- 文字を左上に寄せる
また、htmlなどでplaceholderに当たるものはAndroid studioではhintとなっていたので探すのに少し手間取りました
おわりに
- 実際にスマホで表示させたものがこちら
-
若干端まで表示させすぎている感と、下のボタンが真ん中じゃない感じがありますが、細かなレイアウトは今後修正していくこととします
-
また、#0を見ていただいた方はわかるかもしれませんが、画面の雰囲気も前回からがらっと変わっているとおもいます
前回からテスト端末を変更したのが原因だと思われますが、端末ごとにいろいろそこまで変わっては問題なのでそのあたりの調査も必要になってくると思います…
とはいえ今後はこの画面を正として進めていければと思います
※参考までに#0で使用していたテスト端末は「Google Pixcel 5a」、#1以降では「Huawei p30 Lite」を使用していきます
それではまた次回
その他参考文献
- UIの作成方法
- textareaの作り方