Android Material Design的FloatingActionButton，Snackbar和CoordinatorLayout

我会带着你远行 2023-10-16 22:20 47阅读 0赞

**Android Material Design的FloatingActionButton，Snackbar和CoordinatorLayout**

本文介绍Android Material Design引入的三个组件：FloatingActionButton，Snackbar和CoordinatorLayout。如果是为了兼容低版本的Android系统，则需要引用Android Material Design的扩展支持库，我在之前的一篇文章张，较为详细的说明了如何导入Android Material Design依赖的库：android-support-v7-appcompat和design库，文章链接地址：[http://blog.csdn.net/zhangphil/article/details/48859961][http_blog.csdn.net_zhangphil_article_details_48859961]  
Android Material Design的FloatingActionButton是一个“悬浮”的按钮。Snackbar有一些类似于Android过去的Toast，但有很多自己独特的特点（比如支持选项事件，选择事件键等）。CoordinatorLayout是一个新的布局，实现在布局上各个组件之间的协调。  
现在给出一个例子，对以上三个组件的使用加以说明：

测试的MainActivity.java：

package zhangphil.tablayout;
    
    import java.util.ArrayList;
    
    import android.app.Activity;
    import android.app.ListActivity;
    import android.os.Bundle;
    import android.support.design.widget.FloatingActionButton;
    import android.support.design.widget.Snackbar;
    import android.view.View;
    import android.widget.ArrayAdapter;
    import android.widget.ListView;
    import android.widget.Toast;
    
    public class MainActivity extends ListActivity {
    
    	private ArrayList<String> data = null;
    	private ArrayAdapter<String> adapter;
    
    	@Override
    	protected void onCreate(Bundle savedInstanceState) {
    		super.onCreate(savedInstanceState);
    		setContentView(R.layout.activity_main);
    
    		data = new ArrayList<String>();
    		adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, data);
    
    		setListAdapter(adapter);
    
    		FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.floatingActionButton);
    		fab.setOnClickListener(new View.OnClickListener() {
    
    			@Override
    			public void onClick(View v) {
    				int len = data.size();
    				adapter.add("数据" + len);
    				adapter.notifyDataSetChanged();
    			}
    		});
    	}
    
    	@Override
    	public void onListItemClick(ListView l, View v, final int position, long id) {
    		final Activity activity = this;
    		Snackbar.make(v, "选择数据 " + position + " ?", Snackbar.LENGTH_SHORT).setAction("是", new View.OnClickListener() {
    			@Override
    			public void onClick(View v) {
    				Toast.makeText(activity, "选择了 " + position, Toast.LENGTH_SHORT).show();
    			}
    		}).show();
    	}
    }

MainActivity.java需要的布局文件:activity\_main.xml文件：

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
    
        <ListView
            android:id="@android:id/list"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" >
        </ListView>
    
        <android.support.design.widget.FloatingActionButton
            android:id="@+id/floatingActionButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right|bottom"
            android:layout_marginBottom="10dip"
            android:layout_marginRight="10dip"
            android:src="@drawable/ic_launcher"
            app:backgroundTint="#e57373"
            app:borderWidth="10dp"
            app:elevation="10dip"
            app:fabSize="normal"
            app:pressedTranslationZ="10dp"
            app:rippleColor="#c62828" />
    
    </android.support.design.widget.CoordinatorLayout>

运行结果如图所示：

![Center][]

需要说明的一点是，假设将activity\_main.xml布局文件最外层的布局改写成FrameLayout，那么，当选择ListView中某一项时候，弹出的Snackbar将会遮掩住FloatingActionButton。因此使用CoordinatorLayout可以使Snackbar和FloatingActionButton协调工作，不会出现遮掩的问题。

[http_blog.csdn.net_zhangphil_article_details_48859961]: http://blog.csdn.net/zhangphil/article/details/48859961
[Center]: https://img-blog.csdn.net/20151002173128230?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center