6

Estoy tratando de implementar esta aplicación. Por el momento, he diseñado pestañas y dado que tengo más de 7 pestañas, parece demasiado congestionado. ¿Cómo puedo diseñarlo para que el tabwidget se pueda desplazar horizontalmente? He visto este diseño en algunas de las aplicaciones en el mercado, pero no tengo idea de cómo implementar esto en mi aplicación.¿Cómo implementar pestañas con desplazamiento horizontal?

Una aplicación que vi tenía una vista de desplazamiento horizontal en la que se desplaza sola y cuando presiona la imagen/botón en particular, muestra algo de contenido. Parece que no son pestañas.

Entonces, ¿alguien tiene una idea de esto?

Respuesta

3

Consulte la aplicación ViewPager de Jake Wharton. Eso es exactamente lo que necesitas. Es un proyecto de biblioteca, por lo que debe incluirlo en su proyecto.

JakeWharton/Android-ViewPagerIndicator

+0

Hola, Calvin, gracias por su publicación Me funcionó. Estoy desarrollando una aplicación para una tableta. pero las pestañas no toman el ancho de los textos>. Espero que entiendas lo que quiero decir, parece todo congestionado. ¿Puedo definir un ancho para la pestaña que contiene el texto completo en ella? por ejemplo: si hay una pestaña que dice "Perfil de usuario" pero se muestra solo como "Usuario" –

+0

@roses_r, simplemente elimine el método onMeasure (int, int) de la clase TabPageIndicator de la biblioteca. Funciona. – alu

5

Este es un muy buen ejemplo mediante el uso de HorizontalScrollView. http://java.dzone.com/articles/scrolling-tabs-android

+0

Hola, Calvin, gracias por tu publicación. Me funcionó. Estoy desarrollando una aplicación para una tableta. pero las pestañas no toman el ancho de los textos>. Espero que entiendas lo que quiero decir, parece todo congestionado. ¿Puedo definir un ancho para la pestaña que contiene el texto completo en ella? por ejemplo: si hay una pestaña que dice "Perfil de usuario" pero solo aparece como "Usuario" –

0

Comprobar este enlace: https://dzone.com/articles/scrolling-tabs-android

envolver su TabWidget con un HorizontalScrollView y el conjunto de la ficha se ser capaz de expandirse más allá de la anchura de la pantalla y el usuario puede arrastrar las pestañas a la izquierda y la derecha según sea necesario:

<?xml version="1.0" encoding="utf-8"?><TabHost xmlns:android="http://schemas.android.com/apk/res/android"   android:id="@android:id/tabhost"   android:layout_width="fill_parent"   android:layout_height="fill_parent"> <LinearLayout android:orientation="vertical"    android:layout_width="fill_parent"    android:layout_height="fill_parent"> <HorizontalScrollView android:layout_width="fill_parent"       android:layout_height="wrap_content"       android:fillViewport="true"       android:scrollbars="none">  <TabWidget android:id="@android:id/tabs"     android:layout_width="fill_parent"     android:layout_height="wrap_content"/> </HorizontalScrollView> <FrameLayout android:id="@android:id/tabcontent"     android:layout_width="fill_parent"     android:layout_height="fill_parent" /> </LinearLayout></TabHost> 
12

TabLayout de la biblioteca de diseño de Android

<android.support.design.widget.TabLayout 
    android:id="@+id/categories" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    app:tabMode="scrollable" /> 
2
<HorizontalScrollView 
    android:id="@+id/vTabs" 
    android:scrollbars="none" 
    android:layout_width="fill_parent" 
    android:layout_alignParentBottom="true" 
    android:layout_height="wrap_content"> 
    <LinearLayout 
     android:orientation="horizontal" 
     android:background="@color/main_color_gray_dk" 
     android:layout_width="fill_parent" 
     android:layout_height="wrap_content"> 
     <Button 
      android:enabled="false" 
      android:id="@+id/tab1" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:text="@string/popular" /> 
     <View 
      android:id="@id/view1" 
      android:layout_width="@dimen/pad_1dp" 
      android:layout_height="fill_parent" /> 
     <Button 
      android:id="@id/tab2" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:text="@string/newest" /> 
     <View 
      android:id="@id/view1" 
      android:layout_width="@dimen/pad_1dp" 
      android:layout_height="fill_parent" /> 
     <Button 
      android:id="@id/tab3" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:text="@string/distance" /> 
     <View 
      android:id="@id/view1" 
      android:layout_width="@dimen/pad_1dp" 
      android:layout_height="fill_parent" /> 
     <Button 
      android:id="@+id/tab4" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:text="@string/minimum" /> 
    </LinearLayout> 
</HorizontalScrollView> 

Modificar los Textos a su gusto. Coloque en un relatveLayout y alignToParentBottom = "true" Espero que esto ayude

Cuestiones relacionadas