AndroidStudioでアプリの画面作成方法の基礎をまとめようと思います。
レイアウトとは
レイアウトとは、GUIの配置を決めるための仕組みです。
このレイアウトを使うことによって、Androidアプリの画面を簡単に作成することができます。
Android開発においては.xmlで記述してGUIを配置していきます。
レイアウトの種類
画面を構成する要素（パーツ）は大きくわけて２種類あります。
ビュー、(ウィジェットとも言う）
ビューグループ(レイアウト部品とも言う）
ビューは画面部品そのもののこと
res/layoutファイルを編集する
このレイアウトファイルを編集するための専用エディタをレイアウトエディタと呼びます。
レイアウトエディタの右上にボタン群があります。
コードタブを選択、コードモードにした状態で、XMLコードを記述していく。
→このXMLコードをAndroid Studioが解析してグラフィカルに表示してくれるのが、デザインタブ
layoutファイルを理解する為にも、まずはXMlコードで記述していく。
主なレイアウト部品
| タグ | 内容 |
|---|---|
| LinearLayout | 一番扱いやすいレイアウト |
| TableLayout | 表形式で画面部品を配置 |
| FlameLayout | 画面部品を重ねて配置 |
| RelativeLayout | 画面部品を相対的に配置 |
| ConstraintLayout | RelativeLayout同様に、画面部品を相対的に配置 |
主な代表的なビュー
| タグ | 内容 |
|---|---|
| TextView | 文字列の表示 |
| EditText | テキストボックス（1行や複数行、数字のみなどの入力制限も可能） |
| Button | ボタン |
| RadioButton | ラジオボタン |
| CheckBox | チェックボックス |
| SeekBar | スライダー |
| RatingBar | ☆でレート値を表現 |
| Switch | ON/OFFが表現できるスイッチ |
画面構成はタグの組み合わせ
Androidの画面ではレイアウト部品とビュー部品を階層的に組み合わせて使います。
LineaLayout
∟ TextView
サンプルコード
<?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_marginTop="5dp"
android:layout_marginBottom="10dp"
android:background="#ffffff"
android:text="@string/tv_msg"
android:textSize="25sp" />
</LinearLayout>
解説
「android:id="@+id/tvLabelInput"」は、画面部品のID設定を指定している。
IDを指定することによって、アクティビティ内で、**「@+id/・・・」 ・・・**の名前で部品にアクセスできるようになる。
つまり、ここでは、「tvLabelInput」と言う名前でアクセスできるように設定している。
android:text="@string/tv_msg"は、画面部品が表示される時の文字列を設定します。
ファイル構成については、→ https://bit.ly/3g58tQH
基本的に文字列はstrings.xmlに記述し、そこからもらってくる。
その方法が**「@string/・・・」** **・・・に、strings.xmlで宣言した、name=・・・ の・・・**を指定する。
<resources>
<string name="app_name">画面部品サンプル</string>
<string name="tv_msg">お名前を入力してください。</string>
</resources>
tips -入力の種類を設定する属性-
今回のサンプルコードでは出てきていないが、android:inputTypeについてまとめておきます。
| 値 | 内容 |
|---|---|
| text | 通常の文字列入力 |
| number | 数値の入力 |
| phone | 電話番号の入力 |
| textEmailAddress | メールアドレスの入力 |
| textMultiLine | 複数行の入力 |
| textUri | URIの入力 |
tips -数値の単位-
数値を指定する場合は、pxは使用しない。
理由は、画面密度に依存するから。Android端末ごとに画面密度が違うから不向き。
→dp、spを使う
dpは、密度非依存ピクセルのこと。
密度が異なっていても、OSがサイズ計算をしてくれて、見た目が同じようになる。
spは、スケール非依存ピクセルのこと。
dpと似ているが、画面密度の違いだけでなく、ユーザーが設定した文字サイズも考慮している。
使い分け
ビューやビューグループのサイズ設定には、dpを使用し、
テキストサイズの設定にはspを使用する。