FloatingActionButton
- 准备好一张照片，修改activiyt_main.xml中的代码
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<FrameLayout
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"
/>
<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_done"
/>
</FrameLayout>
...
</android.support.v4.widget.DrawerLayout>
-
这里主要就是添加了一个FloatingActionButton，这个控件的用法和其他一样，其中的layout_gravity="bottom|end"指的是放置于屏幕的右下角
悬浮按钮.png - 默认的颜色是colorAccent在stytle.xml中，还可以设置悬浮高度，
<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_done"
android:elevation="10dp"
/>
- 这里的android:elevation="10dp"属性就是指定高度值，高度值越大，投影范围就越大，然而个人觉得这些差异不大
- FloatingActionButton的点击事件，修改MainActivity中的代码
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
...
FloatingActionButton fab = (FloatingActionButton)findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Toast.makeText(MainActivity.this,"FAB clicked",Toast.LENGTH_SHORT).show();
}
});
}
-
这里的点击事件和按钮没什么两样，用法都是一样的，这里弹出一个Toast
FloatingActionButton点击事件.png
Snackbar
这个是可交互的提示，和Toast是不同的，Toast的作用是告诉用户现在发生了什么，同时用户只能被动的接收这个事件，而Snackbar它允许在提示当中加入一个可交互按钮，当用户点击按钮的时候还可以执行一些额外的逻辑操作
- Snackbar的用法也是很简单的，和Toast基本相似，只不过额外增加一个按钮的点击事件，修改MainActivity.xml中的代码
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
...
FloatingActionButton fab = (FloatingActionButton)findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Snackbar.make(view,"Data deleted",Snackbar.LENGTH_SHORT).setAction("Undo", new View.OnClickListener() {
@Override
public void onClick(View view) {
Toast.makeText(MainActivity.this,"Data restored",Toast.LENGTH_SHORT).show();
}
}).show();
}
});
}
- 这里调用 Snackbar.make()方法来创建一个Snackbar对象，make()要传入参数，第一个参数View，第二个参数是要显示的内容，第三个参数是显示的时长
- 这个又调用了setAction()方法来设置一个动作，从而让Snackbar不仅是一个提示，而且还是一个可以和用户交互的，这里在动作按钮的点击事件中加入了一个Toast，最后show()让让显示出来
-
运行程序，点击按钮就可以看到
Snackbar的效果.png - 可以看到Snackbar从屏幕下面出来了，这个时候上面还有一个Undo按钮，点击就会出现Toast，过一会这个Snackbar就会自动的消失
- 但是当它出现的时候，把悬浮按钮给遮挡住了，这样看着就别扭了，这个时候就要借助于CoordinatorLayout了
CoordinatorLayout
这个是加强版的FrameLayout，这个布局也是Design Support库提供的，在普通情况下和FrameLayout基本就是一样的，但是也有独特的一面
- CoordinatorLayout可以监听其所有子控件的各种事件，然后自动的帮助我们做出最为合理的响应，就像这个事件，弹出的Snackbar把悬浮的按钮遮挡住了，如果这个时候使用这个的话，就会...,修改activity_main.xml中的代码
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<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"
/>
<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_done"
/>
</android.support.design.widget.CoordinatorLayout>
...
</android.support.v4.widget.DrawerLayout>
-
这里只需要把这个FrameLayout替换成CoordinatorLayout就可以了，运行程序，点击悬浮按钮
自动将悬浮按钮上移.png
可以看到，这个时候悬浮按钮就会自动的向上偏移，而当Snackbar消失的时候，悬浮按钮就会自动的向下偏移回到原来的位置
原理.png
