单击 tabLayout 时查看寻呼机单击功能启用

Question

在我看来我有两个viewpager

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

而且我还有一个tablayout

TabLayout 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>

任何人都可以建议我在做什么 wrong.Please 请参阅所附图片以便更好地理解我的问题。当我用片段附加 tablayout 时，xml 内容没有显示在我的视图中

Answer 1

因为您在OnTabSelectedListener的onTabSelected中使用了第一个viewPager实例。尝试在 onTabSelected 中使用 vehicleDetailsViewPager 而不是 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 中查看寻呼机参考的图像。

试试这个方法:)

单击 tabLayout 时查看寻呼机单击功能启用

View pager click functions enables when click on tabLayout

android

android-viewpager

android-tablayout