Floating Action Button в Android Studio — часть 1

Итак, в данном уроке я расскажу о том, как делать простейшую анимацию летающей кнопки Floating Action Button.

Первым делом создайте новое приложение в Android Studio с пустым активити (Empty Activity).

Для работы с Floating Action Button в Android Studio необходимо подключить библиотеку Design. Чтобы это сделать нужно перейти в Gradle Scripts -> build.gradle (Modul: app). В build.gradle (Modul: app) в раздел dependencies добавьте такую строчку:

compile ‘com.android.support:design:25.3.1’

После чего нужно синхронизировать проект, нажав на ссылку Sync Now в верхнем правом углу. Теперь можно приступать к созданию летающей кнопки. Первым делом, перейдите к представлению MainActivity, т.е. к файлу activity_main.xml, который расположен в app -> res -> layuot, и отредактируйте его содержимое следующим образом:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    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="match_parent"
    android:layout_height="match_parent"
    tools:context="ru.lessons.fabanimation.MainActivity">

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fabHideFab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|right"
        android:layout_margin="20dp"
        app:backgroundTint="#9ACD32"
        app:borderWidth="5dp"
        app:elevation="10dp"
        app:fabSize="normal"
        app:srcCompat="@android:drawable/ic_menu_camera"/>

    <Button
        android:id="@+id/btnShowFab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|left"
        android:layout_margin="20dp"
        android:text="SHOW FAB"/>

</android.support.design.widget.CoordinatorLayout>

В примере мы будем использовать две кнопки. Первая кнопка — Floating Action Button, при нажатии на которую она будет плавно уменьшаться до тех пор, пока не исчезнет совсем. Вторая кнопка — Button, при нажатии на которую будет восстанавливаться видимость Floating Action Button. Чтобы кнопки заняли свои позиции внутри контейнера в соответствии со своими настройками, в качестве контейнера в activity_main.xml необходимо использовать CoordinatorLayout.

Далее нам нужно будет создать каталог для хранения файлов с настройками анимации. Для этого перейдём к каталогу ресурсов проекта app -> res и, нажав на нём правой кнопкой мыши, в появившемся меню выберем New -> Android resource directory. В открывшемся окне зададим наименование нового каталога. Назовём его anim. После создания каталога anim создадим в нём файл, отвечающий за скрытие кнопки Floating Action Button. Для этого нажмите правой кнопкой мыши на каталоге anim и в появившемся меню выберите New -> Animation resource file. Назовите его fab_hide.

Отредактируйте его содержимое следующим образом:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:fillAfter="true"
     android:duration="1000"
     android:shareInterpolator="true">

    <scale
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:toXScale="0.0"
        android:toYScale="0.0"
        android:pivotX="50%"
        android:pivotY="50%" />

    <alpha
        android:fromAlpha="1.0"
        android:toAlpha="0.0" />
</set>

Теперь аналогичным образом нужно создать ещё один файл, который будет отвечать за появление кнопки Floating Action Button. Назовите этот файл fab_show и отредактируйте его содержимое так:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:fillAfter="true"
     android:duration="1000"
     android:shareInterpolator="true">

    <scale
        android:fromXScale="0.0"
        android:fromYScale="0.0"
        android:toXScale="1.0"
        android:toYScale="1.0"
        android:pivotX="50%"
        android:pivotY="50%" />

    <alpha
        android:fromAlpha="0.0"
        android:toAlpha="1.0" />

</set>

fillAfter=»true» означает, что преобразование будет выполнятся после завершения анимации. duration=»1000″ устанавливает время выполнения анимации в миллисекундах. В данной ситуации установлено 1000 миллисекунд, или 1 секунда. shareInterpolator=»true» устанавливает возможность использования интерполятора всеми дочерними элементами. Элемент scale отвечает за изменение размера кнопки при анимации, где параметры fromXScale и fromYScale — это начальные значения масштабов кнопки по осям X и Y на момент начала анимации, а параметры toXScale и toYScale — это конечные значения масштабов на момент завершения анимации. Значения этих параметров имеют тип float и варьируются от 0 до 1. Значение 1.0 соответствует натуральному масштабу. Параметры pivotX и pivotY указывают на координату внутри кнопки, относительно которой происходит изменение размера кнопки. Т.е. эта координата становиться центром, относительно которого кнопка уменьшается при её скрытии, или увеличивается при её появлении. Элемент alpha отвечает за прозрачность кнопки, где значение 1.0 соответствует абсолютной непрозрачности, а 0.0 — абсолютной прозрачности. Параметр fromAlpha — это начальное значение прозрачности, а toAlpha — конечное значение прозрачности.

Теперь перейдите к MainActivity и отредактируйте его код следующим образом:

package ru.lessons.fabanimation;

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

public class MainActivity extends AppCompatActivity {
 private FloatingActionButton fabHideFab;
 private Button btnShowFab;
 private Animation animShowFab, animHideFab;

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

  //анимация
  animShowFab = AnimationUtils.loadAnimation(this, R.anim.fab_show);
  animHideFab = AnimationUtils.loadAnimation(this, R.anim.fab_hide);

  //летающая кнопка Floating Action Button
  fabHideFab = (FloatingActionButton) findViewById(R.id.fabHideFab);
  //вспомогательная кнопка
  btnShowFab = (Button) findViewById(R.id.btnShowFab);

  fabHideFab.setOnClickListener(new View.OnClickListener() {
   @Override
   public void onClick(View v) {
    //анимация скрытия Floating Action Button
    fabHideFab.startAnimation(animHideFab);
   }
  });

  btnShowFab.setOnClickListener(new View.OnClickListener() {
   @Override
   public void onClick(View v) {
    //анимация появления Floating Action Button
    fabHideFab.startAnimation(animShowFab);
   }
  });
 }
}

Подробнее смотрите в видеоролике.