如何在安卓中制作可滚动的选项卡？

Question

我有9个选项卡，但处于填充模式。我想让这些选项卡可滚动。但我不知道窍门。我尝试了很多方法，但还是没有用。

我的活动：

    package com.bani.fragment2;

import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.view.PagerAdapter;
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.WindowManager;


public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
    this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
            WindowManager.LayoutParams.FLAG_FULLSCREEN);
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
   final Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    toolbar.setTitle("Fragment 1");
    setSupportActionBar(toolbar);


    TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
    tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));
    tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));
    tabLayout.addTab(tabLayout.newTab().setText("Tab 3"));
    tabLayout.addTab(tabLayout.newTab().setText("Tab 4"));
    tabLayout.addTab(tabLayout.newTab().setText("Tab 5"));
    tabLayout.addTab(tabLayout.newTab().setText("Tab 6"));
    tabLayout.addTab(tabLayout.newTab().setText("Tab 7"));
    tabLayout.addTab(tabLayout.newTab().setText("Tab 8"));
    tabLayout.addTab(tabLayout.newTab().setText("Tab 9"));
    tabLayout.setTabGravity(TabLayout.GRAVITY_CENTER);

    final ViewPager viewPager = (ViewPager) findViewById(R.id.pager);
    final PagerAdapter adapter = new PageAdapter(getSupportFragmentManager(), tabLayout.getTabCount());
    viewPager.setAdapter(adapter);
    viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
    tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener()     {
        @Override
        public void onTabSelected(TabLayout.Tab tab) {
            switch(tab.getPosition()) {
                case 0:
                    viewPager.setCurrentItem(0);
                    toolbar.setTitle("Fragment 1");
                    break;
                case 1:
                    viewPager.setCurrentItem(1);
                    toolbar.setTitle("Fragment 2");
                    break;
                case 2:
                    viewPager.setCurrentItem(2);
                    toolbar.setTitle("Fragment 3");
                    break;
                case 3:
                    viewPager.setCurrentItem(3);
                    toolbar.setTitle("Fragment 4");
                    break;
                case 4:
                    viewPager.setCurrentItem(4);
                    toolbar.setTitle("Fragment 5");
                    break;
                case 5:
                    viewPager.setCurrentItem(5);
                    toolbar.setTitle("Fragment 6");
                    break;
                case 6:
                    viewPager.setCurrentItem(6);
                    toolbar.setTitle("Fragment 7");
                    break;
                case 7:
                    viewPager.setCurrentItem(7);
                    toolbar.setTitle("Fragment 8");
                    break;
                case 8:
                    viewPager.setCurrentItem(8);
                    toolbar.setTitle("Fragment 9");
                    break;
                default:

                    viewPager.setCurrentItem(tab.getPosition());
                    toolbar.setTitle("Fragment 1");
                    break;
            }



        }


        @Override
        public void onTabUnselected(TabLayout.Tab tab) {

        }

        @Override
        public void onTabReselected(TabLayout.Tab tab) {

        }
    });
}

@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.action_settings) {
        return true;
    }

    return super.onOptionsItemSelected(item);
}
}

这是我的带选项卡的布局：

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

请帮我解决问题，我尝试将选项卡重力设置为MODE_SCROLLABLE等其他方式，但对我仍然无效。

- Burhanuddin Rabbani

---

我认为这个教程对你非常有帮助：http://www.androidhive.info/2015/09/android-material-design-working-with-tabs/ - theapache64

只需按照官方的Android文档进行操作：https://developer.android.com/guide/navigation/navigation-swipe-view - Joseph Wambura

Answer 1

我尝试将选项卡重力设置为MODE_SCROLLABLE。

那不是一个重力值。这是要传递给TabLayout上的setTabMode（）的值（tabs.setTabMode（TabLayout.MODE_SCROLLABLE））。

这个示例项目来自这本书，其中包含一个可以在三个固定选项卡和十个可滚动选项卡之间切换的活动。

/***
  Copyright (c) 2012-15 CommonsWare, LLC
  Licensed under the Apache License, Version 2.0 (the "License"); you may not
  use this file except in compliance with the License. You may obtain a copy
  of the License at http://www.apache.org/licenses/LICENSE-2.0. Unless required
  by applicable law or agreed to in writing, software distributed under the
  License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS
  OF ANY KIND, either express or implied. See the License for the specific
  language governing permissions and limitations under the License.

  From _The Busy Coder's Guide to Android Development_
    https://commonsware.com/Android
 */

package com.commonsware.android.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.view.Menu;
import android.view.MenuItem;

public class MainActivity extends AppCompatActivity {
  private SampleAdapter adapter;
  private TabLayout tabs;

  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    ViewPager pager=(ViewPager)findViewById(R.id.pager);

    adapter=new SampleAdapter(this, getSupportFragmentManager());
    pager.setAdapter(adapter);

    tabs=(TabLayout)findViewById(R.id.tabs);
    tabs.setupWithViewPager(pager);
    tabs.setTabMode(TabLayout.MODE_FIXED);
  }

  @Override
  public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.actions, menu);

    return(super.onCreateOptionsMenu(menu));
  }

  @Override
  public boolean onOptionsItemSelected(MenuItem item) {
    if (item.getItemId()==R.id.fixed) {
      item.setChecked(!item.isChecked());

      if (item.isChecked()) {
        adapter.setPageCount(3);
        tabs.setTabMode(TabLayout.MODE_FIXED);
      }
      else {
        adapter.setPageCount(10);
        tabs.setTabMode(TabLayout.MODE_SCROLLABLE);
      }

      adapter.notifyDataSetChanged();
      tabs.setTabsFromPagerAdapter(adapter);

      return(true);
    }

    return(super.onOptionsItemSelected(item));
  }
}

- CommonsWare

Answer 2

只需要在xml中加入app:tabMode="scrollable"即可。

例如：

<android.support.design.widget.TabLayout
    android:id="@+id/tabs"
    android:background="@color/colorPrimary"
    app:tabMode="scrollable"
    app:tabTextColor="#ccc"
    app:tabIndicatorColor="@android:color/white"
    app:tabSelectedTextColor="@android:color/white"
    android:layout_width="match_parent"
    android:layout_height="40dp" />

- Sachin Varma

---

只需按照官方的Android文档进行操作：https://developer.android.com/guide/navigation/navigation-swipe-view - Joseph Wambura

Answer 3

将setTabMode的值设置为TabLayout.MODE_SCROLLABLE

tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);

并且，您将能够水平滚动选项卡。

- Deepak Kumar

Answer 4

对于 Kotlin 用户，这里是代码。

val tabLayout = findViewById(R.id.tabs) as TabLayout

tabLayout.tabMode = TabLayout.MODE_SCROLLABLE

- santosh devnath