安卓 Snackbar 示例教程

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

安卓小吃店

安卓中的Snackbar是材质设计库中引入的一个新窗口小部件,作为Toast的替代品。Android Snackbar是一个轻量级的小工具,用于在应用程序底部显示消息,并启用了滑动功能。Snackbar Android小工具可能包含一个可选的操作按钮。

Toast和Snackbar的区别

  1. Toast消息可以自定义并打印在屏幕上的任何位置,但Snackbar只能显示在屏幕底部
  2. Toast消息没有动作按钮,但Snackbar可能有可选的动作按钮。不过,Snackbar不应该有一个以上的动作按钮
  3. Toast消息在时限结束前不能关闭,但Snackbar可以在时限前刷卡关闭

注意 :吐司消息和Snackbar有共同的显示长度属性。显示基本Android Snackbar的代码片段如下所示。

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

在上面的代码片段中,make()方法接受三个参数:

1.协调员布局 :是活动的根布局 2.www.JouralDev.com :这是要在Snackbar上显示的消息,我们可以用我们自己的消息进行定制 3.Snackbar.LENGH_LONG :这是最后一个参数,表示Snackbar显示的时间限制

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

Android Snackbar示例项目结构

安卓快餐栏示例project

Android Snackbar示例代码

包含CoordinatorLayout的activity_main.xml代码没有更改。content_main.xml由三个按钮组成。我们将讨论的每种类型的小吃店都有一个。

 1<?xml version="1.0" encoding="utf-8"?>
 2<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
 3    xmlns:app="https://schemas.android.com/apk/res-auto"
 4    xmlns:tools="https://schemas.android.com/tools"
 5    android:layout_width="match_parent"
 6    android:layout_height="match_parent"
 7    android:paddingBottom="@dimen/activity_vertical_margin"
 8    android:paddingLeft="@dimen/activity_horizontal_margin"
 9    android:paddingRight="@dimen/activity_horizontal_margin"
10    android:paddingTop="@dimen/activity_vertical_margin"
11    app:layout_behavior="@string/appbar_scrolling_view_behavior"
12    tools:context="com.journaldev.snackbar.MainActivity"
13    tools:showIn="@layout/activity_main">
14
15    <Button
16        android:layout_width="wrap_content"
17        android:layout_height="wrap_content"
18        android:text="DEFAULT SNACKBAR"
19        android:id="@+id/button"
20        android:layout_alignParentTop="true"
21        android:layout_centerHorizontal="true" />
22
23    <Button
24        android:layout_width="wrap_content"
25        android:layout_height="wrap_content"
26        android:text="ACTION CALL SNACKBAR"
27        android:id="@+id/button2"
28        android:layout_below="@+id/button"
29        android:layout_centerHorizontal="true" />
30
31    <Button
32        android:layout_width="wrap_content"
33        android:layout_height="wrap_content"
34        android:text="CUSTOM VIEW SNACKBAR"
35        android:id="@+id/button3"
36        android:layout_below="@+id/button2"
37        android:layout_centerHorizontal="true" />
38</RelativeLayout>

操作调用Snackbar按钮的代码片段如下所示:

 1two.setOnClickListener(new View.OnClickListener() {
 2            @Override
 3            public void onClick(View v) {
 4                Snackbar snackbar = Snackbar
 5                        .make(coordinatorLayout, "Message is deleted", Snackbar.LENGTH_LONG)
 6                        .setAction("UNDO", new View.OnClickListener() {
 7                            @Override
 8                            public void onClick(View view) {
 9                                Snackbar snackbar1 = Snackbar.make(coordinatorLayout, "Message is restored!", Snackbar.LENGTH_SHORT);
10                                snackbar1.show();
11                            }
12                        });
13
14                snackbar.show();
15            }
16
17        });

在上面的代码中,在单击操作按钮时调用一个新的onClickListener方法,并在其中显示相应的Snackbar。在第二个按钮上调用的Custom Snackbar的代码片段如下所示:

 1three.setOnClickListener(new View.OnClickListener() {
 2            @Override
 3            public void onClick(View v) {
 4                Snackbar snackbar = Snackbar
 5                        .make(coordinatorLayout, "Try again!", Snackbar.LENGTH_LONG)
 6                        .setAction("RETRY", new View.OnClickListener() {
 7                            @Override
 8                            public void onClick(View view) {
 9                            }
10                        });
11                snackbar.setActionTextColor(Color.RED);
12                View sbView = snackbar.getView();
13                TextView textView = (TextView) sbView.findViewById(android.support.design.R.id.snackbar_text);
14                textView.setTextColor(Color.YELLOW);
15                snackbar.show();
16            }
17        });

MainActivity.java如下所示。

  1package com.journaldev.snackbar;
  2
  3import android.graphics.Color;
  4import android.os.Bundle;
  5import android.support.design.widget.CoordinatorLayout;
  6import android.support.design.widget.FloatingActionButton;
  7import android.support.design.widget.Snackbar;
  8import android.support.v7.app.AppCompatActivity;
  9import android.support.v7.widget.Toolbar;
 10import android.view.View;
 11import android.view.Menu;
 12import android.view.MenuItem;
 13import android.widget.Button;
 14import android.widget.TextView;
 15
 16public class MainActivity extends AppCompatActivity {
 17
 18    CoordinatorLayout coordinatorLayout;
 19    private Button one, two, three;
 20
 21    @Override
 22    protected void onCreate(Bundle savedInstanceState) {
 23        super.onCreate(savedInstanceState);
 24        setContentView(R.layout.activity_main);
 25        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
 26        setSupportActionBar(toolbar);
 27
 28        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
 29        fab.setOnClickListener(new View.OnClickListener() {
 30            @Override
 31            public void onClick(View view) {
 32                Snackbar.make(view, "FloatingActionButton is clicked", Snackbar.LENGTH_LONG)
 33                        .setAction("Action", null).show();
 34            }
 35        });
 36
 37        coordinatorLayout = (CoordinatorLayout) findViewById(R.id.coordinatorLayout);
 38
 39        View layout= findViewById(R.id.layout);
 40
 41        one=(Button)layout.findViewById(R.id.button);
 42        two=(Button)layout.findViewById(R.id.button2);
 43        three=(Button)layout.findViewById(R.id.button3);
 44
 45        one.setOnClickListener(new View.OnClickListener() {
 46            @Override
 47            public void onClick(View v) {
 48                Snackbar snackbar = Snackbar
 49                        .make(coordinatorLayout, "www.journaldev.com", Snackbar.LENGTH_LONG);
 50                snackbar.show();
 51            }
 52        });
 53
 54        two.setOnClickListener(new View.OnClickListener() {
 55            @Override
 56            public void onClick(View v) {
 57                Snackbar snackbar = Snackbar
 58                        .make(coordinatorLayout, "Message is deleted", Snackbar.LENGTH_LONG)
 59                        .setAction("UNDO", new View.OnClickListener() {
 60                            @Override
 61                            public void onClick(View view) {
 62                                Snackbar snackbar1 = Snackbar.make(coordinatorLayout, "Message is restored!", Snackbar.LENGTH_SHORT);
 63                                snackbar1.show();
 64                            }
 65                        });
 66
 67                snackbar.show();
 68            }
 69
 70        });
 71
 72        three.setOnClickListener(new View.OnClickListener() {
 73            @Override
 74            public void onClick(View v) {
 75                Snackbar snackbar = Snackbar
 76                        .make(coordinatorLayout, "Try again!", Snackbar.LENGTH_LONG)
 77                        .setAction("RETRY", new View.OnClickListener() {
 78                            @Override
 79                            public void onClick(View view) {
 80                            }
 81                        });
 82                snackbar.setActionTextColor(Color.RED);
 83                View sbView = snackbar.getView();
 84                TextView textView = (TextView) sbView.findViewById(android.support.design.R.id.snackbar_text);
 85                textView.setTextColor(Color.YELLOW);
 86                snackbar.show();
 87            }
 88        });
 89
 90    }
 91
 92    @Override
 93    public boolean onCreateOptionsMenu(Menu menu) {
 94        // Inflate the menu; this adds items to the action bar if it is present.
 95        getMenuInflater().inflate(R.menu.menu_main, menu);
 96        return true;
 97    }
 98
 99    @Override
100    public boolean onOptionsItemSelected(MenuItem item) {
101        // Handle action bar item clicks here. The action bar will
102        // automatically handle clicks on the Home/Up button, so long
103        // as you specify a parent activity in AndroidManifest.xml.
104        int id = item.getItemId();
105
106        //noinspection SimplifiableIfStatement
107        if (id == R.id.action_settings) {
108            return true;
109        }
110
111        return super.onOptionsItemSelected(item);
112    }
113}

active_main.xml没有变化。Snackbar Android应用程序的运行结果如下所示。Snackbar Android应用程序example本教程就此结束。您可以通过下面的链接下载最终的Android Snackbar项目

下载Android Snackbar示例Project

参考:安卓开发者Doc

Published At
Categories with 技术
Tagged with
comments powered by Disqus