Fragmentos de navegación de la lista del menú personalizado ActionBarSherlock
Última actualización: 23 de mayo de 2013
En este tutorial, aprenderá cómo crear Fragmentos de navegación de lista de menú personalizados ActionBarSherlock en su aplicación de Android. Una lista de menús de navegación permite al usuario navegar fácilmente entre fragmentos o actividades. Crearemos una navegación de lista de menú personalizada utilizando la biblioteca ActionBarSherlock y, al hacer clic en el elemento del menú, se mostrarán diferentes fragmentos. Vamos a empezar…
Prepare su proyecto importando la biblioteca ActionBarSherlock . Consulte el tutorial Implementación de ActionBarSherlock en Android .
Cree un nuevo proyecto en Eclipse File > New > Android Application Project. Complete los detalles y nombre su proyecto ABSNavList .
Nombre de la aplicación: ABSNavList
Nombre del proyecto: ABSNavList
Nombre del paquete: com.androidbegin.absnavlist
Abra su MainActivity .java y pegue el siguiente código.
Actividad principal .java
paquete com.androidbegin.absnavlist; importar android.os.Bundle; importar android.support.v4.app.Fragment; importar android.support.v4.app.FragmentTransaction; importar android.widget.ListView; importar com.actionbarsherlock.app.ActionBar; importar com.actionbarsherlock.app.ActionBar.OnNavigationListener; importar com.actionbarsherlock.app.SherlockFragmentActivity; clase pública MainActivity extiende SherlockFragmentActivity { // Declarar Variables Lista de vista de lista; adaptador NavListAdapter; Cadena[] título; Cadena[] subtítulo; icono int[]; Fragmento fragmento1 = nuevo Fragmento1(); Fragmento fragmento2 = nuevo Fragmento2(); Fragmento fragmento3 = nuevo Fragmento3(); @Anular Vacío protegido onCreate (Paquete de estado de instancia guardado) { super.onCreate(estadoDeInstanciaGuardado); // Generar titulo title = new String[] { "Título Fragmento 1", "Título Fragmento 2", "Título Fragmento 3" }; // Generar subtitulo subtítulo = new String[] { "Fragmento de subtítulo 1", "Fragmento de subtítulo 2", "Fragmento de subtítulo 3" }; // Generar icono icono = nuevo int[] { R.drawable.action_about, R.drawable.action_settings, R.drawable.colecciones_nube}; // Pasar los resultados a la clase NavListAdapter adaptador = nuevo NavListAdapter (este, título, subtítulo, icono); // Ocultar el título de la barra de acción getSupportActionBar().setDisplayShowTitleEnabled(false); // Crea la lista de navegación en tu ActionBar getSupportActionBar().setNavigationMode(ActionBar.NAVIGATION_MODE_LIST); // Escuchar los clics de la lista de navegación ActionBar.OnNavigationListener navlistener = new OnNavigationListener() { @Anular onNavigationItemSelected booleano público (posición int, ID de elemento largo) { FragmentTransaction ft = getSupportFragmentManager() .beginTransaction(); // Localizar posición interruptor (posición) { caso 0: ft.replace(android.R.id.content, fragmento1); descanso; caso 1: ft.replace(android.R.id.content, fragmento2); descanso; caso 2: ft.replace(android.R.id.content, fragmento3); descanso; } ft.commit(); devolver verdadero; } }; // Establecer el NavListAdapter en la barra de navegación ActionBar getSupportActionBar().setListNavigationCallbacks(adaptador, navegador); } }
En esta actividad, hemos creado algunos títulos, subtítulos e íconos de muestra en matrices de cadenas y números enteros y los pasamos a NavListAdapter para mostrarlos en una vista de lista como un menú. En el menú de vista de lista, hacer clic mostrará el fragmento seleccionado.
Hemos preparado algunos íconos de muestra para este tutorial. Inserte los íconos de muestra descargados en su res > drawable-hdpi .
Iconos de muestra
[etiqueta wpfilebase = ID de archivo = 47 tpl = botón de descarga /]
A continuación, cree una clase de adaptador de vista de navegación personalizada. Vaya a Archivo > Nuevo > Clase y asígnele el nombre NavListAdapter .java. Seleccione su paquete llamado com.androidbegin.absnavlist y haga clic en Finalizar .
Abra su NavListAdapter .java y pegue el siguiente código.
NavListAdapter .java
paquete com.androidbegin.absnavlist; importar android.content.Context; importar android.view.LayoutInflater; importar android.view.View; importar android.view.ViewGroup; importar android.widget.BaseAdapter; importar android.widget.ImageView; importar android.widget.TextView; clase pública NavListAdapter extiende BaseAdapter { // Declarar Variables contexto contexto; Cadena[] mTitulo; Cadena[] mSubTítulo; int[] icono; LayoutInflater inflador; public NavListAdapter (contexto contextual, título de cadena [], subtítulo de cadena [], int[] icono) { este.contexto = contexto; this.mTitle = título; this.mSubTitle = subtítulo; este.mIcon = icono; } @Anular public int getCount() { devuelve mTitulo.longitud; } @Anular objeto público getItem (posición int) { return mTitulo[posicion]; } @Anular getItemId largo público (posición int) { posición de retorno; } public View getView (posición int, View convertView, ViewGroup parent) { // Declarar Variables Vista de texto txtTitle; Vista de texto txtSubTitle; inflador = (LayoutInflater) contexto .getSystemService(Context.LAYOUT_INFLATER_SERVICE); Ver itemView = inflater.inflate(R.layout.nav_list_item, parent, false); // Localice TextViews en nav_list_item.xml txtTitle = (TextView) itemView.findViewById(R.id.title); txtSubTitle = (TextView) itemView.findViewById(R.id.subtitle); // Establecer los resultados en TextViews txtTitle.setText(mTitle[posición]); txtSubTitle.setText(mSubTitle[posición]); volver itemView; } @Anular public View getDropDownView (posición int, View convertView, ViewGroup parent) { // Declarar Variables Vista de texto txtTitle; Vista de texto txtSubTitle; ImageView imgIcon; inflador = (LayoutInflater) contexto .getSystemService(Context.LAYOUT_INFLATER_SERVICE); Ver dropdownView = inflater.inflate(R.layout.nav_dropdown_item, padre, falso); // Localice las vistas de texto en nav_dropdown_item.xml txtTitle = (TextView) dropdownView.findViewById(R.id.title); txtSubTitle = (TextView) dropdownView.findViewById(R.id.subtitle); // Localice ImageView en nav_dropdown_item.xml imgIcon = (ImageView) dropdownView.findViewById(R.id.icon); // Establecer los resultados en TextViews txtTitle.setText(mTitle[posición]); txtSubTitle.setText(mSubTitle[posición]); // Establecer los resultados en ImageView imgIcon.setImageResource(mIcon[posición]); volver vista desplegable; } }
En esta clase de adaptador de vista de lista personalizada, las matrices de cadenas se pasan a NavListAdapter y se configuran en TextViews e ImageViews seguidas de las posiciones.
Vistas del adaptador
public View getView
cambia la vista que se muestra en la barra de acciones.
public View getDropDownView
cambia la vista que se muestra en la lista de navegación.
A continuación, cree un diseño gráfico XML para su elemento de vista de lista. Vaya a res > diseño > Haga clic con el botón derecho en el diseño > Nuevo > Archivo XML de Android
Nombre su nuevo archivo XML nav_list_item.xml y pegue el siguiente código.
nav_list_item .xml
<?versión xml="1.0" codificación="utf-8"?> <LinearLayout xmlns_android="http://schemas.android.com/apk/res/android" android_layout_width="wrap_content" android_layout_height="wrap_content" android_gravedad="centro_vertical|izquierda" android:orientación="vertical" > <Vista de texto android_id="@+id/título" estilo="?attr/spinnerItemStyle" android_layout_width="wrap_content" android_layout_height="wrap_content" Android: ellipsize = "fin" android_paddingLeft="0dp" android_singleLine="verdadero" /> <Vista de texto android_id="@+id/subtítulo" estilo="?attr/spinnerItemStyle" android_layout_width="wrap_content" android_layout_height="wrap_content" Android: ellipsize = "fin" android_paddingLeft="0dp" android_singleLine="verdadero" android_textAppearance="?attr/textAppearancePequeño" /> </LinearLayout>
A continuación, cree un diseño gráfico XML para su elemento desplegable. Vaya a res > diseño > Haga clic con el botón derecho en el diseño > Nuevo > Archivo XML de Android
Nombre su nuevo archivo XML nav_dropdown_item.xml y pegue el siguiente código.
nav_dropdown_item .xml
<?versión xml="1.0" codificación="utf-8"?> <LinearLayout xmlns_android="http://schemas.android.com/apk/res/android" estilo="?attr/spinnerDropDownItemStyle" android_layout_width="match_parent" android_layout_height="?attr/dropdownListPreferredItemHeight" android:orientación="horizontal" > <ImagenVista android_id="@+id/icono" android_layout_width="wrap_content" android_layout_height="match_parent" android_justViewBounds="true" /> <LinearLayout android_layout_width="wrap_content" android_layout_height="match_parent" android_gravedad="centro_vertical|izquierda" android:orientación="vertical" > <Vista de texto android_id="@+id/título" estilo="?attr/spinnerDropDownItemStyle" android_layout_width="wrap_content" android_layout_height="wrap_content" Android: ellipsize = "fin" android_singleLine="verdadero" /> <Vista de texto android_id="@+id/subtítulo" estilo="?attr/spinnerDropDownItemStyle" android_layout_width="wrap_content" android_layout_height="wrap_content" Android: ellipsize = "fin" android_singleLine="verdadero" android_textAppearance="?attr/textAppearancePequeño" /> </LinearLayout> </LinearLayout>
A continuación, cree el primer fragmento. Vaya a Archivo > Nuevo > Clase y asígnele el nombre Fragmento1 .java. Seleccione su paquete llamado com. Androidbegin . absnavlist y haga clic en Finalizar .
Abra su Fragment1 .java y pegue el siguiente código.
Fragmento1 .java
paquete com.androidbegin.absnavlist; importar com.actionbarsherlock.app.SherlockFragment; importar android.os.Bundle; importar android.view.LayoutInflater; importar android.view.View; importar android.view.ViewGroup; public class Fragment1 extiende SherlockFragment { @Anular Public View onCreateView(LayoutInflater inflater, contenedor ViewGroup, Paquete guardadoInstanceState) { Ver rootView = inflater.inflate(R.layout.fragment1, container, false); volver rootView; } }
A continuación, cree el segundo fragmento. Vaya a Archivo > Nuevo > Clase y asígnele el nombre Fragment2 .java. Seleccione su paquete llamado com. Androidbegin . absnavlist y haga clic en Finalizar .
Abra su Fragment2 .java y pegue el siguiente código.
Fragmento2 .java
paquete com.androidbegin.absnavlist; importar com.actionbarsherlock.app.SherlockFragment; importar android.os.Bundle; importar android.view.LayoutInflater; importar android.view.View; importar android.view.ViewGroup; public class Fragment2 extiende SherlockFragment { @Anular Public View onCreateView(LayoutInflater inflater, contenedor ViewGroup, Paquete guardadoInstanceState) { Ver rootView = inflater.inflate(R.layout.fragment2, container, false); volver rootView; } }
A continuación, cree el tercer fragmento. Vaya a Archivo > Nuevo > Clase y asígnele el nombre Fragment3 .java. Seleccione su paquete llamado com. Androidbegin . absnavlist y haga clic en Finalizar .
Abra su Fragment3 .java y pegue el siguiente código.
Fragmento3 .java
paquete com.androidbegin.absnavlist; importar com.actionbarsherlock.app.SherlockFragment; importar android.os.Bundle; importar android.view.LayoutInflater; importar android.view.View; importar android.view.ViewGroup; public class Fragment3 extiende SherlockFragment { @Anular Public View onCreateView(LayoutInflater inflater, contenedor ViewGroup, Paquete guardadoInstanceState) { Ver rootView = inflater.inflate(R.layout.fragment3, container, false); volver rootView; } }
A continuación, cree un diseño gráfico XML para el primer fragmento. Vaya a res > diseño > Haga clic con el botón derecho en el diseño > Nuevo > Archivo XML de Android
Nombre su nuevo archivo XML fragment1.xml y pegue el siguiente código.
fragmento1 .xml
<RelativeLayout xmlns_android="http://schemas.android.com/apk/res/android" xmlns_herramientas="http://esquemas.android.com/herramientas" android_layout_width="match_parent" android_layout_height="match_parent" > <Vista de texto android_layout_width="wrap_content" android_layout_height="wrap_content" android_layout_centerHorizontal="verdadero" android_layout_centerVertical="verdadero" android_text="@cadena/Fragmento1" /> </RelativeLayout>
A continuación, cree un diseño gráfico XML para el segundo fragmento. Vaya a res > diseño > Haga clic con el botón derecho en el diseño > Nuevo > Archivo XML de Android
Nombre su nuevo archivo XML fragment2.xml y pegue el siguiente código.
fragmento2 .xml
<RelativeLayout xmlns_android="http://schemas.android.com/apk/res/android" xmlns_herramientas="http://esquemas.android.com/herramientas" android_layout_width="match_parent" android_layout_height="match_parent" > <Vista de texto android_layout_width="wrap_content" android_layout_height="wrap_content" android_layout_centerHorizontal="verdadero" android_layout_centerVertical="verdadero" android_text="@cadena/Fragmento2" /> </RelativeLayout>
A continuación, cree un diseño gráfico XML para el tercer fragmento. Vaya a res > diseño > Haga clic con el botón derecho en el diseño > Nuevo > Archivo XML de Android
Nombre su nuevo archivo XML fragment3.xml y pegue el siguiente código.
fragmento3 .xml
<RelativeLayout xmlns_android="http://schemas.android.com/apk/res/android" xmlns_herramientas="http://esquemas.android.com/herramientas" android_layout_width="match_parent" android_layout_height="match_parent" > <Vista de texto android_layout_width="wrap_content" android_layout_height="wrap_content" android_layout_centerHorizontal="verdadero" android_layout_centerVertical="verdadero" android_text="@cadena/Fragmento3" /> </RelativeLayout>
Cambie el nombre de la aplicación y fragmente los textos de la vista de texto en strings.xml . Abra su strings.xml y pegue el siguiente código. Vaya a res > valores > cadenas.xml
cadenas.xml
<recursos> <string name="app_name">Lista de navegación ABS</string> <string name="hello_world">¡Hola mundo!</string> <string name="menu_settings">Configuración</string> <string name="title_activity_main">Lista de navegación ABS</string> <string name="Fragment1">Este es el Fragmento 1</string> <string name="Fragment2">Este es el Fragmento 2</string> <string name="Fragment3">Este es el Fragmento 3</string> </recursos>
En su AndroidManifest.xml , debemos cambiar el estilo del tema a » Theme.Sherlock » y establecer la versión SDK mínima de Android que prefiera. Abra su AndroidManifest.xml y pegue el siguiente código.
AndroidManifest.xml
<manifiesto xmlns_android="http://schemas.android.com/apk/res/android" paquete="com.androidbegin.absnavlist" android_versionCode="1" android_versionName="1.0" > <usos-sdk android_minSdkVersion="7" android_targetSdkVersion="15" /> <aplicación android_icono="@dibujable/ic_launcher" android_etiqueta="@cadena/nombre_aplicación" android_tema="@estilo/Tema.Sherlock" > <actividad android_name=".MainActivity" > <intent-filter> <acción android_name="android.intent.action.MAIN" /> <categoría android_name="android.intent.category.LAUNCHER" /> </intent-filter> </actividad> </aplicación> </manifiesto>
Producción:
Código fuente
[purchase_link id=”7942″ text=”Comprar para descargar el código fuente” style=”button” color=”green”]