Comandos Linux

LABORATORIO DE SEMINARIO DE SISTEMAS
INTRODUCCIÓN A ANDROID

OBJETIVO.

En esta práctica aprenderá sobre los componentes de tipo containers para la
construcción de interfaces de usuario, controles a nivel de código, sobre los adaptadores,
y eventos básicos.

Recursos.

1. laboratorio
2. android studio
3. sdk api 21
4. emulador android soporte api 21 Android 5.0.0
Desarrollo.
Nevy está cansada de las aplicaciones gratuitas llenas de publicidades, entonces decidió
crear una que necesitaba libre de publicidades, y hecha a su medida, ella desea una
aplicación que le permita simular el lanzamiento de dados de forma aleatoria.
Con un máximo de 6 dados.

Bien vamos a definir un poco la idea de la interfaz. necesaria.

Desarrollo de la aplicación.

Procedemos a crear un nuevo proyecto como se ve en la imagen.

Vamos a darle el nombre de Dados, a la aplicación .

Seleccionamos una actividad básica.

Inicialmente se diseñará la interfaz, y entramos a res - layout - content_main.xml

<?xml version="1.0" e ncoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context=".MainActivity"
tools:showIn="@layout/activity_main">

<LinearLayout
a
ndroid:layout_width="0dp"
a ndroid:layout_height="0dp"
a ndroid:layout_marginBottom="8dp"
a ndroid:layout_marginEnd="8dp"
a ndroid:layout_marginStart="8dp"
a ndroid:layout_marginTop="8dp"
a ndroid:orientation="vertical"
a pp:layout_constraintBottom_toBottomOf="parent"
a pp:layout_constraintEnd_toEndOf="parent"
a pp:layout_constraintStart_toStartOf="parent"
a pp:layout_constraintTop_toTopOf="parent">

<android.support.constraint.ConstraintLayout
a
ndroid:layout_width="match_parent"
a ndroid:layout_height="66dp">

<Button
android:id="@+id/add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="Agregar"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

<Button
android:id="@+id/remove"
android:text="Quitar"
app:layout_constraintStart_toEndOf="@+id/add"

<Button
android:id="@+id/ro"
android:layout_marginEnd="8dp"
android:text="Rodar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/remove"
</android.support.constraint.ConstraintLayout>

<GridView
a
ndroid:id="@+id/container"
a ndroid:layout_width="match_parent"
a ndroid:layout_height="240dp"
a ndroid:columnWidth="120dp"
a ndroid:numColumns="auto_fit"
a ndroid:verticalSpacing="10dp"
a ndroid:horizontalSpacing="10dp"
>

</GridView>

<TextView
a
ndroid:id="@+id/results"
a ndroid:layout_width="match_parent"
a ndroid:layout_height="wrap_content"
a ndroid:layout_marginTop="10dp"
a ndroid:textSize="20dp"
a ndroid:text="TextView" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>

Deberíamos obtener este resultado.

Bien ya hemos terminado con el diseño de la aplicación, ahora vamos a comenzar la
programación.
vamos a la clase MainActivity.

justo debajo de del método onCreate definiremos un método de nombre
LoadComponents()

public void L
oadComponents () {

}

lo llamaremos dentro del método onCreate como sigue.

El método LoadComponents() lo usaremos para definir el código que permitirá extraer
los componentes visuales de la interfaz ya creada para ello usaremos un método que
pertenece a la clase MainActivity llamado f indViewById(int ), de la siguiente forma.

public void L oadComponents () {
GridView container = (GridView)this.findViewById(R.id.container);
}

qué hace este extracto de código. simplemente llama al GridView definido en la vista. por
el identificador R.id.container. la función findViewById regresa un Object. que es un
objeto genérico. por esa razón es necesario castear el objeto al tipo de dato GridView.

BASEADAPTER
REFERENCIA h ttps://developer.android.com/reference/android/widget/BaseAdapter

La siguiente imagen muestra la estructura
de adapter, como se puede ver es un
middleware, o algo que está en el medio
entre los datos y el componente. en
nuestro caso el componente es un
GRIDVIEW. funciona exactamente con los
ListView.

lo interesante del componente es capaz de enlazar de forma reactiva los datos con la
estructura principal que los contiene.
bien considerando el base adapter y la idea de un DataSource, usaremos dos tipos de
datos que nos ayudan a crear esa estructura que android demanda para el uso de sus
componentes.

como variables globales agregaremos dos variables llamadas.

Adapter, y datos. datos será nuestro DataStore, y adapter, nuestro adaptador. Es
importante mencionar que en los casos más frecuentes el DataStore esta relacionado con
la base de datos o con algún servicio de tipo REST. que otorga la información necesaria a
la aplicación.

dentro del onCreate los instanciamos como sigue..

El código siguiente simplemente inicializa los componentes, notar los parámetros de
ArrayAdapter, el primer parámetro hace referencia al contexto, como se ve el contexto es
this, hace referencia a la actividad central donde se está ejecutando el código, el segundo
parámetro hace referencia al tipo de interfaz que mostrará el componente GridView, se
usó uno ya definido por android que es android.R.layout.simple_list_item_1, lo más común
es crear nuestra propia interfaz definiendo nuestro propio adapter. Imagine que
realmente desea mostrar los dados dibujados, es una práctica común que lo
veremos en las siguientes clases.

Lo siguiente agrega los números 1 y 2 al ArrayList, y pone todos esos datos al adapter.

Ahora vemos a modificar nuestra función LoadComponents por:.


container.setAdapter(adapter);
}
Hacemos el uso del método setAdapter del GridView, y pasamos como parámetro
nuestro adapter definido anteriormente.

Bien puede ejecutar el código en el emulador que más le convenga, por ejemplo
GenyMotion.

Ese debera ser el resultado, bien vamos a dar vida a nuestro botones, y aprender cómo
funcionan los eventos.

EVENTOS

Ahora vamos a definir los eventos para cada uno de los botones para ello dentro de la
funcion LoadComponents();

definimos.


container.setAdapter(adapter);

Button add = t his.findViewById(R.id.add);
add.setOnClickListener(this);
Button remove = this.findViewById(R.id.remove);
remove.setOnClickListener(this);
Button roll = t his.findViewById(R.id.roll);
roll.setOnClickListener(this);

}
como se puede ver estamos usando un nuevo método correspondiente a la clase Button,
que es setOnClickListener, y hacemos referencia al objeto this. actualmente veremos
errores. ya que this pide ser un tipo de objeto OnClickListener.
Para ello debemos implementar la clase View.OnClickListener
public class MainActivity extends AppCompatActivity implements
View.OnClickListener{
.
.
.

y sobrecargar la función.
@Override
public void o nClick(View v) {

}

Listo los errores se fueron.

Agregando las acciones.

Ahora cada vez que presionamos en cualquiera de los botones se ejecutara como evento
la funcion onClick, como se puede ver la funcion onClick nos pasa un parámetro que
resulta ser la vista del botón. y por ende nos da su identificador.

podemos separar las accione de la siguiente forma.
@Override
if (v.getId() == R.id.add) {

}e lse if ( v.getId() == R.id.remove) {

}e lse if ( v.getId() == R.id.roll) {

}
}
Como se puede ver la sentencia if pregunta si esa vista v, contiene los ids
correspondientes, bien es hora de terminar la app.

@Override
if (v.getId() == R.id.add) {
d
atos.add("1");
}e lse if ( v.getId() == R.id.remove) {
d atos.remove(datos.size() -1 ) ;
}e lse if ( v.getId() == R.id.roll) {
i nt size = datos.size();
d atos.clear();
i nt suma = 0 ;
f or (i nt i = 0 ; i < size; i++) {
int n
umber = ThreadLocalRandom.current().nextInt(1, 6) ;
suma += number;
datos.add(number + "");
}
TextView txt = (TextView)this.findViewById(R.id.results);
txt.setText("El total es " + suma);
}

adapter.clear();
adapter.addAll(datos);
}

como se puede ver las acciones del botón add, solo agregan información al DataStore,
que es nuestro ArrayList, este se actualiza gracias a adapter.clear(); y
adapter.addAll(datos); el clear borra los todos los datos y los actualiza con los nuevos. el
botón remove. borra el último dato agregado. datos.remove(datos.size() -1 ); nota. Sería
prudente agregar un control para evitar que borre cuando el arreglo ya no tiene datos.
Finalmente la lógica del programa.

int size = d atos.size();
d atos.clear();
i nt suma = 0 ;
f or (i nt i = 0 ; i < size; i++) {
int n umber = ThreadLocalRandom.current().nextInt(1, 6) ;
suma += number;
datos.add(number + "");
}

inicialmente guardamos el tamaño de la lista ArrayList en la variable size. despues
borramos toda la lista, con el método clear(). inicializamos la suma = 0, y pasamos a un
bucle para generar los nuevos valores aleatorios . ThreadLocalRandom.current().nextInt(1,
6); da un número aleatorio entre 1 y 6 agregamos ese datos tanto a la suma como a datos.
Finalmente mostramos la suma resultante en:

hasta este punto la app debería estar terminada, con el sig. resultado.

Si bien la app es absurdamente sencilla, estos nuevos conocimientos abren bastantes
posibilidades, a nuevas ideas que pueden surgir en el mundo del desarrollo de
aplicaciones para móviles.

Comandos Linux

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Comandos Linux

Загружено:

Авторское право:

Доступные форматы

LABORATORIO DE SEMINARIO DE SISTEMAS

vamos a la clase MainActivity.

Вам также может понравиться