レイアウトとビュー
XMLレイアウトでUIを設計します。ConstraintLayout、LinearLayout、TextView、Button、ImageView、EditTextなどの一般的なビューを使用します。
「レイアウトとビュー」はCoddyKit上の無料Android Academyレッスンです。 これはレッスン3/7です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAndroid Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Android Academyコースには全7レッスンが含まれています。
XMLを使ったUIの構築
AndroidのUIは、res/layout/に保存されるXMLレイアウトファイルで定義します。レイアウトでは、画面の構造と外観、つまり表示するViewとその配置を記述します。
その後、Kotlinコードでこのレイアウトをinflateし、実行時にViewを操作します。
よく使うViewの種類
よく使われるViewウィジェット：
TextView— テキストを表示しますEditText— テキスト入力フィールドですButton— クリックできるボタンですImageView— 画像を表示しますCheckBox— オン／オフを切り替えますSwitch— オン／オフを切り替えます（Material）
ConstraintLayout
ConstraintLayoutは、ほとんどの画面で推奨されるレイアウトです。アンカーポイントを接続するように、制約を使ってView同士や親Viewを基準に配置できます。
- 階層がフラット — ネストしたレイアウトが不要です
- 柔軟 — あらゆる画面サイズに対応できます
- 新しいAndroid Studioプロジェクトではデフォルトで使用されます
ConstraintLayoutのXML
ConstraintLayoutで画面中央に配置したTextView：
<!-- res/layout/activity_main.xml -->
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/tvTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello Android!"
android:textSize="24sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>LinearLayout
LinearLayoutは、Viewを1行または1列に並べます。
android:orientation="vertical"— Viewを上から下へ積み重ねますandroid:orientation="horizontal"— Viewを横並びに配置しますandroid:layout_weight— 残りのスペースを比例配分します
シンプルで予測しやすい一方、深いネストは避けてください。
主なレイアウト属性
すべてのViewには、次の基本的な属性があります。
layout_width/layout_height：match_parent、wrap_content、または固定のdp値id：KotlinでViewを参照するために使用しますmargin：Viewの外側の余白ですpadding：Viewの内側の余白です
サイズにはdp（密度非依存ピクセル）、テキストサイズにはspを使用してください。
ScrollView
コンテンツが画面よりも高くなる場合は、ScrollViewで囲みます。
- 直接の子要素は1つだけ指定できます（通常はLinearLayoutです）
- デフォルトでは縦方向にスクロールします
- 横方向にスクロールする場合は
HorizontalScrollViewを使用します
長い動的リストには、より効率的なRecyclerViewを使用してください。
コードでViewを取得する
KotlinコードからViewにアクセスする方法は2つあります。
findViewById(R.id.tvTitle)— 従来の方法で、IDからViewを返します- ViewBinding — 最新の方法です。XMLからbindingクラスを生成し、すべてのViewへ型安全にアクセスできます
ViewBindingを強く推奨します。次のレッスンで学習します。
findViewByIdを使う
onCreateからViewにアクセスして変更します。
import android.os.Bundle
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val tvTitle = findViewById<TextView>(R.id.tvTitle)
tvTitle.text = "Welcome!"
tvTitle.textSize = 20f
}
}クイックチェック
Androidのレイアウトでテキストサイズに使用する単位はどれですか？
復習：レイアウトとView
これでAndroidの画面を設計できるようになりました。
- UIは
res/layout/のXMLレイアウトファイルで定義します - よく使うView：TextView、EditText、Button、ImageView
- ConstraintLayout — 柔軟でフラットな、推奨レイアウトです
- LinearLayout — 行または列にシンプルに配置します
- サイズには
dp、テキストにはspを使用します findViewByIdを使ってKotlinからViewにアクセスします
次は、ユーザー入力を処理してUIを操作できるようにします。
よくある質問
「レイアウトとビュー」レッスンは無料ですか？
はい。「レイアウトとビュー」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Android Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Android Academyコースには全7レッスンが含まれています。
「レイアウトとビュー」で何を学びますか？
XMLレイアウトでUIを設計します。ConstraintLayout、LinearLayout、TextView、Button、ImageView、EditTextなどの一般的なビューを使用します。 ブラウザで直接実行するハンズオンコードでAndroid Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Android Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのAndroid Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/7です。
「レイアウトとビュー」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このAndroid Academyレッスンでコードを書いて実行できますか？
はい。すべてのAndroid Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。