TabLayout：如何添加滑动和单击以切换选项卡

Question

我的选项卡布局运行良好，选项卡可以左右切换并正确显示内容。

但是当“单击”选项卡时，不会发生任何操作。

问题：如何使用 onClick 切换选项卡？我试图在每个选项卡上添加一个 onClickListener ，但它不起作用。

这是我的 XML 代码：

    <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    android:id="@+id/main_layout"
    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="match_parent"
    tools:context=".MainActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:background="?attr/colorPrimary"
        android:elevation="6dp"
        android:minHeight="?attr/actionBarSize"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/toolbar"
        android:background="?attr/colorPrimary"
        android:elevation="6dp"
        android:minHeight="?attr/actionBarSize"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="fill_parent"
        android:layout_below="@id/tab_layout"/>

</RelativeLayout>

这是我的 Java

package com.example.alexis.tablayout;
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    setTitle(getResources().getText(R.string.MOD));

    final Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);

    TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
    final TabLayout.Tab Manof = tabLayout.newTab();
    final TabLayout.Tab Catalogue = tabLayout.newTab();
    final TabLayout.Tab Lidory = tabLayout.newTab();

    Manof.setIcon(R.drawable.flamepink);
    Catalogue.setIcon(R.drawable.modwhite);
    Lidory.setIcon(R.drawable.pantywhite);

    tabLayout.addTab(Manof, 0);
    tabLayout.addTab(Catalogue, 1);
    tabLayout.addTab(Lidory, 2);
    tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);

    final ViewPager viewPager = (ViewPager) findViewById(R.id.pager);
    final PagerAdapter adapter = new PagerAdapter
            (getSupportFragmentManager(), tabLayout.getTabCount());
    viewPager.setAdapter(adapter);

    viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
    viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {

        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        }

        @Override
        public void onPageSelected(int position) {

            switch (position){
                case 0:
                    Manof.setIcon(R.drawable.flamepink);
                    Catalogue.setIcon(R.drawable.modwhite);
                    Lidory.setIcon(R.drawable.pantywhite);
                    setTitle("Man Of The Day");
                    break;

                case 1:
                    Manof.setIcon(R.drawable.flamewhite);
                    Catalogue.setIcon(R.drawable.modpink);
                    Lidory.setIcon(R.drawable.pantywhite);
                    setTitle("Catalogue");
                    break;
                case 2:
                    Manof.setIcon(R.drawable.flamewhite);
                    Catalogue.setIcon(R.drawable.modwhite);
                    Lidory.setIcon(R.drawable.pantypink);
                    setTitle("Lidory");
                    break;
            }
        }

        @Override
        public void onPageScrollStateChanged(int state) {
        }
    });
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.menu_main, menu);
    return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    int id = item.getItemId();
    if (id == R.id.Menu) {
        return true;
    }

    return super.onOptionsItemSelected(item);
}}

Answer 1

您应该尝试将 TabLayout 与 ViewPager 结合起来；

tabLayout.setupWithViewPager(yourViewPager);

另外，请确保 ViewPager 不会覆盖 TabLayout。

Answer 2

我遇到了完全相同的问题。这对我有用：

首先，创建一个监听器类来接收选项卡上的点击事件（源代码在 Kotlin 中，但您可以轻松翻译成 Java）。这个类扩展了 TabLayout.OnTabSelectedListener 并且在其构造函数上需要一个 viewPager。

import android.support.design.widget.TabLayout
import android.support.v4.view.ViewPager


class MyTabLayoutListener(viewPager: ViewPager): 
TabLayout.OnTabSelectedListener {

val viewer = viewPager

override fun onTabReselected(tab: TabLayout.Tab?) {
//Empty but needed
}

override fun onTabUnselected(tab: TabLayout.Tab?) {
//Empty but needed
}

override fun onTabSelected(tab: TabLayout.Tab?) {
    viewer.setCurrentItem(tab!!.position) //When a tab is clicked, the item on viewPager is changed.
}
}

现在，创建此侦听器的一个实例并将其添加到您的选项卡：

var listener : MyTabLayoutListener = MyTabLayoutListener(viewPager)
tabLayout.addOnTabSelectedListener(listener)