Androidアプリ開発のFrameLayoutの使い方【初心者向け】

Androidアプリ開発では、アプリの画面を簡単に作成できるレイアウトが数多く用意されています。

今回はそのなかの1つである、FrameLayout（フレームレイアウト）を追加する方法と基本的な使い方をご紹介します。

 

本記事はTechAcademyのAndroidアプリ開発オンラインブートキャンプの内容をもとに解説しています。

 

 

FrameLayoutとは

FrameLayoutとは、パーツをひとつだけ配置して使用するレイアウトです。位置の指定はできず、FrameLayoutに配置したパーツは左上に表示されます。

また、FrameLayoutに複数のパーツを配置した場合、パーツが重なって表示されます。

 

 

FrameLayoutを配置する

FrameLayoutはレイアウトエディタのパレットの「レイアウト」から配置できます。

パレット内のFrameLayoutを、プレビュー画面までドラッグしましょう。

 

 

[PR] Androidアプリ開発コース

FrameLayoutにパーツを配置する

FrameLayoutにパーツを配置するには、レイアウトエディタのパレットから配置したいパーツを選択し、プレビュー画面へドラッグします。

 

配置したパーツの位置を指定することはできず、画面の左上に表示されます。

 

さらにもうひとつパーツを配置してみましょう。すると先ほど配置したパーツの上に重なって表示されます。

 

 

FrameLayoutの応用

最後に応用として、FrameLayoutを利用して次のような画面のレイアウトを作る例を紹介します。

ボタンを押すことで表示される内容が変わる画面です。

 

レイアウトは、次のようになっています。

最初にLinearLayout（Vertical）（黄色枠）を配置します。

次に、LinearLayout（Hrizontal）（青枠）を配置し、画面を切り替えるためのボタンを配置します。

さらに、FrameLayout（赤枠）を配置し、その中に表示する画面を作成するために、レイアウトを3つ重ねた状態で配置しています。

 

なお、表示する画面の切り替えは、FrameLayoutの中に作成したレイアウトを、javaで制御しています。

レイアウトのソースは以下のようになります。

<?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:orientation="vertical">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">

<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="画面1" />
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="画面2" />
<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="画面3" />
</LinearLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">

<LinearLayout
android:id="@+id/layout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:visibility="invisible">

<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="40dp"
android:text="画面１"
android:textSize="40dp" />
</LinearLayout>
<LinearLayout
android:id="@+id/layout2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:visibility="invisible">
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="40dp"
android:layout_gravity="center"
android:layout_marginTop="40dp"
android:text="画面２" />
</LinearLayout>
<LinearLayout
android:id="@+id/layout3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:visibility="invisible">
<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="40dp"
android:layout_gravity="center"
android:layout_marginTop="40dp"
android:text="画面３" />
</LinearLayout>

</FrameLayout>
</LinearLayout>

MainActivityには以下のように記述しました。

public class MainActivity extends AppCompatActivity {

private LinearLayout mLayout1;
private LinearLayout mLayout2;
private LinearLayout mLayout3;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

mLayout1 = (LinearLayout)findViewById(R.id.layout1);
mLayout2 = (LinearLayout)findViewById(R.id.layout2);
mLayout3 = (LinearLayout)findViewById(R.id.layout3);

findViewById(R.id.button1).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
mLayout1.setVisibility(View.VISIBLE);
mLayout2.setVisibility(View.INVISIBLE);
mLayout3.setVisibility(View.INVISIBLE);
}
});
findViewById(R.id.button2).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
mLayout2.setVisibility(View.VISIBLE);
mLayout1.setVisibility(View.INVISIBLE);
mLayout3.setVisibility(View.INVISIBLE);
}
});
findViewById(R.id.button3).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
mLayout3.setVisibility(View.VISIBLE);
mLayout2.setVisibility(View.INVISIBLE);
mLayout1.setVisibility(View.INVISIBLE);
}
});
}
}

今回の記事は以上です。

さらに他のレイアウトを試したい場合はGridLayoutの使い方も合わせてご覧ください。

 

 

[お知らせ]TechAcademyでは初心者でもオリジナルアプリが作れるAndroidアプリ開発講座(オンラインブートキャンプ)を開催しています。自分でアプリを公開してみたい場合はご参加ください。