Material Design中的Snackbar

    今天我们讨论一下另一个组件”Snackbar”.Snackbar是design support library中另一个组件,使用Snackbar我们可以在屏幕底部(大多时候)快速弹出消息,它和Toast非常相似,但是它更灵活一些。首先,来看一下这个官方的介绍。http://www.google.com/design/spec/components/snackbars-toasts.html#

  一    Snackbar的基本特征

        1.比toast更加好,毕竟snackbar 可以响应点击事件

        2.snackbar 同一时间有且只有一个在显示。

       3.snackbar 上不要有图标

       4.snackbar上action 只能有一个。

      5.如果有悬浮按钮 floating action button的话,snackbar 在弹出的时候 不要覆盖这个button.

      6.此外我个人认为snackbar 在一定程度上可以替代dialog的某些应用场景。比如以前网络不通的情况下 我们登陆失败,会给一个dialog提示,现在就可以用snackbar 来做这个有action的提示 更加方便快捷。

二    Snackbar的基本使用
    Snackbar使用的时候需要一个控件容器用来容纳Snackbar.官方推荐使用CoordinatorLayout这个另一个Android Support Design Library库支持的控件容纳。因为使用这个控件,可以保证Snackbar可以让用户通过向右滑动退出。 Activity中获取CoordinateorLayout作为容器,然后调用Snackbar.make(Container, “SnackbarTest”, Snackbar.LENGTH_LONG).show();就可以生成一个Snackbar了

三   Snackbar简单的例子

布局文件:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="android.com.snackbar.MainActivity">

    <Button
        android:id="@+id/btId"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="点击弹出snackBar"/>
    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        >
    </android.support.design.widget.CoordinatorLayout>

</RelativeLayout>

MainActivity代码

  

package android.com.snackbar;

import android.support.design.widget.CoordinatorLayout;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

import static android.com.snackbar.R.layout.activity_main;

public class MainActivity extends AppCompatActivity {

    private CoordinatorLayout container;
    private Button mButton;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(activity_main);
        container= (CoordinatorLayout) findViewById(R.id.container);
        mButton= (Button) findViewById(R.id.btId);
        mButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
              Snackbar.make(container,"测试snackbar",Snackbar.LENGTH_LONG).show();

            }
        });
    }
}

效果如下


由于Snackbar是支持添加一个按钮的,因此Snackbar的构造语句可以写成这样:

    

                Snackbar.make(container,"测试snackbar",Snackbar.LENGTH_LONG).setAction("测试", new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        Snackbar.make(container,"点击action",Snackbar.LENGTH_LONG).show();
                    }
                }).show();

效果如下:

 

你要改变这个snackbar的背景色也是可以的 只需要

Snackbar sb=Snackbar.make(layout, "connection error", Snackbar.LENGTH_LONG).setAction("retry", new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                    }
                });
                //红色
                sb.getView().setBackgroundColor(0xfff44336);
                sb.show();
四    Snackbar 的源码

      

/这个地方就是构造函数
    Snackbar(ViewGroup parent) {
        this.mParent = parent;
        this.mContext = parent.getContext();
        LayoutInflater inflater = LayoutInflater.from(this.mContext);
        this.mView = (Snackbar.SnackbarLayout)inflater.inflate(layout.layout_snackbar, this.mParent, false);
    }

    //这个地方就是我们调用的make函数 也就是整个类的一个入口 在这里可以看到 我们的代码转入了snackbar的构造函数
    public static Snackbar make(View view, CharSequence text, int duration) {
        //注意看这个地方调用了 findsuitableparent这个函数
        Snackbar snackbar = new Snackbar(findSuitableParent(view));
        snackbar.setText(text);
        snackbar.setDuration(duration);
        return snackbar;
    }

    public static Snackbar make(View view, int resId, int duration) {
        return make(view, view.getResources().getText(resId), duration);
    }

    //这个函数其实作用就是无论你传进去的是什么view 我最终都会遍历到framlayout为止,因为activity的最外层实际上就是一个framlayout
    //所以你在调用make函数的时候无论传什么值进去 snackabr都会从最底部弹出来 就是因为这个函数做了这样的工作 但是!!!!
                //如果在遍历到最顶部的framlayout之前 遇到了一个framelayout 那么就会从这个framlayout的底部弹出,而不会从屏幕的最下方弹出了。
    //这个地方CoordinatorLayout的优先级比framlayout还要高 所以你如果穿进去的view是CoordinatorLayout的话 这个snackbar 就一定会从
    //CoordinatorLayout 底部弹出了。如果你CoordinatorLayout的最底部恰好在屏幕中间 那么snackbar 就会从屏幕中间弹出  而不会从底部弹出 这一点一定要注意
    @Nullable
    private static ViewGroup findSuitableParent(View view) {
        ViewGroup fallback = null;

        do {
            if(view instanceof CoordinatorLayout) {
                return (ViewGroup)view;
            }

            if(view instanceof FrameLayout) {
                if(view.getId() == 16908290) {
                    return (ViewGroup)view;
                }

                fallback = (ViewGroup)view;
            }

            if(view != null) {
                ViewParent parent = view.getParent();
                view = parent instanceof View?(View)parent:null;
            }
        } while(view != null);

        return fallback;
    }

转自:http://www.open-open.com/lib/view/open1437460246974.html


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值