Android Studio　基礎　画面作成方法

7098 ワード
Android 初心者 AndroidStudio Kotlin Android テキストリンク

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

サンプルコード

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_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=・・・　の・・・を指定する。　

strings.xml
<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を使用する。