android浮动按钮_Android浮动操作按钮示例教程

android浮动按钮

Today we will learn about Android Floating Action Button. We’ll discuss the FloatingActionButton, that’s a new component included in the Material Design Guidelines and SnackBar, which is a Material Design replacement of a Toast.

今天，我们将了解Android浮动操作按钮。我们将讨论FloatingActionButton ，它是Material Design Guidelines和SnackBar中包含的新组件， SnackBar是Toast的Material Design替代品。

Android浮动操作按钮 (Android Floating Action Button)

Android Floating Action Button is used to pay emphasis to the most important function on the screen. It’s a cool and stylish way to get user’s attention to it.

Android浮动操作按钮用于强调屏幕上最重要的功能。这是一种吸引用户注意的酷炫时尚方式。

Android浮动操作按钮概述 (Android Floating Action Button Overview)

To use Material Design widgets in our project we need to compile the following dependency in our build.gradle file as shown below.

要在我们的项目中使用Material Design小部件，我们需要在build.gradle文件中编译以下依赖关系，如下所示。

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

The FloatingActionButton widget is defined in the xml layout as follows:

FloatingActionButton小部件在xml布局中定义如下：

<android.support.design.widget.FloatingActionButtonandroid: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"/>

Few observations made from the above xml layout defined are:

从上面定义的xml布局所做的观察很少：

FloatingActionButton extends the ImageView class. This is evident from the android:src attribute defined.FloatingActionButton扩展了ImageView类。从定义的android:src属性可以明显看出这一点。
In the above xml layout elevation attribute is used to cast a shadow over the button and pressedTranslationZ causes the shadow to grow when pressed.在上面的xml布局中，levation属性用于在按钮上方投射阴影，而PressedTranslationZ会在按下时使阴影增大。

A FloatingActionButton is placed within a CoordinatorLayout. A CoordinatorLayout helps facilitate interactions between views contained within it, which will be useful later to describe how to animate the button depending on scroll changes.

FloatingActionButton放置在CoordinatorLayout中 。 CoordinatorLayout有助于促进其中包含的视图之间的交互，这在以后描述如何根据滚动更改为按钮设置动画时将很有用。

SnackBar is a more enhanced widget when compared to a Toast. A SnackBar is invoked as follows:

与Toast相比，SnackBar是一个增强的小部件。 SnackBar的调用如下：

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

We have discussed SnackBar at length in another tutorial.

我们在另一个教程中详细讨论了SnackBar 。

Important Note: If you’ve been following these Android Tutorials well, you must have noticed that with the new build tools update to 23.1.1 the project structure of a new empty project has changed and the above mentioned widgets are present by default in a new Android Studio Project. So instead of implementing the above mentioned widgets, let’s take a quick tour of the new project structure.

重要说明 ：如果您一直很好地遵循了这些Android教程，则必须注意，随着新的构建工具更新到23.1.1，新的空项目的项目结构已更改，并且上述小部件默认情况下出现在新的Android Studio项目。因此，让我们快速浏览一下新项目结构，而不是实现上述小部件。

Android浮动操作按钮示例项目结构 (Android Floating Action Button Example Project Structure)

As you can see a new xml layout file named content_main.xml is added. It’s the same as the earlier activity_main.xml.

如您所见，添加了一个名为content_main.xml的新xml布局文件。与先前的activity_main.xml相同。

Android浮动操作按钮示例 (Android Floating Action Button Example)

The new activity_main.xml is given below:

新的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.AppBarLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:theme="@style/AppTheme.AppBarOverlay"><android.support.v7.widget.Toolbarandroid: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.FloatingActionButtonandroid: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>

A toolbar is added by default as a replacement of an ActionBar. It’s added inside an AppBarLayout which is a direct child of CoordinatorLayout
The AppBarLayout is used to achieve various scrolling behaviours such as collapse, flex space, and quick return.

默认情况下，会添加工具栏来替代ActionBar。它添加在AppBarLayout内，它是CoordinatorLayout的直接子级
AppBarLayout用于实现各种滚动行为，例如折叠，伸缩空间和快速返回。

The MainActivity.java is defined as given below:

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 {@Overrideprotected 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() {@Overridepublic void onClick(View view) {Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG).setAction("Action", null).show();}});}@Overridepublic 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;}@Overridepublic 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 SimplifiableIfStatementif (id == R.id.action_settings) {return true;}return super.onOptionsItemSelected(item);}
}

A new attribute is added to the application tag inside the AndroidManifest.xml named android:supportsRtl="true". This enables right to left layouts in the application.

将新属性添加到名为android:supportsRtl="true"的AndroidManifest.xml内的应用程序标签中。这将启用应用程序中从右到左的布局。

Running this default application produces an output like below:

运行此默认应用程序将产生如下输出：

As you can see, on clicking the floating action button, a SnackBar is displayed. This brings an end to this tutorial. You can create a new project in Android Studio and run it to see these features.
Note: Make sure that you’re using the latest build tools.

如您所见，单击浮动操作按钮时，将显示SnackBar。本教程到此结束。您可以在Android Studio中创建一个新项目，然后运行它以查看这些功能。
注意：请确保您使用的是最新的构建工具。

Reference: Android Reference Doc

参考： Android参考文档

翻译自: https://www.journaldev.com/10318/android-floating-action-button-example-tutorial

android浮动按钮