Androidアプリ / ビューを作る
こんにちは。
毎年みうらじゅん賞を心待ちにしているトキです。
今年はまだなんの情報もないのですが、みうらじゅん賞2018はやらないのでしょうか？本気ですか？
さて、今日はAndroidアプリのUI部分の基本的な作り方を学んだので、Androidアプリのビューの構成要素と画面の基本的な部品（テキストボックス・チェックボックス・ラジオボタン・プルダウン・ボタン）の作り方をサンプルを交えてざっくりまとめていきたいと思います。
IDEはAndroid Studio 3です。
この記事で完成させるビューはこんな感じです。
ビューの構成要素
そもそもAndroidアプリのビューはどうやって作っていくのでしょうか。
をそれぞれ記述していくことでアプリの画面を作っていくことができます。
それぞれのファイルですが、
activity_main.xmlには、画面を構成する部品(テキストボックス、ラジオボタンなど)
strings.xmlには、画面に表示する具体的な値(文字列、数値など)
を生成するための記述をそれぞれしていくことで一つのビューが構成されます。
それでは、上記サンプルを作っていきます。
まずはテキストビューとテキストボックスから。
ちなみに、テキストビューは、”名前を入れてください”の箇所、テキストボックスは”tokimatsu”と表示されてる箇所です。
テキストビュー・テキストボックス
プロジェクトを作成すると、activity_main.xmlとstrings.xmlにすでにコードが記述されてることがわかりますが、テキストビューに表示する用の文字列として、strings.xmlに次のように追記します。
strings.xml
<resources> <string name="app_name">ビューサンプル</string> //以下を追記 <string name="tv_name">名前を入れてください</string> </resources>
activity_main.xmlの方にもすでにコードが書かれていますが、以下のようにすべて書き換えます。
activity_main.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#A1A9BA" android:orientation="vertical"> <TextView android:id="@+id/tvLabelInput" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="10dp" android:layout_marginTop="5dp" android:background="#ffffff" android:text="@string/tv_name" android:textSize="25sp" /> <EditText android:id="@+id/etName" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="25dp" android:layout_marginTop="5dp" android:background="#ffffff" android:inputType="text" /> </LinearLayout>
ルートタグが＜LinearLayout＞となっていますが、このタグが初心者には最も扱いやすいようなのでこちらを指定しました。他にも種類があります↓
| ＜ConstraintLayout＞ | レイアウトの位置を最適な位置に自動的に調整して配置 |
|---|---|
| ＜LinearLayout＞ | 画面部品を縦/横方向に並べて配置 |
| ＜TableLayout＞ | テーブル形式で画面部品を配置 |
| ＜GridLayout＞ | グリッド形式で画面部品を配置 |
| ＜FrameLayout＞ | 画面部品を重ねて配置 |
| ＜RelativeLayout＞ | 画面部品を相対的に配置 |
LinearLayoutタグで、android:orientation="vertical"となっていますが、こう指定することでこのタグ内の部品をすべて縦に並べることができます。横方向に並べたいときはorientation="horizontal"と指定すればオーケーです。
＊その他の属性については、また別の記事で詳しくまとめたいと思います
これでテキストビューとテキストボックスは完成！
次はラジオボタン。
ラジオボタン
まずはstrings.xmlに追記します。
strings.xml
<resources> //省略 <string name="rb_male">おとこ</string> <string name="rb_female">おんな</string> </resources>
ラジオボタンを作るにはRadioButtonタグを用います。
また、ラジオボタンを2つ以上作る場合は、それらをワンセットとして扱うRadioGroupタグで囲みます。
また、ラジオボタンを横並びに配置したいので、android:orientation="horizontal"と指定します。
activity_main.xml
<LinearLayout> //省略 <RadioGroup android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:background="#0000ff" android:orientation="horizontal" android:paddingBottom="10dp" android:paddingTop="10dp"> <RadioButton android:id="@+id/rbMale" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="25dp" android:layout_marginRight="25dp" android:background="#ffffff" android:text="@string/rb_male" /> <RadioButton android:id="@+id/rbFemale" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#ffffff" android:text="@string/rb_female"/> </RadioGroup> </LinearLayout>
チェックボックス
これまたstrings.xmlから追記していきます。
strings.xml
<resources> //省略 <string name="cb_kinobou">木の棒</string> <string name="cb_tate">鉄の盾</string> </resources>
お次はactivity_main.xmlです。
チェックボックスはCheckBoxタグで囲みます。
activity_main.xml
<LinearLayout> //省略 <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="5dp" android:background="#0000ff" android:orientation="horizontal"> <CheckBox android:id="@+id/cdKinobou" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginRight="25dp" android:background="#ffffff" android:text="@string/cb_kinobou"/> <CheckBox android:id="@+id/cdTate" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginRight="25dp" android:background="#ffffff" android:text="@string/cb_tate"/> </LinearLayout>
またLinearLayoutタグが出てきました。
ルートタグのLinearLayoutでandroid:orientation="vertical"となってるので部品がすべて縦方向に配置されます。しかし、チェックボックスは横並びに表示させたい。
そこで、android:orientation="horizontal"としたLinearLayoutタグをネストすることで、チェックボックスを横並びにすることができます。
プルダウン
プルダウン用の文字列表示にはstring-arrayタグを使うことに注意です。
strings.xml
<resources> //省略 <string-array name="sp_type"> <item>戦士</item> <item>僧侶</item> <item>商人</item> <item>魔法使い</item> </string-array> </resources>
お次はactivity_main.xmlです。
プルダウンを作るには、Spinnerタグを使います。
activity_main.xml
<LinearLayout> //省略 <Spinner android:id="@+id/spType" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="5dp" android:background="#ffffff" android:entries="@array/sp_type" android:paddingBottom="5dp" android:paddingTop="5dp" /> </LinearLayout>
ボタン
最後にセーブボタンを作ります。
やはりstrings.xmlから。
strings.xml
<resources> //省略 <string name="bt_save">セーブ</string> </resources>
activity_main.xml
<LinearLayout> //省略 <Button android:id="@+id/btSave" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/bt_save" /> </LinearLayout>
ボタンを作るにはButtonタグを使います。
以上、Androidアプリ開発におけるビューの基本的な作り方をざっっっくりまとめてみました。
次はモデル部分をまとめていきたいと思います。
ここまでご覧になられた方、ありがとうございました。
それではまた〜
