ニューラル株式会社｜ハイブリッドOS｜File System｜ARM｜Android｜Java｜制御システム｜オープンシステム

ビューページャーでフラグメントを使用する方法です。
Eclipseの新規プロジェクト作成ウィザードで作成されるビューページャープロジェクトをベースにしています。

 

アクティビティクラスでビューページャーの設定を行います。
ビューページャーで表示される画面にフラグメントを使用しています。

 

■res/layout/activity_main.xml
アクティビティのレイアウトです。
ビューページャーを定義しています。

 

<android.support.v4.view.ViewPager
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

 

■res/layout/fragment_main.xml
フラグメント用のレイアウトです。
実際に表示される画面となります。
ビューページャーのページ番号(0起算) + 1をTextViewで表示します。

 

<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" >

    <TextView
        android:id="@+id/section_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</RelativeLayout>

 

■src/info.paveway.sample.fragment4.MainActivity.java
package info.paveway.sample.fragment4;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.ActionBarActivity;

/**
 * メイン画面クラス
 *
 */
public class MainActivity extends ActionBarActivity {

 

    /** ページャーアダプター */
    private MainPagerAdapter mMainPagerAdapter;

 

    /** ビューページャー */
    private ViewPager mViewPager;

 

    /**
     * 生成された時に呼び出される。
     *
     * @param savedInstanceSate 保存された時のインスタンスの状態
     */
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // スーパークラスのメソッドを呼び出す。
        super.onCreate(savedInstanceState);

 

        // レイアウトを設定する。
        setContentView(R.layout.activity_main);

 

        // ページャーアダプターを生成する。
        mMainPagerAdapter = new MainPagerAdapter(getSupportFragmentManager());

 

        // ビューページャーを取得する。
        mViewPager = (ViewPager) findViewById(R.id.pager);

 

        // ビューページャーにページャーアダプターを設定する。
        mViewPager.setAdapter(mMainPagerAdapter);

    }

 

    /**
     * ページャーアダプタークラス
     *
     */
    private class MainPagerAdapter extends FragmentPagerAdapter {

 

        /** ページ数 */
        private static final int PAGE_COUNT = 3;

 

        /**
         * コンストラクタ
         *
         * @param fm フラグメントマネージャー
         */
        public MainPagerAdapter(FragmentManager fm) {
            // スーパークラスのコンストラクタを呼び出す。
            super(fm);
        }

 

        /**
         * アイテムを返却する。
         *
         * @param position ポジション
         * @return アイテム
         */
        @Override
        public Fragment getItem(int position) {
            // ページ位置(0起算) + 1を引数としてフラグメントを生成し、返却する。
            return MainFragment.newInstance(position + 1);
        }

 

        /**
         * ページ数を返却する。
         *
         * @return ページ数
         */
        @Override
        public int getCount() {
            return PAGE_COUNT;
        }
    }
}

 

■src/info.paveway.sample.fragment4.MainFramgnet.java
package info.paveway.sample.fragment4;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

 

/**
 * メインフラグメントクラス
 *
 */
public class MainFragment extends Fragment {

 

    /** セクション番号の引数キー */
    private static final String ARG_SECTION_NUMBER = "section_number";

 

    /**
     * インスタンスを生成し、返却する。
     *
     * @param sectionNumber セクション番号
     * @return インスタンス
     */
    public static MainFragment newInstance(int sectionNumber) {
        // インスタンスを生成する。
        MainFragment fragment = new MainFragment();

 

        // 引数を設定する。
        Bundle args = new Bundle();
        args.putInt(ARG_SECTION_NUMBER, sectionNumber);
        fragment.setArguments(args);

 

        return fragment;
    }

 

    /**
     * コンストラクタ
     * 使用しない。
     */
    private MainFragment() {
    }

 

    /**
     * ビューが生成される時に呼び出される。
     *
     * @param inflater インフレーター
     * @param contianer コンテナ
     * @param savedInstanceState 保存した時のインスタンスの状態
     */
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        // レイアウトXMLからルートビューを取得する。
        View rootView = inflater.inflate(R.layout.fragment_main, container, false);

 

        // 番号を表示するテキストビューを取得し、引数で渡された番号を表示する。
        TextView textView = (TextView)rootView.findViewById(R.id.section_label);
        textView.setText(Integer.toString(getArguments().getInt(ARG_SECTION_NUMBER)));

 

        return rootView;
    }
}

 

以上
 

フラグメントを切り替える方法です。
メインアクティビティでメインフラグメントを設定します。
メインフラグメントに配置したボタンを押下したタイミングでサブフラグメントに切り替えます。
フラグメントの切り替えはFragmentManager#replace()を使用して行います。

 

■res/layout/activity_main.xml
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

 

■res/layout/fragment_main.xml
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="サブフラグメントへ" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/button1"
        android:layout_centerHorizontal="true"
        android:text="メインフラグメント" />

</RelativeLayout>

 

■res/layout/fragment_sub.xml
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="サブフラグメント" />

</RelativeLayout>

 

■src/info.paveway.sample.fragment3.MainActivity.java
package info.paveway.sample.fragment3;

 

import android.os.Bundle;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.ActionBarActivity;

 

/**
 * メインアクティビティ
 *
 * @version 1.0 新規作成
 *
 */
public class MainActivity extends ActionBarActivity {

 

    /**
     * 生成された時に呼び出される。
     *
     * @param savedInstanceState 保存された時のインスタンスの状態
     */
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // スーパークラスのメソッドを呼び出す。
        super.onCreate(savedInstanceState);

 

        // メインフラグメントを生成する。
        MainFragment fragment = new MainFragment();

 

        // トランザクションを開始する。
        FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();

 

        // メインフラグメントを追加する。
        transaction.add(android.R.id.content, fragment);

 

        // トランザクションをコミットする。
        transaction.commit();
    }
}

 

■src/info.paveway.sample.fragment3.MainFragment.java
package info.paveway.sample.fragment3;

 

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentTransaction;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.Button;

 

/**
 * メインフラグメント
 *
 * @version 1.0 新規作成
 *
 */
public class MainFragment extends Fragment {

 

    /**
     * 生成された時に呼び出される。
     *
     * @param inflater インフレーター
     * @param container コンテナー
     * @param savedInstanceState 保存された時のインスタンスの状態
     */
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savendInstanceState) {
        // ルートビューを取得する。
        View rootView = inflater.inflate(R.layout.fragment_main, container, false);

 

        // ボタンにリスナーを設定する。
        ((Button)rootView.findViewById(R.id.button1)).setOnClickListener(new OnClickListener() {

 

            /**
             * ボタンをクリックされた時に呼び出される。
             *
             * @param v ボタン
             */
            @Override
            public void onClick(View v) {
                // サブフラグメントを生成する。
                SubFragment fragment = new SubFragment();

 

                // トランザクションを開始する。
                FragmentTransaction transaction = getFragmentManager().beginTransaction();

 

                // フラグメントを置き換える。
                transaction.replace(android.R.id.content, fragment);

 

                // バックキーで前のフラグメントの状態に戻せるようにする。
                transaction.addToBackStack(null);

 

                // トランザクションをコミットする。
                transaction.commit();
            }
        });

 

        return rootView;
    }
}

 

■src/info.paveway.sample.fragment3.SubFragment.java
package info.paveway.sample.fragment3;

 

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

 

/**
 * サブフラグメント
 *
 * @version 1.0 新規作成
 *
 */
public class SubFragment extends Fragment {

 

    /**
     * 生成された時に呼び出される。
     *
     * @param inflater インフレーター
     * @param container コンテナー
     * @param savedInstanceState 保存された時のインスタンスの状態
     */
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savendInstanceState) {
        // ルートビューを取得する。
        View rootView = inflater.inflate(R.layout.fragment_sub, container, false);
 

        return rootView;
    }
}

 

以上

1つのアクティビティで1つのフラグメントを表示する方法です。
前回とは異なり、フラグメント用のクラス、レイアウトを用意し、FragmentTransactionによりアクティビティクラスからフラグメントクラスを追加します。

 

■res/layout/fragment_main.xml
フラグメント用のレイアウトです。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" />

</RelativeLayout>

 

■src/info.paveway.sample.fragment2.MainActivity.java
アクティビティクラスです。
アクティビティクラスではレイアウトを設定しません。
代わりにFragmentTransactionクラスによりフラグメントクラスを追加し、フラグメントのレイアウトを表示します。

package info.paveway.sample.fragment2;

import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;

public class MainActivity extends FragmentActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        MainFragment fragment = new MainFragment();
        FragmentManager manager = getSupportFragmentManager();
        FragmentTransaction transaction = manager.beginTransaction();
        transaction.add(android.R.id.content, fragment);
        transaction.commit();
    }
}

 

■src/info.paveway.sample.fragment3.MainFragment.java
フラグメントクラスです。
前回同様、第1引数のinflaterによりレイアウトファイルを設定します。
package info.paveway.sample.fragment2;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class MainFragment extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savendInstanceState) {
        return inflater.inflate(R.layout.fragment_main, container, false);
    }
}

 

以上