动作条的选项卡，根据屏幕的宽度设置动态宽度 [英] ActionBar tabs set dynamic width according to screen width

问题描述

我有5个选项卡中的所有。这就是我加入他们：

I have 5 tabs in all. This is how I am adding them :

for (int i = 0; i < tabs.length; i++) {

                if (i == 0) {
                    actionBar.addTab(
                            actionBar.newTab()
                                    .setText(null)
                                    .setIcon(R.drawable.activity)
                                    .setTabListener(this));
                } else if (i == 1) {
                    actionBar.addTab(
                            actionBar.newTab()
                                    .setText(null)
                                    .setIcon(R.drawable.group)
                                    .setTabListener(this));
                } else if (i == 2) {
                    actionBar.addTab(
                            actionBar.newTab()
                                    .setText(null)
                                    .setIcon(R.drawable.message)
                                    .setTabListener(this));
                } else if(i == 3){
                    actionBar.addTab(
                            actionBar.newTab()
                                    .setText(null)
                                    .setIcon(R.drawable.notification)
                                    .setTabListener(this));
                }
                else
                {
                    actionBar.addTab(
                            actionBar.newTab()
                                    .setText(null)
                                    .setIcon(R.drawable.hamburger)
                                    .setTabListener(this));
                }  

我试过<一个href="http://stackoverflow.com/questions/16590869/android-actionbar-set-width-to-the-tabs">this解决方案，但此设置的标签图标的宽度，而不是标签本身。

I tried this solution but this sets the width of the tab icon and not the tab itself.

以下是我已经应用的样式：

Following are the styles I have applied :

应用主题

<style name="CustomActionBarTheme" parent="Theme.AppCompat.Light">
        <item name="android:windowActionBarOverlay">true</item>
        <item name="android:actionBarTabStyle">@style/actionBarTabBarStyle</item>
        <item name="android:actionBarStyle">@style/MyActionBar</item>
    </style>  

 <style name="actionBarTabBarStyle" parent="@style/Widget.AppCompat.ActionBar.TabView">
        <item name="android:paddingLeft">1dp</item>
        <item name="android:paddingRight">1dp</item>
        <item name="android:minWidth">10dp</item>
        <item name="android:maxWidth">15dp</item>
        <item name="android:showDividers">none</item>
    </style>  

我也尝试过使用的 customView 作为标签，但没有奏效。

I also tried using customView for the tab but it didn't work.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tabItemLayout"
    android:gravity="center"
    android:layout_width="wrap_content" android:layout_height="match_parent">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:id="@+id/imageViewTab" />
</LinearLayout>

该标签是过于广泛，以及的TabBar 的滑动。我怎样才能让标签采取动态的宽度按屏幕宽度没有滑动效果。即所有选项卡应适应屏幕宽度，应该是平等的宽度。

The tabs are too wide and the tabBar is sliding. How can I make the tabs take dynamic width as per the screen width without the sliding effect. i.e. all tabs should fit in the screen width and should be of equal width.

有4个选项卡可见这里。在的TabBar 是滚动因此第五选项卡显示在其中，我不想滚动。

There are 4 tabs visible here. The tabBar is scrollable so the fifth tab appears on scrolling which I don't want.

推荐答案

设置页视图的宽度是基于内容/ yourImage大小，因此使标签视图宽度小，我们必须控制内容/图像大小。您可以通过将为此的ImageView 在的FrameLayout ，例如您的 customView 可以是：

Tab view width is based on content/yourImage size, so to make tab view width smaller, we have to control the content/Image size. You can do this by putting ImageView inside FrameLayout, for example your customView can be:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/tabItemLayout"
   android:gravity="center"
   android:layout_width="wrap_content" android:layout_height="match_parent">

   <FrameLayout
      android:layout_width="48dp"
      android:layout_height="48dp"
      android:layout_centerInParent="true"
      >

    <ImageView
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:adjustViewBounds="true"
      android:layout_gravity="center"
      android:gravity="center"
      android:id="@+id/imageViewTab" />

   </FrameLayout> 

</RelativeLayout>

和标签自定义样式：

and custom style for tab:

<style name="AppTheme" parent="@style/Theme.AppCompat.Light">

             ... ...
    <item name="actionBarTabStyle">@style/ActionBarTabStyle</item>

</style>

<style name="ActionBarTabStyle" parent="@style/Widget.AppCompat.Base.ActionBar.TabView">
   <item name="android:paddingLeft">0dp</item>
   <item name="android:paddingRight">0dp</item>
   <item name="android:paddingTop">0dp</item>
   <item name="android:paddingBottom">0dp</item>
</style>

[画面]

有关的FrameLayout 与 24dp 尺寸：

For FrameLayout size with 24dp:

有关的FrameLayout 与 40dp 尺寸

For FrameLayout size with 40dp

这篇关于动作条的选项卡，根据屏幕的宽度设置动态宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！