FloatingActionButton&Snackbar

最新推荐文章于 2020-11-26 20:19:34 发布

后端沉思录

最新推荐文章于 2020-11-26 20:19:34 发布

阅读量1.5k

点赞数

分类专栏：【Material Design】文章标签： Material Design Android JAVA fab Snackbar

本文链接：https://blog.csdn.net/BAT_os/article/details/51199043

版权

【Material Design】专栏收录该内容

0 篇文章 0 订阅

订阅专栏

首先看FAB是什么？

查看API文档我们大概就可以知道如何使用它了，那么有哪些属性呢？真的是多啊，这里就介绍几个常用的：

id:为FAB定义一个标识

alpha:FAB的透明度,作为一个值介于0(完全透明的)和1(完全不透明的)

clickable:FAB是否能响应点击事件

backgroundTint:设置FAB的背景颜色

rippleColor :设置FAB点击时的背景颜色
elevation:默认状态下FAB的阴影大小
pressedTranslationZ :点击时候FAB的阴影大小
fabSize :设置FAB的大小，该属性有两个值，分别为normal和mini
src :FAB的图标
layout_anchor:设置FAB的锚点，即以哪个控件为参照点设置位置
layout_anchorGravity:设置FAB相对锚点的位置

如何使用FAB?需要引入Support Design Library，AS中引入十分简单，只要在gradle中加入：

compile 'com.android.support:recyclerview-v7:23.3.0'

下面在布局文件中如何使用吧！

<android.support.design.widget.CoordinatorLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:wang="http://schemas.android.com/apk/res-auto"
        android:id="@+id/coordin"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentBottom="true">
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:clickable="true"
        android:src="@mipmap/add_circle_black_24dp.png"   //Google提供的material-design-icons，里面有大量的图标，根据实际选区
        wang:backgroundTint="@color/blue"
        android:layout_marginRight="10dp"
        android:layout_marginBottom="10dp"
        wang:fabSize="normal"
        android:layout_gravity="bottom|right"
        android:elevation="30dp"
        />
   ...
</android.support.design.widget.CoordinatorLayout>
先别管android.support.design.widget.CoordinatorLayout，有过自定义View的朋友，看见xmlns:wang="http://schemas

.android.com/apk/res-auto"是不是很熟悉，但是为什么要这样呢？这个就是来获取我们自定义属性的命名空间,然后

就可以在布局文件中使用我们自定义的属性。EC中需要加上完整的包名，而AS中只需要/res-auto就可以了。我们使用

FAB引用了Support Design Library库。为了搞清楚，到sdk目录下(C:\androidsdk\extras\android\support\design\libs\android-support-design.jar),解压这个

JAR包，找到FloatingActionButton.class文件，这个文件是已经编译好的，不能直接打开,对java字节码熟悉的朋友，

可以用java提供的反编译工具javap来查看，不过反编译后是字节码：（也有注释，便于查看)

上面只是截取部分，感兴趣可以自己尝试。还有一种更简单的方法，就是用jd-gui-0.3.5.windows工具，我用的版本是

这个。下面看看吧：

看到了 TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.FloatingActionButton, defSt
yleAttr, R.style.Widget_Design_FloatingActionButton);这行代码是不是很熟悉呢，是来获取我们自定义属性的
值数组。下面再看代码部分：
        fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view){
                Intent intent = new Intent(MainActivity.this,SecondActivity.class);
                startActivity(intent);
            }
        });
是不是很简单，我们可以通过设置FAB点击事件，来跳转到另一个Activity。
Snackbar
关于Snack介绍，可以查阅API文档，有详细的介绍。为了容纳Snackbar，我们用CoordinatorLayout(关于CoordinatorLayout
的用法，参考点击打开链接)，Snackbar不仅仅有Toast功能，还有Action功能。
整个布局文件：
<android.support.design.widget.CoordinatorLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:wang="http://schemas.android.com/apk/res-auto"
        android:id="@+id/coordin"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentBottom="true">
    <android.support.design.widget.FloatingActionButton

        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:clickable="true"
        android:src="@mipmap/icon"
        wang:backgroundTint="@color/<span style="font-size: 9.8pt; font-family: 宋体;">add_circle_black_24dp.png</span><span style="font-size: 9.8pt; font-family: 宋体;">"</span>
        android:layout_marginRight="10dp"
        android:layout_marginBottom="10dp"
        wang:fabSize="normal"
        android:layout_gravity="bottom|right"
        android:elevation="30dp"
        />
    <Button
        android:id="@+id/createsanackbar"
        android:text="createSnackbar！"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
</android.support.design.widget.CoordinatorLayout>
代码部分：
public class MainActivity extends AppCompatActivity {
    private FloatingActionButton fab = null;
    private CoordinatorLayout coordinatorLayout;
    private Button createsnackbar = null;
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.layout);
        fab = (FloatingActionButton) findViewById(R.id.fab);
        createsnackbar =(Button)findViewById(R.id.createsanackbar);
        coordinatorLayout = (CoordinatorLayout)findViewById(R.id.coordin);//也可以指定<span style="font-size: 13.0667px; font-family: 宋体;">Snackbar.make(coordinatorLayout,xxx,xxxx)...</span>
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view){
                Intent intent = new Intent(MainActivity.this,SecondActivity.class);
                startActivity(intent);
            }
        });
        createsnackbar.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view,"你好",Snackbar.LENGTH_SHORT).setAction("返回到Activity2", new View.OnClickListener() {//设置Action
                    public void onClick(View view) {
                        Intent intent1 = new Intent(MainActivity.this, SecondActivity.class);
                        startActivity(intent1);
                    }
                }).setActionTextColor(Color.parseColor("#b0e0e6")).setText("bbbbbbbbb").show();//设置ActionText颜色
            }}); //注意setText()覆盖"你好"

    }

}
Activity2的布局和注册很简单，就不贴出代码了。
效果：