如何从底部改变tablayout的指标?

我想从下往上改变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请问我,对不起英文不好。

Solutions Collecting From Web of "如何从底部改变tablayout的指标?"

它可以通过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); 

示例截图

不幸的是,你不能通过设置一个属性或者在代码中设置它。 TabLayout具有SlidingTabStrip(内部类)的属性mTabStrip,它被设置为私有的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); } } 

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

可能将来他们将有一个国旗来改变它。

你可以通过像这样旋转TabLayout来实现:

 tabLayout.setRotationX(180); 

然后,您必须将其所有TextView子代都旋转回来,或者可以将TabLayout设置为自定义视图,而不是recursionsearchTextView:

 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禁用了外观的片段标题命名,但是你可以用另一种方式以某种方式将它们绑定在一起,我猜你会丢失一些默认的function。

在这里输入图像说明

我有不同的做法..

  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>

  1. 现在只需编程调整视图背景。

    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) { } 

    });

使用这些select器来自定义视图

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" /> 

结果: 在这里输入图像说明

它不能通过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> 

cap.png

在这里输入图像说明

底部透明

你只需要这些线

 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º。 所以他们又好了。

在这里输入图像说明

我知道这个问题是2年前问的,但是我没有find任何简单的解决scheme,没有使用任何库(smartTabLayout没有SelectedTextColour属性)。

颠倒你的tabLayout来获取顶部的指标
android:rotationX="180"
现在这将导致该选项卡中的文本也被倒置,以便反击
我们将不得不创build自定义的标签视图。 制作一个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或其他任何元素

创build您自己的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); } });