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

Question

我在平板电脑大小的横向布局上有一个双面板，使用片段。

左侧有一个带有ListView的片段。当列表项被点击时，右侧片段会加载详细信息。

在右侧（详细）片段的布局中，有一个com.viewpagerindicator.TabPageIndicator和一个android.support.v4.view.ViewPager. ViewPager将加载2个元素，每个元素都有自己的com.viewpagerindicator.TabPageIndicator。 我试图突出显示或下划线所选选项卡，但未成功。

希望你能提供一些建议 :)

- user1782998

---

请更新您的问题并在此处放置一些代码。 - Wh1T3h4Ck5

Answer 1

默认情况下，TabPageIndicator 不应用任何样式。要启用 ViewPagerIndicator 中的默认样式，请将以下行添加到 manifest.xml 文件中的 application 标签或适当的 activity 标签中。

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>  

我正在使用安卓的轻主题来开发我的应用程序，但你可能需要将其更改为你当前正在使用的主题。

如果你想要更改默认的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样式完全相同，因此您仍然需要进行所需更改。

- THelper

---

嗨，我正在使用操作栏，如何在清单文件上实现操作栏和android:theme="@style/Theme.MyTheme"两者？ - Yohanim

@StackOverflowError 我认为这个问题在这里得到了解答(https://dev59.com/8mkw5IYBdhLWcg3wqMQ0)和这里(http://stackoverflow.com/q/12267660/741249)。 - THelper

@THelper，我用的是ABC，这样可以吗？ - Yohanim

@THelper 嗯，运行得很好，感谢你的帮助。 - Yohanim

@THelper，这是一个非常好的答案。 - Thirumalvalavan

Answer 2

只需使用两个库：1）Sherlock action bar 2）ViewPageIndicator并实现tabPageIndicator视图，它将为您提供默认选项卡，在需要突出显示的选项卡中提供下划线。

如果您想更改下划线颜色，则需要更改用于下划线的可拉伸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);

- Gopal Sharma