¿Cuáles son las nuevas características de Android Design Support Library y cómo usar su Snackbar?

Android M Preview para los desarrolladores se dio a conocer ayer. Como de costumbre, muchas nuevas características sorprendentes se introducen. Me di cuenta de que Snackbar es uno de ellos.

He leído el documento sobre Snackbar , del cual aprendí que Snackbar está en la biblioteca de Android Design Support Library, cuya ruta absoluta es android.support.design.widget.Snackbar .

Y el documento dice que:

Las Snackbars proporcionan retroalimentación ligera sobre una operación. Muestran un breve mensaje en la parte inferior de la pantalla en dispositivos móviles e inferior izquierdo en dispositivos más grandes. Las barras de Snack aparecen por encima de todos los demás elementos de la pantalla y solo se puede mostrar una a la vez.

Desaparecen automáticamente después de un tiempo de espera o después de la interacción del usuario en otra parte de la pantalla, especialmente después de las interacciones que convocan una nueva superficie o actividad. Snackbars pueden ser eliminados de la pantalla.

Entonces, ¿ Snackbar comporta como un Toast o un Dialog ? ¿Pueden usarse Snackbars en un archivo de diseño? ¿Cómo podría usarlo mediante programación?

PD:

  • Cualquier muestra sobre el uso de Snackbar será apreciada.
  • Android Design Support Library es una nueva biblioteca de soporte, ¿podría alguien mostrarme más detalles de esta biblioteca?

La nueva Snackbar no requiere Android-M .

Está dentro de la nueva biblioteca de soporte de diseño y se puede utilizar hoy.

Simplemente actualice su SDK agregue esta dependencia en su código:

 compile 'com.android.support:design:22.2.0' 

Puede utilizar un código como este:

 Snackbar.make(view, "Here's a Snackbar", Snackbar.LENGTH_LONG) .setAction("Action", null) .show(); 

Es como un brindis.

Introduzca aquí la descripción de la imagen

Para asignar una acción , debe configurar OnClickListener .

 Snackbar.make(view, "Here's a Snackbar", Snackbar.LENGTH_LONG) .setAction("Action", myOnClickListener) .show(); 

Si usted quisiera cambiar el color de fondo usted puede utilizar algo como esto:

  Snackbar snackbar = Snackbar.make(view, "Here's a Snackbar", Snackbar.LENGTH_LONG); View snackBarView = snackbar.getView(); snackBarView.setBackgroundColor(colorId); snackbar.show(); 

Introduzca aquí la descripción de la imagen

Si desea tener algunas funciones integradas como el gesto de deslizar para descartar o el desplazamiento FAB hacia arriba en la barra de tareas, simplemente tiene un CoordinatorLayout en la jerarquía de su vista.

Puede encontrar más información aquí .

Activity que puede utilizar:

 String s = "SnackBar" Snackbar.make(findViewById(android.R.id.content), s, Snackbar.LENGTH_LONG).show(); 

Y en Fragment :

 Snackbar.make(getView(), s, Snackbar.LENGTH_LONG).show(); 

Editar:

Para cambiar el color de fondo utilizo algo como esto:

 String s = "SnackBar" Snackbar snack = Snackbar.make(getView(), s, Snackbar.LENGTH_LONG); View view = snack.getView(); view.setBackgroundColor(Color.YELLOW); snack.show(); 

Y para cambiar el color del texto (a pesar del tema):

 View view = snack.getView(); TextView tv = (TextView) view.findViewById(android.support.design.R.id.snackbar_text); tv.setTextColor(Color.WHITE); 

Funciona de maravilla 😉

En cuanto a Snackbar , actúa como un Toast pero es diferente con un Toast . Las barras de seguridad se muestran en la parte inferior de la pantalla y contienen texto con una sola acción opcional. Ellos automáticamente el tiempo de espera después de la duración del tiempo dado por la animación de la pantalla. Además, los usuarios pueden deslizarlos antes del tiempo de espera que es considerablemente más potente que los tostados, otro mecanismo de retroalimentación ligero.

Puede utilizarlo de forma programática de la siguiente manera:

 Snackbar snackbar = Snackbar .make(parentLayout, R.string.snackbar_text, Snackbar.LENGTH_LONG) .setAction(R.string.snackbar_action, myOnClickListener); snackbar.setActionTextColor(Color.CYAN); View snackbarView = snackbar.getView(); snackbarView.setBackgroundColor(Color.YELLOW);//change Snackbar's background color; TextView textView = (TextView)snackbarView .findViewById(android.support.design.R.id.snackbar_text); textView.setTextColor(Color.BLUE);//change Snackbar's text color; snackbar.show(); // Don't forget to show! 

Tenga en cuenta el uso de una vista en el método de make()Snackbar intentará encontrar que asegurarse de que está anclado en su parte inferior.

Además, la Biblioteca de soporte de diseño de Android se utiliza para Android 2.1+ (API 7+) , que ofrece vistas de cajón de navegación , etiquetas flotantes para editar texto , botón de acción flotante , bocadillos , pestañas y algo así.

Vista de navegación

El cajón de navegación puede ser un punto focal importante para la identidad y la navegación en su aplicación y la coherencia en el diseño aquí puede hacer una diferencia considerable en la facilidad de su aplicación es navegar, en particular para los usuarios de primera vez. NavigationView hace esto más fácil proporcionando el marco que necesita para el cajón de navegación, así como la capacidad de inflar sus elementos de navegación a través de un recurso de menú.

Puedes usarlo así:

 <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true"> <!-- your content layout --> <android.support.design.widget.NavigationView android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="start" app:headerLayout="@layout/drawer_header" app:menu="@menu/drawer"/> </android.support.v4.widget.DrawerLayout> 

En cuanto al menú del cajón, podría ser:

 <group android:checkableBehavior="single"> <item android:id="@+id/navigation_item_1" android:checked="true" android:icon="@drawable/ic_android" android:title="@string/navigation_item_1"/> <item android:id="@+id/navigation_item_2" android:icon="@drawable/ic_android" android:title="@string/navigation_item_2"/> </group> 

o:

 <item android:id="@+id/navigation_subheader" android:title="@string/navigation_subheader"> <menu> <item android:id="@+id/navigation_sub_item_1" android:icon="@drawable/ic_android" android:title="@string/navigation_sub_item_1"/> <item android:id="@+id/navigation_sub_item_2" android:icon="@drawable/ic_android" android:title="@string/navigation_sub_item_2"/> </menu> </item> 

Obtendrá devoluciones de llamada en los elementos seleccionados al establecer un OnNavigationItemSelectedListener mediante setNavigationItemSelectedListener (). Esto le proporciona el MenuItem que se ha hecho clic, lo que le permite manejar los eventos de selección, cambió el estado revisado, cargar nuevo contenido, cierre programáticamente el cajón, o cualquier otra acción que desee.

Etiquetas flotantes para editar texto

Incluso el humilde EditText tiene espacio para mejorar en el diseño del material. Mientras que un EditText solo oculta el texto de la sugerencia después de que se escribe el primer carácter, ahora puede envolverlo en un TextInputLayout , haciendo que el texto de la sugerencia se convierta en una etiqueta flotante encima del EditText , garantizando que los usuarios nunca pierdan el contexto en lo que están ingresando. Además de mostrar sugerencias, también puede mostrar un mensaje de error debajo del EditText llamando a setError() .

Botón de acción flotante

Un botón de acción flotante es un botón redondo que indica una acción primaria en su interfaz. FloatingActionButton la biblioteca de diseño le proporciona una implementación coherente única, por defecto coloreada usando el colorAccent de su tema.

A medida que FloatingActionButton extiende ImageView , usará android:src o cualquiera de los métodos como setImageDrawable() para controlar el icono que se muestra dentro del FloatingActionButton .

Pestañas

Patrón de navegación de nivel superior se utiliza comúnmente para organizar diferentes agrupaciones de contenido. TabLayout la biblioteca de TabLayout implementa ambas pestañas fijas, donde el ancho de la vista se divide por igual entre todas las pestañas, así como pestañas desplazables, donde las pestañas no tienen un tamaño uniforme y pueden desplazarse horizontalmente.

Las pestañas pueden agregarse mediante programación:

 TabLayout tabLayout = ...; tabLayout.addTab(tabLayout.newTab().setText("Tab 1")); 

Si desea utilizar ViewPager para la paginación horizontal entre pestañas, puede crear pestañas directamente desde su PagerAdapter's getPageTitle() y, a continuación, conectar los dos juntos mediante setupWithViewPager() . Esto garantiza que los eventos de selección de pestañas actualicen el ViewPager y que los cambios de página actualicen la pestaña seleccionada.

CoordinatorLayout y la barra de aplicaciones

La biblioteca de diseño introduce CoordinatorLayout , un diseño que proporciona un nivel adicional de control sobre eventos táctiles entre vistas secundarias, algo que muchos de los componentes de la biblioteca de diseño aprovechan. Si intenta usar un AppBarLayout permite que su Toolbar y otras vistas (como las pestañas proporcionadas por TabLayout ) reaccionen a los eventos de desplazamiento en una vista hermana marcada con un ScrollingViewBehavior. Por lo tanto, puede crear un diseño como:

 <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent"> <! -- Your Scrollable View --> <android.support.v7.widget.RecyclerView android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" /> <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <android.support.v7.widget.Toolbar ... app:layout_scrollFlags="scroll|enterAlways"> <android.support.design.widget.TabLayout ... app:layout_scrollFlags="scroll|enterAlways"> </android.support.design.widget.AppBarLayout> </android.support.design.widget.CoordinatorLayout> 

Ahora, a medida que el usuario desplaza el RecyclerView , AppBarLayout puede responder a esos eventos utilizando los indicadores de desplazamiento de los niños para controlar cómo entran (desplazarse por la pantalla) y salir (desplazarse fuera de la pantalla).

La biblioteca de diseño, AppCompat y toda la Biblioteca de soporte técnico de Android son herramientas importantes para proporcionar los bloques de construcción necesarios para crear una aplicación moderna y de gran apariencia para Android sin crear todo desde cero.

También puede cambiar el color de texto y el fondo de snackbar

  Snackbar snackbar = Snackbar.make(view, "Text", Snackbar.LENGTH_LONG); View snackBarView = snackbar.getView(); TextView tv = (TextView) snackBarView.findViewById(android.support.design.R.id.snackbar_text); tv.setTextColor(ContextCompat.getColor(MainActivity.this, R.color.colorAccent)); snackBarView.setBackgroundColor(ContextCompat.getColor(MainActivity.this, R.color.colorPrimaryDark)); snackbar.show(); 

He establecido la codificación

 Snackbar snackbar = Snackbar .make(getView(), text, Snackbar.LENGTH_INDEFINITE); View sbView = Global.alert.getView(); sbView.setBackgroundColor(0xFF000000); TextView textView = (TextView) sbView.findViewById(android.support.design.R.id.snackbar_text); textView.setTextColor(Color.WHITE); textView.setTextSize(30); Global.alert.show(); 

Snackbar son capaces de mostrar los iconos también.

Por ejemplo: para ninguna red se puede mostrar snackbar como este (al igual que Gmail hace).

 SpannableStringBuilder builder = new SpannableStringBuilder(); builder.append(" ").setSpan(new ImageSpan(this, R.drawable.snackbar_icon), 0, 1, 0); builder.append(" No Network Available"); Snackbar snackBar = Snackbar.make(findViewById(R.id.co_ordinate), builder, Snackbar.LENGTH_LONG); snackBar.setAction("RETRY", new View.OnClickListener() { @Override public void onClick(View v) { //Retry Code here } }); snackBar.show(); 

Es muy sencillo hacer un snackbar en android durante 10 segundos

 Snackbar.make(view, "Hello SnackBar", Snackbar.LENGTH_LONG) .setAction("Its Roy", new View.OnClickListener() { @Override public void onClick(View v) { } }) .setDuration(10000) .setActionTextColor(getResources().getColor(R.color.colorAccent)) .show(); 
  • Diseño de notificaciones personalizadas de Android con RemoteViews
  • Necesidad de diseñar el diseño de la arquitectura de una aplicación Android
  • Cómo cambiar el color de la fuente en los elementos ListView seleccionados / enfocados?
  • ¿Cuál es la mejor manera de implementar este diseño gráfico? (Androide)
  • TextInputLayout setErrorEnabled no crea nuevo objeto TextView
  • Programatically cambiar la altura del diseño, ClassCastException?
  • EditText, los valores inputType (xml)
  • Diseño de motor de juego para Android: ¿cómo sincronizar el bucle de juego y el hilo de actualización de la galería?
  • Android ClassCastException en findViewById
  • Android: Edición de texto personalizado con XML
  • Cómo dibujar el patrón en el lienzo en el dedo arrastrando
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.