Поиск по сайту:

Учебное пособие по примеру плавающей кнопки действия Android


Сегодня мы узнаем о плавающей кнопке действия Android. Мы обсудим FloatingActionButton — новый компонент, включенный в Руководство по дизайну материалов и Toast.

Плавающая кнопка действия Android

Плавающая кнопка действия Android используется для выделения наиболее важных функций на экране. Это классный и стильный способ привлечь к себе внимание пользователя.

Обзор плавающей кнопки действия Android

Чтобы использовать виджеты Material Design в нашем проекте, нам нужно скомпилировать следующую зависимость в нашем файле build.gradle, как показано ниже.

compile 'com.android.support:design:23.1.1'

Виджет FloatingActionButton определяется в макете xml следующим образом:

<android.support.design.widget.FloatingActionButton
      android:id="@+id/fab"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:src="@android:drawable/ic_dialog_email"
      android:layout_gravity="bottom|end"
      app:elevation="6dp"
      app:pressedTranslationZ="12dp"/>

Несколько замечаний, сделанных из приведенного выше макета xml:

  1. FloatingActionButton расширяет класс ImageView. Это видно из определенного атрибута android:src.
  2. В приведенном выше макете XML атрибут высоты используется для отбрасывания тени на кнопку, а pressTranslationZ заставляет тень увеличиваться при нажатии.

FloatingActionButton помещается в CoordinatorLayout. CoordinatorLayout помогает облегчить взаимодействие между содержащимися в нем представлениями, что будет полезно позже для описания того, как анимировать кнопку в зависимости от изменений прокрутки. SnackBar — это более продвинутый виджет по сравнению с Toast. SnackBar вызывается следующим образом:

Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show();

Мы подробно обсудили SnackBar в другом уроке. Важное примечание. Если вы хорошо следовали этим руководствам по Android, вы, должно быть, заметили, что с новым обновлением инструментов сборки до 23.1.1 структура проекта нового пустого проекта изменилась, и вышеупомянутые виджеты присутствуют по умолчанию в новый проект Android Studio. Итак, вместо того, чтобы внедрять вышеупомянутые виджеты, давайте совершим краткий обзор новой структуры проекта.

Пример плавающей кнопки действия Android Структура проекта

Пример плавающей кнопки действия Android

Новый activity_main.xml приведен ниже:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.journaldev.floatingactionbutton.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

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

    <include layout="@layout/content_main" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        android:src="@android:drawable/ic_dialog_email" />

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

Панель инструментов добавляется по умолчанию в качестве замены ActionBar. Он добавлен внутри AppBarLayout, который является прямым дочерним элементом CoordinatorLayout. AppBarLayout используется для достижения различных режимов прокрутки, таких как свертывание, гибкое пространство и быстрый возврат. MainActivity.java определяется, как показано ниже:

package com.journaldev.floatingactionbutton;

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show();
            }
        });
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}