Align-Center SlidingTabLayout
Posted
技术标签:
【中文标题】Align-Center SlidingTabLayout【英文标题】： 【发布时间】：2015-01-17 22:36:37 【问题描述】：在我将我的应用程序迁移到 5.0 后，我不得不从基本选项卡迁移到 google 开发人员 provides 所提供的slidingTabLayout。
问题是，我不知道如何让两个按钮都像旧按钮一样居中。顺便说一句，我不是在谈论样式，只是按钮的位置，共享相同数量的宽度空间！ 为了清楚起见，我将发布一些图片：
我现在拥有的：
我期望拥有的：
我的布局：
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_
android:layout_
android:orientation="vertical">
<include
android:id="@+id/toolbar"
layout="@layout/toolbar"
android:layout_
android:layout_></include>
<com.maddogs.mymoney.views.SlidingTabLayout
android:id="@+id/requestSlideTab"
android:layout_
android:layout_></com.maddogs.mymoney.views.SlidingTabLayout>
<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/pager"
android:layout_
android:layout_
tools:context="com.maddogs.mymoney.RequestActivity" />
</LinearLayout>
非常感谢！
【问题讨论】：
【参考方案1】：使用 setDistributeEvenly() ，它会做你想做的事。像这样：
slideTab = (SlidingTabLayout)findViewById(R.id.requestSlideTab);
slideTab.setDistributeEvenly(true);
slideTab.setViewPager(viewPager);
编辑：从 Google IO 复制的 SlidingTabLayout
import android.content.Context;
import android.graphics.Typeface;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.util.SparseArray;
import android.util.TypedValue;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.HorizontalScrollView;
import android.widget.LinearLayout;
import android.widget.TextView;
/**
* To be used with ViewPager to provide a tab indicator component which give constant feedback as to
* the user's scroll progress.
* <p>
* To use the component, simply add it to your view hierarchy. Then in your
* @link android.app.Activity or @link android.support.v4.app.Fragment call
* @link #setViewPager(ViewPager) providing it the ViewPager this layout is being used for.
* <p>
* The colors can be customized in two ways. The first and simplest is to provide an array of colors
* via @link #setSelectedIndicatorColors(int...). The
* alternative is via the @link TabColorizer interface which provides you complete control over
* which color is used for any individual position.
* <p>
* The views used as tabs can be customized by calling @link #setCustomTabView(int, int),
* providing the layout ID of your custom layout.
*/
public class SlidingTabLayout extends HorizontalScrollView
/**
* Allows complete control over the colors drawn in the tab layout. Set with
* @link #setCustomTabColorizer(TabColorizer).
*/
public interface TabColorizer
/**
* @return return the color of the indicator used when @code position is selected.
*/
int getIndicatorColor(int position);
private static final int TITLE_OFFSET_DIPS = 24;
private static final int TAB_VIEW_PADDING_DIPS = 16;
private static final int TAB_VIEW_TEXT_SIZE_SP = 18;
private int mTitleOffset;
private int mTabViewLayoutId;
private int mTabViewTextViewId;
private boolean mDistributeEvenly;
private ViewPager mViewPager;
private SparseArray<String> mContentDescriptions = new SparseArray<String>();
private ViewPager.OnPageChangeListener mViewPagerPageChangeListener;
private final SlidingTabStrip mTabStrip;
public SlidingTabLayout(Context context)
this(context, null);
public SlidingTabLayout(Context context, AttributeSet attrs)
this(context, attrs, 0);
public SlidingTabLayout(Context context, AttributeSet attrs, int defStyle)
super(context, attrs, defStyle);
// Disable the Scroll Bar
setHorizontalScrollBarEnabled(false);
// Make sure that the Tab Strips fills this View
setFillViewport(true);
mTitleOffset = (int) (TITLE_OFFSET_DIPS * getResources().getDisplayMetrics().density);
mTabStrip = new SlidingTabStrip(context);
addView(mTabStrip, LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
/**
* Set the custom @link TabColorizer to be used.
*
* If you only require simple custmisation then you can use
* @link #setSelectedIndicatorColors(int...) to achieve
* similar effects.
*/
public void setCustomTabColorizer(TabColorizer tabColorizer)
mTabStrip.setCustomTabColorizer(tabColorizer);
public void setDistributeEvenly(boolean distributeEvenly)
mDistributeEvenly = distributeEvenly;
/**
* Sets the colors to be used for indicating the selected tab. These colors are treated as a
* circular array. Providing one color will mean that all tabs are indicated with the same color.
*/
public void setSelectedIndicatorColors(int... colors)
mTabStrip.setSelectedIndicatorColors(colors);
/**
* Set the @link ViewPager.OnPageChangeListener. When using @link SlidingTabLayout you are
* required to set any @link ViewPager.OnPageChangeListener through this method. This is so
* that the layout can update it's scroll position correctly.
*
* @see ViewPager#setOnPageChangeListener(ViewPager.OnPageChangeListener)
*/
public void setOnPageChangeListener(ViewPager.OnPageChangeListener listener)
mViewPagerPageChangeListener = listener;
/**
* Set the custom layout to be inflated for the tab views.
*
* @param layoutResId Layout id to be inflated
* @param textViewId id of the @link TextView in the inflated view
*/
public void setCustomTabView(int layoutResId, int textViewId)
mTabViewLayoutId = layoutResId;
mTabViewTextViewId = textViewId;
/**
* Sets the associated view pager. Note that the assumption here is that the pager content
* (number of tabs and tab titles) does not change after this call has been made.
*/
public void setViewPager(ViewPager viewPager)
mTabStrip.removeAllViews();
mViewPager = viewPager;
if (viewPager != null)
viewPager.setOnPageChangeListener(new InternalViewPagerListener());
populateTabStrip();
/**
* Create a default view to be used for tabs. This is called if a custom tab view is not set via
* @link #setCustomTabView(int, int).
*/
protected TextView createDefaultTabView(Context context)
TextView textView = new TextView(context);
textView.setGravity(Gravity.CENTER);
textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, TAB_VIEW_TEXT_SIZE_SP);
textView.setTypeface(Typeface.DEFAULT_BOLD);
textView.setLayoutParams(new LinearLayout.LayoutParams(
ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));
TypedValue outValue = new TypedValue();
getContext().getTheme().resolveAttribute(android.R.attr.selectableItemBackground,
outValue, true);
textView.setBackgroundResource(outValue.resourceId);
textView.setAllCaps(true);
int padding = (int) (TAB_VIEW_PADDING_DIPS * getResources().getDisplayMetrics().density);
textView.setPadding(padding, padding, padding, padding);
return textView;
private void populateTabStrip()
final PagerAdapter adapter = mViewPager.getAdapter();
final View.OnClickListener tabClickListener = new TabClickListener();
for (int i = 0; i < adapter.getCount(); i++)
View tabView = null;
TextView tabTitleView = null;
if (mTabViewLayoutId != 0)
// If there is a custom tab view layout id set, try and inflate it
tabView = LayoutInflater.from(getContext()).inflate(mTabViewLayoutId, mTabStrip,
false);
tabTitleView = (TextView) tabView.findViewById(mTabViewTextViewId);
if (tabView == null)
tabView = createDefaultTabView(getContext());
if (tabTitleView == null && TextView.class.isInstance(tabView))
tabTitleView = (TextView) tabView;
if (mDistributeEvenly)
LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) tabView.getLayoutParams();
lp.width = 0;
lp.weight = 1;
tabTitleView.setText(adapter.getPageTitle(i));
tabView.setOnClickListener(tabClickListener);
String desc = mContentDescriptions.get(i, null);
if (desc != null)
tabView.setContentDescription(desc);
mTabStrip.addView(tabView);
if (i == mViewPager.getCurrentItem())
tabView.setSelected(true);
public void setContentDescription(int i, String desc)
mContentDescriptions.put(i, desc);
@Override
protected void onAttachedToWindow()
super.onAttachedToWindow();
if (mViewPager != null)
scrollToTab(mViewPager.getCurrentItem(), 0);
private void scrollToTab(int tabIndex, int positionOffset)
final int tabStripChildCount = mTabStrip.getChildCount();
if (tabStripChildCount == 0 || tabIndex < 0 || tabIndex >= tabStripChildCount)
return;
View selectedChild = mTabStrip.getChildAt(tabIndex);
if (selectedChild != null)
int targetScrollX = selectedChild.getLeft() + positionOffset;
if (tabIndex > 0 || positionOffset > 0)
// If we're not at the first child and are mid-scroll, make sure we obey the offset
targetScrollX -= mTitleOffset;
scrollTo(targetScrollX, 0);
private class InternalViewPagerListener implements ViewPager.OnPageChangeListener
private int mScrollState;
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels)
int tabStripChildCount = mTabStrip.getChildCount();
if ((tabStripChildCount == 0) || (position < 0) || (position >= tabStripChildCount))
return;
mTabStrip.onViewPagerPageChanged(position, positionOffset);
View selectedTitle = mTabStrip.getChildAt(position);
int extraOffset = (selectedTitle != null)
? (int) (positionOffset * selectedTitle.getWidth())
: 0;
scrollToTab(position, extraOffset);
if (mViewPagerPageChangeListener != null)
mViewPagerPageChangeListener.onPageScrolled(position, positionOffset,
positionOffsetPixels);
@Override
public void onPageScrollStateChanged(int state)
mScrollState = state;
if (mViewPagerPageChangeListener != null)
mViewPagerPageChangeListener.onPageScrollStateChanged(state);
@Override
public void onPageSelected(int position)
if (mScrollState == ViewPager.SCROLL_STATE_IDLE)
mTabStrip.onViewPagerPageChanged(position, 0f);
scrollToTab(position, 0);
for (int i = 0; i < mTabStrip.getChildCount(); i++)
mTabStrip.getChildAt(i).setSelected(position == i);
if (mViewPagerPageChangeListener != null)
mViewPagerPageChangeListener.onPageSelected(position);
private class TabClickListener implements View.OnClickListener
@Override
public void onClick(View v)
for (int i = 0; i < mTabStrip.getChildCount(); i++)
if (v == mTabStrip.getChildAt(i))
mViewPager.setCurrentItem(i);
return;
【讨论】：
感谢回复，但是我的SlidingTabLayout没有这个功能。我只是从 Google 示例中复制粘贴。我错过了什么吗？
可能是您使用的是旧代码，我在答案中添加了来自 google io 的最新代码。
在代码中textView.setAllCaps(true);这行需要Api 14，只需注释它以获取较低的api，当前我的是9。
谢谢，成功了！顺便说一句，对于那些使用旧代码的人，您还应该更改SlidingTabStrip，否则会出错。代码可以找到：github.com/google/iosched/blob/…
对于未来的读者，请务必致电setDistributeEvenlybefore setViewPager。【参考方案2】：
在类SlidingTabLayout方法populateTabStrip()中添加
LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(
0, LayoutParams.WRAP_CONTENT, 1f);
tabView.setLayoutParams(lp);
【讨论】：
由于我的 TabLayout 不支持名为“setDistributeEvenly()”的方法，因此您的答案正确解决了问题。感谢分享:) 很好的解决方案，但这会删除当前标签的指示器。有什么解决办法吗？【参考方案3】：为什么不使用 PagerSlidingTabStrip 库？
有了这个库，你只需要调用setShouldExpand(true)。如果标签的总宽度不超过屏幕宽度，标签容器将被扩展以匹配屏幕宽度。
我真的认为你应该使用这个库，它非常好并且非常易于使用。
protected void onCreate(Bundle savedInstanceState)
ViewPager viewPager = findViewById(R.id.view_pager, null);
PagerSlidingTabStrip tabs = findViewById(R.id.tabs, null);
// ...
tabs.setShouldExpand(true);
tabs.setViewPager(viewPager);
// ...
【讨论】：
首先感谢您的回答。对于如此简单的事情，我不是第三方库的忠实粉丝。而对于 PagerSlidingTabStrip，它似乎不再维护，因为它已经快一年没有更新了，这并不好。 SlidingTabLayout 用于所有意图和目的已替换 PagerSlidingTabStrip以上是关于Align-Center SlidingTabLayout的主要内容，如果未能解决你的问题，请参考以下文章