ActionBar.Tab的自定义视图无法正确显示

时间:2013-11-03 17:09:49

标签: android android-layout tabs android-actionbar

我目前有一个使用选项卡式导航实现的actionBar,现在想要自定义选项卡。我为每个选项卡创建了一个自定义XML布局,以获得textview和可单击的ImageButton,并使用ActionBar.Tab.setCustomView进行设置。问题是布局的所有属性都没有任何效果(例如对齐)。任何帮助,将不胜感激!

这是一张显示所产生内容的图片:Image of what is being produced

我的自定义标签布局XML文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal" >
<TextView 
    android:id="@+id/tab_title"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    />   
<ImageButton 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_centerVertical="true"
    android:src="@drawable/ic_action_refresh"/>

</RelativeLayout>

ActionBar代码:

final ActionBar actionBar = getActionBar();

            //Because there is no 'parent' when navigating from the action bar, the home button for the Action Bar is disabled.    
            actionBar.setHomeButtonEnabled(false);

            //Specify that the actionBar will include a tabbed navigation
            actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);


        // Setting up the ViewPager rowingViewPager, attaching the RowingFragmentPagerAdapter and setting up a listener for when the
        // user swipes between sections.
            rowViewPager = (ViewPager) findViewById(R.id.pager);  
            rowViewPager.setAdapter(rowAdapter);
            rowViewPager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener()
            {
                @Override
                public void onPageSelected(int position) 
                {
                    actionBar.setSelectedNavigationItem(position); 
                }
            });


        // For loop to add tabs for each fragment to the actionBar
            for (int tab_counter = 0; tab_counter < rowAdapter.getCount(); tab_counter++) 
            {
                Tab new_tab = actionBar.newTab();
                new_tab.setCustomView(R.layout.custom_tab);
                TextView tab_title = (TextView) new_tab.getCustomView().findViewById(R.id.tab_title);
                tab_title.setText(rowAdapter.getTabTitle(tab_counter));
                new_tab.setTabListener(this);
                // Add tab with specified text as well as setting this activity as the TabListener.
                actionBar.addTab(new_tab);


            }

        rowViewPager.setOffscreenPageLimit(2); //Sets the number of off-screen fragments to store and prevent re-load. Will increase if future fragments are added.
    }

2 个答案:

答案 0 :(得分:6)

问题在于不是自定义actionBar布局本身,而是改变样式。默认的ActionBar有一个属性,左边和右边的填充是16dp。您可以在标签布局中执行任何操作,但不会覆盖此选项。

要做到这一点,我只是在actionsBar Tab的styles.xml中编写了一个新样式,我在其中覆盖了该填充并将其应用于应用程序主题中的actionBarTabStyle属性。这是我的新styles.xml,它显示了变化。

<resources>

    <!--
        Base application theme, dependent on API level. This theme is replaced
        by AppBaseTheme from res/values-vXX/styles.xml on newer devices.
    -->
    <style name="AppBaseTheme" parent="android:Theme.Light">
        <!--
            Theme customizations available in newer API levels can go in
            res/values-vXX/styles.xml, while customizations related to
            backward-compatibility can go here.
        -->
    </style>

    <!-- Application theme. -->
    <style name="AppTheme" parent="AppBaseTheme">
        <!-- All customizations that are NOT specific to a particular API-level can go here. -->
        <item name="android:actionBarTabStyle">@style/ActionBarTabStyle</item>
    </style>


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

</resources>

答案 1 :(得分:0)

非常简单,只需从自定义视图中删除ImageView,然后将其添加为textview的可绘制顶部/左侧/底部/右侧

<TextView 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:drawableTop="@drawable/your_img"
    android:text="Tab1"
    />