如何在 Android 中制作可滚动的标签?
How to make scrollable tab in Android?
我有 9 个选项卡,但处于填充模式。我想让这些 thabs 可滚动。但我不知道诀窍。试了很多方法还是不行
我的 Activity :
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);
}
}
这是我使用 Tab 的布局:
<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 和其他方式,但仍然不适合我。
I tried to set tab gravity to MODE_SCROLLABLE
这不是重力值。这是要传递给 TabLayout
(tabs.setTabMode(TabLayout.MODE_SCROLLABLE)
) 上的 setTabMode()
的值。
This sample project from this book 有一个 activity 可以在三个固定选项卡和十个可滚动选项卡之间切换:
/***
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));
}
}
将 setTabMode 的值设置为 TabLayout.MODE_SCROLLABLE
tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
而且,您将能够水平滚动标签页。
只需将 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" />
对于 Kotlin 用户,这里是代码
val tabLayout = findViewById(R.id.tabs) as TabLayout
tabLayout.tabMode = TabLayout.MODE_SCROLLABLE
我有 9 个选项卡,但处于填充模式。我想让这些 thabs 可滚动。但我不知道诀窍。试了很多方法还是不行
我的 Activity :
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);
}
}
这是我使用 Tab 的布局:
<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 和其他方式,但仍然不适合我。
I tried to set tab gravity to MODE_SCROLLABLE
这不是重力值。这是要传递给 TabLayout
(tabs.setTabMode(TabLayout.MODE_SCROLLABLE)
) 上的 setTabMode()
的值。
This sample project from this book 有一个 activity 可以在三个固定选项卡和十个可滚动选项卡之间切换:
/***
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));
}
}
将 setTabMode 的值设置为 TabLayout.MODE_SCROLLABLE
tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
而且,您将能够水平滚动标签页。
只需将 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" />
对于 Kotlin 用户,这里是代码
val tabLayout = findViewById(R.id.tabs) as TabLayout
tabLayout.tabMode = TabLayout.MODE_SCROLLABLE