2012-01-27 32 views
12

Me gustaría crear una vista de icono de notificación que se parece a la notificación de la aplicación Google+. La diferencia será que necesito poder cambiar el color en tiempo de ejecución donde los iconos de Google+ aparezcan grises o rojos, así que supongo que están usando un StateListDrawable.Vista de notificación personalizada

¿Cuál es el mejor enfoque para esto? Preferiría tener las esquinas recortadas redondeadas y tener la opción de tener un dibujante dentro. Esta vista personalizada también se colocará en la barra de acciones. Todavía necesito la vista para responder a android: la lista de estados de fondo se puede dibujar para que pueda tener el clic y el funcionamiento de acuerdo seleccionado.

Esta vista personalizada también se colocará en la barra de acciones.

Google+ app with the notification icon in the upper right that's grayed out and has a 0 in the middle.

+0

¿Conoce cómo hacerlo como Google hace, sin personalización? – AndrewS

Respuesta

23

He resuelto esto haciendo lo siguiente.

Creado esto para hacer la forma de la esquina redondeada con un color sólido. Esto también agrega un negro translúcido para darle una apariencia presionada contra un fondo negro. res/dibujable/shape_notification.xml

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle"> 
    <stroke android:color="#33000000" android:width="2dp"/> 
    <corners android:radius="4dp" /> 
    <solid android:color="#99333333"/> 
</shape> 

El dibujable capa se utiliza como el dibujable real en el elemento de la barra de acción. Tiene el fondo (escrito arriba) superpuesto con el icono de la llave inglesa. res/estirable/layer_customizer.xml

<?xml version="1.0" encoding="utf-8"?> 
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" > 
    <item android:drawable="@drawable/shape_notification" /> 
    <item android:drawable="@drawable/ic_menu_preferences" /> 
</layer-list> 

código Java para cambiar el color. La vista de destino es el objeto asignado al layer_customizer dibujable. El color transferido cambiará el color sólido de la etiqueta shape_notification.xml.

public static void setCustomizerDrawableColor(final View target, final int color) { 
    final Drawable d = target.getDrawable(); 
    LayerDrawable layer = (LayerDrawable)d; 
    GradientDrawable gradient = (GradientDrawable)layer.getDrawable(0); 
    gradient.setColor(color); 
    gradient.invalidateSelf(); 
    layer.invalidateSelf(); 
    target.invalidate(); 
} 

Cree un diseño con estas capas. res/layout/actionview_customizer.xml

<?xml version="1.0" encoding="utf-8"?> 
<ImageButton xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:id="@+id/ActionViewCustomizer" 
    android:src="@drawable/layer_customizer" 
    android:contentDescription="@string/customize" 
    style="@style/ActionBarButton" /> 

Para obtener el diseño personalizado para poner en la Barra de acciones agregar este elemento de menú en él: res/menú/actionbar_main.xml

<item android:id="@+id/MenuItemCustomize" 
    android:icon="@drawable/layer_customizer" 
    android:title="@string/customize" 
    android:showAsAction="always" 
    android:actionLayout="@layout/actionview_customizer" 
    /> 

Luego, después de cargar la barra de acciones, use este código para obtener el control del botón. Esto sucede en tu Actividad.

@Override 
public boolean onCreateOptionsMenu(Menu menu) { 
    getMenuInflater().inflate(R.menu.actionbar_main, menu); 
    final ActionBar actionBar = getActionBar(); 
    final MenuItem customizerItem = menu.findItem(R.id.MenuItemCustomize); 
    View v = customizerItem.getActionView(); 
    customizerActionView = (ImageButton) v; 
    customizerActionView.setOnClickListener(new OnClickListener() { 
     public void onClick(View v) { 
      onOptionsItemSelected(customizerItem); 
     } 
    }); 
} 

Si desea ver el código fuente completo trabajando juntos mirar el código fuente de la aplicación en uso este. http://code.google.com/p/motivatormaker-android/source/browse/MakeMotivator/src/com/futonredemption/makemotivator/activities/MainActivity.java

+0

¿Cómo logras obtener la Vista en la barra de acciones (objetivo)? –

+0

Deberías estar bien ahora. :) –

+0

ayúdeme por favor - cómo mostrar los números, no icono como en su ejemplo ()? – AndrewS

Cuestiones relacionadas