2010-12-03 18 views
5

Tengo una aplicación de Android donde la pantalla de inicio es una vista de pestaña. Una de las pestañas va a una actividad de "Bandeja de entrada". Me gustaría mostrar un número que indique el número de mensajes nuevos. Esta parece ser una característica estándar en las aplicaciones de iPhone. ¿Hay algún tipo de soporte del sistema para esto? Si no, ¿cuál es la forma más fácil de implementar este efecto para las pestañas de Android?Android: Mostrar el número de elementos nuevos en las pestañas

+0

Similar a los iconos BADGE en los widgets de pestañas de iPhone, ¿verdad? –

+0

sí, EXACTAMENTE como los íconos de BADGE en los widgets de pestañas de iPhone =) – tstyle

+0

Puede probar el enfoque explicado en el siguiente enlace. http://npcom.posterous.com/iphone-like-tabview-badges-in-android –

Respuesta

4

Por lo que puedo leer en el código fuente de Android (TabHost.java) no hay forma de hacerlo con widgets estándar de manera similar a iPhone.

Lo que podría hacer es:

  1. Siempre que el recuento de la bandeja de entrada fue cambiado, elimine todas las fichas utilizando http://developer.android.com/reference/android/widget/TabHost.html#clearAllTabs()
  2. A continuación, crear las fichas de nuevo utilizando http://developer.android.com/reference/android/widget/TabHost.html#addTab(android.widget.TabHost.TabSpec), pero asegúrese de que el TabSpec se inicializa con [http://developer.android.com/reference/android/widget/TabHost.TabSpec.html#setIndicator(java.lang.CharSequence, android.graphics.drawable.Drawable)] [1]. Puede pasar su propio dibujo y usarlo para pintar la placa usted mismo.

Sin embargo, no es un reemplazo para la insignia de estilo de iPhone, ya que la insignia de iPhone está muy bien en las esquinas superiores derechas de la etiqueta. Y hasta ahora no hay forma de cambiarlo.

Por otro lado, al ser todo Java, alguien podría extender la clase TabHost y agregar soporte para insignias de estilo de iPhone.

[1]: http://developer.android.com/reference/android/widget/TabHost.TabSpec.html#setIndicator(java.lang.CharSequence, android.graphics.drawable.Drawable)

+0

bien esto es lo que terminé haciendo. Es de esperar que alguien agregue soporte de fábrica para las insignias de estilo de iPhone. Gracias – tstyle

+0

No dude en abrir la fuente de su solución, la gente podría hacerlo. :-) –

+2

Puede probar el enfoque explicado en el siguiente enlace. npcom.posterous.com/iphone-like-tabview-badges-in-android –

-2

Supongo que tiene una lista de sus objetos. Puede crear una propiedad "leer" para el objeto y luego contar el número de objetos con read = false en el momento de abrir la pestaña.

+1

No sé de qué estás hablando –

+0

La publicación original es preguntando cómo mostrar un conteo en un encabezado de pestaña, no cómo contar objetos. – Paul

0

Este es un ejemplo de Cómo agregar una tarjeta de identificación en la pestaña

chat_tab.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="0dip" 
    android:layout_height="64dip" 
    android:layout_weight="1" 
    android:layout_marginLeft="-3dip" 
    android:layout_marginRight="-3dip" 
    android:orientation="vertical" 
    android:background="@drawable/tab_indicator" > 

    <ImageView 
     android:id="@+id/chat_icon" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:src="@drawable/chat_icon" 
     android:layout_centerHorizontal="true"/> 

    <TextView 
     android:id="@+id/new_notifications" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignTop="@+id/chat_icon" 
     android:layout_toRightOf="@+id/chat_icon" 
     android:layout_marginLeft="-8dp" 
     android:layout_marginTop="0dp" 
     android:paddingTop="2dp" 
     android:paddingLeft="5dp" 
     android:paddingRight="5dp" 
     android:paddingBottom="2dp" 
     android:textSize="8sp" 
     android:textStyle="bold" 
     android:textColor="@android:color/primary_text_dark" 
     android:background="@drawable/badge" 
     android:visibility="gone"/> 

    <TextView 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="@string/chat" 
     style="@android:attr/tabWidgetStyle" 
     android:textColor="@android:color/tab_indicator_text" 
     android:layout_centerHorizontal="true" 
     android:layout_alignParentBottom="true"/> 


</RelativeLayout> 

Esto es badge.xml (círculo rojo para el fondo de notificaciones), TextView id: new_notifications background

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
     android:shape="oval" > 

    <stroke android:width="2dp" android:color="#FFFFFF" /> 

    <corners android:radius="10dp"/> 

    <padding android:left="2dp" /> 

    <solid android:color="#ff2233"/> 

</shape> 

Luego, en el código que simplemente puede hacer

LayoutInflater inflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE); 

     View chatTab = inflater.inflate(R.layout.chat_tab, null); 

     tvNewNotifications = (TextView) chatTab.findViewById(R.id.new_notifications); 

     intent = new Intent().setClass(MainTab.this, Chat.class); 
     tabSpec = tabHost 
       .newTabSpec("chat") 
       .setIndicator(chatTab) 
       .setContent(intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP)); 

Como se puede ver a mi disposición relativa tiene un fondo @drawable/tab_indicator la indicator.xml pestaña es estirable estándar del marco de la ficha, la cual obtuve de la SDK, sugiero que también debe obtenerlo de la carpeta de la API en SDK ya que también debe copiar algunas imágenes de las carpetas dibujables, puede encontrarlo your_sdk_drive: \ sdk \ platforms \ android-8

0

Puede descargar el viewbadger.archivo JAR desde aquí y puede utilizar este ejemplo para la referencia https://github.com/jgilfelt/android-viewbadger

Aquí está un ejemplo de código

pestañas TabWidget = (TabWidget) findViewById (android.R.id.tabs); BadgeView badge = new BadgeView (context, tabs, 3); badge.setTextSize (12); badge.setBadgePosition (BadgeView.POSITION_TOP_RIGHT); badge.setText ("0")); badge.toggle();

Cuestiones relacionadas