2013年12月24日火曜日

ViewPagerを使ってみる(FragmentPagerAdapterを利用する)

以前にViewPagerを利用しましたが、Fragmentを使っていなかったので、
今後のことも考えてFragmentを利用したものを試したいと思います!Fragmentヽ(´ー`)ノマンセー

Fragmentで利用する場合には、AdapterとしてFragmentPagerAdapterを利用するそうです。

・FragmentPagerAdapterとは
FragmentPagerAdapterは、スワイプ時に各Fragmentをデタッチしますが、メモリ上に保持しておくので、簡単に再度アタッチができる。
(FragmentのonAttach、onCreateが毎回呼び出されるわけではない)
ただし、onCreateViewは呼び出されるため、ラジオボタンやチェックボックスなどの入力状態を保持したい場合には、
onSaveInstanceStateで状態を保存し、onCreateViewでそれを復元する必要がある。

このように、FragmentPagerAdapterは一度生成されたFragmentをメモリ上に保持しておくため、
大量のページに対して使用するとメモリを圧迫することになる。
※大量のページに対してViewPagerを利用する場合には、FragmentStatePagerAdapterを利用すること。
こちらの本を参考にしました。「Android UI Cookbook for 4.0 ICS(Ice Cream Sandwich)アプリ開発術

■AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.viewpager3"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="18" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="com.example.viewpager3.MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>
■activity_main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_horizontal"
    android:orientation="vertical"
    android:padding="4dip" >

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="0px"
        android:layout_weight="1" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:measureWithLargestChild="true"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/first"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="First" />

        <Button
            android:id="@+id/last"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Last" />
    </LinearLayout>

</LinearLayout>

■MyFragmentPagerAdapter.java
package com.example.viewpager3;

import android.os.Bundle;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentPagerAdapter;

/**
 * FragmentPagerAdapter を継承したクラス
 */
public class MyFragmentPagerAdapter extends FragmentPagerAdapter {
 
 private String[] pageTitle = { "Page1", "Page2", "Page3" };

 public MyFragmentPagerAdapter(FragmentManager fragmentManager) {
  super(fragmentManager);
 }

 @Override
 public Fragment getItem(int position) {

  // 選択されたページ内のFragmentを生成する
  Fragment fragment = PageFragment.newInstance(position + 1);
  return fragment;

 }

 @Override
 public int getCount() {
  return pageTitle.length;
 }

 @Override
 public CharSequence getPageTitle(int position) {
  return pageTitle[position];
 }

}
■PageFragment.java
package com.example.viewpager3;

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

public class PageFragment extends Fragment {

 int mNum;

 public static PageFragment newInstance(int num) {
  PageFragment f = new PageFragment();
  Bundle args = new Bundle();
  args.putInt("pageIndex", num);
  f.setArguments(args);

  return f;
 }

 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  mNum = getArguments() != null ? getArguments().getInt("pageIndex") : 1;
 }

 @Override
 public View onCreateView(LayoutInflater inflater, ViewGroup container,
   Bundle savedInstanceState) {

  // TextViewを生成する
  TextView view = new TextView(getActivity());
  // 幅、高さの設定
  LinearLayout.LayoutParams layout = new LinearLayout.LayoutParams(
    LinearLayout.LayoutParams.MATCH_PARENT,
    LinearLayout.LayoutParams.MATCH_PARENT);
  view.setLayoutParams(layout);
  // 文字の位置の設定
  view.setGravity(Gravity.CENTER);
  // 文字を設定
  view.setText(String.valueOf(getArguments().getInt("pageIndex")));
  // フォントサイズ変更
  view.setTextSize(180.0f);

  return view;
 }
}
■MainActivity.java
package com.example.viewpager3;

import android.support.v4.app.FragmentManager;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.view.View;

public class MainActivity extends FragmentActivity {

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

  // FragmentManager を取得
  FragmentManager manager = getSupportFragmentManager();

  // ViewPager のインスタンスを取得
  final ViewPager viewPager = (ViewPager) findViewById(R.id.pager);

  // FragmentPagerAdapter を継承したクラスのアダプターを作成し、ViewPager にセット
  final MyFragmentPagerAdapter adapter = new MyFragmentPagerAdapter(
    manager);
  viewPager.setAdapter(adapter);

  // First ボタンが押されたら、最初のページを表示
  findViewById(R.id.first).setOnClickListener(new View.OnClickListener() {

   @Override
   public void onClick(View v) {
    viewPager.setCurrentItem(0);
   }
  });

  // Last ボタンが押されたら、最後のページを表示
  findViewById(R.id.last).setOnClickListener(new View.OnClickListener() {

   @Override
   public void onClick(View v) {
    viewPager.setCurrentItem(adapter.getCount() - 1);
   }
  });
 }
}

実行結果は次のようになります。

以上です(`・ω・´)ゞビシッ!!

参考URL

0 件のコメント:

コメントを投稿