【问题标题】:android center align the selected tab in tablayoutandroid中心对齐tablayout中的选定选项卡
【发布时间】:2015-11-12 01:16:02
【问题描述】:

我正在使用 android support design tablayout。这是我的代码:

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content""
        app:tabGravity="center"
        app:tabMode="scrollable"
        />

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />

我的问题是标签总是左对齐。但是,我想将选定的选项卡居中(即使在开始时,第一个(选定的)选项卡也应该居中)。有没有办法做到这一点?谢谢。

【问题讨论】:

  • 你找到答案了吗?
  • 如果你得到答案,请更新我们
  • 你有解决办法吗?
  • app:tabMode="scrollable" 更改为 app:tabMode="fixed"。如果您设置可滚动,则假设有很多选项卡,因此它将从左侧开始。

标签: android-viewpager android-tabs android-tablayout center-align


【解决方案1】:
public class MyTabLayout extends TabLayout {

    public MyTabLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        setTabMode(MODE_SCROLLABLE);
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        super.onLayout(changed, l, t, r, b);
        if (!changed) return;
        int totalTabsWidth = 0;
        for (int i = 0; i < getTabCount(); i++)
            totalTabsWidth += ((ViewGroup) getChildAt(0)).getChildAt(i).getWidth();
        int padding = (getWidth() - totalTabsWidth) / 2;
        if (padding < 0) padding = 0;
        getChildAt(0).setPaddingRelative(padding, 0, padding, 0);
    }
}

【讨论】:

    【解决方案2】:

    如果您的目标 API 是 23 或更高版本,让我再分享一个选项以供考虑,以及 SynerFlow 建议的 app:tabContentStart 的配置,它可以让末尾的 Tab 居中而不是滑动到最左边的边缘滚动。不过,我还在摸索23岁之前的API方法。

    final int TAB_CONTENT_START = 96;   
    
    tabLayout.setOnScrollChangeListener(new View.OnScrollChangeListener() {
    
        @Override
        public void onScrollChange(View v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
    
            final int maxAllowWidthOfTabBar = tabLayout.getMeasuredWidth() + TAB_CONTENT_START;
            if (scrollX > maxAllowWidthOfTabBar)
                tabLayout.setScrollX(maxAllowWidthOfTabBar);
    
        }
    });
    

    【讨论】:

    • 这应该是默认答案,这样可以节省我尝试所有失败建议的时间。
    【解决方案3】:

    我查看了 TabLayout 和 tabContentStart 只为其第一个孩子设置填充 -> SlidingTabStrip,所以我在两侧手动设置:

    public class CenteringTabLayout extends TabLayout {
        public CenteringTabLayout(Context context) {
            super(context);
        }
    
        public CenteringTabLayout(Context context, AttributeSet attrs) {
            super(context, attrs);
        }
    
        public CenteringTabLayout(Context context, AttributeSet attrs, int defStyleAttr) {
            super(context, attrs, defStyleAttr);
        }
    
        @Override
        protected void onLayout(boolean changed, int l, int t, int r, int b) {
            super.onLayout(changed, l, t, r, b);
            View firstTab = ((ViewGroup)getChildAt(0)).getChildAt(0);
            View lastTab = ((ViewGroup)getChildAt(0)).getChildAt(((ViewGroup)getChildAt(0)).getChildCount()-1);
            ViewCompat.setPaddingRelative(getChildAt(0), (getWidth()/2) - (firstTab.getWidth()/2),0,(getWidth()/2) - (lastTab.getWidth()/2),0);
        }
    }
    

    TabLayout 的第一个 0 索引子项是 SlidingTabStrip。

    【讨论】:

    • 这会一直在无限循环中调用 requestLayout()。
    • 切换片段后标签向左移动。
    • 超级解决方案,谢谢
    • 有效吗? ,对我来说 requestlayout 处于无限循环中
    • 这让我的标签也无限旋转。
    【解决方案4】:

    也许您正在寻找一个名为app:tabContentStart 的xml 属性。此属性允许您根据指定的值将活动选项卡推到左侧,该值在“dp”中设置(有点像左边距的东西)。例如,试着把你的代码写成这样:

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabMode="scrollable"
            app:tabContentStart="96dp"/> <-- Or whatever value you want here.
    

    它并不完全居中标签,但它为您提供与 Google Play 商店标签类似的效果。

    【讨论】:

    • 完美的答案,这正是我一直在寻找的几个小时。
    猜你喜欢
    • 1970-01-01
    • 2018-07-12
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-11-11
    • 1970-01-01
    • 2015-09-28
    • 1970-01-01
    相关资源
    最近更新 更多