学习Android的新的UI控件Material Design(三)——FloatingActioniButton悬浮按钮的 + Snackbar(交互式)应用

转载 2018年04月17日 20:45:54

开发的工具Android Studio,应用到的控件是Design Support库提供具体的布局如下:

activity_main.xml文件代码如下:

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:layout_scrollFlags="scroll|enterAlways|snap"/>
<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_margin="16dp"
    android:src="@drawable/ic_check_circle_black_24dp"
    app:elevation="8dp"/>
//这个地方导入悬浮按钮控件

然后修改MainActivity中的代码如下:设置相应的悬浮按钮点击监听器和相应事件,相应的优化需要加入Snackbar控件

只需添加一个点击事件即可,代码如下:

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

最后加入一个CoordinatorLayout实现功能的优化(相当于一个加强版本的FrameLayout)相当于把布局文件中的FrameLayout更改为CoordinatorLayout,代码如下:

<android.support.design.widget.CoordinatorLayout
  android:layout_width="match_parent"
  android:layout_height="match_parent">

  
  <android.support.v7.widget.Toolbar
      android:id="@+id/toolbar"
      android:layout_width="match_parent"
      android:layout_height="?attr/actionBarSize"
      android:background="?attr/colorPrimary"
      android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
      app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
      app:layout_scrollFlags="scroll|enterAlways|snap"/>
   


Android Material Design 新控件

本课程介绍Android 5.0 之后材料设计语言中出现的一些新控件类库 其中包括RecyclerView CardView TabLayout DrawerLayout ToolBar CoordinatorLayout SnackBar TextInputLayout CollapsingToolBarLayout 等控件的效果及使用用法
  • 2017年03月08日 08:34

Android Material Design新UI控件使用大全 一

序言自从谷歌在2014年的IO大会上推出了Material Design新的设计规范后,安卓应用的整体美观程度提升了很大的一个层次, 安卓再也不是又黑又丑的界面,取而代之的是拥有丰富的颜色,美观的按钮...
  • SmallCheric
  • SmallCheric
  • 2016-04-21 02:37:45
  • 3669

Android Material Design新UI控件使用大全 二

序言上一篇中我们介绍了几个简单的新UI控件,相信很多小伙伴对Materil Design的视觉效果有了一定的了解,今天我们就继续介绍其他几个控件的玩儿法,让我们一探Materil Design的究竟,...
  • SmallCheric
  • SmallCheric
  • 2016-04-25 01:54:44
  • 7906

Android Material Design悬浮按钮和可交互提示

博客内容:悬浮按钮FloatingActionButton、交互控件Snackbar和CoordinatorLayout。
  • L_201607
  • L_201607
  • 2017-05-07 10:47:33
  • 685

Material Design控件使用(二)

本篇接着之前的Material Design控件总结(一)往下学习support design包下其余控件,如果对Material Design不太熟悉的同学最好把第一篇看完再来看第二篇效果更好 本篇...
  • zly921112
  • zly921112
  • 2016-05-07 16:29:50
  • 5139

ANDROID L——Material Design详解(UI控件)

Android L(5.0)Material Desgin详解之UI控件篇,主要介绍了RecyclerView,CardView两个新增控件的使用方法。...
  • a396901990
  • a396901990
  • 2014-10-21 00:26:15
  • 23388

Material Design (三),Snackbar的使用

前言: 另一个比较有趣的设计库中的UI组件是Snackbar,它的作用和Toast类似,也是显示吐司一样,但Snackbar的特别之处在于Snackbar显示的提示信息可以和用户交互,更好地获取用户反...
  • ydxlt
  • ydxlt
  • 2016-03-17 13:46:57
  • 2021

MaterialDesign之FloatingActionButton(悬浮按钮)

FloatingActionButton是Design Support提供的一个控件,所以使用之前先要添加依赖库: compile 'com.android.support:design:24....
  • q296264785
  • q296264785
  • 2017-03-03 09:12:26
  • 174

微信小程序之MaterialDesign(三)-- SnackBar

snackbar: 主要用于提醒用户或者轻量级交互,实现原理: 在需要使用snackbar的页面底部添加一个view,对view进行fixed定位且设置z-index为1000,动态show和hide...
  • jeffer0323
  • jeffer0323
  • 2017-02-04 12:20:50
  • 542
收藏助手
不良信息举报
您举报文章:学习Android的新的UI控件Material Design(三)——FloatingActioniButton悬浮按钮的 + Snackbar(交互式)应用
举报原因:
原因补充:

(最多只允许输入30个字)