如何实现具有不同片段/布局的 ViewPager

Posted 2023-02-19

技术标签:

【中文标题】如何实现具有不同片段/布局的 ViewPager【英文标题】：How to implement a ViewPager with different Fragments / Layouts 【发布时间】：2013-08-27 02:58:04 【问题描述】：

当我启动一个实现 viewpager 的活动时，viewpager 创建了各种片段。我想为每个片段使用不同的布局，但问题是 viewpager 最多只显示两个布局（1 之后所有剩余片段的第二个布局）。

这是实现 viewpager 的 SwipeActivity 的代码：

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 个这样的片段，都有不同的布局，但是 viewpager 最多只显示 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);

【问题讨论】：

我遇到类型不匹配错误。你能看看我的帖子吗？ ***.com/questions/28334800/… androidbeasts.wordpress.com/2015/08/11/tabs-with-swipe-views/… 你的代码有什么问题？您好，您可以阅读此post 非常简单的答案，并提供完整的代码。 【参考方案1】：

由于这是一个非常常见的问题，我想花时间和精力详细解释具有多个片段和布局的 ViewPager。给你。

具有多个片段和布局文件的 ViewPager - 操作方法

以下是如何实现ViewPager的完整示例具有不同的片段类型和不同的布局文件。

在这种情况下，我有 3 个 Fragment 类，每个类都有一个不同的布局文件。为了简单起见，fragment-layouts 仅在背景颜色上有所不同。当然，任何布局文件都可以用于 Fragments。

FirstFragment.java 具有 orange 背景布局，SecondFragment.java 具有 green 背景布局，ThirdFragment.java 具有 red 背景布局.此外，每个 Fragment 显示不同的文本，具体取决于它来自哪个类以及它是哪个实例。

另外请注意，我正在使用支持库的片段： android.support.v4.app.Fragment

MainActivity.java（初始化 Viewpager 并将其适配器作为内部类）。再次查看 imports。我正在使用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;

activity_main.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_
    android:layout_
    />

片段类，FirstFragment.java 导入android.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;

first_frag.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_
    android:layout_
    android:background="@android:color/holo_orange_dark" >

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

SecondFragment.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;

second_frag.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_
    android:layout_
    android:background="@android:color/holo_green_dark" >

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

</RelativeLayout>

ThirdFragment.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;

third_frag.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_
    android:layout_
    android:background="@android:color/holo_red_light" >

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

</RelativeLayout>

最终结果如下：

Viewpager有5个Fragment，Fragment 1是FirstFragment类型，显示first_frag.xml布局，Fragment 2是SecondFragment类型，显示second_frag.xml，Fragment 3-5是ThirdFragment类型，都显示third_frag.xml。

您可以在上方看到 5 个片段，可以通过向左或向右滑动来在它们之间切换。当然只能同时显示一个 Fragment。

最后但同样重要的是：

我建议您在每个片段类。

不要通过构造函数传递潜在参数，而是使用newInstance(...) 方法和Bundle 传递参数。

这样，如果分离并重新附加，对象状态可以通过参数存储。很像 Bundles 附加到 Intents。

【讨论】：

@PhilippJahoda 很好的答案，谢谢。不过我想提一件事，如果 ViewPager 是在 Fragment 中定义的，那么在创建适配器时应该使用 getSupportChildFragmentManager() 而不是 getSupportFragmentManager()。否则，当方向改变发生时，代码会中断。是的，没错。但在我的示例中，ViewPager 是在 Activity 中定义的，因此 getSupportFragmentManager() 是合适的。此外，getSupportChildFragmentManager() 方法不存在，我假设您指的是 getChildFragmentManager()。在使用 v13 支持包时，您可以将 ViewPager 与原生片段一起使用。 developer.android.com/reference/android/support/v13/app/… 从 Android Lollipop 5.0 开始，这仍然有效吗？在您的 MyPagerAdapter --> getItem(int pos) 方法中，您始终会获得目标片段的新实例（基于 pos 值）。因此，每次旋转设备（方向更改）时，都会调用 getItem 方法并一次又一次地创建片段。但是它们在创建时存储在片段管理器中。我认为您应该检查它们是否已经在片段管理器中，因为如果不这样做，则会浪费内存。见pastebin.com/0bJc9mHA【参考方案2】：

创建一个视图数组并将其应用于：container.addView(viewarr[position]);

public class Layoutes extends PagerAdapter 

    private Context context;
    private LayoutInflater layoutInflater;
    Layoutes(Context context)
        this.context=context;
    
    int layoutes[]=R.layout.one,R.layout.two,R.layout.three;
    @Override
    public int getCount() 
        return layoutes.length;
    

    @Override
    public boolean isViewFromObject(View view, Object object) 
        return (view==(LinearLayout)object);
    
    @Override
    public Object instantiateItem(ViewGroup container, int position)
        layoutInflater=(LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View one=layoutInflater.inflate(R.layout.one,container,false);
        View two=layoutInflater.inflate(R.layout.two,container,false);
        View three=layoutInflater.inflate(R.layout.three,container,false);
        View viewarr[]=one,two,three;
        container.addView(viewarr[position]);
        return viewarr[position];
    
    @Override
    public void destroyItem(ViewGroup container, int position, Object object)
        container.removeView((LinearLayout) object);

【讨论】：

我们可以通过创建视图数组来扩展 ViewPager 中的布局。【参考方案3】：

添加片段的代码

public Fragment getItem(int position) 

    switch (position)
        case 0:
            return new Fragment1();

        case 1:
            return new Fragment2();

        case 2:
            return new Fragment3();

        case 3:
            return new Fragment4();

        default:
            break;
    

    return null;

为 Fragment1 的每个片段创建一个 xml 文件，使用 fragment_one.xml 作为布局文件，在 Fragment1 java 文件中使用以下代码。

public class Fragment1 extends Fragment 

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

        View view = inflater.inflate(R.layout.fragment_one, container, false);

        return view;

稍后您可以进行必要的更正。它对我有用。

【讨论】：

【参考方案4】：

基本的 ViewPager 示例

此答案是documentation、this tutorial 和the accepted answer 的简化版。其目的是让ViewPager 尽快启动并运行。之后可以进行进一步的编辑。

XML

为主要活动和每个页面（片段）添加 xml 布局。在我们的例子中，我们只使用一种片段布局，但如果您在不同页面上有不同的布局，那么只需为每个页面制作一个。

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_
    android:layout_
    tools:context="com.example.verticalviewpager.MainActivity">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_
        android:layout_ />

</RelativeLayout>

fragment_one.xml

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

    <TextView
        android:id="@+id/textview"
        android:textSize="30sp"
        android:layout_
        android:layout_
        android:layout_centerInParent="true" />

</RelativeLayout>

代码

这是主要活动的代码。它包括PagerAdapter 和FragmentOne 作为内部类。如果这些变得太大或者您在其他地方重复使用它们，那么您可以将它们移动到它们自己单独的类中。

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

public class MainActivity extends AppCompatActivity 

    static final int NUMBER_OF_PAGES = 2;

    MyAdapter mAdapter;
    ViewPager mPager;

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

        mAdapter = new MyAdapter(getSupportFragmentManager());
        mPager = findViewById(R.id.viewpager);
        mPager.setAdapter(mAdapter);
    

    public static class MyAdapter extends FragmentPagerAdapter 
        public MyAdapter(FragmentManager fm) 
            super(fm);
        

        @Override
        public int getCount() 
            return NUMBER_OF_PAGES;
        

        @Override
        public Fragment getItem(int position) 

            switch (position) 
                case 0:
                    return FragmentOne.newInstance(0, Color.WHITE);
                case 1:
                    // return a different Fragment class here
                    // if you want want a completely different layout
                    return FragmentOne.newInstance(1, Color.CYAN);
                default:
                    return null;
            
        
    

    public static class FragmentOne extends Fragment 

        private static final String MY_NUM_KEY = "num";
        private static final String MY_COLOR_KEY = "color";

        private int mNum;
        private int mColor;

        // You can modify the parameters to pass in whatever you want
        static FragmentOne newInstance(int num, int color) 
            FragmentOne f = new FragmentOne();
            Bundle args = new Bundle();
            args.putInt(MY_NUM_KEY, num);
            args.putInt(MY_COLOR_KEY, color);
            f.setArguments(args);
            return f;
        

        @Override
        public void onCreate(Bundle savedInstanceState) 
            super.onCreate(savedInstanceState);
            mNum = getArguments() != null ? getArguments().getInt(MY_NUM_KEY) : 0;
            mColor = getArguments() != null ? getArguments().getInt(MY_COLOR_KEY) : Color.BLACK;
        

        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                                 Bundle savedInstanceState) 
            View v = inflater.inflate(R.layout.fragment_one, container, false);
            v.setBackgroundColor(mColor);
            TextView textView = v.findViewById(R.id.textview);
            textView.setText("Page " + mNum);
            return v;

完成

如果您将上述三个文件复制并粘贴到您的项目中，您应该能够运行应用程序并在上面的动画中看到结果。

进行中

您可以使用 ViewPagers 做很多事情。请参阅以下链接以开始使用：

Creating Swipe Views with Tabs ViewPager with FragmentPagerAdapter（CodePath 教程总是很好）

【讨论】：

【参考方案5】：

这样也好：

<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_
    android:layout_
    />

public class MainActivity extends FragmentActivity 
    @Override
    public void onCreate(Bundle savedInstanceState) 
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main_activity);

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

    



public class FragmentTab1 extends Fragment 
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) 
        View rootView = inflater.inflate(R.layout.fragmenttab1, container, false);
        return rootView;
    


class MyPagerAdapter extends FragmentPagerAdapter

    public MyPagerAdapter(FragmentManager fragmentManager)
        super(fragmentManager);

    
    @Override
    public android.support.v4.app.Fragment getItem(int position) 
        switch(position)
            case 0:
                FragmentTab1 fm =   new FragmentTab1();
                return fm;
            case 1: return new FragmentTab2();
            case 2: return new FragmentTab3();
        
        return null;
    

    @Override
    public int getCount() 
        return 3;

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_
    android:layout_ >

    <TextView
        android:layout_
        android:layout_
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="@string/Fragment1" />

</RelativeLayout>

【讨论】：

【参考方案6】：

在您的片段中创建新实例并在您的活动中这样做

 private class SlidePagerAdapter extends FragmentStatePagerAdapter 
    public SlidePagerAdapter(FragmentManager fm) 
        super(fm);
    

    @Override
    public Fragment getItem(int position) 
        switch(position)
            case 0:
                return Fragment1.newInstance();
            case 1:
                return Fragment2.newInstance();
            case 2:
                return Fragment3.newInstance();
            case 3:
                return Fragment4.newInstance();


            default: break;

        
        return null;

【讨论】：

【参考方案7】：

2021 年回答使用 Kotlin、ViewPager2 和 RecyclerView.Adapter...

RecyclerView.Adapter 不使用 getItem()，但有一个方法 getItemViewType()。你可以重写这个方法来通知 onCreateViewHolder() 使用哪个布局。

class SettingsAdapter(val activity: AppCompatActivity): RecyclerView.Adapter<SettingsAdapter.SettingsViewHolder>()

    // Page names
    private val pageName = arrayOf("General", "Privacy Policy", "Terms of Use", "Feedback")
    private val pageResource = arrayOf(R.layout.fragment_general, R.layout.fragment_privacy, R.layout.fragment_terms, R.layout.fragment_feedback)
    private val pageCount = pageName.size

    override fun getItemCount(): Int 
        return pageCount
    

    override fun getItemViewType(position: Int): Int 
        return position
    

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): SettingsAdapter.SettingsViewHolder
    
        val context = parent.context
        val inflater = LayoutInflater.from(context)
        val settingsView = inflater.inflate(pageResource[viewType], parent, false)
        return SettingsViewHolder(settingsView)

然后您可以在 onBindViewHolder() 方法中以不同方式处理每个布局。

【讨论】：

以上是关于如何实现具有不同片段/布局的 ViewPager的主要内容，如果未能解决你的问题，请参考以下文章

如何在 viewpager 每个项目的片段底部添加动作布局

如何在同一页面上的 Fragment 内创建具有 3 个 Fragment 的 ViewPager？

在使用ViewPager时尝试从其父活动修改片段时出现空指针异常

如何在ViewPager中重用Fragment实例？

Android ViewPager 适配器修改其他页面

将视图粘贴在协调器布局内的 viewpager 片段的底部