Освой Android играючи

Сайт Александра Климова

Шкодим

/* Моя кошка замечательно разбирается в программировании. Стоит мне объяснить проблему ей - и все становится ясно. */
John Robbins, Debugging Applications, Microsoft Press, 2000

ViewAnimator

Компонент ViewAnimator находился в разделе Transitions в старых версиях студии, сейчас он не представлен.

Создадим разметку:


<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" >

    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="75dp" >

        <ViewAnimator
            android:id="@+id/viewAnimator1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >

            <ImageView
                android:id="@+id/image1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/cat" >
            </ImageView>

            <Button
                android:id="@+id/button"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="My Button My Button" >
            </Button>

            <ImageView
                android:id="@+id/imageb"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_launcher" >
            </ImageView>

            <TextView
                android:id="@+id/text1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="My Text My Text " >
            </TextView>
        </ViewAnimator>
    </LinearLayout>

    <LinearLayout
        android:id="@+id/linearLayout2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="300dp" >

        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="&lt;&lt;" />

        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text=">>" />
    </LinearLayout>

</RelativeLayout>

Внутри контейнера ViewAnimator чередуются компоненты ImageView, Button, ImageView и TextView. Запомните их порядок.

Перейдём к коду:


package ru.alexanderklimov.animator;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.ViewAnimator;

public class MainActivity extends AppCompatActivity {

    private ViewAnimator viewAnimator;

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

        viewAnimator = findViewById(R.id.viewAnimator);

        final Animation inAnimation = AnimationUtils.loadAnimation(this,
                android.R.anim.slide_in_left);
        final Animation outAnimation = AnimationUtils.loadAnimation(this,
                android.R.anim.slide_out_right);

        viewAnimator.setInAnimation(inAnimation);
        viewAnimator.setOutAnimation(outAnimation);

        viewAnimator.setOnClickListener(new View.OnClickListener() {
            public void onClick(View view) {
                viewAnimator.showNext();
            }
        });

        Button forwardButton = findViewById(R.id.button_next);
        forwardButton.setOnClickListener(new View.OnClickListener() {
            public void onClick(View view) {
                viewAnimator.showNext();
            }
        });

        Button backButton = findViewById(R.id.button_prev);
        backButton.setOnClickListener(new View.OnClickListener() {
            public void onClick(View view) {
                viewAnimator.showPrevious();
            }
        });
    }
}

Запустив проект, вы можете циклически прокручивать компоненты, которые разместили в ViewAnimator вперёд или назад. Прокрутка осуществляется как при касании на самих компонентах, так и с помощью дублирующих кнопок внизу экрана.

ViewAnimator

Модифицируем пример, чтобы прокрутка осуществлялась жестами. Анимацию заменим на AlphaAnimation (прозрачность). Компоненты будем создавать программно, поэтому разметка нам не понадобится.


package ru.alexanderklimov.animator;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.GestureDetector;
import android.view.MotionEvent;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.widget.TextView;
import android.widget.ViewAnimator;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity implements GestureDetector.OnGestureListener {

    private ViewAnimator viewAnimator;
    GestureDetector gestureDetector;
    TextView textView;

    ArrayList<String> list = new ArrayList<>();

    private static final int SWIPE_MIN_DISTANCE = 120;
    private static final int SWIPE_MAX_OFF_PATH = 250;
    private static final int SWIPE_THRESHOLD_VELOCITY = 100;
    int position = 0;
    int i = 0;

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

        viewAnimator = findViewById(R.id.viewAnimator);

        list.add("Мурзик Мурзик Мурзик Мурзик");
        list.add("Барсик Барсик Барсик Барсик");
        list.add("Рыжик Рыжик Рыжик Рыжик");
        list.add("Васька Васька Васька Васька");

        viewAnimator = new ViewAnimator(this);

        Animation inAnimation = new AlphaAnimation(0, 1);
        inAnimation.setDuration(1000);
        Animation outAnimation = new AlphaAnimation(1, 0);
        outAnimation.setDuration(1000);
        viewAnimator.setInAnimation(inAnimation);
        viewAnimator.setOutAnimation(outAnimation);

        for (i = 0; i < list.size(); i++) {
            textView = new TextView(this);
            textView.setText(String.valueOf(list.get(i)));
            viewAnimator.addView(textView, 0);
        }

        gestureDetector = new GestureDetector(this, this);
        setContentView(viewAnimator);

        viewAnimator.setDisplayedChild(list.size() - 1);
        position = list.size() - 1;
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        return gestureDetector.onTouchEvent(event);
    }

    @Override
    public boolean onDown(MotionEvent e) {
        return false;
    }

    @Override
    public void onShowPress(MotionEvent e) {

    }

    @Override
    public boolean onSingleTapUp(MotionEvent e) {
        return false;
    }

    @Override
    public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
        return false;
    }

    @Override
    public void onLongPress(MotionEvent e) {

    }

    @Override
    public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
        try {
            if (Math.abs(e1.getY() - e2.getY()) > SWIPE_MAX_OFF_PATH)
                return false;
            // right to left swipe
            if (e1.getX() - e2.getX() > SWIPE_MIN_DISTANCE
                    && Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) {
                position--;
                if (position < 0) {
                    position = list.size() - 1;
                }
                viewAnimator.setDisplayedChild(position);

            } else if (e2.getX() - e1.getX() > SWIPE_MIN_DISTANCE
                    && Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) {
                // left to right flip
                position++;
                if (position > list.size() - 1) {
                    position = 0;
                }
                viewAnimator.setDisplayedChild(position);

            }
        } catch (Exception e) {
            // nothing
            return true;
        }

        return true;
    }
}

Запустите проект и проведите по экрану слева направо или в обратном порядке. Текст на экране будет растворяться, уступая место другому тексту. Так как на картинке этого не увидеть, скриншот не стал прикладывать. Проверьте самостоятельно.

Дополнительное чтение

CannyViewAnimator: переключаем состояния красиво

Реклама