Cómo crear un cajón de navegación personalizado en Android

Resuelto chathura asked hace 54 años • 6 respuestas

Hola, estoy intentando crear un cajón de navegación similar al cajón de navegación de la aplicación Gmail. Sigo el sitio del desarrollador pero solo especifica la implementación básica. Pero necesito personalizar la navegación según mis especificaciones.

  1. Necesito agregar un encabezado para categorizar el elemento de la lista en el Cajón
  2. Necesito un botón de radio para seleccionar algunas de mis opciones

¿Cómo puedo hacer esto?

chathura avatar Jan 01 '70 08:01 chathura
Aceptado

El tutorial Android Custom Navigation Drawer (a través de archive.org) contiene un proyecto básico y uno personalizado . Este último muestra cómo configurar un cajón de navegación como se muestra en la captura de pantalla:

Cajón De NavegaciónPersonalizado

El código fuente de los proyectos (a través de archive.org) está disponible para descargar.


También es el cajón de navegación - proyecto Live-O ...

Cajón de navegación - Live-O

El código fuente del proyecto está disponible en GitHub.


La biblioteca MaterialDrawer tiene como objetivo proporcionar la implementación más sencilla posible de un cajón de navegación para su aplicación. Proporciona una gran cantidad de personalizaciones listas para usar y también incluye un encabezado fácil de usar que se puede utilizar como AccountSwitcher.

Demostración de la biblioteca MaterialDrawer


Tenga en cuenta que, mientras tanto , Android Studio tiene un proyecto de plantilla para crear una actividad del cajón de navegación como se muestra en la captura de pantalla.

Actividad del cajón de navegación

Este repositorio realiza un seguimiento de los cambios que se realizan en la plantilla.

JJD avatar May 13 '2014 13:05 JJD

Utilicé el diseño siguiente y pude lograr un diseño personalizado en la Vista de navegación.

<android.support.design.widget.NavigationView
        android:id="@+id/navi_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start|top"
        android:background="@color/navigation_view_bg_color"
        app:theme="@style/NavDrawerTextStyle">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <include layout="@layout/drawer_header" />

            <include layout="@layout/navigation_drawer_menu" />
        </LinearLayout>
</android.support.design.widget.NavigationView> 
Anshul Agarwal avatar Jul 07 '2016 18:07 Anshul Agarwal

La solución más fácil para mí fue:

Consideraciones:

  • Esta solución requiere una actividad del cajón de navegación generada automáticamente proporcionada por Android Studio.
  • Las clases DrawerItemy CustomDrawerAdapterel diseño custom_drawer_item.xmlse tomaron de este tutorial .

1. Cree esta clase para envolver el elemento del cajón personalizado:

public class DrawerItem {

  String ItemName;
  int imgResID;

  public DrawerItem(String itemName, int imgResID) {
        super();
        ItemName = itemName;
        this.imgResID = imgResID;
  }

  public String getItemName() {
        return ItemName;
  }
  public void setItemName(String itemName) {
        ItemName = itemName;
  }
  public int getImgResID() {
        return imgResID;
  }
  public void setImgResID(int imgResID) {
        this.imgResID = imgResID;
  }
}

2. Cree un diseño personalizado (custom_drawer_item.xml) para los elementos de su cajón:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

<LinearLayout
    android:id="@+id/itemLayout"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:orientation="vertical"
    android:layout_marginTop="0dp"
    android:background="?android:attr/activatedBackgroundIndicator">

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:minHeight="55dp">

        <ImageView
            android:id="@+id/drawer_icon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

        <TextView
            android:id="@+id/drawer_itemName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceLarge"/>
    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_marginBottom="1dp"
        android:layout_marginTop="1dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:background="#DADADC">
    </View>
</LinearLayout>
</RelativeLayout>

3. Crea tu adaptador personalizado:

import java.util.List;
import android.app.Activity;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;

public class CustomDrawerAdapter extends ArrayAdapter<DrawerItem> {

Context context;
List<DrawerItem> drawerItemList;
int layoutResID;

public CustomDrawerAdapter(Context context, int layoutResourceID, List<DrawerItem> listItems) {
    super(context, layoutResourceID, listItems);
    this.context = context;
    this.drawerItemList = listItems;
    this.layoutResID = layoutResourceID;
}

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    // TODO Auto-generated method stub

    DrawerItemHolder drawerHolder;
    View view = convertView;

    if (view == null) {
        LayoutInflater inflater = ((Activity) context).getLayoutInflater();
        drawerHolder = new DrawerItemHolder();

        view = inflater.inflate(layoutResID, parent, false);
        drawerHolder.ItemName = (TextView)view.findViewById(R.id.drawer_itemName);
        drawerHolder.icon = (ImageView) view.findViewById(R.id.drawer_icon);

        view.setTag(drawerHolder);

    } else {
        drawerHolder = (DrawerItemHolder) view.getTag();
    }

    DrawerItem dItem = (DrawerItem) this.drawerItemList.get(position);

    drawerHolder.icon.setImageDrawable(view.getResources().getDrawable(
            dItem.getImgResID()));
    drawerHolder.ItemName.setText(dItem.getItemName());

    return view;
}

private static class DrawerItemHolder {
    TextView ItemName;
    ImageView icon;
}
}

4. En el método NavigationDrawerFragmentde clase generado automáticamente onCreateView, reemplace el adaptador generado automáticamente por esto:

ArrayList<DrawerItem> dataList = new ArrayList<DrawerItem>();
dataList.add(new DrawerItem(getString(R.string.title_section1), R.drawable.ic_action_1));
dataList.add(new DrawerItem(getString(R.string.title_section2), R.drawable.ic_action_2));
dataList.add(new DrawerItem(getString(R.string.title_section3), R.drawable.ic_action_3));

mDrawerListView.setAdapter(new CustomDrawerAdapter(
        getActivity(),
        R.layout.custom_drawer_item,
        dataList));

Recuerde reemplazar R.string.title_sectionNy R.drawable.ic_action_Npor sus propios recursos.

Manuel Lopera avatar Mar 20 '2015 17:03 Manuel Lopera