前回はKotlinの基礎を勉強してさいころを振るコードを作成しました。今回からアプリに実装していきます。
(googleの無料講座の順に進んでいます。)
前回の記事とgoogleの講座はこちらです。
次回の記事はこちらです。
最初にさいころアプリのプロジェクトを作成します。
プロジェクトの作成についてはこちらの記事も参考にしてください。
新規プロジェクトを作成し、Empty Activityを選択します。
プロジェクトの名前をDice Rollerとします。
Rollボタンを作成する
前の記事でレイアウトの変更のやり方について解説しているので、こちらも参考にしたうえでこの記事を読んでください。
プロジェクトが作成出来たら、さいころを振るRollボタンを追加します。
まず最初にタブ"activity_main.xml"を選択し、レイアウトエディタに変更します。
次にHello Worldと書かれたテキストの下にボタンを追加します。
レイアウトには階層があるみたいで、今回はConstrainLayoutの子として
ボタンを追加していきます。
パレットにボタンがあるので、それをドラッグ&ドロップして追加します。
これでConstraintLayoutにボタンが追加されました。
今のままではエラーが出ているので、これを解消していきます。
エラーメッセージは水平方向の制約を追加してください的な意味だと思います。
ボタンの配置を変える
最初に上下方向の位置を決めます。
テキストメッセージの真下にボタンを移動します。
移動の仕方はこちらのGIFを参考にして下さい。
次に画面右側にあるConstraint Widgetを値をいじっていきます。
親レイヤーのConstraintLayoutからの左右の余白を0にします。
これで開始 → 親の開始 (0dp) と終了 → 親の終了 (0dp) の2つの制約が追加されました。(上図の緑枠)これでボタンがその親である ConstraintLayout の中で水平方向の中心に位置しました。
これでアプリを起動したら以下のようにボタンが追加されました。
この状態だとボタンは押せますが、もちろん何も動きません。
(コンパイルしたときにエラーが出て、前回作成したバースデーカードアプリが起動してしまいましたが、もう一度コンパイルしたらきちんと起動しました。)
ボタンのテキストを変更する
今のままではBUTTONと表示されていますが、これをRollに変更します。
画面右のtextをRollに変更します。
(右の画面が出てこない方はボタンオブジェクトを選択してみてください)
ちなみにですが、Rollと入力したのに、ROLLと表示されてしまいます。
試せて無いですが、小文字で入力したい場合は下記サイトを参考にしてください。
また、以前もありましたがRollという文字がハードコーディングしているため、警告が出ています。
前やった時と同様にFIXします。
テキストのスタイルを変更する
まず初めにRollボタンの文字サイズを36 spに変更します。
textSizeを36 spに変更してください。
textSizeの項目は下の方にあったので、スクロールしないと見つからないかもしれません。
次にHello Worldと書かれたテキストの中身をクリアし、先ほどと同様に文字サイズを36 spにします。
ただ、このままだとアプリ作成する際にどこにテキストボックスがあるか分からなくて不便です。
そこでレイアウトプレイビューにしか表示されず、アプリを実行した場合は非表示となるように設定します。
やり方は画面右側のAttribution>text
の下にスパナのマークがあるtextの欄があります。
そこに編集中だけ表示したい文字を入力します。
(今回は例に倣って1と表示します。)
この状態で実行するとアプリには表示されません。
これでレイアウトは完成です。
Activity概要
googleの講座に解説があったのですが私が初めて触れた概念で、英語の解説ということもあり、なかなか理解ができませんでした...
なので、日本語の解説サイトを元に説明します。
(あまり自信がないので、間違っていたらご教示お願いします。)
結論から言うと画面のことみたいです。
複数の画面を作ってボタンを押されたら別の画面を表示するようにします。
このようにすることで他のアプリから呼び出されたときに必要な画面を一発で起動することができます。
例えばSNSでメールでURLを共有ボタンを押したときにメールアプリを起動→新規メール作成という手順を踏まずに、いきなり新規メール作成画面に飛ぶことができます。
MainActivity.ktファイルを開く
MainActivity.ktファイルを開き。ボタンを押されたら何か処理を行うコードを追加します。
MainActivityファイルは
app>java>com.example.diceroller
にあります。(下記赤枠)
MainActivityを開いた際に、import ...となっている場合は...の部分(下記緑枠)をダブルクリックして展開してください
MainActivityファイルの中身をすべて理解する必要はないみたいですが、何となくでいいのでそれぞれがどんな役割を持っているかは知ったほうがいいみたいです。
注意すべきこととしてMainActivityにはmain関数がありません。
今までのKotlinプログラムではmain関数が必要でしたが、Androidアプリの場合はmain関数の代わりにonCreate()メソッドをコールします。
overrideというものは後ほど解説があるそうので、今は無視します。
onCreate()メソッドの残りの部分はインポートしたコードを使用してMainActivityを設定し、setContentView()で開始レイアウトを設定します。
ちなみにimportという文ですが、Androidにはアプリを作りやすくするために
色々なフレームワークが提供されており、import文を使うことでフレームワークのクラスを指定できます。
例えばButtonクラスはandroid.widget.Buttonで定義されています。
Auto importsを有効にする
使うクラスが増えてくるとインポート文を忘れずに追加することが面倒になってきます。
Android StudioにはAuto importsという機能があるみたいで、それを有効にします。これを有効にすることで自動的にimportして、使用していない
importをコードから削除してくれます。
(多分コード中にimportせずに使っているクラスがあれば自動的にimportしてくれる機能でしょうか。)
File>OtherSettings>Settings for New Projects
を選択します。
(googleの講座だとFile > Other Settings > Preferences for New Projects.となってました)
そのあとOther Settings>Auto import
を選択して
下記赤枠にチェックを入れます。
(Kotlin用とJava用で分かれているので、それぞれにチェックを入れます。)
Add unambigious....という方が使われてないクラスをimportするやつで
Optimize imports...という方が使われていないimportを削除するものだと思います。
この講座として半分で長くなりそうなので、これ以降は次の記事に書こうと思います。
0 件のコメント :
コメントを投稿