如何将tablayout的指标从底部更改为顶部？

Question

我想从下到上改变tablayout的指标.

我的代码

activity_tab.xml

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"

    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"

        app:layout_scrollFlags="scroll|enterAlways"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"

        app:tabIndicatorColor="#000000"

        app:tabMode="scrollable"
        />
</android.support.design.widget.AppBarLayout>

<android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

我想要这个结果.

怎么做

thx问我,抱歉英语不好.

Answer 1

不要使用scale = -1之类的东西.

您可以使用XML app:tabIndicatorGravity="top"

从您可以使用的代码 setSelectedTabIndicatorGravity(INDICATOR_GRAVITY_TOP)

Answer 2

它可以通过xml属性来完成,android:scaleY="-1"在xml代码中使用.视图将垂直翻转.使用相同的方法更正选项卡标题中使用的文本和图像.

在xml文件中:

<android.support.design.widget.TabLayout
    android:id="@+id/tabLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    android:minHeight="?attr/actionBarSize"
    android:scaleY="-1"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

在Java代码中

tabLayout = (TabLayout) findViewById(R.id.tabLayout);

// Adding the tabs using addTab() method
tabLayout.addTab(tabLayout.newTab().setText("Section 1"));
tabLayout.addTab(tabLayout.newTab().setText("Section 2"));
tabLayout.addTab(tabLayout.newTab().setText("Section 3"));
tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);

TextView tv1 = (TextView)(((LinearLayout)((LinearLayout)tabLayout.getChildAt(0)).getChildAt(0)).getChildAt(1));
tv1.setScaleY(-1);
TextView tv2 = (TextView)(((LinearLayout)((LinearLayout)tabLayout.getChildAt(0)).getChildAt(1)).getChildAt(1));
tv2.setScaleY(-1);
TextView tv3 = (TextView)(((LinearLayout)((LinearLayout)tabLayout.getChildAt(0)).getChildAt(2)).getChildAt(1));
tv3.setScaleY(-1);

Answer 3

您可以通过像这样旋转 TabLayout 来实现此目的：

tabLayout.setRotationX(180);

然后您必须将其所有 TextView 子项旋转回来，或者您可以将 TabLayout 设置为自定义视图，而不是递归搜索 TextView：

TabLayout.Tab tab = tabLayout.getTabAt(i);
tab.setCustomView(R.layout.layout_tab_view);

layout_tab_view.xml

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:rotationX="180"
        android:text="HOME"/>

如果您设置自定义视图，我想您会失去一些默认功能，例如 PagerAdapter 和 TextView 禁用外观的 Fragment 标题命名，但您可以以另一种方式将它们绑定在一起。

Answer 4

不幸的是，您无法通过设置属性或在代码中设置它来做到这一点。 TabLayout有一个SlidingTabStrip（内部类）的属性mTabStrip，设置为private final

private final SlidingTabStrip mTabStrip;

，因此您无法通过扩展 TabLayout 来访问它。

所以SlidingTabStrip（它扩展了LinearLayoyut）是一个覆盖draw方法的视图

@Override
    public void draw(Canvas canvas) {
        super.draw(canvas);
        // Thick colored underline below the current selection
        if (mIndicatorLeft >= 0 && mIndicatorRight > mIndicatorLeft) {
            canvas.drawRect(mIndicatorLeft, getHeight() - mSelectedIndicatorHeight,
                    mIndicatorRight, getHeight(), mSelectedIndicatorPaint);
        }
    }

所以你可以看到它绘制了具有顶部和底部属性的矩形。

也许将来他们会有一个标志来改变它。