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.

ObtenerVista

public View getDropDownViewcambia la vista que se muestra en la lista de navegación.

ObtenerDropDownView

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:

Captura de pantalla de navegación de la lista ABS

Código fuente

[purchase_link id=”7942″ text=”Comprar para descargar el código fuente” style=”button” color=”green”]

Fragmentos de navegación de la lista del menú personalizado ActionBarSherlock

Tal vez te interese: