Функция просмотра пейджера включается при нажатии на tabLayout

Question

На мой взгляд, у меня есть два окна просмотра

ViewPager viewPager // this is to show images of cars
ViewPager vehicleDetailsViewPager // this is to show cars details

, а также у меня есть одна вкладка

TabLayout tabLayout

эта вкладка у меня есть 3 меню, например Exterior,Interior and System & Functions

Моя проблема в том, что когда я нажимаю на каждую вкладку в моем tablayout, он автоматически меняет мои изображения в первом viewPager

Мой activity page

public class VehicleDetailsActivity extends AppCompatActivity {
    ViewPager viewPager;
    CirclePageIndicator circlePageIndicator;
    ViewPager.SimpleOnPageChangeListener pagerSyncronizer;
    List<Car> carsList=new ArrayList<>();
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.vehicle_details_activity);
        viewPager = findViewById(R.id.carImageViewPager);
        viewPager.setOffscreenPageLimit(5);
        circlePageIndicator = findViewById(R.id.circlePageIndicator);
        pagerSyncronizer = getPagerSynchronizer();
        prepareCarsList();

        viewPager.setAdapter(new ViewPageAdapter(getSupportFragmentManager(), carsList));
        circlePageIndicator.setViewPager(viewPager);
        viewPager.setCurrentItem(0);

        circlePageIndicator.setOnPageChangeListener(pagerSyncronizer);

        TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
        tabLayout.addTab(tabLayout.newTab().setText("Exterior"));
        tabLayout.addTab(tabLayout.newTab().setText("Interior"));
        tabLayout.addTab(tabLayout.newTab().setText("System & Functions"));
        tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);


        final ViewPager vehicleDetailsViewPager = (ViewPager) findViewById(R.id.vehicleDetailsViewPager);
        final DeatilsFragmentPageAdapter deatilsFragmentPageAdapter = new DeatilsFragmentPageAdapter
                (getSupportFragmentManager(), getApplicationContext(),tabLayout.getTabCount());
        vehicleDetailsViewPager.setAdapter(deatilsFragmentPageAdapter);
        vehicleDetailsViewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
        tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                viewPager.setCurrentItem(tab.getPosition());
            }
            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
            }
            @Override
            public void onTabReselected(TabLayout.Tab tab) {
            }
        });



    }
    /*
     * for sync the viewpage item with page indicator to indicate
     */
    private ViewPager.SimpleOnPageChangeListener getPagerSynchronizer() {
        return new ViewPager.SimpleOnPageChangeListener() {
            @Override
            public void onPageSelected(int position) {
                viewPager.setCurrentItem(position, true);
            }
        };
    }

Мой макет XML равен

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="5dp"
    android:layout_marginRight="5dp"
    android:layout_marginBottom="15dp"
    android:id="@+id/RelativeLayout"
    android:orientation="vertical">
    <TextView
        android:id="@+id/txtCarName"
        android:text="Aston Martin DB8"
        app:layout_constraintStart_toEndOf="@+id/vehicleImage"
        android:layout_height="30dp"
        android:layout_width="wrap_content"
        android:layout_marginLeft="5dp"
        android:layout_margin="15dp"
        style="@style/vehicleNameStyle"
        android:layout_alignParentTop="true"
        />
    <androidx.viewpager.widget.ViewPager
        android:id="@+id/carImageViewPager"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:background="@drawable/my_custom_background"
        android:layout_alignBottom="@+id/txtCarName"
        />
    <com.viewpagerindicator.CirclePageIndicator
        android:id="@+id/circlePageIndicator"
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:layout_marginTop="8dp"
        android:paddingTop="5dp"
        android:visibility="visible"
        app:fillColor="@color/colorPrimary"
        app:strokeColor="#000"
        android:layout_alignBottom="@+id/carImageViewPager"/>
    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"/>
    <androidx.viewpager.widget.ViewPager
        android:id="@+id/vehicleDetailsViewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</LinearLayout>

Может кто-нибудь подсказать, пожалуйста, где я делаю что-то не так. Пожалуйста, смотрите прилагаемое изображение для лучшего понимания моей проблемы. Когда я прикрепляю tablayout с фрагментом, содержимое xml на мой взгляд не отображается

Answer 1

Поскольку вы использовали первый viewPager экземпляр внутри OnTabSelectedListener onTabSelected. Попробуйте использовать vehicleDetailsViewPager внутри onTabSelected вместо viewPager

@Override
public void onTabSelected(TabLayout.Tab tab) {
    vehicleDetailsViewPager.setCurrentItem(tab.getPosition());
}

Answer 2

Пожалуйста, измените ссылку на пейджер просмотра на ваш второй пейджер просмотра, как показано ниже

           @Override
            public void onTabSelected(TabLayout.Tab tab) {
                vehicleDetailsViewPager .setCurrentItem(tab.getPosition());
            }

Вы используете первые изображения, показывающие ссылку на пейджер просмотра в tablayout click.

Попробуйте следующим образом :)