ПРОГРАММИРОВАНИЕ НА ANDROID STUDIO — FLOATING ACTION BUTTON (АНИМАЦИЯ ЛЕТАЮЩЕЙ КНОПКИ) Ч. 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 добавьте такую строчку:

Должно всё выглядеть примерно так:

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

Далее нам нужно будет создать каталог для хранения файлов с настройками анимации. Для этого перейдём к каталогу ресурсов проекта 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 и отредактируйте его содержимое так:

Теперь перейдите к 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);
   }
  });
 }
}

Comments are closed.