Android

L'objectiu d'aquest CodeLab és coneixer les possibilitats d'IntelliJ per a crear aplicacions Android.

IntelliJ IDEA proporciona el plugin Android Support. Aquest plugin ve incorporat i està activat per defecte. Incorpora moltes eines útils per al desenvolupament d'aplicacions Android com:

Editor grafic d'interfícies
Generació automàtica de codi d'interficies
Inspeccions de codi específiques d'Android
Configuracions per a l'execució en terminals mòbils i dispositius virtuals

Realitzarem un petit joc, el Tres en ratlla, per a iniciar-nos en la programació Android.

Inicia IntelliJ i crea un nou projecte de tipus "Android" anomenat "My Application".

Selecciona la mínima versió d'Android que suportarà l'aplicació.

Selecciona "Empty Activity" com a plantilla per a la pantalla principal:

Posa-li el nom "MainActivity" a la pantalla principal:

A l'SDK Android les pantalles s'anomenen Activities. Hi ha dos arxius fonamentals a l'hora de programar una Activity.

A l'arxiu a MainActivity.java programarem la lògica de l'aplicació, és a dir, el comportament que volem que tingui.

A l'arxiu activity_main.xml programarem l'interfície de l'aplicació, és a dir, l'aspecte que volem que tingui.

Clicant l'arxiu MainActivity.java s'obrirà l'editor de codi, on podrem escriure el codi en llenguatge Java.

Clicant l'arxiu activity_main.xml s'obrirà l'editor gràfic d'interfície d'usuari, on podrem afegir els components que desitjem. A la finestra de l'editor gràfic trobem la "Palette" amb tots els components que podem afegir, i el "Component Tree", que ens mostra l'estructura de components que ja hem afegit.

A l'arxiu activity_main.xml afegirem els widgets (botons, text, imatges, ...) que volem que tingui la pantalla.

Per al joc Tres en ratlla, afegirem 9 botons que simbolitzaran les caselles. Fes doble clic a l'arxiu activity_main.xml perque s'obri l'editor gràfic.

Comencem eliminant el text "Hello world!" que ens ha creat automàticament.

Afegim un GridLayout, que ens distribuirà els botons en una graella (3x3).
Arrossega el GridLayout desde la paleta fins a la pantalla en blanc del mòbil.
Afegim els 9 botons, arrossegant-los desde la paleta fins al mòbil i disposant-los en 3 files i 3 columnes al GridLayout.
El següent pas és identificar els 9 botons (posar un identificador als botons ens permetrà després treballar amb ells des del codi Java).
Per a identificar un botó, sel·leciona'l i posa-li un nom a l'atribut "ID"

Posa aquests identificadors als botons:
Elimina també el text dels botons. Busca l'atribut text i elimina el text BUTTON.
L'ultim pas serà indicar quin mètode del codi Java s'executarà quan es faci clic als botons. Busca l'atribut onClick i posa el nom tirada (fes-ho per als 9 botons).

Ja tenim enllestida la interfície d'usuari del Tres en ratlla. Tot i que encara no es pot realitzar ninguna acció al joc, ja podem provar com es veurà a un dispositiu mòbil.

Executa la App fent clic al botó . Connecta el teu mòbil o selecciona el Dispositiu Virtual. Hauria de sortir una cosa semblant a això:

Fes clic a l'arxiu MainActivity.java perque s'obri l'editor de codi.

Marcar les caselles

El primer pas per a programar la lògica de l'aplicació és marcar les caselles amb una X o un O, segons el torn.

Afegirem el camp torn a la classe, i l'inicialitzarem amb una "X"

public class MainActivity extends AppCompatActivity {

   String torn = "X";

   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_main);
   }
}

Ara programarem el mètode tirada per a que respongui al clic dels botons i marqui el botó corresponent. També canviarem el torn al següent jugador. Abans de marcar una casella i passar el torn, caldrà comprovar que la casella està buida. En cas contrari, mostrarem un missatge d'error.

public class MainActivity extends AppCompatActivity {

   String torn = "X";

   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_main);
   }

   public void tirada(View v){
       Button b = (Button) v;

       if(b.getText().toString().isEmpty()){
           b.setText(torn);
           torn = torn.equals("X") ? "O" : "X";
       } else {
           Toast.makeText(this, "Casella ocupada", Toast.LENGTH_SHORT).show();
       }
   }
}

Comprovar guanyador

Ja només queda comprovar quan hi ha un guanyador de la partida. Si hi ha guanyador mostrem un Toast i reiniciem l'Activity per a començar un nou joc.

Finalment el codi queda així:

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

   String torn = "X";

   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_main);
   }

   public void tirada(View v){
       Button b = (Button) v;

       if(b.getText().toString().isEmpty()){
           b.setText(torn);
           comprovarGuanyador();
           torn = torn.equals("X") ? "O" : "X";
       } else {
           Toast.makeText(this,"Casella ocupada", Toast.LENGTH_SHORT).show();
       }
   }

   private void comprovarGuanyador() {
       Button b1 = findViewById(R.id.button1);
       Button b2 = findViewById(R.id.button2);
       Button b3 = findViewById(R.id.button3);
       Button b4 = findViewById(R.id.button4);
       Button b5 = findViewById(R.id.button5);
       Button b6 = findViewById(R.id.button6);
       Button b7 = findViewById(R.id.button7);
       Button b8 = findViewById(R.id.button8);
       Button b9 = findViewById(R.id.button9);

       String c1 = b1.getText().toString();
       String c2 = b2.getText().toString();
       String c3 = b3.getText().toString();
       String c4 = b4.getText().toString();
       String c5 = b5.getText().toString();
       String c6 = b6.getText().toString();
       String c7 = b7.getText().toString();
       String c8 = b8.getText().toString();
       String c9 = b9.getText().toString();

       if(c1.equals(c2) && c1.equals(c3) && !c1.isEmpty()){
           Toast.makeText(this,"Guanyador " + c1, Toast.LENGTH_SHORT).show();
           recreate();
       } else if(c1.equals(c4) && c1.equals(c7) && !c1.isEmpty()){
           Toast.makeText(this,"Guanyador " + c1, Toast.LENGTH_SHORT).show();
           recreate();
       } else if(c1.equals(c5) && c1.equals(c9) && !c1.isEmpty()){
           Toast.makeText(this,"Guanyador " + c1, Toast.LENGTH_SHORT).show();
           recreate();
       } else if(c2.equals(c5) && c2.equals(c8) && !c2.isEmpty()){
           Toast.makeText(this,"Guanyador " + c2, Toast.LENGTH_SHORT).show();
           recreate();
       } else if(c3.equals(c6) && c3.equals(c9) && !c3.isEmpty()){
           Toast.makeText(this,"Guanyador " + c3, Toast.LENGTH_SHORT).show();
           recreate();
       } else if(c3.equals(c5) && c3.equals(c7) && !c3.isEmpty()){
           Toast.makeText(this,"Guanyador " + c3, Toast.LENGTH_SHORT).show();
           recreate();
       } else if(c4.equals(c5) && c4.equals(c6) && !c4.isEmpty()){
           Toast.makeText(this,"Guanyador " + c4, Toast.LENGTH_SHORT).show();
           recreate();
       } else if(c7.equals(c8) && c7.equals(c9) && !c7.isEmpty()){
           Toast.makeText(this,"Guanyador " + c7, Toast.LENGTH_SHORT).show();
           recreate();
       }
   }
}