Cómo crear un cajón de navegación personalizado en Android
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.
- Necesito agregar un encabezado para categorizar el elemento de la lista en el Cajón
- Necesito un botón de radio para seleccionar algunas de mis opciones
¿Cómo puedo hacer esto?
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:
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 ...
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.
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.
Este repositorio realiza un seguimiento de los cambios que se realizan en la plantilla.
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>
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
DrawerItem
yCustomDrawerAdapter
el diseñocustom_drawer_item.xml
se 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 NavigationDrawerFragment
de 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_sectionN
y R.drawable.ic_action_N
por sus propios recursos.