programacion - Cómo crear un cajón de navegación personalizado en Android
programacion android pdf 2018 (7)
Hola, intento 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 se especifica sobre la implementación básica. Pero necesito personalizar la navegación de acuerdo con mis especificaciones.
- Necesito agregar un encabezado para categorizar el elemento de la lista en Cajón
- Necesito un botón de opción para seleccionar algunas de mis opciones
¿Cómo puedo hacer esto?
Necesito agregar un encabezado para categorizar el elemento de la lista en Cajón
Personalice listView o use listView
Necesito un botón de opción para seleccionar algunas de mis opciones
Puede hacerlo sin modificar la implementación actual de NavigationDrawer , solo necesita crear un adaptador personalizado para su listView . Puede agregar un diseño principal como Drawer luego puede hacer cualquier diseño complejo dentro de ese modo.
Cajón de navegación de Android usando la actividad Acabo de seguir el ejemplo: http://antonioleiva.com/navigation-view/
Solo necesitas algunas personalizaciones:
public class MainActivity extends AppCompatActivity {
public static final String AVATAR_URL = "http://lorempixel.com/200/200/people/1/";
private DrawerLayout drawerLayout;
private View content;
private Toolbar toolbar;
private NavigationView navigationView;
private ActionBarDrawerToggle drawerToggle;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_dashboard);
toolbar = (Toolbar) findViewById(R.id.toolbar);
drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
initToolbar();
setupDrawerLayout();
content = findViewById(R.id.content);
drawerToggle = setupDrawerToggle();
final ImageView avatar = (ImageView) navigationView.getHeaderView(0).findViewById(R.id.avatar);
Picasso.with(this).load(AVATAR_URL).transform(new CircleTransform()).into(avatar);
}
private void initToolbar() {
final Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
final ActionBar actionBar = getSupportActionBar();
if (actionBar != null) {
actionBar.setHomeAsUpIndicator(R.drawable.ic_menu_black_24dp);
actionBar.setDisplayHomeAsUpEnabled(true);
}
}
private ActionBarDrawerToggle setupDrawerToggle() {
return new ActionBarDrawerToggle(this, drawerLayout, toolbar, R.string.drawer_open, R.string.drawer_close);
}
@Override
protected void onPostCreate(Bundle savedInstanceState) {
super.onPostCreate(savedInstanceState);
// Sync the toggle state after onRestoreInstanceState has occurred.
drawerToggle.syncState();
}
@Override
public void onConfigurationChanged(Configuration newConfig) {
super.onConfigurationChanged(newConfig);
// Pass any configuration change to the drawer toggles
drawerToggle.onConfigurationChanged(newConfig);
}
private void setupDrawerLayout() {
drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
navigationView = (NavigationView) findViewById(R.id.navigation_view);
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(MenuItem menuItem) {
int id = menuItem.getItemId();
switch (id) {
case R.id.drawer_home:
Intent i = new Intent(getApplicationContext(), MainActivity.class);
startActivity(i);
finish();
break;
case R.id.drawer_favorite:
Intent j = new Intent(getApplicationContext(), SecondActivity.class);
startActivity(j);
finish();
break;
}
return true;
}
});
} Aquí está el diseño xml
<android.support.v4.widget.DrawerLayout
android:id="@+id/drawer_layout"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".MainActivity">
<FrameLayout
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="@+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways|snap" />
</android.support.design.widget.AppBarLayout>
</FrameLayout>
<android.support.design.widget.NavigationView
android:id="@+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/drawer_header"
app:menu="@menu/drawer"/>
Agregue drawer.xml en el menú
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group
android:checkableBehavior="single">
<item
android:id="@+id/drawer_home"
android:checked="true"
android:icon="@drawable/ic_home_black_24dp"
android:title="@string/home"/>
<item
android:id="@+id/drawer_favourite"
android:icon="@drawable/ic_favorite_black_24dp"
android:title="@string/favourite"/>
...
<item
android:id="@+id/drawer_settings"
android:icon="@drawable/ic_settings_black_24dp"
android:title="@string/settings"/>
</group>
Para abrir y cerrar el cajón agregue estos valores en string.xml
<string name="drawer_open">Open</string>
<string name="drawer_close">Close</string>
drawer.xml
enter code here
<ImageView
android:id="@+id/avatar"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_margin="@dimen/spacing_large"
android:elevation="4dp"
tools:src="@drawable/ic_launcher"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@+id/email"
android:layout_marginLeft="@dimen/spacing_large"
android:layout_marginStart="@dimen/spacing_large"
android:text="Username"
android:textAppearance="@style/TextAppearance.AppCompat.Body2"/>
<TextView
android:id="@+id/email"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginLeft="@dimen/spacing_large"
android:layout_marginStart="@dimen/spacing_large"
android:layout_marginBottom="@dimen/spacing_large"
android:text="[email protected]"
android:textAppearance="@style/TextAppearance.AppCompat.Body1"/>
El tutorial Android Custom Navigation Drawer (a través de archive.org) contiene un proyecto básico y 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.
El 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 fácil 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 usar como AccountSwitcher.
Tenga en cuenta que, entretanto, Android Studio tiene un proyecto de plantilla para crear una actividad de cajón de navegación como se muestra en la captura de pantalla.
Este repository realiza un seguimiento de los cambios que se realizan en la plantilla.
La solución más fácil para mí fue:
Consideraciones:
- Esta solución requiere una actividad de cajón de navegación autogenerada proporcionada por Android Studio.
- Las clases
DrawerItem,CustomDrawerAdaptery layoutcustom_drawer_item.xmlse tomaron de este tutorial .
1. Crea esta clase para envolver el artículo personalizado del cajón:
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 sus elementos del 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 la clase autogenerada NavigationDrawerFragment método onCreateView , reemplace el adaptador autogenerado 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.
Puede personalizar fácilmente el cajón de navegación de Android una vez que sepa cómo se implementó. aquí hay un buen tutorial donde puedes configurarlo.
Esta será la estructura de su mainXML:
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- Framelayout to display Fragments -->
<FrameLayout
android:id="@+id/frame_container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<!-- Listview to display slider menu -->
<ListView
android:id="@+id/list_slidermenu"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="right"
android:choiceMode="singleChoice"
android:divider="@color/list_divider"
android:dividerHeight="1dp"
android:listSelector="@drawable/list_selector"
android:background="@color/list_background"/>
</android.support.v4.widget.DrawerLayout>
Puede personalizar esta vista de lista a su gusto agregando el encabezado. Y botones de radio.
Si está utilizando Android Studio , proporciona una herramienta muy simple para crear una actividad con un cajón de navegación.
Haga clic derecho en su paquete, vaya a New | Activity | Navigation Drawer Activity New | Activity | Navigation Drawer Activity
Puede BaseActivity nombre a esta BaseActivity para que cualquier actividad que desee tener con un cajón de navegación la extienda (suponiendo que la actividad no extienda aún otra clase). Para extender actividades, mira this .
si ejecuta su aplicación, esto es lo que obtiene:
A partir de ahora, todo lo que necesita para personalizar los elementos en el cajón y agregar contenido a la main content view es seguir la documentación oficial o cualquiera de su elección.
Usé el diseño de abajo 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>