Opdracht

Bekijk onderstaand filmpje en probeer de app te maken. Kom je er niet (helemaal) uit, dan kun je de uitwerking bekijken

Gebruikte methodes/klassen

findViewById

Maak een button in het layout bestand en geef hem een id

<Button
     android:id="@+id/my_button"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="@string/my_button_text"/>
            

Initialiseer de button in de onCreate methode. De methode findViewById maakt een object van de view met de gemaakte id. Let op dat je de view moet typecasten naar het juiste type.

Button myButton = (Button) findViewById(R.id.my_button);
            

onClick

In je layout kun je aan een view een onClick methode toevoegen. Deze methode implementeer je vervolgens in je java klasse. De view parameter van de methode is de view waarop gebruiker heeft geklikt.

<ImageView
        android:id="@+id/bart"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_marginBottom="40dp"
        android:layout_marginTop="40dp"
        android:src="@drawable/bart"

        android:onClick="animate"  />

public void animate(View view) {

   //view waar gebruiker op heeft geklikt wordt meegegeven als argument
   ImageView imageView = (ImageView) view

   //TODO uitwerking methode
   //Tip: maak hulpmethodes voor de verschillende animaties
}
            

setVisibility

Met de methode setVisibility kun je een view zichtbaar/onzichtbaar maken. De methode accepteert een aantal constanten van de View klasse als argument.

//Maak bijvoorbeeld een object van een ImageView
ImageView img = (ImageView) findViewById(R.id.imageView);

//maak zichtbaar
img.setVisibility(View.VISIBLE);

//maak onzichtbaar
img.setVisibility(View.INVISIBLE);

//verwijder van scherm
img.setVisibility(View.GONE);
            

SeekBar

Met een Seekbar kun je een waarde instellen met een schuifbalk. Veelgebruikte methodes:

//duur van de animatie in ms
int animationTime = 2000;
SeekBar seekBar = (SeekBar) findViewById(R.id.seekBar);

// set maximale waarde, minimale waarde == 0
seekBar.setMax(5000);

// set positie van de schuif op de balk
seekBar.setProgress(animationTime);

//Koppel een listener
seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
    @Override
    public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
        animationTime = progress;
    }

    @Override
    public void onStartTrackingTouch(SeekBar seekBar) {
    }

    @Override
    public void onStopTrackingTouch(SeekBar seekBar) {
    }
});
            

RadioGroup & RadioButton

Met RadioButtons binnen een RadioGroup kunnen gebruikers één optie kiezen uit een aantal. Veelgebruikte methodes:

RadioButton fadeRadioButton = (RadioButton) findViewById(R.id.fadeRadioButton);
fadeRadioButton.setChecked(true);
boolean isChecked = fadeRadioButton.isChecked();
if (isChecked) {
    //doe iets
}            

Aan een RadioButton kun je een onClick methode toevoegen.

Animaties

Fade

Met de alpha waarde van een view kun je de transparantie bepalen met behulp van een float tussen 0 en 1, waarbij 0 geheel onzichtbaar is en 1 geheel zichtbaar. Met de methode animate kun je de overgang van de ene naar de andere waarde animeren. De methode setDuration bepaalt hoe lang de animatie duurt.

ImageView image = (ImageView) findViewById(R.id.myImg);

//maak image onzichtbaar
image.setAlpha(0f);

//fade in
image.animate()
        .alpha(1f)
        .setDuration(animationTime);
            

Translate

Met translationX en translationY kun je de x en y coördinaten van een view beïnvloeden.

// zet het plaatje links van het scherm (onzichtbaar)
image.setTranslationX(-2000f);

// laat plaatje het beeld inkomen
image.animate()
        .translationX(0f)
        .setDuration(animationTime);
            

Scale

Met de methodes scaleX en scaleY kun je de breedte en de hoogte van een view aanpassen.

// maak breedte en hoogte 0 (onzichtbaar)
image.setScaleX(0f);
image.setScaleY(0f);

//animeer naar oorspronkelijke grootte
image.animate()
    .scaleX(1f)
    .scaleY(1f)
    .setDuration(animationTime);

Rotate

Met rotate kun je een view een aantal graden draaien. Een hele draai is 360°.

//roteer 1 keer rechtsom
image.animate()
    .rotation(360)
    .setDuration(animationTime);

//roteer 2 keer linksom
image.animate()
    .rotation(-720)
    .setDuration(animationTime);