Diferencia entre revisiones de «Usuario:ManuelRomero/Fragmentos»

De WikiEducator
Saltar a: navegación, buscar
(Página creada con '{{:Usuario:ManuelRomero/Android/nav}} <br> =Concepto= *Tradicionalmente una pantalla de una aplicación se asocia con una clase '''''Activity''''' específica *El concepto de …')
 
Línea 8: Línea 8:
 
*La idea es escribir aplicaciones que se puedan adaptar a diferentes opciones y orientaciones de pantalla
 
*La idea es escribir aplicaciones que se puedan adaptar a diferentes opciones y orientaciones de pantalla
 
*De esta forma no tenemos que tener una aplicación para cada tipo de dispositivo.
 
*De esta forma no tenemos que tener una aplicación para cada tipo de dispositivo.
 +
===Idea de fragment===
 +
<!--
 +
Insertar imagen como la del libro 2 página 283
 +
-->
 +
Los componentes Fragment  controlan su porpio estado empleado su ciclo de vida.
 +
Se pueden mezclar Fragment con controles View en una clase Activity
 +
La clase Activity es la responsable de gestionar los controles View.
 +
===Definir Fragments===
 +
A continuación realizaremos un ejemplo
 +
*Creamos un proyecto llamado '''''fragmentos'''''
 +
*Usamos un mínimo de versión 3.0
 +
*Cremos u nuevo xml de layout llamado detalle
 +
<source lang=xml>
 +
<?xml version="1.0" encoding="utf-8"?>
 +
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 +
android:layout_width="match_parent"
 +
android:layout_height="match_parent"
 +
android:orientation="vertical" >
 +
 +
<TextView
 +
android:id="@+id/textoDetalle"
 +
android:layout_width="wrap_content"
 +
android:layout_height="match_parent"
 +
android:layout_gravity="center_horizontal|center_vertical"
 +
android:layout_marginTop="20dip"
 +
android:text="Texto para el detalle"
 +
android:textAppearance="?android:attr/textAppearanceLarge"
 +
android:textSize="30dip" />
 +
 +
</LinearLayout>
 +
</source>
 +
*Ahora modificamos el fichero main.xml para que muestre la aplicación en modo ''tablet''
 +
*Debemos poner la orientación horizontal
 +
*Cada fragment tendrá asociada su propia clase
 +
<source lang=xml>
 +
<?xml version="1.0" encoding="utf-8"?>
 +
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 +
android:layout_width="match_parent"
 +
android:layout_height="match_parent"
 +
android:orientation="horizontal" >
 +
 +
<fragment
 +
  android:id="@+id/listaFragment"
 +
  android:layout_width="150dip"
 +
  android:layout_height="match_parent"
 +
  android:layout_marginTop="?android:attr/actionBarSize"
 +
  class="co.droidforum.android.fragments.ListaFragmento" >
 +
</fragment>
 +
 +
<fragment
 +
  android:id="@+id/detalleFragment"
 +
  android:layout_width="match_parent"
 +
  android:layout_height="match_parent"
 +
  class="co.droidforum.android.fragments.DetalleFragmento" >
 +
</fragment>
 +
 +
</LinearLayout>
 +
</source>
 +
*Ahora creamos las clases ''ListaFragmento'' y ''DetalleFramento''
 +
*La clase ListaFragmento
 +
<source lang = java>
 +
package com.example.usofragment;
 +
 +
import android.content.Intent;
 +
import android.os.Bundle;
 +
import android.view.View;
 +
import android.widget.ArrayAdapter;
 +
import android.widget.ListView;
 +
 +
public class ListaFragmento extends android.app.ListFragment {
 +
 +
/**
 +
*
 +
* Fragment que se carga inicialmente con la vista principal, es decir, con el listado inicial
 +
*
 +
* @author carlos.munoz
 +
*
 +
*/
 +
public class ListFragment extends android.app.ListFragment {
 +
@Override
 +
public void onCreate(Bundle savedInstanceState) {
 +
super.onCreate(savedInstanceState);
 +
 +
}
 +
 +
@Override
 +
//se sobreescribe este método como el que siempre "carga" la información a mostrar en el fragment
 +
public void onActivityCreated(Bundle savedInstanceState) {
 +
super.onActivityCreated(savedInstanceState);
 +
String[] values = new String[] { "Android", "iPhone", "WindowsMobile",
 +
"Blackberry", "WebOS", "Ubuntu", "Windows7", "Max OS X",
 +
"Linux", "OS/2" };
 +
ArrayAdapter<String> adapter =
 +
new ArrayAdapter<String>(getActivity(), android.R.layout.simple_list_item_1, values);
 +
 +
setListAdapter(adapter);
 +
}
 +
 +
@Override
 +
//al hacer tap en algun elemento de la vista, setea el texto del elemento en el nuevo fragment
 +
public void onListItemClick(ListView l, View v, int position, long id) {
 +
String item = (String) getListAdapter().getItem(position);
 +
DetalleFragmento fragment = (DetalleFragmento) getFragmentManager().findFragmentById(R.id.detalleFragment);
 +
if (fragment != null && fragment.isInLayout()) {
 +
fragment.setText(item);
 +
} else {
 +
Intent intent = new Intent(getActivity().getApplicationContext(), MainActivity.class);
 +
intent.putExtra("value", item);
 +
startActivity(intent);
 +
}
 +
}
 +
}
 +
}
 +
 +
</source>
 +
 +
 +
*La clase DetalleFragmento
 +
 +
<source lang = java>
 +
package com.example.usofragment;
 +
 +
import android.app.Fragment;
 +
import android.os.Bundle;
 +
import android.util.Log;
 +
import android.view.LayoutInflater;
 +
import android.view.View;
 +
import android.view.ViewGroup;
 +
import android.widget.TextView;
 +
 +
public class DetalleFragmento extends Fragment  {
 +
@Override
 +
public void onCreate(Bundle savedInstanceState) {
 +
super.onCreate(savedInstanceState);
 +
Log.e("Test", "hello");
 +
}
 +
 +
@Override
 +
public void onActivityCreated(Bundle savedInstanceState) {
 +
super.onActivityCreated(savedInstanceState);
 +
 +
}
 +
 +
@Override
 +
public View onCreateView(LayoutInflater inflater, ViewGroup container,
 +
Bundle savedInstanceState) {
 +
View view = inflater.inflate(R.layout.detalle, container, false);
 +
return view;
 +
}
 +
 +
public void setText(String item) {
 +
TextView view = (TextView) getView().findViewById(R.id.textoDetalle);
 +
view.setText(item);
 +
}
 +
}
 +
</source>
 +
 +
===Crear los layout para modo móvil===
 +
*Ahora para garantizar que funcione en modo móvil, hay que crear layouts de este modo
 +
*Para ello creamos dentro del folder /res el folder layout-port.
 +
*Allí ubicaremos un nuevo main.xml que creamos para que sea el que se lea cuando el dispositivo esté en modo portrait.
 +
*Android, inicialmente busca una carpeta llamada layout-port, si no lo encuentra, busca en el folder layout.
 +
*Creamos la carpeta layout-port
 +
*Creamos el fichero activity_main.xml
 +
<source lang=xml>
 +
<?xml version="1.0" encoding="utf-8"?>
 +
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 +
android:layout_width="match_parent"
 +
android:layout_height="match_parent"
 +
android:orientation="horizontal" >
 +
 +
<fragment
 +
  android:id="@+id/listaFragment"
 +
  android:layout_width="match_parent"
 +
  android:layout_height="match_parent"
 +
  android:layout_marginTop="?android:attr/actionBarSize"
 +
  class="co.droidforum.android.fragments.ListaFragmento" />
 +
</LinearLayout>
 +
</source>
 +
*Fichero activity_main

Revisión de 22:16 20 nov 2012



Concepto

  • Tradicionalmente una pantalla de una aplicación se asocia con una clase Activity específica
  • El concepto de fragments se introducen en la version de Android 3(Honeycomb)
  • las librerías de soporte de android permiten usar fragments desde la version Android 1.6
  • La idea es escribir aplicaciones que se puedan adaptar a diferentes opciones y orientaciones de pantalla
  • De esta forma no tenemos que tener una aplicación para cada tipo de dispositivo.

Idea de fragment

Los componentes Fragment controlan su porpio estado empleado su ciclo de vida. Se pueden mezclar Fragment con controles View en una clase Activity La clase Activity es la responsable de gestionar los controles View.

Definir Fragments

A continuación realizaremos un ejemplo

  • Creamos un proyecto llamado fragmentos
  • Usamos un mínimo de versión 3.0
  • Cremos u nuevo xml de layout llamado detalle
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
 
<TextView
android:id="@+id/textoDetalle"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal|center_vertical"
android:layout_marginTop="20dip"
android:text="Texto para el detalle"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textSize="30dip" />
 
</LinearLayout>
  • Ahora modificamos el fichero main.xml para que muestre la aplicación en modo tablet
  • Debemos poner la orientación horizontal
  • Cada fragment tendrá asociada su propia clase
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
 
 <fragment
   android:id="@+id/listaFragment"
   android:layout_width="150dip"
   android:layout_height="match_parent"
   android:layout_marginTop="?android:attr/actionBarSize"
   class="co.droidforum.android.fragments.ListaFragmento" >
 </fragment>
 
 <fragment
   android:id="@+id/detalleFragment"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   class="co.droidforum.android.fragments.DetalleFragmento" >
 </fragment>
 
</LinearLayout>
  • Ahora creamos las clases ListaFragmento y DetalleFramento
  • La clase ListaFragmento
package com.example.usofragment;
 
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.ArrayAdapter;
import android.widget.ListView;
 
public class ListaFragmento extends android.app.ListFragment {
 
	/**
	*
	* Fragment que se carga inicialmente con la vista principal, es decir, con el listado inicial
	*
	* @author carlos.munoz
	*
	*/
	public class ListFragment extends android.app.ListFragment {
	@Override
	public void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
 
	}
 
	@Override
	//se sobreescribe este método como el que siempre "carga" la información a mostrar en el fragment
	public void onActivityCreated(Bundle savedInstanceState) {
	super.onActivityCreated(savedInstanceState);
	String[] values = new String[] { "Android", "iPhone", "WindowsMobile",
	"Blackberry", "WebOS", "Ubuntu", "Windows7", "Max OS X",
	"Linux", "OS/2" };
	ArrayAdapter<String> adapter =
	new ArrayAdapter<String>(getActivity(), android.R.layout.simple_list_item_1, values);
 
	setListAdapter(adapter);
	}
 
	@Override
	//al hacer tap en algun elemento de la vista, setea el texto del elemento en el nuevo fragment
	public void onListItemClick(ListView l, View v, int position, long id) {
	String item = (String) getListAdapter().getItem(position);
	DetalleFragmento fragment = (DetalleFragmento) getFragmentManager().findFragmentById(R.id.detalleFragment);
	if (fragment != null && fragment.isInLayout()) {
	fragment.setText(item);
	} else {
	Intent intent = new Intent(getActivity().getApplicationContext(), MainActivity.class);
	intent.putExtra("value", item);
	startActivity(intent);
	}
	}
	}
}


  • La clase DetalleFragmento
package com.example.usofragment;
 
import android.app.Fragment;
import android.os.Bundle;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
 
public class DetalleFragmento extends Fragment  {
	@Override
	public void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	Log.e("Test", "hello");
	}
 
	@Override
	public void onActivityCreated(Bundle savedInstanceState) {
	super.onActivityCreated(savedInstanceState);
 
	}
 
	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
	Bundle savedInstanceState) {
	View view = inflater.inflate(R.layout.detalle, container, false);
	return view;
	}
 
	public void setText(String item) {
	TextView view = (TextView) getView().findViewById(R.id.textoDetalle);
	view.setText(item);
	}
}

Crear los layout para modo móvil

  • Ahora para garantizar que funcione en modo móvil, hay que crear layouts de este modo
  • Para ello creamos dentro del folder /res el folder layout-port.
  • Allí ubicaremos un nuevo main.xml que creamos para que sea el que se lea cuando el dispositivo esté en modo portrait.
  • Android, inicialmente busca una carpeta llamada layout-port, si no lo encuentra, busca en el folder layout.
  • Creamos la carpeta layout-port
  • Creamos el fichero activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="horizontal" >
 
 <fragment
  android:id="@+id/listaFragment"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:layout_marginTop="?android:attr/actionBarSize"
  class="co.droidforum.android.fragments.ListaFragmento" />
</LinearLayout>
  • Fichero activity_main