Añadir íconos a Android Navigation Drawer?
He explorado la web para una respuesta a esta pregunta, pero parece que no puede encontrar uno, incluso en la documentación oficial de Android.
Estoy en el proceso de crear una aplicación que implemente el nuevo diseño de la gaveta de navegación de Android. La documentación de este diseño se puede encontrar aquí y aquí .
- No se puede obtener el icono de Actionbar para animar
- Cordova / Phonegap - Android: Icono sin actualizar
- Añadir icono de búsqueda en la barra de acción de Android
- Icono de lanzador de Android demasiado pequeño
- PhoneGap Android: ¿Cómo forzar a la aplicación a utilizar iconos de asset \ www \ res en lugar res \ drawable carpeta?
En la documentación de diseño, así como en una serie de aplicaciones populares como Facebook y Google Corrientes, los elementos del cajón tienen iconos delante de ellos.
La propia documentación de diseño los menciona, bajo "Contenido del Cajón de Navegación"
Los blancos de navegación pueden tener iconos principales opcionales así como contadores finales. Utilice los contadores para informar a los usuarios acerca de un estado cambiado de datos en la vista correspondiente.
Desafortunadamente, la documentación del desarrollador no menciona cómo implementar iconos en esta configuración. Describe cómo implementar la lista de elementos como tal:
public class MainActivity extends Activity { private String[] mPlanetTitles; private ListView mDrawerList; ... @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mPlanetTitles = getResources().getStringArray(R.array.planets_array); mDrawerList = (ListView) findViewById(R.id.left_drawer); // Set the adapter for the list view mDrawerList.setAdapter(new ArrayAdapter<String>(this, R.layout.drawer_list_item, mPlanetTitles)); // Set the list's click listener mDrawerList.setOnItemClickListener(new DrawerItemClickListener()); ... } }
Debido a que su implementación utiliza getStringArray (), no hay forma de pensar en modificar el xml del elemento de fila para incluir un icono.
Esto es desconcertante, porque muchas aplicaciones parecen implementar iconos antes de cada elemento de texto muy bien, y la documentación de diseño incluso hace referencia a la adición de iconos. Siento que debe haber alguna llamada API simple para lograr la adición de estos iconos, y sin embargo la única aplicación que he encontrado hasta ahora parece ridículamente complicado.
¿Alguien sabe cómo agregar iconos a los elementos de la gaveta de navegación? ¿Hay una manera de hacer esto con una llamada simple de la API, o todas estas compañías (Facebook, Google, etc) tuvieron que encontrar maneras de cortar alrededor del problema?
Gracias a todos.
- Cómo obtener la lista de todos los accesos directos instalados que se encuentran en el inicio de pantalla de inicio en android
- ListView con ArrayAdapter y ViewHolder añadiendo iconos al ítem equivocado
- ¿Es posible cambiar el color del icono de diseño de material de xml en Android?
- Generador de iconos de Android para la barra de acción y la notificación no funciona (forma gris)
- Cambiar la forma o la sombra del icono o eliminarlo por completo
- Directorio de iconos y pantallas splash de Cordova
- Icono contador en android
- ¿Cómo utilizar iconos personalizados en jQuery móvil?
Debido a que su implementación utiliza getStringArray (), no hay forma de pensar en modificar el xml del elemento de fila para incluir un icono.
La elección de datos de modelo para un ListAdapter
no tiene ningún impacto en si las filas creadas por ese ListAdapter
pueden tener iconos.
¿Alguien sabe cómo agregar iconos a los elementos de la gaveta de navegación?
Poner un ImageView
en el diseño de la fila para el ListAdapter
. ListAdapter
ese ImageView
través de su ListAdapter
, como por ejemplo sobrepasando getView()
en su ArrayAdapter
. IOW, lo haces de la misma manera que lo haces para cualquier otro ListView
, como se ha hecho durante años.
¿Hay una manera de hacer esto con una simple llamada API
Eso depende de sus definiciones de "simple" y "llamada API".
Crear una clase de adaptador como ..
public class AdapterClass extends ArrayAdapter<String> { Context context; private ArrayList<String> TextValue = new ArrayList<String>(); public AdapterClass(Context context, ArrayList<String> TextValue) { super(context, R.layout.row_of_drawer, TextValue); this.context = context; this.TextValue= TextValue; } @Override public View getView(int position, View coverView, ViewGroup parent) { // TODO Auto-generated method stub LayoutInflater inflater = (LayoutInflater) context .getSystemService(Context.LAYOUT_INFLATER_SERVICE); View rowView = inflater.inflate(R.layout.row_of_drawer, parent, false); TextView text1 = (TextView)rowView.findViewById(R.id.text1); text1.setText(TextValue.get(position)); return rowView; } }
Y crear algún cambio de su MainActivity.
utilizar
AdapterClass adClass = new AdapterClass(MainActivity.this, name_of_arrayList); mDrawerList.setAdapter(adClass);
Insted de
mDrawerList.setAdapter(new ArrayAdapter<String>(this, R.layout.drawer_list_item, mPlanetTitles));
La matriz de cadenas no es el diseño de definición de las filas. Su R.layout.drawer_list_item
representa el diseño de cada fila de la lista. Si desea incluir una imagen (o incluso otro diseño complicado de filas), incluirá la vista de imagen en esa disposición personalizada xml que sustituirá a R.layout.drawer_list_item
xml.
En cuanto a cómo establecer la imagen o texto en cada fila diferente, todo esto se hace en el método getView()
del adaptador de matriz. Un ejemplo aproximado es como esto (asumiendo que hay un textview y un imageview en la fila):
@Override public View getView(int position, View convertView, ViewGroup parent) { LayoutInflater inflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE); convertView = inflater.inflate(R.layout.revise_listview, parent,false); TextView tv = (TextView)convertView.findViewById(R.id.text); ImageView iv = (ImageView)convertView.findViewById(R.id.image); tv1.setText(stringArray.get(i)); if(//condition) { iv.setImageResource(R.drawable.imagexx); } return convertView; }
Una manera más eficiente de implementar las vistas para cada fila es usar el patrón del espectador. Uno de los muchos lugares donde puedes encontrar ejemplos es aquí .
Para estructurar esto con mucha claridad hice algunas líneas adicionales de código para una implementación orientada a objetos que genera todo desde una matriz de NavigationItem
s – una clase Java simple que contiene campos para texto, icono y fragmento de un elemento de menú:
En MainActivity mi Navegación se define simplemente por la matriz:
NavigationAdapter navigationMenuAdapter; NavigationItem[] navigationMenuItems = { new NavigationItem(R.string.menu_home, R.drawable.ic_menu_home, new MainFragment()), new NavigationItem(R.string.menu_statistics, R.drawable.ic_statistics, new StatisticsFragment()), new NavigationItem(R.string.menu_settings, R.drawable.ic_settings, new SettingsFragment()), }; protected void onCreate(Bundle savedInstanceState) { ... navigationMenuAdapter = new NavigationAdapter(this, navigationMenuItems); mDrawerList.setAdapter(navigationMenuAdapter); } ... private void selectItem(int position) { // Insert the fragment by replacing any existing fragment FragmentManager fragmentManager = getFragmentManager(); fragmentManager.beginTransaction() .replace(R.id.content_frame, navigationMenuItems[position].fragment) .commit(); mDrawerList.setItemChecked(position, true); setTitle(navigationMenuItems[position].stringTitle); mDrawerLayout.closeDrawer(mDrawerList); }
La clase NavigationItem
:
public class NavigationItem { /** * * @param stringTitle The id of the string resource of the text of the item. * @param drawableIcon The id of the drawable resource of icon of the item. * @param fragment The Fragment to be loaded upon selecting the item. */ public NavigationItem(int stringTitle, int drawableIcon, Fragment fragment) { this.stringTitle = stringTitle; this.drawableIcon = drawableIcon; this.fragment = fragment; } /** * The id of the string resource of the text of the item. */ public int stringTitle; /** * The id of the drawable resource of icon of the item. */ public int drawableIcon; /** * The Fragment to be loaded upon selecting the item. */ public Fragment fragment; }
Y el NavigationAdapter:
public class NavigationAdapter extends BaseAdapter { private Context context; private NavigationItem[] navigationItems; public NavigationAdapter(Context context, NavigationItem[] items) { this.context = context; navigationItems = items; } @Override public View getView(int position, View convertView, ViewGroup parent) { View row = null; if (convertView == null) { LayoutInflater inflater = (LayoutInflater) context .getSystemService(Context.LAYOUT_INFLATER_SERVICE); row = inflater.inflate(R.layout.list_item_navigation, parent, false); } else { row = convertView; } TextView tvTitle = (TextView) row.findViewById(R.id.textView); ImageView ivIcon = (ImageView) row.findViewById(R.id.imageView); tvTitle.setText(navigationItems[position].stringTitle); ivIcon.setImageResource(navigationItems[position].drawableIcon); return row; } }
Que utiliza una disposición xml muy básica, list_item_navigation
, que sólo contiene un ImageView
y un TextView
.
- Buscando el framework OpenGL ES para el desarrollo multiplataforma en Win / Linux / MacOSX / Android / IOS
- Capaz de elegir la fecha futura al establecer la fecha máxima en datepicker