Android Tutorial VII: Custom Alert Dialog

zeimusu-Warning-notification-300pxSiódmy wpis na blogu poprzednio utworzyliśmy dynamicznie prosty alert dialog, a dzisiaj zobaczymy jak możemy tworzyć bardziej skomplikowane okienka dialogowe.

Nasz Dialog będzie składał się z 4 kontrolek: CheckBox, TextView, Button i nowy dzisiaj SeekBar. Gdy kontrolka CheckBox nie będzie zaznaczona i naciśniemy na przycisk w naszym alercie, to TextView w naszej głównej aktywności ustawimy na dany komunikat, natomiast gdy CheckBox będzie zaznaczony to ustawimy TextView na wartość na jakiej będzie ustawiony SeekBar od 0 do 100.

Zaczynamy Custom Alert Dialog:

Layout głównej aktywności:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="info.easymenu.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:id="@+id/textView"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="start"
        android:id="@+id/button"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="57dp"
        android:onClick="onClick"/>

</RelativeLayout>

Layout okna dialogowego:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#ffffffff">


    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/text_dialog"
        android:layout_marginTop="20dp"
        android:layout_marginLeft="4dp"
        android:layout_marginRight="4dp"
        android:layout_marginBottom="20dp"
        android:textSize="18sp"
        android:textColor="#ff000000"
        android:layout_centerHorizontal="true"
        android:gravity="center_horizontal" />

    <Button
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Press"
        android:id="@+id/dialog_btn"
        android:layout_below="@+id/text_dialog"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="58dp" />

    <CheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/checkBox"
        android:layout_alignBottom="@+id/text_dialog"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:checked="false" />

    <SeekBar
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/seekBar"
        android:layout_centerVertical="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignRight="@+id/text_dialog"
        android:layout_alignEnd="@+id/text_dialog" />

</RelativeLayout>

Implementujemy:

  • Deklarujemy dwa pola prywatne TextView naszej głównej aktywności oraz licznik (counter) który będzie przetrzymywał nasza wartość z SeekBara,
  • metody initVariables() i onClick(View view) tak jak w poprzednim wpisie.
  • i najważniejsza metoda dzisiaj setUpCustomAlertDialog(), odpowiedzialna za utworzenie naszego okna. Wywołujemy ją w metodzie onClick(View view),
  • co się w niej dzieje tworzymy obiekt klasy Dialog, na obiekcie wywołujemy kolejno trzy metody: pierwsza odpowiedzialna jest za to, że nie mamy paska tytułu w naszym oknie, następna że nasze okno nie będzie znikać, jeżeli klikniemy na przycisk cofnij lub obok okna, i ostatnia ustawia nasz layout jako widok okna.
  • następnie deklarujemy nasz CheckBox jako final gdyż będziemy się do niego odwoływać w środku innej metody, zauważ, że metoda findViewById(), jest wywoływana na obiekcie dialog na którym ustawiony jest nasz layout.
  • deklarujemy TextView i ustawiamy tekst jako tytuł naszego okna.
  • deklarujemy Button w naszym alercie i wywołujemy metodę setOnClickListener(), tutaj sprawdzamy czy nasz CheckBox jest zaznaczony jeżeli tak to ustawiamy nasz TextView w głównej aktywność na wartość pobraną z SeekBara, czyli counter ubrany w metodę String.valueOf() która zwraca reprezentacje w stringach, inaczej ustawiamy komunikat i na koniec wyłączamy nasz alert.
  • deklarujemy nasz SeekBar, ustawiamy jego wartość maksymalną na 100, i wywołujemy metodę setOnSeekBarChangeListener(), utworzą nam się trzy metody do nadpisania, lecz nas interesuje tylko pierwsza onProgressChanged(), i ustawiamy nacz licznik (counter) na wartość zmiennej progress.
  • Na końcu metody wyświetlamy nasz alertDialog dialog.show();
package info.easymenu;

import android.app.Activity;
import android.app.Dialog;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.widget.Button;
import android.widget.CheckBox;
import android.widget.SeekBar;
import android.widget.TextView;

public class MainActivity extends Activity {

    private TextView textView;
    private int counter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initVariables();

    }

    private void initVariables() {

        textView = (TextView) findViewById(R.id.textView);

    }

    public void setUpCustomDialog(){

        final Dialog dialog = new Dialog(this);
        dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
        dialog.setCancelable(false);
        dialog.setContentView(R.layout.dialog_window);

        final CheckBox checkBox = (CheckBox) dialog.findViewById(R.id.checkBox);

        TextView text = (TextView) dialog.findViewById(R.id.text_dialog);
        text.setText(R.string.title);

        Button dialogButton = (Button) dialog.findViewById(R.id.dialog_btn);
        dialogButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                if(checkBox.isChecked()){

                    textView.setText(String.valueOf(counter));

                }else{

                    textView.setText(R.string.checkBoxIsNotChecked);
                }

                dialog.dismiss();

            }
        });

        SeekBar seekBar = (SeekBar) dialog.findViewById(R.id.seekBar);
        seekBar.setMax(100);
        seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged
            (SeekBar seekBar, int progress, boolean fromUser) {

                counter = progress;
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {

            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {

            }
        });


        dialog.show();

    }


    public void onClick(View view) {

        switch (view.getId()){

            case R.id.button:

                try {

                  setUpCustomDialog();

                }catch (Exception e){
                    e.printStackTrace();
                }
        }
    }
}

alert

Jak widzisz możemy tworzyć alerty jakie tylko chcemy, odsyłam również do dokumentacji warto poczytać jakie metody mają dane klasy my używamy tylko małej części ich potencjału:)

Cześć.

 

 

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *