Cómo agregar un menú de cajón deslizante en mi aplicación de mensajería de Android Desarrollador de registros, desarrollo de aplicaciones

Iniciando nuevo proyecto
1) Cree un nuevo proyecto en Eclipse desde Archivo ⇒ Nuevo ⇒ Proyecto de aplicación de Android . Había dejado el nombre de mi actividad principal como MainActivity.java y di el nombre del paquete como info.androidhive.slidingmenu .
2) Preparé las variables de cadena requeridas para los elementos de Vista de lista y los nombres de iconos en strings.xml. Abra su strings.xml ubicado en res ⇒ valores y agregue el siguiente código.
strings.xml

Menú deslizante
Configuración
¡Hola mundo!
Menú deslizante abierto
Menú deslizante cerrado

Inicio
Buscar personas
Fotos
Comunidades
Páginas
Lo que está de moda

@ drawable / ic_home
@ drawable / ic_people
@ drawable / ic_photos
@ drawable / ic_communities
@ drawable / ic_pages
@ drawable / ic_whats_hot

Ícono de elemento

3) Android introdujo un nuevo elemento de la interfaz de usuario llamado DrawerLayout for Navigation Drawer. Abra su archivo de diseño ( activity_main.xml ) para la actividad principal y escriba el siguiente código.
Aquí FrameLayout se usa para reemplazar el contenido principal usando Fragmentos y siempre debe ser el primer elemento secundario del diseño para el propósito del índice z
mi.
actividad_principal
.xml
<android.support.v4.widget.DrawerLayout
xmlns: android = Página “en android.com”
android: id = “@ + id / drawer_layout”
android: layout_width = “match_parent”
android: layout_height = “match_parent”>

<! – Vista de lista para mostrar el menú del control deslizante –
>
<ListV
iew
android: id = “@ + id / list_slidermenu”
android: layout_width = “240dp”
android: layout_height = “match_parent”
android: layout_gravity = “inicio”
android: choiceMode = “singleChoice”
android: divider = “@ color / list_divider”
android: dividerHeight = “1dp”
android: listSelector = “@ drawable / list_selector”
android: background = “@ color / list_background” />

Crear un adaptador de vista de lista personalizado
Crear una vista de lista con un icono, título y un contador no es sencillo. Tenemos que crear una vista de lista personalizada para lograr esto. Para esto, voy a crear una clase de adpater personalizada para la vista de lista que proporciona un diseño personalizado para un elemento de lista individual en la vista de lista.
Antes de comenzar a codificar el adaptador personalizado, voy a crear los archivos de diseño necesarios para la vista de lista.
Necesitamos los elementos de diseño para indicar el estado del elemento de la lista cuando es normal y presionado. Necesita en general tres archivos xml. Uno es para el estado normal, el segundo es para el estado presionado y el tercero para combinar ambos diseños.
4) Así que cree un archivo xml en res ⇒ carpeta dibujable llamada list_item_bg_normal.xml y pegue el siguiente código. (Si no ve la carpeta dibujable, cree una nueva carpeta y asígnele el nombre como dibujable)
list_item_bg_normal.xml
<shape xmlns: android = Página "en android.com"
android: shape = “rectángulo”>
<gradiente
android: startColor = “@ color / list_background”
android: endColor = “@ color / list_background”
android: angle = “90” />

5) Cree otro diseño xml en res ⇒ dibujable llamado list_it em_bg_pressed.xml con el siguiente contenido.
list_item_bg_pressed.xml
<shape xmlns: android = Página "en android.com"
android: shape = “rectángulo”>
<gradiente
android: startColor = “@ color / list_background_pressed”
android: endColor = “@ color / list_background_pressed”
android: angle = “90” />

6) Cree otro archivo xml para combinar ambos estados dibujables en res ⇒ dibujable llamado list_selector.xml
list_selector.xml

7) Necesitamos un xml extraíble más para el fondo de la esquina redondeada para el valor del contador. Así que cree un archivo xml llamado counter_bg.xml en res ⇒ drawable .
Si desea saber cómo agregar un diseño de borde de esquina redondeada, puede aprender de Cómo agregar bordes de esquina redondeada a Diseño de Android
counter_bg.xml

<paddi
ng

android: right =
“3dp”

android: left = ”
3dp “>

</ sha
pe>
8) UNA
s viewview tiene el diseño personalizado, necesitamos otro archivo de diseño que defina cada fila de la lista. Por lo tanto, cree un archivo de diseño en res ⇒ diseño llamado drawer_list_item.xml . Este es un diseño relativo que coloca el icono, el título y el contador entre sí.
drawer_list_item.xml

</ RelativeLayout
>
Como cada lista
El elemento contiene un ícono de tres elementos, un título y un contador, me gustaría crear un modelo para representar cada fila de la lista.
9) Prefiero crear un nuevo paquete para mantener todas las clases de modelos. Así que cree un nuevo paquete llamado Page en androidhive.slidingmenu.mo
del
10) Unde
r model package crea una nueva clase llamada NavDrawerItem.java y pega el siguiente código. Aquí isCounterVisible define la visibilidad del valor del contador. Si no desea mostrar un contador para un elemento de la lista en particular, puede establecerlo en falso.
NavDrawerItem.java
Página del paquete en androidhive.slidingmenu.mo
del;

público
clase NavDrawerItem {

Título de cadena privado;
int privado
en;

recuento de cadenas privadas = “0”;
// booleano para establecer la visibilidad del contador
booleano privado isCounterVisib
le = falso;

public NavDrawerItem () {}

public NavDrawerItem (título de cadena, ícono int) {
this.title = title;
this.icon = ic
en;

}

public NavDrawerItem (Título de cadena, ícono int, boolean isCounterVisible, String count) {
this.title = title;
this.icon = ic
en;

this.isCounterVisible = isCounterVisib
le;
esta.
cuenta = cuenta;
}

public String getTitle () {
devuelve this.ti
tle

}

public int getIcon () {
devuelve this.ic
en;

}

public String getCount () {
devuelve this.co
hasta

}

getCounterVisi público booleano
bilidad () {
jubilado
urn this.isCounterVisib
le;
}

public void setTitle (Título de cadena) {
this.title = title;
}

public void setIcon (ícono int) {
this.icon = ic
en;

}

public void setCount (recuento de cadenas) {
this.count = cuenta;
}

public void setCounterVisibility (boolean isCounterVisib
le) {
esta
.isCounterVisible = isCounterVisib
le;
}
}
11) Als
o cree otro paquete para mantener todas las clases de adaptador. Cree un paquete llamado info.androidhive.slidingmenu.ad
Apter .
12) norte
Ahora tenemos todos los archivos necesarios para el adaptador de lista personalizado. Por lo tanto, cree una clase llamada NavDrawerListAdapter.java en el paquete del adaptador.
NavDrawerListAdapter.java
información del paquete.androidhive.slidingmenu.ad
apter

impo
rt info.androidhive.slidingmenu.R;
importar info.androidhive.slidingmenu.model.NavDrawerItem;

import java.util.ArrayList
;

soy
puerto android.app.Actividad;
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 NavDrawerListAdapter extiende BaseAdapter {

contexto de contexto privado;
private ArrayList navDrawerItems
;

publ
ic NavDrawerListAdapter (contexto de contexto, ArrayList navDrawerItems) {
this.context = contexto;
this.navDrawerItems = navDrawerItems
;
}

@Ov
errar
public int getCount () {
volver navDrawerItems
.tamaño();
}

@Anular
objeto público getItem (posición int) {
return navDrawerItems.get (posición);
}

@Anular
public long getItemId (int position) {
volver positio
norte;

}

@Anular
public View getView (int position, View convertView, ViewGroup parent) {
if (convertView ==
nulo) {

LayoutInflater mInflater = (LayoutInflater)
context.getSystemService (Activity.LAYOUT_INFLATER_SERVICE);
convertView = mInflater.inflate (R.layout.drawer_list_item, nulo);
}

ImageView imgIcon = (ImageView) convertView.findViewById (Página en r.id.icon);
TextView txtTitle = (TextView) convertView.findViewById (Página en r.id.title);
TextView txtCount = (TextView) convertView.findViewById (Página en r.id.counter);

imgIcon.setImageResource (navDrawerItems.get (position) .getIcon ());

txtTitle.setText (navDrawerItems.get (position) .getTitle ());

// mostrando cou
Nuevo Testamento

// comprueba si está visible o no
if (navDrawerItems.get (position) .getCounterVisi
bilidad ()) {

txtCount.setText (navDrawerItems.get (position) .getCount ());
}más{
// ocultar la vista del contador
txtCount.setVisibility (
View.GONE);

}

volver convertir
Ver;

}

}
Hasta
ahora hemos terminado de crear todos los diseños necesarios, modelo y clase de adaptador para el cajón de navegación. Es hora de pasar a MainActivity.java y comenzar a implementar el cajón de navegación.
Los siguientes son los pasos principales que debemos cuidar en la actividad principal.
> Crear una instancia de NavDrawerListAdapter y agregar elementos de lista.
> Asignación del adaptador a la Vista de lista del cajón de navegación
> Crear escucha de eventos de clic para elementos de la lista
> Crear y mostrar actividades de fragmentos al seleccionar un elemento de la lista.
13) Entonces abra su MainActivity.java y agregue el siguiente código. En el siguiente código, declaramos las variables requeridas, cargamos los títulos e íconos de elementos de la lista de strings.xml, creamos un adaptador y agregamos cada elemento de la lista. Finalmente agregamos un oyente del cajón de navegación.
invalidateOptionsMenu () se llama en onDrawerOpened () y onDrawerClosed () para ocultar y mostrar los iconos de la barra de acción en el cajón de navegación abierto y cerrado.
MainActivity.java
clase pública MainActivity extiende la actividad {
privado DrawerLayout mDrawerLayout;
ListView privado mDrawerList;
privado ActionBarDrawerToggle mDrawerToggle;

// título del cajón de navegación
CharSequence mDrawerTitle privado;

// se usa para almacenar el título de la aplicación
CharSequence mTitle privado;

// elementos del menú de diapositivas
Private String [] navMenuTitles;
TypedArray privado navMenuIcons;

private ArrayList navDrawerItems
;
N privado
adaptador avDrawerListAdapter;

@Anular
vacío protegido onCreate (Bundle savedInstanceState) {
super.onCreate (savedInstanceState);
setContentView (R.layout.activity_main);

mTitle = mDrawerTitle = getTitle ();

// cargar elementos del menú de diapositivas
navMenuTitles = getResources (). getStringArray (R.array.nav_drawer_items);

// navega por los iconos del cajón desde los recursos
navMenuIcons = getResources ()
.obtainTypedArray (R.array.nav_drawer_icons);

mDrawerLayout = (DrawerLayout) findViewById (Página en r.id.drawer_layout);
mDrawerList = (ListView) findViewById (Página en r.id.list_slidermenu);

navDrawerItems = new ArrayList ();

// agregando elementos del cajón de navegación a la matriz
// Casa
navDrawerItems.add (nuevo NavDrawerItem (navMenuTitles [0], navMenuIcons.getResourceId (0, -1)));
// Encontrar gente
navDrawerItems.add (nuevo NavDrawerItem (navMenuTitles [1], navMenuIcons.getResourceId (1, -1)));
// Fotos
navDrawerItems.add (nuevo NavDrawerItem (navMenuTitles [2], navMenuIcons.getResourceId (2, -1)));
// Comunidades, agregará un contador aquí
navDrawerItems.add (nuevo NavDrawerItem (navMenuTitles [3], navMenuIcons.getResourceId (3, -1), verdadero, “22”));
// Páginas
navDrawerItems.add (nuevo NavDrawerItem (navMenuTitles [4], navMenuIcons.getResourceId (4, -1)));
// Lo que está de moda, agregaremos un contador aquí
navDrawerItems.add (nuevo NavDrawerItem (navMenuTitles [5], navMenuIcons.getResourceId (5, -1), verdadero, “50+”));

// Recicla la matriz escrita
navMenuIcons.recycle ();

// configurar el adaptador de la lista del cajón de navegación
adaptador = nuevo NavDrawerListAdapter (getApplicationContext (),
navDrawerItems);
mDrawerList.setAdapter (adaptador);

// habilitar el icono de la aplicación de la barra de acción y comportarlo como botón de alternar
getActionBar (). setDisplayHomeAsUpEnabled (verdadero);
getActionBar (). setHomeButtonEnabled (true);

mDrawerToggle = new ActionBarDrawerToggle (esto, mDrawerLayout,
R.drawable.ic_drawer, // icono de alternar del menú de navegación
R.string.app_name, // nav drawer open – descripción para accesibilidad
R.string.app_name // cierre del cajón de navegación – descripción de accesibilidad
) {
public void onDrawerClosed (Ver vista) {
getActionBar (). setTitle (mTitle);
// invocar onPrepareOptionsMenu () para mostrar los iconos de la barra de acción
invalidateOptionsMenu ();
}

public void onDrawerOpened (Ver drawerView) {
getActionBar (). setTitle (mDrawerTitle);
// invocar onPrepareOptionsMenu () para ocultar los iconos de la barra de acción
invalidateOptionsMenu ();
}
};
mDrawerLayout.setDrawerListener (mDrawerToggle);

if (savedInstanceState == null) {
// en la vista de visualización por primera vez para el primer elemento de navegación
displayView (0);
}
}

@Anular
public boolean onCreateOptionsMenu (Menú del menú) {
getMenuInflater (). inflate (R.menu.main, menú);
volver verdadero;
}

@Anular
public boolean onOptionsItemSelected (elemento MenuItem) {
// alterna el cajón de navegación al seleccionar el icono / título de la aplicación de la barra de acción
if (mDrawerToggle.onOptionsItemSelected (item)) {
volver verdadero;
}
// Manejar acciones de la barra de acciones clic
switch (item.getItemId ()) {
Página de caso en r.id.action_settings:
volver verdadero;
defecto:
return super.onOptionsItemSelected (item);
}
}

/ ***
* Se invoca cuando se activa invalidateOptionsMenu ()
* /
@Anular
public boolean onPrepareOptionsMenu (Menú del menú) {
// si el cajón de navegación está abierto, oculta los elementos de acción
boolean drawerOpen = mDrawerLayout.isDrawerOpen (mDrawerList);
menu.findItem (Página en r.id.action_settings) .setVisible (! drawerOpen);
return super.onPrepareOptionsMenu (menú);
}

@Anular
public void setTitle (título de CharSequence) {
mTitle = título;
getActionBar (). setTitle (mTitle);
}

/ **
* Al usar ActionBarDrawerToggle, debe llamarlo durante
* onPostCreate () y onConfigurationChanged () …
* /

@Anular
Void protegido en PostCreate (Bundle savedInstanceState) {
super.onPostCreate (savedInstanceState);
// Sincronice el estado de alternancia después de que se haya producido onRestoreInstanceState.
mDrawerToggle.syncState ();
}

@Anular
public void onConfigurationChanged (Configuración newConfig) {
super.onConfigurationChanged (newConfig);
// Pase cualquier cambio de configuración a los toggls del cajón
mDrawerToggle.onConfigurationChanged (newConfig);
}
Ahora, si ejecuta su proyecto, puede ver el cajón de navegación con una vista de lista. Puede abrir el cajón de navegación haciendo clic en el icono de la aplicación de la barra de acción o deslizando el borde de la pantalla de izquierda a derecha. Pero puede notar que el evento de clic para el elemento de la lista no funciona, ya que aún no está habilitado.

Crear vistas de fragmentos para un elemento de lista individual
Puede ver que tenemos Inicio , Buscar personas , Fotos , Comunidades , Páginas y Novedades en la vista de lista. Aquí cada elemento de la lista representa una vista donde cada vista necesita una clase Fragment y un archivo de diseño xml .
14) Por lo tanto, cree un archivo de clase llamado HomeFragment.java y un archivo de diseño llamado fragment_home.xml con el siguiente contenido. Para fines de demostración, he creado un diseño muy simple para esta vista. Puede personalizar esta vista según el diseño de su aplicación.
HomeFragment.java
información del paquete.androidhive.slidingmenu;

importar android.app.Fragment;
importar android.os.Bundle;
importar android.view.LayoutInflater;
importar android.view.View;
importar android.view.ViewGroup;

clase pública HomeFragment extiende Fragment {

HomeFragment público () {}

@Anular
Vista pública onCreateView (inflador LayoutInflater, contenedor ViewGroup,
Paquete salvadoInstanceState) {

Ver rootView = inflater.inflate (R.layout.fragment_home, contenedor, falso);

volver rootView;
}
}
fragment_home.xml

</ RelativeLayout
>
También necesitas
para crear clases de fragmentos restantes y archivos de diseño para otros elementos de la lista.

Manejo del elemento de la lista del cajón de navegación Haga clic en Evento
Cuando el usuario selecciona un elemento de la lista del cajón de navegación, necesitamos mostrar una vista respetada en la vista principal. Esto se puede hacer agregando un elemento de lista de escucha de clics y cargando una vista de fragmento respetada en el evento de devolución de llamada.
15) Abra MainActivity.java y agregue el siguiente código. Aquí agregamos un detector de clics y cargamos la vista de fragmentos relacionados.
MainActivity.java
clase pública MainActivity extiende la actividad {
..
..
@Anular
vacío protegido onCreate (Bundle savedInstanceState) {
..
mDrawerList.setOnItemClickListener (nuevo SlideMenuClickListener ());
}

/ **
* Elemento del menú de diapositivas, haga clic en escucha
* * /
Implementos privados de clase SlideMenuClickListener
ListView.OnItemClickListener {
@Anular
public void onItemClick (AdapterView parent, View view, int position,
ID larga) {
// muestra la vista del elemento seleccionado del cajón de navegación
displayView (posición);
}
}

/ **
* Visualización de fragmentos de visualización para el elemento seleccionado de la lista del cajón de navegación
* * /
displayView privado vacío (posición int) {
// actualiza el contenido principal reemplazando fragmentos
Fragmento fragmento = nulo;
interruptor (posición) {
caso 0:
fragmento = nuevo HomeFragment ();
descanso;
caso 1:
fragment = new FindPeopleFragment ();
descanso;
caso 2:
fragment = new PhotosFragment ();
descanso;
caso 3:
fragment = new CommunityFragment ();
descanso;
caso 4:
fragment = new PagesFragment ();
descanso;
caso 5:
fragmento = nuevo WhatsHotFragment ();
descanso;

defecto:
descanso;
}

if (fragmento! = nulo) {
FragmentManager fragmentManager = getFragmentManager ();
fragmentManager.beginTransaction ()
.replace (Página en r.id.frame_container, fragmento) .commit ();

// actualiza el elemento y el título seleccionados, luego cierra el cajón
mDrawerList.setItemChecked (posición, verdadero);
mDrawerList.setSelection (posición);
setTitle (navMenuTitles [posición]);
mDrawerLayout.closeDrawer (mDrawerList);
} más {
// error al crear fragmento
Log.e (“MainActivity”, “Error al crear el fragmento”);
}
}
}
Ahora ejecute el proyecto y pruebe el evento de clic de vista de lista. Puede ver que se está cargando un fragmento respetado al seleccionar el elemento de la lista. La siguiente es la captura de pantalla de mi menú deslizante.

Código final
MainActivity.java
MainActivity.java
información del paquete.androidhive.slidingmenu;

importar info.androidhive.slidingmenu.adapter.NavDrawerListAdapter;
importar info.androidhive.slidingmenu.model.NavDrawerItem;

import java.util.ArrayList
;

soy
puerto android.app.Actividad;
importar android.app.Fragment;
importar android.app.FragmentManager;
importar android.content.res.Configuration;
importar android.content.res.TypedArray;
importar android.os.Bundle;
importar android.support.v4.app.ActionBarDrawerToggle;
importar android.support.v4.widget.DrawerLayout;
importar android.util.Log;
importar android.view.Menu;
importar android.view.MenuItem;
importar android.view.View;
importar android.widget.AdapterView;
importar android.widget.ListView;

clase pública MainActivity extiende la actividad {
privado DrawerLayout mDrawerLayout;
ListView privado mDrawerList;
privado ActionBarDrawerToggle mDrawerToggle;

// título del cajón de navegación
CharSequence mDrawerTitle privado;

// se usa para almacenar el título de la aplicación
CharSequence mTitle privado;

// elementos del menú de diapositivas
Private String [] navMenuTitles;
TypedArray privado navMenuIcons;

private ArrayList navDrawerItems
;
N privado
adaptador avDrawerListAdapter;

@Anular
vacío protegido onCreate (Bundle savedInstanceState) {
super.onCreate (savedInstanceState);
setContentView (R.layout.activity_main);

mTitle = mDrawerTitle = getTitle ();

// cargar elementos del menú de diapositivas
navMenuTitles = getResources (). getStringArray (R.array.nav_drawer_items);

// navega por los iconos del cajón desde los recursos
navMenuIcons = getResources ()
.obtainTypedArray (R.array.nav_drawer_icons);

mDrawerLayout = (DrawerLayout) findViewById (Página en r.id.drawer_layout);
mDrawerList = (ListView) findViewById (Página en r.id.list_slidermenu);

navDrawerItems = new ArrayList ();

// Recicla la matriz escrita
navMenuIcons.recycle ();

mDrawerList.setOnItemClickListener (nuevo SlideMenuClickListener ());

// configurar el adaptador de la lista del cajón de navegación
adaptador = nuevo NavDrawerListAdapter (getApplicationContext (),
navDrawerItems);
mDrawerList.setAdapter (adaptador);

if (savedInstanceState == null) {
// en la vista de visualización por primera vez para el primer elemento de navegación
displayView (0);
}
}

@Anular
public boolean onCreateOptionsMenu (Menú del menú) {
getMenuInflater (). inflate (R.menu.main, menú);
volver verdadero;
}

defecto:
descanso;
}

if (fragmento! = nulo) {
FragmentManager fragmentManager = getFragmentManager ();
fragmentManager.beginTransaction ()
.replace (Página en r.id.frame_container, fragmento) .commit ();

@Anular
public void setTitle (título de CharSequence) {
mTitle = título;
getActionBar (). setTitle (mTitle);
}

/ **
* Al usar ActionBarDrawerToggle, debe llamarlo durante
* onPostCreate () y onConfigurationChanged () …
* /

}

Descargue el código completo aquí.

http: //download.androidhive.info…

Android (sistema operativo)aplicaciones de Androidaplicaciones móvilesPreguntas prácticas