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

Question

我想从下到上更改 tablayout 的指示器。

我的代码

活动标签.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" />

我想要这个结果。

怎么做

谢谢你问我，抱歉英语不好。

Answer 1

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

从 XML 你可以使用app:tabIndicatorGravity="top"

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

Answer 2

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

在 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有一个属性mTabStrip的SlidingTabStrip（内部类），设置为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);
        }
    }

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

可能在未来他们会有一个标志来改变它。

Answer 5

我有不同的方法来做到这一点..

1. 将选项卡指示器颜色设置为与选项卡布局的背景颜色相同（这样您就不会在底部看到选项卡指示器）

2. 在包含视图的选项卡布局上方添加一个线性布局（水平）（与选项卡数量相同）。

<LinearLayout android:layout_width="match_parent" android:layout_height="5dp" android:orientation="horizontal" android:background="@color/tab_bg" android:weightSum="3">

<View
    android:id="@+id/view1"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:elevation="10dp"
    android:background="@drawable/selector_tab_indicator_white"/>

<View
    android:id="@+id/view2"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:elevation="10dp"
    android:background="@drawable/selector_tab_indicator_blue"/>

<View
    android:id="@+id/view3"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:elevation="10dp"
    android:background="@drawable/selector_tab_indicator_blue"/>

</LinearLayout>

3. 现在只需以编程方式调整视图背景。

   viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    } @Override public void onPageSelected(int position) { setTitle(getPageTitle(position)); switch(position){ case 0: view1.setBackgroundResource( R.drawable.selector_tab_indicator_white ); view2.setBackgroundResource( R.drawable.selector_tab_indicator_blue ); view3.setBackgroundResource( R.drawable.selector_tab_indicator_blue ); break; case 1: view1.setBackgroundResource( R.drawable.selector_tab_indicator_blue ); view2.setBackgroundResource( R.drawable.selector_tab_indicator_white ); view3.setBackgroundResource( R.drawable.selector_tab_indicator_blue ); break; case 2: view1.setBackgroundResource( R.drawable.selector_tab_indicator_blue ); view2.setBackgroundResource( R.drawable.selector_tab_indicator_blue ); view3.setBackgroundResource( R.drawable.selector_tab_indicator_white ); break; default: view1.setBackgroundResource( R.drawable.selector_tab_indicator_white ); view2.setBackgroundResource( R.drawable.selector_tab_indicator_blue ); view3.setBackgroundResource( R.drawable.selector_tab_indicator_blue ); break; } } @Override public void onPageScrollStateChanged(int state) { }

   });

使用这些选择器自定义视图

selector_tab_indicator_white.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
   android:shape="rectangle">
<corners
    android:radius="50dp"/>
<stroke
    android:width="1dp"
    android:color="#c4c0c0" />
<solid
    android:color="#fafafa" />

selector_tab_indicator_blue.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
   android:shape="rectangle">
<corners
    android:radius="0dp"/>
<stroke
    android:width="1dp"
    android:color="@color/tab_bg" />
<solid
    android:color="@color/tab_bg" />

结果：

Answer 6

你只需要那些行

tabLayout.setRotationX(180);

    tabListed = ((LinearLayout)tabLayout.getChildAt(0));
    for(int position = 0;position<tabListed.getChildCount();position++) {
        LinearLayout item=((LinearLayout) tabListed.getChildAt(position));
        item.setBackground(getDrawable(R.drawable.square_tab));
        item.setRotationX(180);
    }

首先选项卡旋转将选项卡布局旋转 180º，然后您将获得所有选项卡并将其旋转 180º。 所以他们又好了。

Answer 7

它不能通过 xml 属性完成，但可以通过在选项卡的背景中设置图像，顶部填充颜色和底部透明来完成。

 <android.support.design.widget.TabLayout
          ...
            app:tabBackground="@drawable/bg_tab"
            ...
 /> 

bg_tab.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/cap" android:state_selected="true" />
</selector>

帽.png

底部透明

Answer 8

我知道这个问题是 2 年前提出的，但我没有找到任何不使用任何库的简单解决方案（smartTabLayout 没有 SelectedTextColour 属性）。

反转您的 tabLayout 以获取顶部的指示器
android:rotationX="180"
现在这将导致该选项卡中的文本也被反转，因此要解决这个问题
我们必须创建自定义选项卡视图。 制作一个 xml 文件，例如：layout_custom_tab

<TextView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/tab.text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:maxLines="1"
android:padding="10dp"
android:rotationX="180"
android:textAllCaps="true"
android:textSize="12sp"
android:textColor="@color/white"
/>

注意：当只有一个元素时，您不需要 RelativeLayout 或其他任何东西

创建您自己的 TabLayout 并将 customView 设置为它。

public class TabLayoutPlus extends TabLayout {

public TabLayoutPlus(Context context) {
    super(context);
}

public TabLayoutPlus(Context context, AttributeSet attrs) {
    super(context, attrs);
}

public TabLayoutPlus(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
}

@Override
public void setupWithViewPager(ViewPager viewPager) {
    super.setupWithViewPager(viewPager);
    this.removeAllTabs();

    PagerAdapter adapter = viewPager.getAdapter();

    for (int i = 0, count = adapter.getCount(); i < count; i++) {
        Tab tab = this.newTab();
        View customView = LayoutInflater.from(getContext()).inflate(R.layout.layout_custom_tab, null);
        TextViewPlus tv = (TextViewPlus) customView.findViewById(R.id.tab_text);
        tv.setText(adapter.getPageTitle(i));
        tab.setCustomView(customView);
        this.addTab(tab.setText(adapter.getPageTitle(i)));
    }
 }    
}

您的活动中的 TabLayout 将如下所示

<TabLayoutPlus
    android:id="@+id/tablayout"
    android:layout_width="match_parent"
    android:layout_height="36dp"
    android:layout_above="@+id/camera.buttons.layout"
    android:layout_centerHorizontal="true"
    android:background="@color/cardscan.background"
    android:rotationX="180"
    app:tabGravity="center"
    app:tabIndicatorColor="@color/colorPrimary"
    app:tabMode="fixed"
    app:tabSelectedTextColor="@color/colorPrimary"
    app:tabTextColor="@color/white"
    />

如果您需要突出显示选定的选项卡文本颜色

private void setSelectedTab(TabLayoutPlus.Tab tab) {
    View view = tab.getCustomView();
    TextViewPlus tabtext = (TextViewPlus) view.findViewById(R.id.tab_text);
    tabtext.setTextColor(ContextCompat.getColor(this, R.color.colorPrimary)); // color you want to highlight your text with
}

private void setUnselectedTab(TabLayoutPlus.Tab tab){
    View view = tab.getCustomView();
    TextViewPlus tabtext = (TextViewPlus) view.findViewById(R.id.tab_text);
    tabtext.setTextColor(ContextCompat.getColor(this, R.color.white)); // color you want to lowlight your text with
}

现在只需添加 OnTabSelectedListener

tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
        @Override
        public void onTabSelected(TabLayout.Tab tab) {
            setSelectedTab(tab);
        }

        @Override
        public void onTabUnselected(TabLayout.Tab tab) {
            setUnselectedTab(tab);
        }

        @Override
        public void onTabReselected(TabLayout.Tab tab) {
            setSelectedTab(tab);
        }
    });

Answer 9

我用这个方法解决了

设置 scaleY="-1" ，这会将 TabLayout 旋转到 180 度，结果选项卡布局与文本反向旋转并将 TextView 水平旋转到 180 度，这将解决问题，请参阅下面的代码

1. 活动.xml

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent"> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.v4.view.ViewPager android:id="@+id/viewpager_exp" android:layout_above="@+id/tabs_RL" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" /> <RelativeLayout android:id="@+id/tabs_RL" android:layout_alignParentBottom="true" android:layout_width="match_parent" android:layout_height="@dimen/footer_height"> <android.support.design.widget.TabLayout android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="@dimen/dimen_60" android:background="@color/white" android:clipToPadding="false" android:paddingLeft="0dp" android:paddingRight="0dp" android:scaleY="-1" app:layout_scrollFlags="snap|enterAlways" app:tabGravity="fill" app:tabMaxWidth="0dp" app:tabIndicatorHeight="4dp" app:tabIndicatorColor="@color/dark_pink1" app:tabMinWidth="50dp" app:tabPaddingEnd="0dp" app:tabPaddingStart="0dp" app:tabMode="fixed" /> </RelativeLayout> </RelativeLayout> </RelativeLayout>

2. custom_tab.xml

    <customviews.CusMediumTextView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/tab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center_horizontal" android:textColor="#000000" android:textSize="@dimen/dimen_12" android:rotationX="180" android:textStyle="bold" />

3. 主Activity.class

    tabLayout.setupWithViewPager(viewPager); tabOne = (CusMediumTextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null); tabOne.setText("Tab1"); tabOne.setTextColor(getResources().getColor(R.color.light_black)); tabOne.setCompoundDrawablesWithIntrinsicBounds(0, R.drawable.home_icon, 0, 0); tabTwo = (CusMediumTextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null); tabTwo.setText("Tab2"); tabTwo.setTextColor(getResources().getColor(R.color.light_black)); tabTwo.setCompoundDrawablesWithIntrinsicBounds(0, R.drawable.settin_icon, 0, 0); tabThree = (CusMediumTextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null); tabThree.setText("Tab3"); tabThree.setTextColor(getResources().getColor(R.color.light_black)); tabThree.setCompoundDrawablesWithIntrinsicBounds( 0,R.drawable.delete_icon, 0, 0); tabFour = (CusMediumTextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null); tabFour.setText("Tab4"); tabFour.setTextColor(getResources().getColor(R.color.light_black)); tabFour.setCompoundDrawablesWithIntrinsicBounds( 0, R.drawable.msg_icon,0, 0); tabLayout.getTabAt(0).setCustomView(tabOne); tabLayout.getTabAt(1).setCustomView(tabTwo); tabLayout.getTabAt(2).setCustomView(tabThree); tabLayout.getTabAt(3).setCustomView(tabFour);