Android SlidingDrawer Tutorial
Hola comenzamos la semana con este ejemplo aprendiendo a utilizar el SlidingDrawer para tener un poco mas claro esto SlidingDrawer representa un widget, donde podemos usarlo en nuestras aplicaciones de Android. SlidingDrawer tiene la capacidad de ocultar /mostrar contenido cuando el usuario arrastra una manija.
Más específicamente, incluye dos vistas básicas:
- El identificador con el cual el usuario puede arrastrar.
- El contenido que esta oculto está asociado con el identificador y se muestra cuando el usuario arrastra el identificador.
Es muy importante mencionar que la clase SlidingDrawer está obsoleta en Android Api 17 y superior, por lo que se recomienda utilizarla en versiones anteriores o crear su propio widget en las nuevas.
En nuestro ejemplo, vamos a mostrar cómo se puede utilizar el widget SlidingDrawer en una aplicación de Android.
Teniendo entendido esto comenzaremos con nuestro ejemplo.
Crear Nuevo Proyecto Android Studio
Ahora crearemos nuestro proyecto pueden utilizar el Api que sea menor a la 17 para poder utilizar este ejemplo de SlidingDrawer. (Aquí)
Crear Diseño activity_main
Ahora crearemos el diseño de nuestra actividad. Como hemos continuado cada ejemplo nos dirigimos a la actividad activity_main.xml y nos vamos a la pestaña Design para nuestro SlidingDrawer.
De esta forma quedaría nuestro diseño y para verificar el código de nuestro activity_main.xml.
Utilizaríamos los controles visto en el código pero ustedes pueden hacer sus pruebas intenten crear su diseño personalizado el que mas se adapte a su aplicación SlidingDrawer.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<TextView
android:id="@+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20dp"
android:textColor="#000"
android:text="Arrastrar botón..." />
<SlidingDrawer
android:id="@+id/slidingDrawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="30dp"
android:content="@+id/content"
android:handle="@+id/handle"
android:orientation="vertical" >
<Button
android:id="@+id/handle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="▼" />
<LinearLayout
android:id="@+id/Contenido"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="@+id/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20dp"
android:textColor="#000"
android:text="Hola amigos de Universo Android Studio!" />
<Button
android:id="@+id/click"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Click me" />
</LinearLayout>
</SlidingDrawer>
</RelativeLayout>Utilizaríamos los controles visto en el código pero ustedes pueden hacer sus pruebas intenten crear su diseño personalizado el que mas se adapte a su aplicación SlidingDrawer.
Código MainActivity SlidingDrawer
Ahora continuaremos con el código de nuestra aplicación.
import android.os.Bundle;
import android.app.Activity;
import android.content.Context;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.SlidingDrawer;
import android.widget.SlidingDrawer.OnDrawerOpenListener;
import android.widget.SlidingDrawer.OnDrawerCloseListener;
import android.widget.TextView;
import android.widget.Toast;
public class MainActivity extends Activity {
//--Declaramos las variables que utilizaremos
private SlidingDrawer drawer;
private Button handle, clickMe;
private TextView text1;
private Context context;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//--Interfaz global de la aplicación
context = this.getApplicationContext();
//--Asignación de las propiedades de los controles
handle = (Button) findViewById(R.id.handle);
text1 = (TextView) findViewById(R.id.text1);
clickMe = (Button) findViewById(R.id.click);
drawer=(SlidingDrawer)findViewById(R.id.slidingDrawer);
//--Control a la espera de ser presionado cuando ya se arrastro el sliding
drawer.setOnDrawerOpenListener(new OnDrawerOpenListener() {
@Override
public void onDrawerOpened() {
handle.setText("▲");
text1.setText("Ya arrastrado...");
}
});
//--Control a la espera de ser presionado cuando aun no se arrastra el sliding
drawer.setOnDrawerCloseListener(new OnDrawerCloseListener() {
@Override
public void onDrawerClosed() {
handle.setText("▼");
text1.setText("Arrastrar botón...");
}
});
//--Presionar botón y mostrara un mensaje
clickMe.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(context, "Se hizo clic en el botón", Toast.LENGTH_LONG).show();
}
});
}
}
El código esta explicado si no entienden como va déjenme su comentario y con gusto les responderé sus dudas.
Context
Interfaz con la información global sobre un entorno de aplicación. Esta es una clase abstracta cuya implementación es proporcionada por el sistema Android. Permite el acceso a recursos y clases específicos de la aplicación, así como llamadas ascendentes para operaciones a nivel de aplicación tales como actividades de lanzamiento, propósitos de difusión y recepción, etc.Crear Emulador AVD
Ahora una de las partes finales es crear el emulador para ejecutar nuestra aplicación o si no ejecutarla directamente en nuestro celular y ver el resultado de nuestro SlidingDrawer.
Descargar:
Opcion 1
Comparte Gracias! Universo Android
Opcion 1
Opcion 2
No hay comentarios:
Publicar un comentario