snackbar

In this tutorial we’ll discuss and implement various forms of Android Snackbar widget in our application.

在本教程中，我们将在应用程序中讨论和实现各种形式的Android Snackbar小部件。

Android Snackbar (Android Snackbar)

Snackbar in android is a new widget introduced with the Material Design library as a replacement of a Toast.

android中的Snackbar是随Material Design库引入的新小部件，可替代Toast。

Android Snackbar is light-weight widget and they are used to show messages in the bottom of the application with swiping enabled. Snackbar android widget may contain an optional action button.

Android Snackbar是轻巧的小部件，用于在启用滑动的情况下在应用程序底部显示消息。 Snackbar android小部件可能包含一个可选的操作按钮。

吐司和小吃店之间的区别 (Difference between Toast and Snackbar)

1. A Toast messages can be customised and printed anywhere on the screen, but a Snackbar can be only showed in the bottom of the screen
   可以自定义Toast消息并在屏幕上的任何位置打印，但Snackbar只能显示在屏幕底部
2. A Toast message don’t have action button, but Snackbar may have action button optionally. Though, A Snackbar shouldn’t have more than one action button
   Toast消息没有操作按钮，但是Snackbar可能有操作按钮。 不过，小吃店不应有多个动作按钮
3. Toast message cannot be off until the time limit finish, but Snackbar can be swiped off before the time limit
   在时间限制完成之前，不能关闭Toast消息，但是可以在时间限制之前关闭Snackbar

Note: Toast message and Snackbar have display length property in common.

注意 ：Toast消息和Snackbar具有共同的显示长度属性。

A code snippet to display a basic android Snackbar is shown below.

下面显示了显示基本android Snackbar的代码段。

Snackbar snackbar = Snackbar        .make(coordinatorLayout, "www.journaldev.com", Snackbar.LENGTH_LONG);snackbar.show();

In the above snippet make() method accepts three parameters:

在上面的代码段中， make()方法接受三个参数：

1. coordinatorLayout : It is the root layout of the activity
   coordinatorLayout ：它是活动的根目录
2. www.journaldev.com : This is the message to be appear on snackbar, and we can customise it with our own message
   www.journaldev.com ：这是出现在快餐栏上的消息，我们可以使用自己的消息进行自定义
3. Snackbar.LENGH_LONG : This is last parameter which is the time limit how long snackbar to be displayed
   Snackbar.LENGH_LONG ：这是最后一个参数，它是时间限制显示小吃栏多长时间

show() method is used to display the Snackbar on the screen.

show()方法用于在屏幕上显示Snackbar。

Android Snackbar示例项目结构 (Android Snackbar Example Project Structure)

Android Snackbar示例代码 (Android Snackbar Example Code)

No changes in the activity_main.xml code which contains the CoordinatorLayout.

包含CoordinatorLayout的activity_main.xml代码没有任何更改。

The content_main.xml consists of three buttons. One for each type of Snackbar that we’ll be discussing.

content_main.xml由三个按钮组成。 我们将要讨论的每种小吃店都有一个。

The code snippet for Action Call Snackbar button is given below:

下面给出了“ Action Call Snackbar”按钮的代码段：

two.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                Snackbar snackbar = Snackbar                        .make(coordinatorLayout, "Message is deleted", Snackbar.LENGTH_LONG)                        .setAction("UNDO", new View.OnClickListener() {                            @Override                            public void onClick(View view) {                                Snackbar snackbar1 = Snackbar.make(coordinatorLayout, "Message is restored!", Snackbar.LENGTH_SHORT);                                snackbar1.show();                            }                        });                snackbar.show();            }        });

In the above code a new onClickListener method is invoked on clicking the action button with the respective Snackbar being displayed in it.

在上面的代码中，单击动作按钮时会调用一个新的onClickListener方法，并在其中显示相应的Snackbar。

The code snippet for Custom Snackbar that’s invoked on the second button is given below:

下面给出了第二个按钮上调用的Custom Snackbar的代码段：

three.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                Snackbar snackbar = Snackbar                        .make(coordinatorLayout, "Try again!", Snackbar.LENGTH_LONG)                        .setAction("RETRY", new View.OnClickListener() {                            @Override                            public void onClick(View view) {                            }                        });                snackbar.setActionTextColor(Color.RED);                View sbView = snackbar.getView();                TextView textView = (TextView) sbView.findViewById(android.support.design.R.id.snackbar_text);                textView.setTextColor(Color.YELLOW);                snackbar.show();            }        });

The MainActivity.java is given below.

MainActivity.java在下面给出。

package com.journaldev.snackbar;import android.graphics.Color;import android.os.Bundle;import android.support.design.widget.CoordinatorLayout;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;import android.widget.Button;import android.widget.TextView;public class MainActivity extends AppCompatActivity {    CoordinatorLayout coordinatorLayout;    private Button one, two, three;    @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, "FloatingActionButton is clicked", Snackbar.LENGTH_LONG)                        .setAction("Action", null).show();            }        });        coordinatorLayout = (CoordinatorLayout) findViewById(R.id.coordinatorLayout);        View layout= findViewById(R.id.layout);        one=(Button)layout.findViewById(R.id.button);        two=(Button)layout.findViewById(R.id.button2);        three=(Button)layout.findViewById(R.id.button3);        one.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                Snackbar snackbar = Snackbar                        .make(coordinatorLayout, "www.journaldev.com", Snackbar.LENGTH_LONG);                snackbar.show();            }        });        two.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                Snackbar snackbar = Snackbar                        .make(coordinatorLayout, "Message is deleted", Snackbar.LENGTH_LONG)                        .setAction("UNDO", new View.OnClickListener() {                            @Override                            public void onClick(View view) {                                Snackbar snackbar1 = Snackbar.make(coordinatorLayout, "Message is restored!", Snackbar.LENGTH_SHORT);                                snackbar1.show();                            }                        });                snackbar.show();            }        });        three.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                Snackbar snackbar = Snackbar                        .make(coordinatorLayout, "Try again!", Snackbar.LENGTH_LONG)                        .setAction("RETRY", new View.OnClickListener() {                            @Override                            public void onClick(View view) {                            }                        });                snackbar.setActionTextColor(Color.RED);                View sbView = snackbar.getView();                TextView textView = (TextView) sbView.findViewById(android.support.design.R.id.snackbar_text);                textView.setTextColor(Color.YELLOW);                snackbar.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);    }}

The activity_main.xml is unchanged.

activity_main.xml保持不变。

The output of the snackbar android app in action is shown below.

运行中的snackbar android应用程序的输出如下所示。

This brings an end to this tutorial. You can download the final Android Snackbar project from the link below.

本教程到此结束。 您可以从下面的链接下载最终的Android Snackbar项目 。

Reference:

参考：

翻译自:

snackbar