突出显示或下划线选定的TabPageIndicator

时间:2012-10-29 13:17:54

标签: android android-layout android-viewpager tabcontrol viewpagerindicator

我在平板电脑大小的横向布局上有双窗格,我正在使用片段。

在左边我有一个带有listview的片段。当其中一个项目列表发生单击时,右侧片段将加载详细信息。

在右(详细)片段的布局中,有一个com.viewpagerindicator.TabPageIndicator和一个android.support.v4.view.ViewPager. ViewPager将加载2个元素,每个元素都有com.viewpagerindicator.TabPageIndicator。 我正在尝试突出显示或强调所选标签,但我没有这样做。

我希望你有一些建议:)

2 个答案:

答案 0 :(得分:23)

默认情况下,TabPageIndicator不应用任何样式。要从ViewPagerIndicator启用默认样式,请将以下行添加到application标记或activity中相应的manifest.xml标记

android:theme="@style/Theme.MyTheme"

然后使用以下内容将res\values\styles.xml文件添加到项目中

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="Theme.MyTheme" parent="@android:style/Theme.Light">
        <item name="vpiTabPageIndicatorStyle">@style/Widget.TabPageIndicator</item>
    </style>  
</resources>  

我正在为我的应用程序使用android light主题,但您可能希望将其更改为您现在使用的主题。

如果要更改默认的VPI样式,请将styles.xml文件更改为以下内容:

<?xml version="1.0" encoding="utf-8"?>
<resources>

  <style name="Theme.MyTheme" parent="@android:style/Theme.Light">
    <item name="vpiTabPageIndicatorStyle">@style/MyTabPageIndicator</item>
  </style>  

  <style name="MyTabPageIndicator" parent="Widget.TabPageIndicator">
    <item name="android:gravity">center</item>
    <item name="android:background">@drawable/vpi__tab_indicator</item>
    <item name="android:paddingLeft">22dip</item>
    <item name="android:paddingRight">22dip</item>
    <item name="android:paddingTop">12dp</item>
    <item name="android:paddingBottom">12dp</item>
    <item name="android:textAppearance">@style/MyTabPageIndicator.Text</item>
    <item name="android:textSize">12sp</item>
    <item name="android:maxLines">1</item>
  </style>

  <style name="MyTabPageIndicator.Text" parent="TextAppearance.TabPageIndicator">
    <item name="android:textStyle">bold</item>
    <item name="android:textColor">@color/vpi__dark_theme</item>
  </style>

</resources>

请注意,上面的设置与TabPageIndicactor的默认VPI样式完全相同,因此您仍然需要进行所需的更改。

答案 1 :(得分:2)

只需使用两个库1)Sherlock操作栏2)ViewPageIndicator并实现tabPageIndicator视图它将为您提供默认选项卡,并为highliget选项卡提供下划线。 如果你想改变下划线颜色,你需要更改在underlinbe中使用的可绘制第9个补丁图像。

以下是示例代码

XML视图示例                 

               <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:orientation="vertical" >

        <com.viewpagerindicator.TabPageIndicator
            android:id="@+id/indicator"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:background="@color/lock_background_greeen"
           />

        <android.support.v4.view.ViewPager
            android:id="@+id/pager"
            android:layout_width="fill_parent"
            android:layout_height="0dp"
            android:layout_weight="1" />
    </LinearLayout>
</FrameLayout>

片段代码

        final FragmentPagerAdapter adapter = new  FragmentChildPageAdapter(getChildFragmentManager());//getActivity().getSupportFragmentManager()

    final ViewPager pager = (ViewPager) v.findViewById(R.id.pager);
    pager.setAdapter(adapter);

    final TabPageIndicator indicator = (TabPageIndicator) v.findViewById(R.id.indicator);
    indicator.setViewPager(pager);