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

问题描述：

我想从下往上改变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的问我，对不起不好英语。

请将您的图像嵌入到图像中，无需HTML标记。请提高您的文字质量！ – kwoxer

好的，我很抱歉，我会编辑它。 –

你有没有找到任何解决方案？ –

答

不幸的是，您无法通过设置属性或将其设置为代码来完成此操作。 TabLayout有SlidingTabStrip（内部类），被设定为私人最终

private final SlidingTabStrip mTabStrip;

，所以你不能访问它，通过扩展TabLayout的属性mTabStrip。

所以SlidingTabStrip（其延伸LinearLayoyut）是它覆盖拉制法

@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); 
     } 
    }

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

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

答

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

透明的底部

用这个实现动画显示还是不行？ –

答

我有这样做的不同的方法..

集的标签指示颜色相同的标签布局的背景色（这样就不会看到在底部的标签指示）
添加线性布局（水平）的正上方含有的标签布局（相同数量等于标签数量）。

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

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

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

结果：

tabLayout.setRotationX(180);

然后，你必须旋转：

开始=>

如果我有五个不同尺寸的标签怎么办？ –

@ShabbirDhangot - 改为使用线性布局。但是在更改标签时不会有任何动画。 – Nayan

kartik agarval解决方案为我工作。您的解决方案不适用于选项卡不均匀的空间。 –

答

您可以通过旋转TabLayout像这样实现这一目标所有其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禁用外观的片段标题命名，但您可以用另一种方式以某种方式将它们绑定在一起。

答

我知道这个问题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); 
     } 
    });

答

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

Sample screenshot

一个黑客的位，但它的作品。谢谢。 – Wilhelm

答

你只需要那些行

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º。所以他们再次变好。

应该接受这个答案。 –

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

相关推荐