Está en la página 1de 7

ImagenButton e ImagenView

El manejo del contexto (this) dentro del OnClickListener => MainActivity.this.

Son análogas a TextView pero con imágenes. En lugar de mostar texto muestran imágenes.

1.- Vamos a hacer la siguiente vista.

Usa en XML para ajustar la imagen


android:scaleType="fitCenter"

center: La imagen se coloca en el centro de la vista sin escalar.


centerCrop: La imagen se escala para llenar la vista manteniendo la relación de aspecto, pero puede que se recorte
en los bordes.

centerInside: La imagen se escala para que toda la imagen entre dentro de la vista, manteniendo la relación de as-
pecto. Puede haber espacios en blanco alrededor de la imagen si la vista es más grande que la imagen.

fitCenter: La imagen se escala para que quepa completamente dentro de la vista, manteniendo la relación de aspec-
to, y centrando la imagen.

fitStart, fitEnd: Similar a fitCenter, pero la imagen se alinea en la parte superior izquierda o derecha respectiva-
mente.

Los Diálogos y los fragmentos


Son diálogos que aparecen en la pantalla de tu dispositivo móvil de manera exponténea para hacer
al usuario alguna pregunta sobre alguna decisión a tomar.
Puedes verlos con todo tipo de botones e incluso puedes definir un layout para crear tu propio diá-
logo personalizado.

Un fragmento de una actividad es una parte de la APP que controla una parte de la interfaz de
usuario de la Activity.
Los fragmentos tienen su propio ciclo de vida, reciben sus propios eventos y se pueden añadir y eli-
minar de la activity mientras se ejecuta.

Diálogos:
AlertDialog: muestra un cuadro de diálogo que puede contener mensajes, botones y/o una lista
de elementos.
ProgressDialog: muestra un cuadro de diálogo con un indicador de progreso, útil para mostrar
que está sucediendo algo en segundo plano.
DatePickerDialog y TimePickerDialog: permite al usuario seleccionar una fecha o tiempo
Custom Dialog: puedes crear diálogos personalizados utilizando Dialog y proporcionando tu
propio diseño

Fragmentos:
DialogFragment: un fragmento especializado para mostrar un diálogo.
Fragment: puedes crearte fragmentos personalizados.

2.- Vamos a cambiar el mensaje «Toast» por un AlertDialog.


Que me indique si quiero llamar.
Si => me cambia la foto y saca mensaje de llamando por pantalla.
Cuando se pulse otra vez el botón y se vuelva a la fase inicial.
No => saca mensaje de operación cancelada.
Aquí te dejo el código.

(Uso un boolean para saber en que estado está mi imagen)

public class MainActivity extends AppCompatActivity {


ImageButton miBoton;
boolean estoyLlamando = false;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
miBoton = (ImageButton) findViewById(R.id.idBoton);

miBoton.setOnClickListener(new ImageButton.OnClickListener() {
@Override
public void onClick(View v) {
if (!estoyLlamando){
AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);
builder.setTitle("Me has pulsado")
.setMessage("Quieres llamar")
.setPositiveButton("Si", new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int id) {
miBoton.setImageResource(R.drawable.telefono_2);
estoyLlamando = true;
Toast.makeText(MainActivity.this, "Estoy llamando. Pulsa el botón para colgar",
Toast.LENGTH_SHORT).show();
}
})
.setNegativeButton("No", new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int id) {
Toast.makeText(MainActivity.this, "Ok Operación cancelada",
Toast.LENGTH_SHORT).show();
}
});
AlertDialog dialog = builder.create();
dialog.show();
}
else{
miBoton.setImageResource(R.drawable.telefono_1);
estoyLlamando = false;
}
}});
}

3.- Puedes probar cualquier otro diálogo.

4.- Vamos a usar DialogFragment

4.1.- Para utilizar DialogFragment, es necesario crear un diseño que defina el formato del Dialog-
Fragment

mi_fragmento.XML
<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="200dp"
android:layout_height="100dp">
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" Estas llamando pulsa el boton cuando quieras terminar "
android:layout_margin="20dp"
android:textStyle="bold"
android:gravity="start"/>

</GridLayout>

Explora las diferentes opciones para colocar el texto. (Gravity: start, centrer, left)

4.2.- Procedemos a inflar esta vista utilizando una clase. Vamos a utilizar un escuchador para que,
al seleccionar el botón 'terminar', cambie el ícono al estado inicial. Con este propósito, creamos
una interfaz llamada OnTerminarLlamadaListener y establecemos el escuchador en la actividad que
lanza el DialogFragment para manejar los eventos correspondientes.

MiFragmento.java
public class MiFragmento extends DialogFragment {

public MiFragmento() {
}

public interface OnTerminarLlamadaListener {


void onTerminarLlamada();
}

private OnTerminarLlamadaListener terminarLlamadaListener;

public void setOnTerminarLlamadaListener(OnTerminarLlamadaListener listener) {


this.terminarLlamadaListener = listener;
}

@Override
public Dialog onCreateDialog(Bundle savedInstanceState) {
AlertDialog.Builder builder = new AlertDialog.Builder(getActivity());
LayoutInflater inflater = requireActivity().getLayoutInflater();
View view = inflater.inflate(R.layout.mi_fragmento, null);

builder.setView(view)
.setTitle("Llamada en curso")
.setPositiveButton("TERMINAR", (dialog, which) -> {
// Acciones a realizar al hacer clic en "TERMINAR"
terminarLlamadaListener.onTerminarLlamada();
});

return builder.create();
}
}

Explora los diferentes botones que trae DialogFragment

Botones negativos y neutros:


builder.setNegativeButton("Cancelar", (dialog, which) -> {
// Acciones a realizar al hacer clic en "Cancelar"
});

builder.setNeutralButton("Otro", (dialog, which) -> {


// Acciones a realizar al hacer clic en "Otro"
});

Explora otras opciones:

Puedes establecer un icono

builder.setIcon(R.drawable.ic_dialog_icon);

Puedes establecer un mensaje debajo del título adicional

builder.setMessage("Este es un mensaje adicional.");

Comentamos la línea de código:


View view = inflater.inflate(R.layout.mi_fragmento, null);

La razón por la que se pasa null como segundo parámetro al método inflate en android es porque
este parámetro (View-Group root) se utiliza para especificar el ViewGroup al cuál se adjuntará la
vista inflada. Si se proporciona un valor diferente a null, la vista inflada se adjuntará a ese View-
Group.
null, significa que la vista no se adjuntará a ningún ViewGroup. Si se proporciona un valor diferente
a null la vista se adjuntará a ese ViewGroup.

Primer parámetro (R.layout.mi_fragmento): es la referencia al archivo XML que define la apariencia


del fragmento.
segundo parámetro: es el ViewGroup al que se va adjuntar la vista inflada. Si se establece null, no
seadjuntará a ningún ViewGroup.

Si tienes unViewGroup específico al cual deseas adjuntar la vista inflada, puedes pasarlo como se-
gundo parámetro. Aquí te dejo un ejemplo

ViewGroup container = findViewById(R.id.miContenedor); // Reemplaza con el ID de


tu contenedor
View view = inflater.inflate(R.layout.mi_fragmento, container, false);

En este caso, la vista se adjuntaría al ViewGroup miContenedor.

Cuando attachToRoot se establece en false, la vista inflada aún se crea, pero no se coloca automáti-
camente en el contenedor. Esto puede ser útil cuando necesitas realizar alguna lógica adicional an-
tes de agregar la vista al contenedor o si prefieres adjuntarla manualmente más tarde.
Main.java
public class MainActivity extends AppCompatActivity implements MiFragmento.OnTerminarLlamadaLis-
tener {
ImageButton miBoton;
boolean estoyLlamando = false;
DialogFragment miFragmento;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
miBoton = (ImageButton) findViewById(R.id.idBoton);

miBoton.setOnClickListener(new ImageButton.OnClickListener() {
@Override
public void onClick(View v) {
mostrarDialogo();
}});
}

private void mostrarDialogo() {


miBoton.setImageResource(R.drawable.telefono_2);
MiFragmento dialogFragment = new MiFragmento();
dialogFragment.setOnTerminarLlamadaListener(this);
dialogFragment.show(getSupportFragmentManager(), "MiDialogFragment");
}

public void onTerminarLlamada() {


// Acciones a realizar en la actividad principal al hacer clic en "TERMINAR"
// Por ejemplo, cambiar la imagen del botón
miBoton.setImageResource(R.drawable.telefono_1);
}

Comentamos la línea de código:


dialogFragment.show(getSupportFragmentManager(), "MiDialogFragment");

dialogFragment: Es una instancia de la clase DialogFragment que deseas mostrar.

show(): Este método es parte de la clase DialogFragment y se utiliza para mostrar el fragmento
de diálogo.

getSupportFragmentManager(): Este método obtiene el FragmentManager asociado a la activi-


dad actual. FragmentManager es responsable de gestionar los fragmentos en la actividad.

"MiDialogFragment": Es una etiqueta que se utiliza para identificar este fragmento en el Frag-
mentManager. Esta etiqueta es útil si necesitas interactuar con el fragmento más tarde, como al
quitarlo o encontrarlo.

También podría gustarte