欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

悬浮按钮和可交互按钮

程序员文章站 2022-03-11 16:25:13
2014年Googel I/O大会上重磅推出了一套全新的界面设计语言MaterialDesign。因为设计人员也不了解这个东西,开发人员实现起来也很费劲,几乎没有一个可以用的API,都需要自己实现所以普及程度比较低。 而google也意识到了这一问题,于是2015年的Google I/O大会上推出了一个Design Support库,这个库将一些具有代表性的一些控件和效果进行了封装,这样就大大的简化了实现难度。 立面设计也是MaterialDesign中一......

        2014年Googel I/O大会上重磅推出了一套全新的界面设计语言MaterialDesign。因为设计人员也不了解这个东西,开发人员实现起来也很费劲,几乎没有一个可以用的API,都需要自己实现所以普及程度比较低。

        而google也意识到了这一问题,于是2015年的Google I/O大会上推出了一个Design Support库,这个库将一些具有代表性的一些控件和效果进行了封装,这样就大大的简化了实现难度。

        立面设计也是MaterialDesign中一条非常重要的设计思想。也就是说Material Design除了有平面还有立体的效果。

1.FloatingActionButton

基本使用:

我用的是这个包里的:implementation 'com.android.support:design:28.0.0-alpha3'

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="20dp"
    android:src="@mipmap/ic_done"
    app:elevation="9dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    tools:ignore="MissingConstraints" />

其中app:elevation="9dp"表示悬浮的高度,高度值越小,投影范围越小,投影效果越浓;高度值越大,投影效果越大,越淡。

点击事件:

FloatingActionButton fab = findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Toast.makeText(MainActivity.this, "FloatingActionButton", Toast.LENGTH_SHORT).show();

    }
});

悬浮按钮和可交互按钮

2.Snackbar

类似于toast但是比toast多了可交互按钮。比如删除的时候想撤回,可以提示的时候撤回。具体使用:

FloatingActionButton fab = findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Toast.makeText(MainActivity.this, "FloatingActionButton", Toast.LENGTH_SHORT).show();
        Snackbar.make(v, "Delect", Snackbar.LENGTH_SHORT)
                .setAction("Undo", new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        Toast.makeText(MainActivity.this, "Undo", Toast.LENGTH_SHORT).show();
                    }
                })
                .show();
    }
});

 

Snackbar.make(v, "Delect", Snackbar.LENGTH_SHORT) .setAction("Undo", new View.OnClickListener() { @Override public void onClick(View v) { Toast.makeText(MainActivity.this, "Undo", Toast.LENGTH_SHORT).show(); } }) .show();

make方法创建对象,传入view,Snackbar使用这个view查找到最外层布局,展示Snackbar。第二个参数是内容,第三个参数是时间。

悬浮按钮和可交互按钮

Snackbar从底部出现,上面有提示的文字,还有一个UNDO按钮,按钮可点击,显示一会自动消失。

不过Snackbar把悬浮按钮遮挡住了,我们可以只用CoordinatorLayout解决

3.CoordinatorLayout

悬浮按钮和可交互按钮

使用也很简单

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|right"
        android:layout_margin="20dp"
        android:src="@mipmap/ic_done"
        app:elevation="9dp"
        tools:ignore="MissingConstraints" />


</androidx.coordinatorlayout.widget.CoordinatorLayout>

只是需要用CoordinatorLayout将原来的FloatingActionButton包裹一下就好。。

其实CoordinatorLayout就是一个加强版的Framlayout,也是由support:design库提供。他可以监听各个子控件的各个事件,并作出最合理的响应。比如当FloatingActionButton被遮挡了,他会自动将其上移从而不被遮挡。

转发表明出处https://blog.csdn.net/qq_35698774/article/details/107944474

点击下载

android互助群:

悬浮按钮和可交互按钮

感谢:郭霖的《第一行代码 第二版》

 

本文地址:https://blog.csdn.net/qq_35698774/article/details/107944474