如何解决 viewpager 中的相同内容复制

Question

我正在使用 TabLayout 和 ViewPager 开发一个应用程序。

因此，我将图像设置为以不同的片段显示，例如。 fragment_page1、fragment_page2、fragment_page3 等。但是 Fragment_page1 中的图像在所有 Fragment 中都是可见的。请问，这个问题怎么解决？

这是我的 FragmentAdapter 类

public class SimpleFragmentPageAdapter extends FragmentPagerAdapter {
    private String[] tabtitle=new String[]{"Description","Directions","Developers","Chant Page","Chant Page",};
    Context context;
    private int pagecount=4;
    public SimpleFragmentPageAdapter(FragmentManager fm, Context context) {
        super(fm);
        this.context=context;
    }

    @Override
    public Fragment getItem(int position) {
        switch (position) {
            case 0: //Fragment # 0 - This will show DevelopersFragment
                return DescriptionFragment.newInstance(0, "page # 0");
            case 1: //Fragment # 0 - This will show Page1Fragment
                return Page1Fragment.newInstance(1, "Chant # Page1");
                case 2: //Fragment # 0 - This will show Page1Fragment
                return Page1Fragment.newInstance(2, "Chant # Page2");
                case 3: //Fragment # 0 - This will show Page1Fragment
                return Page1Fragment.newInstance(3, "Chant # Page2");
                //etc
            default:
                return null;
        }
    }

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

    @Nullable
    @Override
    public CharSequence getPageTitle(int position) {
        return "Chant Page" + position;
    }
}

这是我的 fragment_page1 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"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:ads="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:gravity="top|fill_vertical"
    android:background="#efc393"
    tools:context=".Page1Fragment">

    <ScrollView
        android:id="@+id/scroller"
        android:layout_width="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:layout_height="wrap_content">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <ImageView
                android:id="@+id/ImPage1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:scaleType="fitXY"
                android:src="@drawable/page1_1" />

            <ImageView
                android:id="@+id/ImPage2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/ImPage1"
                android:scaleType="fitXY"
                android:src="@drawable/page1_2" />

            <ImageView
                android:id="@+id/ImPage3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/ImPage2"
                android:scaleType="fitXY"
                android:src="@drawable/page1_3" />

            <ImageView
                android:id="@+id/ImPage4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/ImPage3"
                android:scaleType="fitXY"
                android:src="@drawable/page1_4" />

        </RelativeLayout>

    </ScrollView>

    </RelativeLayout>

这是我的 fragment_page2

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:ads="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:gravity="top|fill_vertical"
    android:background="#efc393"
    tools:context=".Page2Fragment">

    <ScrollView
        android:id="@+id/scroller"
        android:layout_width="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:layout_height="wrap_content">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <ImageView
                android:id="@+id/ImPage2a"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:scaleType="fitXY"
                android:src="@drawable/page2_1" />

            <ImageView
                android:id="@+id/ImPage2b"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/ImPage2a"
                android:scaleType="fitXY"
                android:src="@drawable/page2_2" />

            <ImageView
                android:id="@+id/ImPage3c"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/ImPage2b"
                android:scaleType="fitXY"
                android:src="@drawable/page2_3" />

        </RelativeLayout>

这是运行 ViewPager 的 Activity

 <com.google.android.material.tabs.TabLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/tab_layout"
        app:tabSelectedTextColor="#ffffff"
        app:tabMode="scrollable"
        app:tabGravity="center"
        app:tabTextColor="#A56302"
        app:tabBackground="@drawable/pager"
        app:tabIndicatorColor="#f10606"
        app:tabIndicatorHeight="7dp">

    </com.google.android.material.tabs.TabLayout>

    <!-- Tab divider -->
    <View
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:background="@android:color/black" />

    <androidx.viewpager.widget.ViewPager
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:contextClickable="true"
        android:id="@+id/view_pager"
        android:layout_marginBottom="70dp"
        android:layout_below="@+id/tab_layout"
        app:tabMode="fixed"
        app:tabGravity="fill"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

    </androidx.viewpager.widget.ViewPager>


    <!-- view for AdMob Banner Ad -->
    <FrameLayout
        android:id="@+id/ad_view_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_alignParentBottom="true" />


protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tips_7);


        ActionBar actionBar = getSupportActionBar();
        actionBar.setTitle("CHANT");



        ViewPager viewPager = (ViewPager) findViewById(R.id.view_pager);
        viewPager.setAdapter(new com.aronti.chanthymnography.SimpleFragmentPageAdapter(getSupportFragmentManager(), this));

        //Attach the page change listener inside the activity
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            // This method will be invoked when a new page becomes selected
            @Override
            public void onPageSelected(int position) {
                Toast.makeText(Tips_7.this, "Selected Chant:" + position, Toast.LENGTH_SHORT).show();
            }

            // This method will be invoked when the current page is scrolled
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetpixels) {

            }

            // Called when the scroll state changes:
            //SCROLL_STATE_IDLE, SCROLL_STATE_DRAGGING, SCROLL_STATE_SETTLING
            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

        tabLayout = (TabLayout) findViewById(R.id.tab_layout);
        tabLayout.setupWithViewPager(viewPager);

    }

Answer 1

您应该在getItem(int position) 部分设置不同的类。

返回与指定位置关联的 Fragment。

@Override
    public Fragment getItem(int position) {
        switch (position) {
            case 0: //Fragment # 0 - This will show DevelopersFragment
                return DescriptionFragment.newInstance(0, "page # 0");
            case 1: //Fragment # 0 - This will show Page1Fragment
                return Page1Fragment.newInstance(1, "Chant # Page1");
                case 2: //Fragment # 0 - This will show Page1Fragment
                return Page2Fragment.newInstance(2, "Chant # Page2");
                case 3: //Fragment # 0 - This will show Page1Fragment
                return Page3Fragment.newInstance(3, "Chant # Page2");
                //etc
            default:
                return null;
        }
    }

Answer 2

 @Override
public void setUserVisibleHint(boolean isVisibleToUser) {
    super.setUserVisibleHint(isVisibleToUser);
    if (isVisibleToUser) {
        if (getFragmentManager() != null) {
            getFragmentManager().beginTransaction().detach(this).attach(this).commit();
        }
    }
}

在你的 Fragments 中使用这个函数，这个函数会在 activity 上再次附加相同的 Fragment，然后 Fragment 生命周期将重新开始。然后您可以在相应的片段中设置图像。