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

com.android.support:design 26

Question

Android M Preview para desarrolladores fue lanzado ayer. Como de costumbre, se introducen muchas características nuevas increíbles. Noté que Snackbar es uno de ellos.

He leído el documento sobre Snackbar , donde me enteré de 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 barras para refrigerios proporcionan información liviana sobre una operación. Muestran un mensaje breve en la parte inferior de la pantalla en el móvil y en la inferior izquierda en dispositivos más grandes. Las barras de refrigerio aparecen encima de todos los demás elementos en la pantalla y solo se puede mostrar una a la vez.

Desaparece automáticamente después de un tiempo de espera o después de la interacción del usuario en otro lugar de la pantalla, especialmente después de las interacciones que convocan a una nueva superficie o actividad. Los Snackbars se pueden quitar de la pantalla.

Entonces, ¿ Snackbar comporta como un Toast o un Dialog ? ¿Se pueden usar Snackbars en un archivo de diseño? ¿Cómo podría usarlo programáticamente?

PD:

• Se apreciará cualquier muestra sobre el uso de Snackbar.
• Android Design Support Library es una nueva biblioteca de soporte. ¿Alguien podría mostrarme más detalles de esta biblioteca?

Answer 1

¿Has visto http://android-developers.blogspot.in/2015/05/android-design-support-library.html ?

resume todo el soporte lib.

Answer 2

Configuré 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();

Answer 3

El nuevo Snackbar no requiere Android-M .

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

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

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

Puedes usar un código como este:

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

Es como un brindis.

Para asignar una acción , debe establecer OnClickListener .

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

Si desea cambiar el color de fondo , puede usar algo como esto:

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

Si desea tener algunas funciones integradas como el gesto de deslizar para despedir , o el FAB que se desplaza hacia arriba en la barra de bocadillos, simplemente tiene un CoordinatorLayout en su jerarquía de vistas.

Answer 4

En Activity puedes usar:

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, uso 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 ;-)

Answer 5

En cuanto a Snackbar , actúa como un Toast pero es diferente con un Toast . Las barras de refrigerios se muestran en la parte inferior de la pantalla y contienen texto con una acción única opcional. Se apagan automáticamente después de la duración de tiempo dada animando fuera de la pantalla. Además, los usuarios pueden deslizarlos lejos antes del tiempo de espera, que es considerablemente más potente que los brindis, otro mecanismo de retroalimentación ligero.

Puedes usarlo programáticamente de esta 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á encontrarlo para asegurarse de que está anclado en su parte inferior.

Además, Android Design Support Library se utiliza para Android 2.1+ (API 7+) , que cuenta con vista del cajón de navegación , etiquetas flotantes para editar texto , botón de acción flotante , snackbar , pestañas y algo así.

Vista de navegación

El panel de navegación puede ser un punto focal importante para la identidad y la navegación dentro de su aplicación y la consistencia en el diseño aquí puede hacer una diferencia considerable en la facilidad de navegación de su aplicación, en particular para los usuarios primerizos. NavigationView hace más fácil al proporcionar 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 configurando OnNavigationItemSelectedListener utilizando setNavigationItemSelectedListener (). Esto le proporciona el elemento de menú en el que se hizo clic, lo que le permite manejar eventos de selección, cambiar el estado verificado, cargar nuevo contenido, cerrar el cajón mediante programació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 de materiales. Mientras EditText solo esconderá el texto de sugerencia después de escribir el primer carácter, ahora puede envolverlo en un TextInputLayout , haciendo que el texto de sugerencia se convierta en una etiqueta flotante sobre EditText , asegurando que los usuarios nunca pierden contexto en lo que están ingresando. Además de mostrar sugerencias, también puede mostrar un mensaje de error debajo de 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 principal en su interfaz. FloatingActionButton la biblioteca de diseño le ofrece una única implementación consistente, coloreada de manera predeterminada con colorAccent de su tema.

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

Pestañas

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

Las pestañas se pueden agregar mediante programación:

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

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

CoordinatorLayout y la barra de aplicaciones

la biblioteca de diseño presenta CoordinatorLayout , un diseño que proporciona un nivel adicional de control sobre los eventos táctiles entre vistas secundarias, algo que muchos de los componentes de la biblioteca de diseño aprovechan. Si intenta usar un AppBarLayout, su Toolbar y otras vistas (como las pestañas proporcionadas por TabLayout ) reaccionarán a los eventos de desplazamiento en una vista de hermanos 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 se desplaza por RecyclerView , AppBarLayout puede responder a esos eventos utilizando los indicadores de desplazamiento de los niños para controlar cómo ingresan (desplazarse por la pantalla) y salir (desplazarse fuera de la pantalla).

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

Answer 6

Es muy simple 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();

Answer 7

Snackbar también puede mostrar íconos.

Por ejemplo: para ninguna red, puede mostrar una barra de aperitivos como esta (al igual que Gmail).

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();

Answer 8

también puede cambiar el color del texto y el fondo de la barra de aperitivos

 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();