如何在Android中制作可滚动标签？

Question

我有9个选项卡，但处于填充模式。我想让这些thabs可以滚动。但我不知道这个诀窍。我尝试了很多方法，但什么也没有。

我的活动：

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和其他方式，但仍然不适合我。

Answer 1

我试图设置标签重力MODE_SCROLLABLE

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

This sample project从this book有三个固定的标签和十个滚动标签之间切换的活动：

/*** 
    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)); 
    } 
} 

Answer 2

设置setTabMode的价值TabLayout.MODE_SCROLLABLE

tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE); 

而且，你会能够水平滚动选项卡。

Answer 3

只需简单地将app:tabMode="scrollable"放入xml中即可。

为如：

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