https://manuais.iessanclemente.net/index.php?title=Vent%C3%A1s_de_Di%C3%A1logos_2&feed=atom&action=historyVentás de Diálogos 2 - Historial de revisiones2024-03-29T15:06:09ZHistorial de revisiones de esta página en el wikiMediaWiki 1.36.2https://manuais.iessanclemente.net/index.php?title=Vent%C3%A1s_de_Di%C3%A1logos_2&diff=50783&oldid=prevAngelfg: /* DialogFragment */2014-11-11T17:22:43Z<p><span dir="auto"><span class="autocomment">DialogFragment</span></span></p>
<p><b>Página nueva</b></p><div>==DialogFragment==<br />
<br />
Estes apuntes están postos como resposta a unha pregunta do foro.<br/><br />
'''A tarefa de PLATEGA non ten que facerse utilizando este tipo de diálogo.'''<br />
<br />
===Introdución===<br />
<br />
A partires da API 13 (Android 3.2) a forma de 'construír' os diálogos modificouse.<br />
<br />
Se usades a forma anteriormente explicada funcionará pero vos marcará en Eclipse a liña como '''deprecated'''.<br />
<br />
[[Imagen:Android_2014_U3_15_Dialogos_1.JPG|300px|center]]<br />
<br />
Imos ver neste punto como poderíamos facer para construír os diálogos doutra forma.<br />
<br />
Para explicalo teremos que falar antes dos DialogFragment e por extensión dos Fragment.<br />
<br />
Información adicional: <br />
* [http://developer.android.com/reference/android/app/DialogFragment.html#BasicDialog DialogFragment]<br />
* [http://developer.android.com/guide/components/fragments.html Fragment]<br />
<br />
Un fragment representa un 'trozo' da interface dun usuario. <br />
A idea dos fragment xurdiu polas dificultades que tiñan as aplicacións a adaptarse a tamaños grandes de pantalla (como as tablet´s).<br />
<br />
[[Imagen:Android_2014_U3_15_Dialogos_2.JPG|500px|center]]<br />
<center>Imaxe obtida de [http://developer.android.com/guide/components/fragments.html]</center><br />
<br />
Imaxinade que tedes unha aplicación que amosa unha lista de usuarios e que ó premer sobre un deles apareceran os seus datos completos.<br />
<br />
Isto feito non móbil cunha pantalla de 4 polgadas levaría consigo a creación de dúas activities, xa que na mesma non cabe toda a información (necesitaríamos usar scroll, bastante incómodo).<br />
<br />
Esta mesma aplicación levada a unha tablet de 10 polgadas non tería problema en visualizar todo na mesma pantalla.<br />
<br />
Os fraqment vannos permitir dividir os elementos gráficos en 'anacos' que imos poder usar de forma independente nas activities. Así, no caso anterior podemos crear dous fragment, un coa lista e outro có detalle de cada usuario. <br />
<br />
Agora dependendo do tamaño da pantalla podo facer que na pantalla pequena se amose un só fragment (a lista) é que o premer sobre un elemento da mesma apareza o outro fragment (o detalle).<br/><br />
Se o tamaño é grande (tablet) podo facer que aparezan os dous frament na mesma acitivity.<br />
<br />
O código que xestiona a pulsación dun elemento da lista e amosar os datos estará definido no só sitio, o que modificamos é o sitio onde se visualiza o fragment en función do tamaño da pantalla.<br />
<br />
Tendo claro o concepto de Fragment isto nos leva ó seguinte concepto: '''DialogFragment'''.<br />
<br />
===DialogFragment===<br />
<br />
* Un DialogFragment é un Fragment que amosa unha ventá de diálogo e situase por enriba da nosa Activity.<br />
<br />
[[Imagen:Android_2014_U3_15_Dialogos_4.JPG | 400px | center]]<br />
<br />
<br />
Os DialogFragment poden ser utilizados en versións anteriores á API 13, pero nese caso teremos que utilizar unha [http://developer.android.com/tools/support-library/index.html biblioteca de compatibilidade] que nos proporciona Eclipse:<br />
<br />
[[Imagen:Android_2014_U3_15_Dialogos_3.JPG|300px|center]]<br />
<br />
Polo tanto se temos un Min SDK no android manifiesto menor á API 13 teremos que importar a clase DialogFragment de dita librería:<br />
<br />
<syntaxhighlight lang="java" line enclose="div" highlight="" ><br />
import android.support.v4.app.DialogFragment;<br />
</syntaxhighlight> <br />
<br />
Un DialogFragment vai ter un layout asociado que vai compoñer o seu contido.<br />
<br />
Definimos polo tanto o contido do noso diálogo:<br />
<br />
'''Código da clase fragment_u3_15_layout_dialogo'''<br/><br />
<syntaxhighlight lang="java" line enclose="div" highlight="" ><br />
<?xml version="1.0" encoding="utf-8"?><br />
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"<br />
xmlns:tools="http://schemas.android.com/tools"<br />
android:layout_width="match_parent"<br />
android:layout_height="match_parent" ><br />
<br />
<EditText<br />
android:id="@+id/editTexto"<br />
android:layout_height="wrap_content"<br />
android:layout_width="match_parent"<br />
android:inputType="text"<br />
android:gravity="fill_horizontal"<br />
/><br />
<Button<br />
android:id="@+id/buttonPecharDialogo"<br />
android:layout_width="wrap_content"<br />
android:layout_height="wrap_content"<br />
android:layout_below="@+id/editTexto"<br />
android:layout_centerInParent="true"<br />
android:text="Pechar" /><br />
<br />
</RelativeLayout><br />
</syntaxhighlight> <br />
<br />
Agora deberemos crear unha clase que vai representar o DialogFragment e que vai cagar o layout anterior.<br />
Esta clase será a que instanciemos dende a nosa Activity.<br />
<br />
'''Código da clase UD3_15_DialogoFragmento'''<br/><br />
'''Obxectivo:''' Clase que representa ó DialogFragment<br />
<syntaxhighlight lang="java" line enclose="div" highlight="2,10,15,21,24-30" ><br />
import android.os.Bundle;<br />
import android.support.v4.app.DialogFragment;<br />
import android.view.LayoutInflater;<br />
import android.view.View;<br />
import android.view.View.OnClickListener;<br />
import android.view.ViewGroup;<br />
import android.widget.Button;<br />
import android.widget.EditText;<br />
<br />
public class UD3_15_DialogoFragmento extends DialogFragment{<br />
<br />
public String valorTexto;<br />
<br />
@Override<br />
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {<br />
<br />
final View rootView = inflater.inflate(R.layout.fragment_u3_15_layout_dialogo, container, false);<br />
getDialog().setTitle(getTag()); // O Tag se envía dende a activiy có método show.<br />
<br />
Button btn = (Button) rootView.findViewById(R.id.buttonPecharDialogo);<br />
btn.setOnClickListener(new OnClickListener() {<br />
<br />
@Override<br />
public void onClick(View v) {<br />
// TODO Auto-generated method stub<br />
EditText edit = (EditText)rootView.findViewById(R.id.editTexto);<br />
valorTexto = edit.getText().toString();<br />
((U3_15_Dialogos)UD3_15_DialogoFragmento.this.getActivity()).pecharDialogo();<br />
dismiss();<br />
}<br />
});<br />
<br />
// Do something else<br />
return rootView;<br />
}<br />
}<br />
<br />
</syntaxhighlight> <br />
<br />
Analicemos o código.<br />
<br />
* Liña 2: Estamos a utilizar a librería de compatibilidade con versións anteriores de Android.<br />
* Liña 10: A nosa clase deriva de DialogFragment.<br />
* Liña 15: Ó derivar de DialogFragment sobreescribimos o método onCreateView que ten que devolver o View que conforma o diálogo.<br />
: No noso caso deberemos 'inflar' o layout deseñado anteriormente. <br />
: O obxecto da clase LayoutInflater permite pasar dun deseño gráfico (o layout) e un obxecto manexable por programación. Isto o fai chamando ó método inflate e o garda no obxecto rootView.<br />
* Liña 21: Có paso anterior, podemos acceder ós compoñentes gráficos que se atopan no layout por programación. No noso caso accedemos ó botón pechar e xestionamos o evento de click.<br />
* Liñas 25-31: O que facemos nestas liñas é acceder ó contido da caixa de texto do diálogo, o gardamos nunha propiedade da clase.<br />
:* Liña 28: Esta liña vos dará un erro ata que usedes o código que ven a continuación. Esta liña chama a un método definido na activity que lanzou o DialogFragment.<br />
:* Liña 29: Pechamos o diálogo.<br />
<br />
<br />
Agora implantaremos a activity que vai facer uso do DialogFragment.<br />
<br />
Aquí teremos dúas opcións:<br />
<br />
* Derivar a clase de Activity. Deberemos facer uso do método [http://developer.android.com/reference/android/app/Fragment.html#getFragmentManager%28%29 getFragmentManager()].<br />
* Derivar a clase de FragmentActivity. Esta clase é unha subclase de Activity e está posta por compatibilidade coas [http://developer.android.com/tools/support-library/index.html versións anteriores].<br />
: No caso de utilizar esta clase deberemos facer uso do método [http://developer.android.com/reference/android/support/v4/app/FragmentActivity.html#getSupportFragmentManager%28%29 getSupportFragmentManager]. '''No noso exemplo imos facer uso deste método.'''<br />
<br />
Definimos o layout da nosa activity:<br />
<br />
'''Código da clase activity_u3_15__dialogos.xml'''<br/><br />
'''Obxectivo:''' Layout da nosa activity.<br />
<syntaxhighlight lang="java" line enclose="div" highlight="" ><br />
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"<br />
android:layout_width="fill_parent"<br />
android:layout_height="fill_parent"<br />
android:orientation="vertical" ><br />
<br />
<TextView<br />
android:layout_width="match_parent"<br />
android:layout_height="wrap_content"<br />
android:text="Ventás de diálogo" /><br />
<br />
<br />
<Button<br />
android:id="@+id/btn_dialogo"<br />
android:layout_width="match_parent"<br />
android:layout_height="wrap_content"<br />
android:onClick="onBotonClick"<br />
android:text="Ventá de diálogo con fragment" ><br />
</Button><br />
<br />
</LinearLayout><br />
</syntaxhighlight> <br />
<br />
<br/><br />
E agora o código da Activity:<br />
<br />
'''Código da clase U3_15_Dialogos'''<br/><br />
'''Obxectivo:''' Amosar un diálogo baseado en Fragment.<br />
<syntaxhighlight lang="java" line enclose="div" highlight="2,3,7,9,15,18-20,23,27" ><br />
import android.os.Bundle;<br />
import android.support.v4.app.FragmentActivity;<br />
import android.support.v4.app.FragmentManager;<br />
import android.view.View;<br />
import android.widget.Toast;<br />
<br />
public class U3_15_Dialogos extends FragmentActivity {<br />
<br />
private UD3_15_DialogoFragmento dialogoFragmento;<br />
<br />
@Override<br />
protected void onCreate(Bundle savedInstanceState) {<br />
super.onCreate(savedInstanceState);<br />
setContentView(R.layout.activity_u3_15__dialogos);<br />
dialogoFragmento = new UD3_15_DialogoFragmento();<br />
}<br />
<br />
public void pecharDialogo(){<br />
Toast.makeText(this, dialogoFragmento.valorTexto, Toast.LENGTH_LONG).show();<br />
}<br />
<br />
public void onBotonClick(View view) {<br />
FragmentManager fm = getSupportFragmentManager();<br />
<br />
switch (view.getId()) {<br />
case R.id.btn_dialogo:<br />
dialogoFragmento.show(fm, "EXEMPLO DE DIALOGO!!!!");<br />
break;<br />
<br />
}<br />
}<br />
}<br />
<br />
</syntaxhighlight> <br />
<br />
Analicemos o código.<br />
<br />
* Liñas 2,3,7: Por compatibilidade con versións anteriores de Android escollemos a opción de utilizar un FragmentActivity.<br />
* Liña 9,15: Definimos e instaciamos o diálogo.<br />
* Liñas 18-20: Este é o método que chama a clase do Diálogo cando prememos o botón pechar.<br />
* Liña 23: Necesitamos un FragmentManager para amosar o diálogo.<br />
* Liña 27: Amosamos o diálogo.<br />
<br />
<br />
<br />
<br />
<br />
Esta é unha primeira aproximación os DialogFragment.<br />
Comentar que en vez de sobreescribir o método onCreateView do DialogFragment podemos sobreescribir o método onCreateDialog e devolver un diálogo construído por nos (coma un DatePickerDialog, AlertDialog.builder,....)<br />
Por exemplo:<br />
<br />
'''Código da clase UD3_15_DialogoFragmento'''<br/><br />
'''Obxectivo:''' Modificamos o código para amosar outra forma de crear un diálogo. '''Debemos comentar o código do método onCreateView.'''<br />
<syntaxhighlight lang="java" line enclose="div" highlight="" ><br />
import android.app.AlertDialog;<br />
import android.app.Dialog;<br />
import android.content.DialogInterface;<br />
import android.content.DialogInterface.OnClickListener;<br />
import android.os.Bundle;<br />
import android.support.v4.app.DialogFragment;<br />
import android.widget.Toast;<br />
<br />
public class UD3_15_DialogoFragmento extends DialogFragment{<br />
<br />
<br />
@Override<br />
public Dialog onCreateDialog(Bundle savedInstanceState) {<br />
AlertDialog.Builder builder = new AlertDialog.Builder(getActivity())<br />
.setTitle("Caixa de diálogo").setIcon(R.drawable.ic_launcher)<br />
.setMessage("QUE TE PARACE ESTE DIALOGO ?")<br />
.setPositiveButton("Ben", new OnClickListener() {<br />
@Override<br />
public void onClick(DialogInterface dialog, int which) {<br />
Toast.makeText(getActivity(), "PULSADA OPCION BOA",Toast.LENGTH_LONG).show();<br />
}<br />
}).setNegativeButton("MAL", new OnClickListener() {<br />
@Override<br />
public void onClick(DialogInterface dialog, int which) {<br />
//<br />
<br />
Toast.makeText(getActivity(),"PULSADA OPCION MALA", Toast.LENGTH_LONG).show();<br />
}<br />
});<br />
return builder.create();<br />
<br />
<br />
}<br />
<br />
}<br />
<br />
</syntaxhighlight> <br />
<br />
<u>Nota:</u> Fixarse que estamos a importar a interface onClickListener do DialogInterface (liña 4).<br />
<br />
<br />
[[Imagen:Android_2014_U3_15_Dialogos_5.JPG | 400px | center]]<br />
<br />
<br />
<br />
<br />
<br />
<br> -- [[Usuario:angelfg|Ángel D. Fernández González]] e [[Usuario:Carrion|Carlos Carrión Álvarez]] -- (2014).</div>Angelfg