画面レイアウトの作成
テキストや画像などを配置して画面のレイアウトを作成するにはxmlファイルを編集します。
app->res->layout->activity_main.xmlを開いて編集します。
基本的なコードの書き方はテキスト(TextViewなど)やボタン(Button)をレイアウト(FrameLayoutなど)で囲む形になります。
基本的なコードの書き方はテキスト(TextViewなど)やボタン(Button)をレイアウト(FrameLayoutなど)で囲む形になります。
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="https://schemas.android.com/apk/res/android"
xmlns:app="https://schemas.android.com/apk/res-auto"
xmlns:tools="https://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="orust.co.jp.myapplication.MainActivity">
<!--縦スクロール-->
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="top|center_horizontal"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="20dp"
android:background="@android:color/darker_gray"
android:gravity="center"
android:padding="10sp"
android:text="@string/text_view1"
android:textColor="@android:color/black"
android:textSize="18sp"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="-10dp"
android:layout_marginTop="-30dp"
app:srcCompat="@drawable/image"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="20dp">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:layout_weight="1"
android:text="@string/text_view2"
android:textColor="@android:color/black"
android:textSize="18sp"/>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="@string/text_view3"
android:textColor="@android:color/black"
android:textSize="18sp"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp">
<EditText
android:id="@+id/edittext1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_weight="1"
android:background="@drawable/frame_style1"
android:paddingBottom="8dp"
android:paddingLeft="8dp"
android:paddingRight="8dp"
android:paddingTop="8dp"
android:textColor="@android:color/black"
android:textSize="18sp"/>
<TextView
android:layout_width="50dp"
android:layout_height="wrap_content"
android:textColor="@android:color/black"
android:textSize="18sp"/>
<EditText
android:id="@+id/edittext2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_weight="1"
android:background="@drawable/frame_style1"
android:hint="@string/enter_digits"
android:inputType="numberDecimal"
android:paddingBottom="8dp"
android:paddingLeft="8dp"
android:paddingRight="8dp"
android:paddingTop="8dp"
android:textColor="@android:color/black"
android:textSize="18sp"/>
<TextView
android:layout_width="50dp"
android:layout_height="wrap_content"
android:text="@string/person"
android:textColor="@android:color/black"
android:textSize="18sp"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp">
<Button
android:id="@+id/Button1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_weight="1"
android:background="@drawable/button_badkground1"
android:text="@string/button1"
android:textColor="@android:color/white"
android:textSize="18sp"/>
<Button
android:id="@+id/Button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_weight="1"
android:background="@drawable/button_badkground2"
android:text="@string/button2"
android:textColor="@android:color/black"
android:textSize="18sp"/>
</LinearLayout>
</LinearLayout>
</ScrollView>
</FrameLayout>
レイアウトの種類
レイアウト | 内容 | 属性 | 説明 |
---|---|---|---|
LinearLayout | 縦又は横の直線上に部品を配置 | android:baselineAligned | ベースラインに合わせて配置するかどうかを指定 |
android:baselineAlignedChildIndex | baseline に対応させる子ビューを指定 | ||
android:divider | 共通の区切り線を挿入 | ||
android:gravity | オブジェクトの配置方法を指定 | ||
android:orientation | 縦並びか横並びかを指定 | ||
android:weightSum | 親に指定した数値を元に余白部分を子で分け合う | ||
RelativeLayout | 部品同士を相対的位置に配置 | android:gravity | オブジェクトの配置方法を指定 |
android:ignoreGravity | gravityで指定した配置方法の影響を受けないWidgetを指定 | ||
AbsoluteLayout | 部品を絶対的位置に配置(非推奨) | ||
TableLayout | 部品を表形式に配置。HTMLのテーブルのイメージ | android:collapseColumns | 折り畳む列を指定 |
android:shrinkColumns | 縮小する列を指定 | ||
android:stretchColumns | 幅を拡張できる列を指定 | ||
GridLayout | 部品を表形式に配置。行、列を指定して直接的に配置出来る (Android4以上) |
android:alignmentMode | 配置を合わせるときのモードを指定 |
android:columnCount | 自動で子ビューを配置する時に作成する最大列数 | ||
android:columnOrderPreserved | trueで列の境界が列のインデックスと同じ順序で表示されるように強制 | ||
android:orientation | 縦並びか横並びかを指定 | ||
android:rowCount | 自動で子ビューを配置する時に作成する最大行数 | ||
android:rowOrderPreserved | trueで行の境界が行のインデックスと同じ順序で表示されるように強制 | ||
android:useDefaultMargins | trueでいずれのマージンパラメータも指定されていない子ビューで、デフォルトのマージンがる使われる | ||
FrameLayout | 部品を常に左上に重ねて配置 | android:foregroundGravity | オブジェクトの配置方法を指定 |
android:measureAllChildren | 子オブジェクトの描画領域を取得するかどうか指定 |
属性
属性 | 説明 |
---|---|
xmlns:android="https・・・ | 名前空間に関する定義(Androidのレイアウト用として定義)⇒ルート要素で一度だけ行う |
xmlns:tools="https・・・ | 名前空間に関する定義(tools属性が使用できるように)⇒ルート要素で一度だけ行う |
tools:context="・・・ | そのレイアウトがどのアクティビティで使われるものかを指定する(プレビューにのみ使用) |
属性 | 定数 | 説明 |
---|---|---|
android:layout_width android:layout_height |
wrap_content | サイズを自動調整して表示する |
match_parent | 親オブジェクトのサイズ一杯に表示する | |
(数値)dp | 数値で指定 |
属性 | 説明 |
---|---|
android:layout_alignParentTop | trueを指定した場合、親のViewに対して上寄せで配置 |
android:layout_alignParentBottom | trueを指定した場合、親のViewに対して下寄せで配置 |
android:layout_alignParentLeft | trueを指定した場合、親のViewに対して左寄せで配置 |
android:layout_alignParentRight | trueを指定した場合、親のViewに対して右寄せで配置 |
android:layout_alignParentStart | trueを指定した場合、親のViewに対して左寄せで配置 |
android:layout_alignParentEnd | trueを指定した場合、親のViewに対して右寄せで配置 |
android:layout_centerHorizontal | trueを指定した場合、親のViewに対して水平方向中央寄せで配置 |
android:layout_centerVertical | trueを指定した場合、親のViewに対して垂直方向中央寄せで配置 |
android:layout_centerInParent | trueを指定した場合、親のViewに対して水平垂直方向共に中央寄せで配置 |
android:layout_toLeftOf | 指定したidのViewに対して左側に配置 |
android:layout_toRightOf | 指定したidのViewに対して右側に配置 |
android:layout_toStartOf | 指定したidのViewに対して左側に配置 |
android:layout_toEndOf | 指定したidのViewに対して右側に配置 |
android:layout_above | 指定したidのViewに対して上側に配置 |
android:layout_below | 指定したidのViewに対して下側に配置 |
android:layout_alignTop | 指定したidのViewの上端の位置とViewの上端を揃えて配置 |
android:layout_alignBottom | 指定したidのViewの下端の位置とViewの下端を揃えて配置 |
android:layout_alignLeft | 指定したidのViewの左端の位置とViewの左端を揃えて配置 |
android:layout_alignRight | 指定したidのViewの右端の位置とViewの右端を揃えて配置 |
android:layout_alignStart | 指定したidのViewの左端の位置とViewの左端を揃えて配置 |
android:layout_alignEnd | 指定したidのViewの右端の位置とViewの右端を揃えて配置 |
android:layout_alignBaseline | 指定したidのViewのベースラインの位置とViewのベースラインを揃えて配置 |