Diferencia entre revisiones de «Usuario:ManuelRomero/Fragmentos»

De WikiEducator
Saltar a: navegación, buscar
(Idea de fragment)
Línea 1: Línea 1:
 +
{{TEP}}
 
{{:Usuario:ManuelRomero/Android/nav}}
 
{{:Usuario:ManuelRomero/Android/nav}}
 
<br>  
 
<br>  
Línea 12: Línea 13:
 
Insertar imagen como la del libro 2 página 283
 
Insertar imagen como la del libro 2 página 283
 
-->
 
-->
*Los componentes Fragment controlan su propio estado empleado su ciclo de vida.
+
{{Definicion|'''''Un fragment''''' es un componente independiente de android con las siguientes características:
*Se pueden mezclar Fragment con controles View en una clase Activity
+
#Suele tener una interfaz gráfica propia y funcionalidad, como si de un ''activity'' se tratara
 +
#Un componente ''Fragment'' siempre se ejecuta en el contexto de una actividad, en ella se pueden añadir o eliminar ''Fragment''
 +
##Tiene su propio ciclo de vida (ver imagen más abajo), pero se ve afectado por el ciclo de vida de la actividad a la que pertenece en ejecución
 +
#Se pueden cosiderar elementos modulares, los cuales se pueden usar en diferentes ''activitys''
 +
#El ''Fragment'' se puede añadir de forma estática o dinámica a la actividad
 +
}}
 +
 
 
*La clase Activity es la responsable de gestionar los controles View.
 
*La clase Activity es la responsable de gestionar los controles View.
 
*Para realizar una actualización o midificación de un ''Fragment'', se utiliza la clase '''''FragmentTransaction'''''
 
*Para realizar una actualización o midificación de un ''Fragment'', se utiliza la clase '''''FragmentTransaction'''''

Revisión de 07:26 7 feb 2013

Road Works.svg Trabajo en proceso, espera cambios frecuentes. Tu ayuda y retroalimentación son bienvenidos.
Ver página de charlas.
Road Works.svg




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

Icon define.gif

Definición

Un fragment es un componente independiente de android con las siguientes características:
  1. Suele tener una interfaz gráfica propia y funcionalidad, como si de un activity se tratara
  2. Un componente Fragment siempre se ejecuta en el contexto de una actividad, en ella se pueden añadir o eliminar Fragment
    1. Tiene su propio ciclo de vida (ver imagen más abajo), pero se ve afectado por el ciclo de vida de la actividad a la que pertenece en ejecución
  3. Se pueden cosiderar elementos modulares, los cuales se pueden usar en diferentes activitys
  4. El Fragment se puede añadir de forma estática o dinámica a la actividad



  • La clase Activity es la responsable de gestionar los controles View.
  • Para realizar una actualización o midificación de un Fragment, se utiliza la clase FragmentTransaction
  1. Sirve para agregar (de nuevo o volver a agregar) un Fragemnte a una clase Activity
  2. Ocultar o mostrar un Fragment en un View

Ciclo de vida del Fragemnt

onAttach
Un Fragement se adjunta por primera vez a una Activity
onCreate
Un Fragment se crea por primera vez
onCreateView
onActivityCreated
onStart
onResume
onPause
onStop
onDestroyView
onDestroy
onDetach

Fragment especializados

  1. ListFragment
  2. PreferenceFragement
  3. WebViewFragment
  4. DialogFragment

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