第一行代码----Material Design（4-5）

4.悬浮按钮和可交互提示

FloatingActionButton 是 Design Support 提供的一个控件，用它可以轻松实现悬浮按钮的效果。
首先我们还是先把悬浮按钮的图标图片添加进去，然后修改activity_main.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="16sp"
            android:src="@drawable/ic_done"
            app:elevation="8dp"/>

把这段代码加进FrameLayout布局中Toolbar控件的下面，其中 android:layout_gravity="bottom|end"表示控件的位置，end和之前的start作用刚好相反，如果系统语言是从左往右的，那么end就表示在右边，反之亦然；而 app:elevation="8dp"则是指定FloatingActionButton的悬浮高度的，越大则越高，投影也越淡，反之则越低越浓。

接下来，我们为它添加处理点击的响应事件，修改MainActivity的代码，在onCreate()里加入下面的代码：

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

这里出现了一个陌生的名词：Snackbar，它和Toast一样也是一个提示信息的工具，但不同的是它允许在其中加入一个可交互按钮。这里先调用了一个make()方法来创建一个Snackbar对象，make()方法有三个参数，第一个参数是一个View，这里只需要传入一个当前界面布局的任意一个View即可；第二个参数是显示的提示信息；第三个就是Snackbar显示的时长。之后又调用了一个setAction()动作用于响应用户点击以执行相应的动作。

最后运行一下发现点击悬浮按钮后弹出的提示信息遮挡住了悬浮按钮，这该怎么解决呢？这里我们需要借助CoordinatorLayout布局。

CoordinatorLayout是一个加强版的FrameLayout，但它可以监听其所有子控件的各种事件，并能够帮我们做出最合理的响应，这就很厉害了是不是！下面我们来把它应用进来，修改activity_main.xml的代码，将原来的FrameLayout替换为CoordinatorLayout即可：

  <android.support.design.widget.CoordinatorLayout
       ...
    </android.support.design.widget.CoordinatorLayout>

重新运行一下发现悬浮按钮就不会被遮挡了！

---

5.卡片式布局

什么是卡片式布局？其实就是一个FrameLayout，不过只是额外提供了圆角阴影等效果，本小节我们就用卡片式布局来显示一些水果图片在主界面上

由于需要用到RecycleView、CardView等控件，所以还是先添加一些依赖关系：

  compile 'com.android.support:recyclerview-v7:27+'
    compile 'com.android.support:cardview-v7:27+'
    compile 'com.github.bumptech.glide:glide:3.7.0'

第三个是一个Glide库的依赖，Glide是一个非常强大的图片加载库，其项目主页地址为：http://github.com/bumptech/glide

接下来修改activity_main.xml的代码，在Toolbar和FloatingActionButton之间加入以下代码：

 <android.support.v7.widget.RecyclerView
                    android:id="@+id/recycler_view"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">
    </android.support.v7.widget.RecyclerView>

然后新建一个Fruit类：

public class Fruit {
        private String name;
        private int imagedId;
        public Fruit(String name,int imagedId){
            this.name=name;
            this.imagedId=imagedId;
        }
    
        public int getImagedId() {
            return imagedId;
        }
    
        public String getName() {
            return name;
        }
    }

然后为RecycleView的子项指定一个自定义的布局，在layout下新建fruit_item.xml，代码如下所示：

<android.support.v7.widget.CardView
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        app:cardCornerRadius="4dp">
    
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <ImageView
                android:id="@+id/fruit_image"
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:scaleType="centerCrop"/>
            <TextView
                android:id="@+id/fruit_name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:layout_margin="5dp"
                android:textSize="16sp"/>
        </LinearLayout>
    
    </android.support.v7.widget.CardView>

再为RecycleView准备一个适配器，新建FruitAdapter类，代码如下：

package com.example.qw.materialtest;    
    import android.content.Context;
    import android.content.Intent;
    import android.support.annotation.NonNull;
    import android.support.v7.widget.CardView;
    import android.support.v7.widget.RecyclerView;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.ImageView;
    import android.widget.TextView;  
    import com.bumptech.glide.Glide;    
    import java.util.List;
    
    public class FruitAdapter extends RecyclerView.Adapter<FruitAdapter.ViewHolder> {
        private Context mContext;
        private List<Fruit> mFruitList;
        static class ViewHolder extends RecyclerView.ViewHolder{
            CardView cardView;
            ImageView fruitImage;
            TextView fruitName;
    
            public ViewHolder(View view){
                super(view);
                cardView=(CardView)view;
                fruitImage=(ImageView)view.findViewById(R.id.fruit_image);
                fruitName=(TextView)view.findViewById(R.id.fruit_name);
            }
        }
    
        public FruitAdapter(List<Fruit> fruitList){
            mFruitList=fruitList;
        }
    
        public ViewHolder onCreateViewHolder(ViewGroup parent,int viewType){
            if(mContext==null){
                mContext=parent.getContext();
            }
            View view= LayoutInflater.from(mContext).inflate(R.layout.fruit_item,parent,false);
            final ViewHolder holder=new ViewHolder(view);
            holder.cardView.setOnClickListener(new View.OnClickListener(){
                @Override
                public void onClick(View v) {
                    int position=holder.getAdapterPosition();
                    Fruit fruit=mFruitList.get(position);
                    Intent intent=new Intent(mContext,FruitActivity.class);
                    intent.putExtra(FruitActivity.FRUIT_NAME,fruit.getName());
                    intent.putExtra(FruitActivity.FRUIT_IMAGE_ID,fruit.getImagedId());
                    mContext.startActivity(intent);
                }
            });
            return holder;
        }
    
        @Override
        public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
            Fruit fruit=mFruitList.get(position);
            holder.fruitName.setText(fruit.getName());
            Glide.with(mContext).load(fruit.getImagedId()).into(holder.fruitImage);
        }
    
        @Override
        public int getItemCount() {
            return mFruitList.size();
        }
    
    }

最后修改MainActivity的代码
在MainActivity里加入：

 private Fruit[] fruits={new Fruit("Apple",R.drawable.apple),new Fruit("Banana",R.drawable.banana)
        ,new Fruit("Orange",R.drawable.orange),new Fruit("Watermelon",R.drawable.watermelon)
        ,new Fruit("Pear",R.drawable.pear),new Fruit("Grape",R.drawable.grape)
        ,new Fruit("Pineapple",R.drawable.pineapple),new Fruit("Strawberry",R.drawable.strawberry)
        ,new Fruit("Cherry",R.drawable.cherry),new Fruit("Mango",R.drawable.mango)};
        private List<Fruit> fruitList=new ArrayList<>();
        private FruitAdapter adapter;
        ...
        private void initFruits(){
        fruitList.clear();
        for(int i=0;i<50;i++){
            Random random=new Random();
            int index=random.nextInt(fruits.length);
            fruitList.add(fruits[index]);
        }
    }

在onCreate()里加入：

 initFruits();
     RecyclerView recyclerView=(RecyclerView)findViewById(R.id.recycler_view);
     GridLayoutManager layoutManager=new GridLayoutManager(this,2);
     recyclerView.setLayoutManager(layoutManager);
     adapter=new FruitAdapter(fruitList);
     recyclerView.setAdapter(adapter);

运行一下，发现Toolbar被RecycleView挡住了，这里我们需要用到另一个工具解决这个问题，它就是-----AppBarLayout

AppBarLayout相当于一个LinearLayout，不过它内部分装了很多滚动事件，并应用了一些Material Design的设计理念，下面我们来应用一下：

第一步，把Toolbar嵌套到AppBarLayout中：

  <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            ...
    </android.support.design.widget.AppBarLayout>

第二步，给RecycleView指定一个布局行为：

app:layout_behavior="@string/appbar_scrolling_view_behavior"

其实做完这些就够了，再运行程序就不会出现Toolbar被遮挡的情况了，但我们还可以通过给Toolbar设置一个属性来影响AppBarLayout接收到的滚动事件：

第三步，在ToolBar中加入属性：

    app:layout_scrollFlags="scroll|enterAlways|snap"

scroll表示当RecycleView向上滚动时，Toolbar会跟着一起向上滚动并隐藏；enterAlways表示当RecycleView向下滚动时，Toolbar会跟着一起向下滚动并重新显示；snap表示当Toolbar还没有完全隐藏或显示的时候，会根据当前滚动的距离，自动选择是隐藏还是显示。

---

源码地址：Material Design完整源码