SUDOKU II: Implementar el Cuadro ABOUT

Hoy vamos a aprender a conectar unas actividades con otras. Para ello, vamos a diseñar un cuadro About que nos dé la información básica sobre nuestro Sudoku. Deberá activarse en el momento que presionemos el botón About, mostrar el texto que queremos y retroceder a la página anterior al presionar la tecla Volver. Existen tres métodos para conseguir nuestro objetivo:

-Definiendo una nueva actividad e iniciándola.

-Utilizando la clase AlertDialog y mostrándola.

-Con una subclase de la clase Dialog de Android y mostrándola.

Nosotros vamos a aprender el primer método. El primer paso será la creación del layout (el contenedor) de nuestra actividad About. Creamos el archivo res/layout/about.xml de tipo ScrollView (lo escribimos en el recuadro Root Element):

<?xml version="1.0" encoding="utf-8"?>

<ScrollView

        xmlns:android="http://schemas.android.com/apk/res/android"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:padding="10dip">

    <TextView

        android:id="@+id/about_content"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content" />

</ScrollView>

Si os habéis dado cuenta, esta vez, en lugar de hacer referencia a un ID de recurso ya definido en el directorio res, hemos usado la sintaxis @id+/---,  de modo que ya estamos creando un nuevo ID de recurso al que podremos hacer referencia más tarde en otras actividades. Vamos a añadir esta sintaxis al layout activity_main.xml que ya habíamos creado en la entrada SUDOKU I (tanto en layout como layout-land):

Vamos a añadir ahora el texto que necesitamos mostrar mediante el archivo strings:

Sudoku/src/main/res/values/strings.xml

<?xml version="1.0" encoding="utf-8"?>

<resources>

    <string name="app_name">Sudoku</string>

    <string name="action_settings">Settings</string>

    <string name="main_title">Android Sudoku</string>

    <string name="continue_label">Continue</string>

    <string name="new_game_label">New Game</string>

    <string name="about_label">About</string>

    <string name="exit_label">Exit</string>

    <string name="hello_world">Hello world!</string>

    <string name="about_title">About Android Sudoku</string>

    <string name="about_text">\

    Sudoku is a logic-based number placement puzzle.

    Starting with a partially completed 9x9 grid, the

    objective is to fill the grid so that each

    row, each column, and each of the 3x3 boxes

    (also called <i>blocks</i>) contains the digits

    1 to 9 exactly once.

    </string>

</resources>

La barra invertida (\) en about_text hace que no aparezca un espacio antes de la primera palabra del texto.

El siguiente paso será definir nuestra actividad About en About.java.  El archivo About.java debemos crearlo nosotros mismos. Para ello vamos nuestra carpeta fuente y creamos una nueva clase llamada About:

Sudoku/src/main/java/hagamosuna…/About.java

package hagamosunaapp.blogspot.com.sudoku;

import android.app.Activity;

import android.os.Bundle;

public class About extends Activity {

    @Override

    protected void onCreate (Bundle savedInstanceState) {

        super.onCreate (savedInstanceState);

        setContentView(R.layout.about);

    }

}

Los métodos que se reflejan en este código podéis verlos en la siguiente página: http://developer.android.com/reference/android/app/Activity.html. En general, lo que estamos haciendo en primer lugar es importar los paquetes API Android que necesitamos. Después, definimos la clase About y la extendemos a una actividad. Como queremos iniciar dicha actividad, llamamos a OnCreate (guardando el estado actual), y después a setContentView(int), que nos permite crear la interfaz del usuario mediante el recurso que ya hemos creado: about.xml.

Como queremos conectar la clase Sudoku con la clase About al presionar el botón About de nuestra página principal, nos dirigimos a la clase Sudoku.java y añadimos lo siguiente:

Sudoku/src/main/java/hagamosuna…/Sudoku.java

package hagamosunaapp.blogspot.com.sudoku;

import android.os.Bundle;

import android.app.Activity;

import android.view.Menu;

import android.content.Intent;

import android.view.View;

import android.view.View.OnClickListener;

public class Sudoku extends Activity {

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        View continueButton = findViewById(R.id.continue_button);

        continueButton.setOnClickListener (this);

        View newButton = findViewById(R.id.new_button);

        newButton.setOnClickListener (this);

        View aboutButton = findViewById(R.id.about_button);

        aboutButton.setOnClickListener (this);

        View exitButton = findViewById(R.id.exit_button);

        exitButton.setOnClickListener (this);

    }

    @Override

    public boolean onCreateOptionsMenu(Menu menu) {

        // Inflate the menu; this adds items to the action bar if it is present.

        getMenuInflater().inflate(R.menu.sudoku, menu);

        return true;

    }

}

Las líneas que hemos añadido nos han servido para importar las intenciones que precisábamos (una intención sirve para describir una acción específica, como “sacar una foto”, “presionar un botón”, etc.), y por otro, hemos llamado a findViewById para buscar una vista Android en base a su ID de recurso, y setOnClickListener() para indicarle a Android qué objeto selecciona el usuario. En nuestro caso lo hemos hecho para todos los botones. Si os habéis dado cuenta, esta vez hemos llamado al recurso mediante la nomenclatura id.xxx_button, de forma que AS buscará automáticamente en el archivo de recursos res/layout/activity_main.xml aquellos objetos que hallamos definido como @+id/xxx_button.

Ya hemos atribuido la variable this al método setOnClickListener para implementar la interfaz Java OnclickListener. Sin embargo, para que la clase actual (Sudoku.java) implemente dicha interfaz sin errores, tendremos que añadir el método onClick (el cual viene incluido en OnClickListener):

Sudoku/src/main/java/hagamosuna…/Sudoku.java

package hagamosunaapp.blogspot.com.sudoku;

import android.os.Bundle;

import android.app.Activity;

import android.view.Menu;

import android.content.Intent;

import android.view.View;

import android.view.View.OnClickListener;

public class Sudoku extends Activity implements OnClickListener{

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        View continueButton = findViewById(R.id.continue_button);

        continueButton.setOnClickListener (this);

        View newButton = findViewById(R.id.new_button);

        newButton.setOnClickListener (this);

        View aboutButton = findViewById(R.id.about_button);

        aboutButton.setOnClickListener (this);

        View exitButton = findViewById(R.id.exit_button);

        exitButton.setOnClickListener (this);

    }

    public void onClick(View v) {

        switch (v.getId()) {

            case R.id.about_button:

                Intent i=new Intent (this, About.class);

                startActivity(i);

            break;

        }

    }

   

    @Override

    public boolean onCreateOptionsMenu(Menu menu) {

        // Inflate the menu; this adds items to the action bar if it is present.

        getMenuInflater().inflate(R.menu.sudoku, menu);

        return true;

    }

}

Con estas líneas, hemos creado la instancia de clase Intent que nos permite iniciar la actividad About una vez presionamos el botón correspondiente.

Por último, el paso más importante es el de declarar la actividad About en AndroidManifest.xml. TODAS las actividades deben ser declaradas aquí. Nos dirigimos al directorio adecuado y añadimos estas líneas:

Sudoku/src/main/AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

    package="hagamosunaapp.blogspot.com.sudoku"

    android:versionCode="1"

    android:versionName="1.0" >

    <uses-sdk

        android:minSdkVersion="7"

        android:targetSdkVersion="16" />

    <application

        android:allowBackup="true"

        android:icon="@drawable/ic_launcher"

        android:label="@string/app_name"

        android:theme="@style/AppTheme" >

        <activity

            android:name="hagamosunaapp.blogspot.com.sudoku.Sudoku"

            android:label="@string/app_name" >

            <intent-filter>

                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />

            </intent-filter>

        </activity>

        <activity

            android:name=".About"

            android:label="@string/about_title" >

        </activity>

    </application>

</manifest>

Si corremos ahora nuestra aplicación, y pinchamos en el botón About, debemos encontrarnos algo parecido a esto:

Para darle algo más de vida, podemos aplicar uno de los temas que incluye Android. Nosotros mismos podríamos crear uno de ellos, pero en este caso vamos a utilizar uno ya existente. Para ello, volvemos a AndroidManifest.xml, y añadimos una nueva línea:

Sudoku/src/main/AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

    package="hagamosunaapp.blogspot.com.sudoku"

    android:versionCode="1"

    android:versionName="1.0" >

    <uses-sdk

        android:minSdkVersion="7"

        android:targetSdkVersion="16" />

    <application

        android:allowBackup="true"

        android:icon="@drawable/ic_launcher"

        android:label="@string/app_name"

        android:theme="@style/AppTheme" >

        <activity

            android:name="hagamosunaapp.blogspot.com.sudoku.Sudoku"

            android:label="@string/app_name" >

            <intent-filter>

                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />

            </intent-filter>

        </activity>

        <activity

            android:name=".About"

            android:label="@string/about_title"

            android:theme="@android:style/Theme.Dialog">

        </activity>

    </application>

</manifest>

Y eso es todo! Si tenéis algún problema no dudéis en preguntar.

Un saludo! Y mucho ánimo navegantes!!

Jaime