Android開発してて思った

Android開発をしていて思ったことを書いていきます

Viewを動的に切り替える

はじめに

ボタンを押すと画面のビューを別のものに切り替えたい場合があります。
そのときはgetLayoutInflater().inflate(int ResourceId, ViewGroup root)を使えばいいです。

// 変更したいレイアウトを取得する
LinearLayout layout = (LinearLayout)findViewById(R.id.layout);
// レイアウトのビューをすべて削除する
layout.removeAllViews();
// レイアウトをR.layout.sampleに変更する
getLayoutInflater().inflate(R.layout.sample, layout);

サンプルの作成

それではボタンを押すとその下の赤い部分が青に変更するプログラムを作成します。

起動したときは赤
f:id:rikisha-blog:20140421103305p:plain
クリックすると青に変更
f:id:rikisha-blog:20140421103313p:plain

切替元レイアウトを指定する

はじめにactivity_main.xmlに変更するレイアウトを作成し、idを設定する

<LinearLayout
  android:id="@+id/layout"
  android:background="#FF0000" ...  ><!-- 赤色 -->

切替後のレイアウトを作成する

切替後のレイアウトは背景(background)が青のものを作成します
sample.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="#0000FF"
    android:orientation="vertical" >
</LinearLayout>

ボタンを押したときの処理を記述する

今回はonCreate()にボタンを押すとレイアウトが切り替えるような処理を記述します。

// ボタンを押したときにイベントを取得できるようにする
  Button button1 = (Button)findViewById(R.id.button1);
  button1.setOnClickListener(new OnClickListener() {
    @Override
    public void onClick(View v) {
    /*
      *  一部のビューだけを変更する
      */
    // 変更したいレイアウトを取得する
    LinearLayout layout = (LinearLayout)findViewById(R.id.layout);
    // レイアウトのビューをすべて削除する
    layout.removeAllViews();
    // レイアウトをR.layout.sampleに変更する
    getLayoutInflater().inflate(R.layout.sample, layout);
  }
});

ソースコード

MainActivity.java

package com.example.blogsample;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.LinearLayout;

public class MainActivity extends Activity{

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		setTitle("View切替のサンプル");
		
		// ボタンを押したときにイベントを取得できるようにする
		Button button1 = (Button)findViewById(R.id.button1);
		button1.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				/*
				 *  一部のビューだけを変更する
				 */
				// 変更したいレイアウトを取得する
				LinearLayout layout = (LinearLayout)findViewById(R.id.layout);
				// レイアウトのビューをすべて削除する
				layout.removeAllViews();
				// レイアウトをR.layout.sampleに変更する
				getLayoutInflater().inflate(R.layout.sample, layout);
			}
		});
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}
}

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:text="Click!" />

    <LinearLayout
        android:id="@+id/layout"
        android:background="#FF0000"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/button1"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/button1"
        android:orientation="vertical" >

    </LinearLayout>

</RelativeLayout>

sample.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="#0000FF"
    android:orientation="vertical" >
    

</LinearLayout>