android - 选项卡布局 : How to add swipe AND onClick to switch tabs

Question

我的 tablayout 工作正常，选项卡左右切换并正确显示内容。

但是当“点击”选项卡时，没有任何 Action 发生。

问题:如何使用 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。