異なるフラグメント/レイアウトでViewPagerを実装する方法 質問する

異なるフラグメント/レイアウトでViewPagerを実装する方法 質問する

viewpager を実装するアクティビティを開始すると、viewpager によってさまざまなフラグメントが作成されます。フラグメントごとに異なるレイアウトを使用したいのですが、問題は viewpager が最大で 2 つのレイアウトしか表示しないことです (1 の後の残りのすべてのフラグメントでは 2 番目のレイアウト)。

コードはこちらスワイプアクティビティこれはビューページャを実装します:

public class SwipeActivity extends FragmentActivity
{

    MyPageAdapter pageAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_swipe);
        pageAdapter = new MyPageAdapter(getSupportFragmentManager());
        ViewPager pager=(ViewPager)findViewById(R.id.pager);
        pager.setAdapter(pageAdapter);
        ActionBar bar = getActionBar();
        bar.setDisplayHomeAsUpEnabled(true);
    }
    /**
    * Custom Page adapter
    */
    private class MyPageAdapter extends FragmentPagerAdapter
    {
        public MyPageAdapter(FragmentManager fm)
        {
            super(fm);
        }
        @Override
        public int getCount()
        {
            return 5;
        }
        @Override
        public Fragment getItem(int position)
        {
            switch(position)
            {
                case 0: return new MyFragment();
                case 1: return SecondFragment.newInstance("asdasd");
                default : return RamFragment.newInstance("s");
            }
        }
     }
}

コードはこちら断片

public class MyFragment extends Fragment
{
   @Override
   public View onCreateView(LayoutInflater paramLayoutInflater, ViewGroup paramViewGroup,    Bundle paramBundle)
   {
     return paramLayoutInflater.inflate(R.layout.processorlayout, paramViewGroup, false);
   }
}

私はこのようにレイアウトが異なる 5 つのフラグメントを使用しましたが、ビューページャーには最大で 2 つしか表示されません。

編集: SecondFragment のコード

public class SecondFragment extends Fragment
{
   public static final String EXTRA_MESSAGE = "EXTRA_MESSAGE";

  public static final SecondFragment newInstance(String paramString)
  {
    SecondFragment f = new SecondFragment();
    Bundle localBundle = new Bundle(1);
    localBundle.putString("EXTRA_MESSAGE", paramString);
    f.setArguments(localBundle);
    return f;
  }

  @Override
  public View onCreateView(LayoutInflater paramLayoutInflater, ViewGroup paramViewGroup, Bundle paramBundle)
  {
     return paramLayoutInflater.inflate(R.layout.motherboardlayout, paramViewGroup, false);
  }
}

ベストアンサー1

これは非常によく聞かれる質問なので、複数のフラグメントとレイアウトを持つ ViewPager について詳しく説明するために時間と労力を費やしたいと思いました。それでは始めましょう。

複数のフラグメントとレイアウト ファイルを持つ ViewPager - 方法

以下は、異なるフラグメント タイプと異なるレイアウト ファイルを使用して ViewPager を実装する方法の完全な例です。

この場合、3 つの Fragment クラスと、クラスごとに異なるレイアウト ファイルがあります。物事をシンプルにするために、フラグメントレイアウトは背景色のみ異なりますもちろん、フラグメントには任意のレイアウト ファイルを使用できます。

FirstFragment.javaにはオレンジ背景レイアウトでは、SecondFragment.javaには背景レイアウトとThirdFragment.javaには背景レイアウト。さらに、各フラグメントは、どのクラスからのものなのか、どのインスタンスなのかに応じて、異なるテキストを表示します。

また、サポート ライブラリのフラグメントを使用していることにも注意してください。android.support.v4.app.フラグメント

メインアクティビティ.java(Viewpagerを初期化し、そのアダプタを内部クラスとして持つ)。もう一度、輸入. パッケージを使用していますandroid.support.v4

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

public class MainActivity extends FragmentActivity {

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

        ViewPager pager = (ViewPager) findViewById(R.id.viewPager);
        pager.setAdapter(new MyPagerAdapter(getSupportFragmentManager()));
    }

    private class MyPagerAdapter extends FragmentPagerAdapter {

        public MyPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int pos) {
            switch(pos) {

            case 0: return FirstFragment.newInstance("FirstFragment, Instance 1");
            case 1: return SecondFragment.newInstance("SecondFragment, Instance 1");
            case 2: return ThirdFragment.newInstance("ThirdFragment, Instance 1");
            case 3: return ThirdFragment.newInstance("ThirdFragment, Instance 2");
            case 4: return ThirdFragment.newInstance("ThirdFragment, Instance 3");
            default: return ThirdFragment.newInstance("ThirdFragment, Default");
            }
        }

        @Override
        public int getCount() {
            return 5;
        }       
    }
}

アクティビティメイン.xml(MainActivitys .xml ファイル) - 画面全体を占める ViewPager のみを含むシンプルなレイアウト ファイル。

<android.support.v4.view.ViewPager
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/viewPager"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    />

フラグメントクラス、最初のフラグメント.javaandroid.support.v4.app.Fragment をインポートします。

public class FirstFragment extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View v = inflater.inflate(R.layout.first_frag, container, false);

        TextView tv = (TextView) v.findViewById(R.id.tvFragFirst);
        tv.setText(getArguments().getString("msg"));

        return v;
    }

    public static FirstFragment newInstance(String text) {

        FirstFragment f = new FirstFragment();
        Bundle b = new Bundle();
        b.putString("msg", text);

        f.setArguments(b);

        return f;
    }
}

最初のフラグ.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"
    android:background="@android:color/holo_orange_dark" >

    <TextView
        android:id="@+id/tvFragFirst"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:textSize="26dp"
        android:text="TextView" />
</RelativeLayout>

セカンドフラグメント.java

public class SecondFragment extends Fragment {

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    View v = inflater.inflate(R.layout.second_frag, container, false);

    TextView tv = (TextView) v.findViewById(R.id.tvFragSecond);
    tv.setText(getArguments().getString("msg"));

    return v;
}

public static SecondFragment newInstance(String text) {

    SecondFragment f = new SecondFragment();
    Bundle b = new Bundle();
    b.putString("msg", text);

    f.setArguments(b);

    return f;
}
}

2番目のフラグメント.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"
    android:background="@android:color/holo_green_dark" >

    <TextView
        android:id="@+id/tvFragSecond"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:textSize="26dp"
        android:text="TextView" />

</RelativeLayout>

サードフラグメント.java

public class ThirdFragment extends Fragment {

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    View v = inflater.inflate(R.layout.third_frag, container, false);

    TextView tv = (TextView) v.findViewById(R.id.tvFragThird);      
    tv.setText(getArguments().getString("msg"));

    return v;
}

public static ThirdFragment newInstance(String text) {

    ThirdFragment f = new ThirdFragment();
    Bundle b = new Bundle();
    b.putString("msg", text);

    f.setArguments(b);

    return f;
}
}

サードフラグ.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"
    android:background="@android:color/holo_red_light" >

    <TextView
        android:id="@+id/tvFragThird"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:textSize="26dp"
        android:text="TextView" />

</RelativeLayout>

最終結果は次のようになります。

Viewpager には 5 つのフラグメントが保持されます。フラグメント 1 は FirstFragment タイプで、first_frag.xml レイアウトを表示します。フラグメント 2 は SecondFragment タイプで、second_frag.xml を表示します。フラグメント 3 ~ 5 は ThirdFragment タイプで、すべて third_frag.xml を表示します。

ここに画像の説明を入力してください

上には 5 つのフラグメントが表示されており、左または右にスワイプすることで切り替えることができます。もちろん、同時に表示できるフラグメントは 1 つだけです。

最後になりましたが、重要なことです:

私は、空のコンストラクタ各フラグメント クラスで。

潜在的なパラメータをコンストラクター経由で渡す代わりに、newInstance(...)メソッドと を使用しBundleてパラメータを渡します。

この方法では、デタッチして再度アタッチすると、オブジェクトの状態を引数を通じて保存できます。Bundlesにアタッチされた場合とよく似ていますIntents

おすすめ記事