android - viewpager - Resaltar o subrayar el TabPageIndicator seleccionado

tablayout with viewpager in android

Question

Tengo un doblepane en un diseño de paisaje del tamaño de una tableta y estoy usando fragmentos.

A la izquierda tengo un fragmento con una vista de lista. Cuando se produce un clic en una de las listas de elementos, el fragmento correcto carga los detalles.

En el diseño del fragmento de la derecha (detalle) hay un com.viewpagerindicator.TabPageIndicator y un android.support.v4.view.ViewPager. El ViewPager cargará 2 elementos y cada uno tiene su com.viewpagerindicator.TabPageIndicator . Estoy tratando de resaltar o subrayar la pestaña seleccionada, pero no pude hacerlo.

Espero que tengas un consejo :)

Answer 1

Por defecto, el TabPageIndicator no aplica ningún estilo. Para habilitar el estilo predeterminado de ViewPagerIndicator, agregue la siguiente línea a la etiqueta de la application o a la etiqueta de activity apropiada en su manifest.xml

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

A continuación, agregue un archivo res/values/styles.xml a su proyecto con el siguiente contenido

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

Estoy usando el tema de la luz de Android para mi aplicación, pero es posible que desee cambiar esto al tema que está utilizando ahora.

Si desea realizar cambios en el estilo de VPI predeterminado, cambie el archivo de styles.xml a algo como esto:

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

Tenga en cuenta que la configuración anterior es exactamente la misma que el estilo de VPI predeterminado para TabPageIndicactor, por lo que aún debe realizar los cambios que desee.

Answer 2

Simplemente use dos bibliotecas 1) Barra de acciones de Sherlock 2) ViewPageIndicator e implemente la vista de tabPageIndicator, le proporcionará la pestaña predeterminada y para la pestaña resaltada, proporcione subrayado. SI desea cambiar el color del subrayado, debe cambiar las imágenes de parche novena dibujables que se utilizan en underlinbe.

Aquí hay un código de muestra

Ejemplo de vista 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>

Código de fragmento

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