Android

バースデーカードアプリの作成～レイアウトを変更する～

前回は自分のスマホの設定しましたが、今回はアプリのレイアウトの変更をしていきます。
(googleの無料講座の順に進んでいます。)

前回の記事とgoogleの講座はこちらです。

次回の記事はこちらです。

レイアウトエディタで最初に作ったアプリの構成を確認

最初に作ったHappy Birthdayアプリの構成を見ていきます。
(講座の最初はUIの説明だったので飛ばします。興味がある人は講座の方を見てください）

Android Studioを開いてレイアウトエディタを開きます。
レイアウトエディタは下記赤枠のタブをクリックすると見れます。
(今までとUIが変わってますが、公式サイトから持ってきた画像だからです。)

まずレイアウトエディタの見方について説明します。
①はプロジェクトウィンドウです。プロジェクトを構成するすべてのファイルが表示されます。
②はパレットです。ここにあるものを選択するとボタンやテキストなどのコンポーネントを追加することができます。
③はコンポーネントツリーで追加したボタンなどのコンポーネントが表示されます。
④はアプリを実行した際の画面です。
⑤はブループリントビューで特定の操作するときに便利...との説明がありましたが④、⑤で何が違うかわかりませんでした。使っていくうちに便利さがわかると思います。
⑥は属性です。ビューの設定ができます。(ボタンの配置やテキストに表示するメッセージなどの変更ができます。)

レイヤーエディターについて詳しく知りたい方はこちらで日本語の説明を見ることができます。

(補足)レイヤーエディタが表示されてない方へ

レイヤーエディタはプロジェクトウィンドウのres→layout→activity_main.xmlファイル(下記赤枠)をダブルクリックで開くと表示されます。

表示されるメッセージを変更する

デフォルト状態では"Hello World!"というメッセージが表示されていると思います。
今回はこの表示されるメッセージを変えていきます。

コンポーネントツリー(下記赤枠)を見るとText Viewに"Hello World!"と表示されているのがわかります。このText Viewをクリックすると画面右側の属性ウィンドウ(下記緑枠)に詳細が表示されます。Declared Attributionというセクションがあるので、それをクリックします。そうするとHello World!の記載があります。(黄色枠)

ここに表示されている文字を表示したい文字に変更します。今回はHappy Birthday!に変更します。変更したら、アプリを実行します。

表示される文字がHappy Birthday!に変わりました。


テキストビューを追加する

次にテキストビューを追加します。
今回は例題通りに"Happy Birthday,Sam"という文章を追加します。

追加の仕方はpalette内にあるTextViewをドラッグ＆ドロップします。
(講座に載っていた下記GIFがわかりやすいと思います。)

そして先ほどと同様のやり方でメッセージを"Happy Birthday,Sam"という文章に変更して、画面左上に配置します。テキストをドラッグして移動することもできますが、下記赤枠の値を変更することで指定することもできます。


同じやり方で画面右下にFrom, Emmaという文章を追加します。

フォントサイズ・色を変更する。

"Happy Birthday,Sam"という文字を大きくします。
Common Attributesセクションの中にtextSizeを選択できる欄があります。
今回は例題と同様に36spに変更します。
(spという単位を初めて聞いたのですが、スケーラブルピクセルの略みたいです。デフォルトではdpと同じサイズですが、ユーザーの好みに合わせて変更できるみたいです。)

次にフォントと色を変更します。
フォントを変えるにはtext familyを変更します(下記赤枠)今回はcasualにしました。
色を変えるにはtext color(下記緑枠)を変更しますが、例題で紹介された方法が少し？特殊です。
例えば青色にしたい場合はblueと入力して検索候補に出てきた色を選びます。

色々触ってみたら下記赤枠箇所をクリックするとパレットが表示されるのでそちらから選んだほうがいいと思います。

最後に右下の文章も大きくして、余計な真ん中の文字を消したら完成です。

詳しく知りたい方へ

下の二つ以外は英語の記事ですが詳しく知りたい方は下記リンクを参照して下さい

0 件のコメント :

コメントを投稿