Tag Archives: tutorial

Tutorial básico de Android

Por fin termine mi “aplicación” no voy a seguir perfeccionandola por que no tiene sentido si el autor del comic no arregla el html de su web. Así que para aprender lo básico ha estado bien, aunque prefiero esforzarme en alguna aplicación más útil.

Voy a poner trozos de la aplicación que considero mas importantes y explicar para que son, así para quien le apetezca y para que no olvide como lo hice. Importante! es mi primera aplicación si hay algo que se hace mejor de otra forma o algún error o algo, por favor, no dudéis en comentarlo.

La aplicación consta de dos pantallas: Una que lee de un rss y muestra las últimas entradas ( Se que esta desordenado, pero ya he comentado que no voy a gastar mas tiempo en esta aplicación) y la siguiente es el visor de la imagen del comic ( Es un gif pero no consigo que cargue la animación, si alguien sabe como, que lo comente, me interesa mucho)

HSreader2

0.Como crear una lista desde un RSS

Para esta parte básicamente he utilizado el tutorial de esta web:  http://www.sgoliver.net/blog/?p=1588 esta muy explicado.

1. Crear una lista a medida

Para crear una lista personalizada, tenemos que utilizar un ListViewAdapter modificado por nosotros, y cambiar la actividad donde va estar la lista por ListActivity

//De
public class hsreader extends Activity {
//a
public class hsreader extends ListActivity {

Para dar forma a la lista se hace a partir de los XML, en el xml principal (main.xml) tenemos un text y la lista que queremos dar formato:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="@string/hello"
    />
    <ListView android:id="@+id/android:list"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>

En este XML (log_template.xml) tenemos el formato de cada linea de la lista, hemos puesto 2 textview, pero podría ser cualquier cosa:

<?xml version="1.0" encoding="UTF-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="?android:attr/listPreferredItemHeight"
android:padding="6dip">
	<TextView
	android:id="@+id/row_toptext"
	android:layout_width="fill_parent"
	android:layout_height="wrap_content"
	android:singleLine="true"
	android:gravity="center_vertical"
	android:ellipsize="marquee"/>
	 <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:id="@+id/bottomtext"
            android:paddingTop="20dip"
            android:singleLine="false"
            android:ellipsize="marquee"
            android:textColor="#FFF"
        />

</RelativeLayout>

Y a continuación hay que llenar la lista:

//Log es una clase propia donde guardo los datos
//extraidos del RSS en un Hashmap
Log l = new Log();

//La lista estara compuesta de la clase Page
ArrayList<Page> datos= new ArrayList<Page>();

//LLenamos el array, para eso recorremos el
//Hashmap que hemos creado para guardar los
//objetos Page en la clase Log
Iterator it = l.getLog().entrySet().iterator();
    while (it.hasNext()) {
        Map.Entry e = (Map.Entry)it.next();
        datos.add((Page) e.getValue());
     }

//lva es el Adapter creado como variable de la //clase
        lva= new ListViewAdapter(this, R.layout.log_template, datos);

//Buscamos la lista que queremos rellenar
        ListView myList=(ListView)findViewById(android.R.id.list);

//La rellenamos utilizando el adapter
        myList.setAdapter(this.lva);

Y ahora el adapter:

//Clase Adapter
public class ListViewAdapter extends ArrayAdapter<Page>{

//De lo que voy a llenar la lista
List <Page> items;
//Contexto
Context c;

//Constructor
	public  ListViewAdapter(Context context, int textViewResourceId, List<Page> items) {
		super(context,textViewResourceId,items);
		this.c=context;
	    this.items = items;
	}

//Esta es la función que rellena la lista, como
//vamos a cambiar el funcionamiento de como se
//rellena hay que sobrescribirla.
	@Override
	public View getView(int position, View convertView, ViewGroup parent) {
	View v = convertView;
	try{
	if (v == null) {
		//Si no hay vista hay que crearla
               //No estoy segura como funciona
	LayoutInflater vi = (LayoutInflater) getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
	v = vi.inflate(R.layout.log_template,null);
	}
        //Posicion tiene el item de la lista que se va
// a rrellenar
	Page o = items.get(position);
	if (o != null) {

	//poblamos la lista de elementos

	TextView tt = (TextView) v.findViewById(R.id.row_toptext);
	TextView t2= (TextView) v.findViewById(R.id.bottomtext);

//Comprobamos que existen los elementos y los
//rellenamos
//getURLpage() y getTitulo() son metodos de la //clase page
	if (t2!= null) {
	t2.setText(o.getURLpage());
	}
	if (tt != null) {
	tt.setText(o.getTitulo());
	}
	}
	}catch (Exception e) {
		System.out.print(e);
	}
	return v;

	}

}

Y con esto tenemos nuestra lista terminada!!! :)

2. Pasar de una actividad a otra

Parte básica de las aplicaciones android, pero por si alguien no lo tenia claro. A efectos prácticos una actividad es una pantalla de la aplicación. Para pasar de una a otra tenemos que poner este código en la principal.

try{
//p es información que queremos pasar a la otra actividad.
    	Page p = (Page) l.getItemAtPosition(position);

//Con intent le decimos la clase origen (hsreader.this)
//y la clase que queremos iniciar (Pageview.class)
    	 Intent intent = new Intent(hsreader.this, Pageview.class);

//Con un Bundle guardamos la informacion que queremos compartir
         Bundle bundle = new Bundle();
         bundle.putString("DIR", p.getURLpage().toString());
         bundle.putString("TITULO", p.getTitulo().toString());

//Incluimos el bundle al intent
         intent.putExtras(bundle);

//Iniciamos la actividad
         startActivity(intent);
    	}catch (Exception e) {
    	//Con Toast consegimos mostrar un mensaje por pantalla	Toast.makeText(this,e.toString(),Toast.LENGTH_LONG).show();
		}

Con esto se inicia la otra actividad y para sacar la información compartida:

//Recuperamos el bundle del intent
Bundle bundle = getIntent().getExtras();

//Y así extraemos la información que hay dentro
String titulo=bundle.getString("TITULO")

3. Leer desde un HTML

Esta solución la encontré visitando varias webs, ahora mismo no tengo la referencia si alguien lo sabe, la añado. Intentare explicar lo que pueda.

Se que la expresión regular es bastante “patatera” pero no quería entretenerme mucho.

//Las primeras lineas son para conectarse a la url y bajarse el HTML.
public void getHtml(String url) throws ClientProtocolException, IOException
	{
	    HttpClient httpClient = new DefaultHttpClient();
	    HttpContext localContext = new BasicHttpContext();
	    HttpGet httpGet = new HttpGet(url);
	    HttpResponse response = httpClient.execute(httpGet, localContext);
	    String result = "";

//Guardamos en la variable reader el HTML
	    BufferedReader reader = new BufferedReader(
	        new InputStreamReader(
	          response.getEntity().getContent()
	        )
	      );

	    String line = null;
	    int vez=0;
//Leemos cada linea y buscamos el patron
	    while ((line = reader.readLine()) != null &&vez==0){
//Buscamos una imagen
	    	  Pattern patron = Pattern.compile("<img src="http://www.mspaintadventures.com/storyfiles/hs2/.*");
	    	  Matcher matcher = patron.matcher(line);

	    	     // Hace que Matcher busque los trozos.
	    	     if(matcher.find()) // hay imagen
	    	     {
//Guardamos en el array los nombres de las imagenes y
//hacemos que deje de recorrer el fichero.
	    	         urlimg.add( line.substring(line.length()-9, line.length()));
	    	         vez=1;

	    	     }
	     //Si se recorriera el fichero compelo en result tendriamos el HTML.
	      result += line + "n";	     

	    }

	}

4. Descargar una imagen

Y para el final, el último reto de la aplicación:

try {

//urlimg es un Arraylist con los nombres de las imagenes
Bitmap bitmap = BitmapFactory.decodeStream((InputStream)new URL("http://www.mspaintadventures.com/storyfiles/hs2/"+urlimg.get(0)).getContent());

//Buscamos donde vamos a poner la imagen
		  ImageView img = (ImageView) findViewById(R.id.comic);
//Colocamos la imagen			         img.setImageBitmap(bitmap);

} catch (MalformedURLException e) {
	 //log exception here
} catch (IOException e) {
	  //log exception here
}

Conclusión

A la aplicación le falta poder leer gif y flash, si alguien sabe como que lo diga :D.

Gracias por ver el post y espero que le sirva de ayuda a alguien.