Android Studio para principiantes, Parte 2: Explore y codifique la aplicación

Actualizado: enero de 2020.

En la Parte 1 de esta introducción para principiantes a Android Studio, configuraste Android Studio en tu entorno de desarrollo y conociste la interfaz de usuario. Ahora, en la Parte 2, codificará su primera aplicación.

La aplicación móvil animada consta de una sola actividad, que presenta el personaje robot de Android de Google y un botón para animar al personaje. Al hacer clic en el botón, el personaje cambia gradualmente de color de verde a rojo a azul, y luego de nuevo a verde. Si bien la aplicación no es especialmente útil, escribirla lo ayudará a sentirse cómodo con el uso de Android Studio. En la Parte 3, creará y ejecutará la aplicación utilizando un emulador de dispositivo Android y una tableta Kindle Fire.

Tenga en cuenta que esta serie se ha actualizado para Android Studio 3.2.1, la versión estable actual al momento de escribir este artículo.

Windows Proyecto y editor de Android Studio

Presenté la ventana principal de Android Studio al final de la Parte 1. Esta ventana está dividida en varias áreas, incluida una ventana de Proyecto en la que identifica los archivos de recursos de una aplicación y varias ventanas del editor donde escribirás el código y especificarás recursos para aplicaciones móviles. en Android Studio. La ventana Proyecto y una ventana del editor se muestran en la Figura 1.

Jeff Friesen

La ventana Proyecto resalta W2A , que es el nombre del W2A.javaarchivo fuente de la aplicación (aunque .javano se muestra la extensión del archivo). Correspondiente a W2A hay una ventana de editor, a la que se accede haciendo doble clic en W2A en la ventana Proyecto. La ventana del editor revela el contenido actual del archivo, en este caso el código fuente esquelético de Java para la actividad principal de la aplicación.

Cada ventana del editor está asociada a una pestaña. Por ejemplo, W2A ventana del editor 's se asocia con un W2A.java pestaña. También se muestra una segunda pestaña identificada como main.xml (el diseño predeterminado basado en XML para la actividad principal de la aplicación). Puede pasar de una ventana del editor a otra haciendo clic en la pestaña de la ventana.

descargar Obtener el código Descargar el código fuente de la aplicación de ejemplo de Android: W2A.java. Creado por Jeff Friesen para JavaWorld.

La aplicación de ejemplo de Android

La aplicación de ejemplo ( W2A.java ) consiste en una actividad principal que muestra el personaje del robot de Android y un botón. Cuando el usuario presiona el botón, el robot se anima a través de una serie de colores. En esta sección, exploraremos el código fuente y los recursos de la actividad.

Explore y codifique la aplicación de ejemplo de Android

El código fuente de la actividad se almacena en el archivo W2A.java, que se presenta en el Listado 1.

Listado 1. W2A.java

 package ca.javajeff.w2a; import android.app.Activity; import android.graphics.drawable.AnimationDrawable; import android.os.Bundle; import android.view.View; import android.widget.Button; import android.widget.ImageView; public class W2A extends Activity { AnimationDrawable androidAnimation; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); ImageView androidImage = (ImageView) findViewById(R.id.android); androidImage.setBackgroundResource(R.drawable.android_animate); androidAnimation = (AnimationDrawable) androidImage.getBackground(); final Button btnAnimate = (Button) findViewById(R.id.animate); View.OnClickListener ocl; ocl = new View.OnClickListener() { @Override public void onClick(View v) { androidAnimation.stop(); androidAnimation.start(); } }; btnAnimate.setOnClickListener(ocl); } } 

El W2A.javaarchivo comienza con una declaración de paquete , que nombra el paquete ( ca.javajeff.w2a) que almacena la W2Aclase. A esto le sigue una serie de declaraciones de importación para varios tipos de API de Android. A continuación, el código describe la W2Aclase, que se extiende android.app.Activity.

W2Aprimero declara un androidAnimationcampo de instancia de tipo android.graphics.drawable.AnimationDrawable. Los objetos de tipo AnimationDrawabledescriben animaciones fotograma a fotograma, en las que el elemento de dibujo actual se reemplaza por el elemento de dibujo siguiente en la secuencia de animación.

¿Qué es un dibujable?

Un dibujable es algo que se puede dibujar, como una imagen. AnimationDrawableextiende indirectamente la android.graphics.drawable.Drawableclase abstracta , que es una abstracción general para un dibujable.

El método onCreate ()

Todo el trabajo de la aplicación se lleva a cabo en W2Ael onCreate(Bundle)método principal : no se requieren otros métodos, lo que ayuda a mantener esta aplicación simple.

onCreate(Bundle) primero invoca su método de superclase del mismo nombre, una regla que deben seguir todos los métodos de actividad primordiales.

Este método luego se ejecuta setContentView(R.layout.main)para establecer la interfaz de usuario de la aplicación. R.layout.maines un identificador (ID) para un recurso de aplicación, que reside en un archivo separado. Usted interpreta esta identificación de la siguiente manera:

  • Res el nombre de una clase que se genera cuando se crea la aplicación. Esta clase se nombra Rporque su contenido identifica varios tipos de recursos de la aplicación, incluidos diseños, imágenes, cadenas y colores.
  • layoutes el nombre de una clase que está anidada dentro R. Un recurso de aplicación cuyo ID se almacena en esta clase describe un recurso de diseño específico. Cada tipo de recurso de aplicación está asociado con una clase anidada que se denomina de manera similar. Por ejemplo, stringidentifica recursos de cadena.
  • maines el nombre de una intconstante basada en -declarada dentro layout. Este ID de recurso identifica el recurso de diseño principal. Específicamente, se mainrefiere a un main.xmlarchivo que almacena la información de diseño de la actividad principal. maines W2Ael único recurso de diseño.

Pasando R.layout.maina Activity's void setContentView(int layoutResID)método instruye Android para crear una pantalla de interfaz de usuario utilizando la información almacenada en el diseño main.xml. Detrás de escena, Android crea los componentes de la interfaz de usuario descritos en main.xmly los coloca en la pantalla del dispositivo según lo especificado por main.xmllos datos de diseño.

La pantalla se basa en vistas (abstracciones de los componentes de la interfaz de usuario) y grupos de vistas (vistas que agrupan los componentes de la interfaz de usuario relacionados). Las vistas son instancias de clases que subclasifican la android.view.Viewclase y son análogas a los componentes AWT / Swing. Los grupos de vistas son instancias de clases que subclasifican la android.view.ViewGroupclase abstracta y son análogos a los contenedores AWT / Swing. Android se refiere a vistas específicas (como botones o controles giratorios) como widgets .

Continuando, onCreate(Bundle)ejecuta ImageView androidImage = (ImageView) findViewById(R.id.android);. Esta declaración primero llama Viewal View findViewById(int id)método para encontrar el android.widget.ImageViewelemento declarado main.xmle identificado como android. Lo instancia ImageViewy lo inicializa con los valores declarados en el main.xmlarchivo. La declaración luego guarda la referencia de este objeto en la variable local androidImage.

ImageView y AnimationDrawable

A continuación, la androidImage.setBackgroundResource(R.drawable.android_animate);declaración invoca ImageViewel método heredado (de View) void setBackgroundResource(int resID), estableciendo el fondo de la vista en el recurso identificado por resID. El R.drawable.android_animateargumento identifica un archivo XML llamado android_animate.xml(presentado más adelante), que almacena información sobre la animación y que se almacena en resel drawablesubdirectorio de. La setBackgroundResource()llamada vincula la androidImagevista con la secuencia de imágenes descritas por android_animate.xml, que se dibujarán en esta vista. La imagen inicial se dibuja como resultado de esta llamada al método.

ImageView lets an app animate a sequence of drawables by calling AnimationDrawable methods. Before the app can do this, it must obtain ImageView's AnimationDrawable. The androidAnimation = (AnimationDrawable) androidImage.getBackground(); assignment statement that follows accomplishes this task by invoking ImageView's inherited (from View) Drawable getBackground() method. This method returns the AnimationDrawable for the given ImageView, which is subsequently assigned to the androidAnimation field. The AnimationDrawable instance is used to start and stop an animation, a process I'll describe shortly.

Finally, onCreate(Bundle) creates the Animate button. It invokes findByViewId(int) to obtain the button information from main.xml, then instantiates the android.widget.Button class.

It then employs the View class's nested onClickListener interface to create a listener object. This object's void onClick(View v) method is invoked whenever the user clicks the button. The listener is registered with its Button object by calling View's void setOnClickListener(AdapterView.OnClickListener listener) method.

To stop, then start the animation, Animate's click listener invokes androidAnimation.stop(); followed by androidAnimation.start();. The stop() method is called before start() to ensure that a subsequent click of the Animate button causes a new animation to begin.

Update and save your code

Before we continue, replace the skeletal code in your W2A.java tab with the code from Listing 1. Save the contents of this window by pressing Ctrl+S, or select Save All from the File menu.

Coding the Android app's main.xml

The app's main activity is associated with an XML-based layout, which is stored in file main.xml, and which is presented in Listing 2.

Listing 2. main.xml

After the XML declaration, Listing 2 declares a LinearLayout element that specifies a layout (a view group that arranges contained views on an Android device's screen in some manner) for arranging contained widgets (including nested layouts) either horizontally or vertically across the screen.

The tag specifies several attributes for controlling this linear layout. These attributes include the following:

  • orientation identifies the linear layout as horizontal or vertical. Contained widgets are laid out horizontally or vertically, and the default orientation is horizontal. "horizontal" and "vertical" are the only legal values that can be assigned to this attribute.
  • layout_width identifies the width of the layout. Legal values include "fill_parent" (to be as wide as the parent) and "wrap_content" (to be wide enough to enclose content). (Note that fill_parent was renamed to match_parent in Android 2.2, but is still supported and widely used.)
  • layout_height identifies the height of the layout. Legal values include "fill_parent" (to be as tall as the parent) and "wrap_content" (to be tall enough to enclose content).
  • gravity identifies how the layout is positioned relative to the screen. For example, "center" specifies that the layout should be centered horizontally and vertically on the screen.
  • background identifies a background image, a gradient, or a solid color. For simplicity, I've hardcoded a hexadecimal color identifier to signify a solid white background (#ffffff). (Colors would normally be stored in colors.xml and referenced from this file.)

The LinearLayout element encapsulates ImageView and Button elements. Each of these elements specifies an id attribute, which identifies the element so that it can be referenced from code. The resource identifier (special syntax that begins with @) assigned to this attribute begins with the @+id prefix. For example, @+id/android identifies the ImageView element as android; this element is referenced from code by specifying R.id.android.

These elements also specify layout_width and layout_height attributes for determining how their content is laid out. Each attribute is assigned wrap_content so that the element will appear at its natural size.

ImageView specifies a layout_marginBottom attribute to identify a space separator between itself and the button that follows vertically. The space is specified as 10 dips, or density-independent pixels. These are virtual pixels that apps can use to express layout dimensions/positions in a screen density-independent way.

Density-independent pixels

Un píxel independiente de la densidad (caída) es equivalente a un píxel físico en una pantalla de 160 ppp, la densidad de referencia asumida por Android. En tiempo de ejecución, Android maneja de manera transparente cualquier escalamiento de las unidades de inmersión requeridas, según la densidad real de la pantalla en uso. Las unidades de inmersión se convierten en píxeles de pantalla mediante la ecuación: píxeles = inmersiones * (densidad / 160) . Por ejemplo, en una pantalla de 240 ppp, 1 inmersión equivale a 1,5 píxeles físicos. Google recomienda usar unidades de inmersión para definir la interfaz de usuario de su aplicación para garantizar una visualización adecuada de la interfaz de usuario en diferentes pantallas de dispositivos.

Elegir y guardar un nuevo diseño