android floating action button

最近看到别人写的按钮很炫。于是发现了floating action button 的这个东西。下面就分享一下我的学习心得。
工具： android studio
这个button就配合RecyclerView使用吧。listView好像过时了哈哈。
使用RecyclerView的话需要在我们的build->dependencies里面加一句话

compile 'com.android.support:design:23.2.1'

下面就去搞一下我们的布局

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.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=".act.MainActivity">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rec"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clipChildren="false"
        android:clipToPadding="false"
        android:dividerHeight="10dp"
        android:paddingTop="?attr/actionBarSize" />

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:title="喝了两瓶">

    </android.support.v7.widget.Toolbar>

    <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/jh"
        app:borderWidth="0dp"
   //最主要的还是这个behavior
   app:layout_behavior="com.example.lq.floatingactionbutton.recycler.MoveingBehavior"
        app:fabSize="normal" />
</android.support.design.widget.CoordinatorLayout>

布局搞好了以后，首先我们去搞我们的RecyclerView的适配器好了。

首先我们需要一个RecyclerView的条目点击事件，给他一个接口。
package com.example.lq.floatingactionbutton.interfaces;

import android.view.View;

/**
* Created by Administrator on 2016-4-12.
*/
public interface OnRecyclerViewItemClickListener {
void onItemClick(View view, String Data);
}

过listView的对下面的代码一定不会陌生，因为很相似。

package com.example.lq.floatingactionbutton.adapter;

import android.support.v7.widget.RecyclerView;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.TextView;

import com.example.lq.floatingactionbutton.R;
import com.example.lq.floatingactionbutton.interfaces.OnRecyclerViewItemClickListener;

import java.util.List;

/**
 * Created by Administrator on 2016-4-9.
 */
public class RecyAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> implements View.OnClickListener, OnRecyclerViewItemClickListener {
    private List<String> list;// 数据
    private OnRecyclerViewItemClickListener onRecyclerViewItemClickListener = null;

    @Override
    public void onClick(View v) {
        if (onRecyclerViewItemClickListener != null) {
            onRecyclerViewItemClickListener.onItemClick(v, (String) v.getTag());
        }
    }

    public void setOnItemClickListener(OnRecyclerViewItemClickListener listener) {
        this.onRecyclerViewItemClickListener = listener;
    }


    public RecyAdapter(List<String> list) {
        this.list = list;

    }


    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        LayoutInflater inflater = LayoutInflater.from(parent.getContext());
        View view = inflater.inflate(R.layout.listitem, parent, false);
        view.setOnClickListener(this);
        return new MyViewHolder(view);
    }

    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
        String s = list.get(position);
        MyViewHolder holder1 = (MyViewHolder) holder;
        holder1.tv.setText(s);
        //holder1.tv.setText(list.get(position));
        //将数据保存在itemView的Tag中，以便点击时进行获取
        holder1.itemView.setTag(list.get(position));

    }

    @Override
    public int getItemCount() {
        return list.size();
    }

    @Override
    public void onItemClick(View view, String Data) {

    }


    class MyViewHolder extends RecyclerView.ViewHolder {
        private TextView tv;

        public MyViewHolder(View itemView) {
            super(itemView);
            //渲染布局
            tv = (TextView) itemView.findViewById(R.id.name);//一个条目  跟listview一样需要另一个布局  这里不再书写  如需分割线直接加个view就好了
        }
    }
}

适配器搞定了，我们可以跑一下看看。当然xml里的folating action button的behavior还没有那句话现在可以不写。等我们写好那个在放回去就OK。
下面我们去搞一下behavior

package com.example.lq.floatingactionbutton.recycler;

import android.content.Context;
import android.os.Build;
import android.support.design.widget.CoordinatorLayout;
import android.support.design.widget.FloatingActionButton;
import android.support.v4.view.ViewCompat;
import android.support.v4.view.ViewPropertyAnimatorListener;
import android.support.v4.view.animation.FastOutSlowInInterpolator;
import android.util.AttributeSet;
import android.view.View;

import java.util.jar.Attributes;

/**
 * Created by Administrator on 2016-4-9.
 */
public class MoveingBehavior extends FloatingActionButton.Behavior {
    private static FastOutSlowInInterpolator inInterpolator = new FastOutSlowInInterpolator();//加速器
    boolean isAnimatingout = false;//是否滑出

    public MoveingBehavior(Context context, AttributeSet attr) {
        super();
    }


    @Override
    public boolean onStartNestedScroll(final CoordinatorLayout coordinatorLayout,final FloatingActionButton child,final View directTargetChild,final View target, final int nestedScrollAxes) {
        //依赖的控件开始滑动 开始监听  recyclerVIew 滑动时
        //nestedScrollAxes  滑动关联方向

        return nestedScrollAxes == ViewCompat.SCROLL_AXIS_VERTICAL ||
                super.onStartNestedScroll(coordinatorLayout, child, directTargetChild, target, nestedScrollAxes);
    }

    @Override
    public void onNestedScroll(final CoordinatorLayout coordinatorLayout,final FloatingActionButton child, final View target,final int dxConsumed, final int dyConsumed,
final int dxUnconsumed, final int dyUnconsumed) {
        super.onNestedScroll(coordinatorLayout, child, target, dxConsumed, dyConsumed, dxUnconsumed, dyUnconsumed);
        //滑动过程中不断调用
        //判断滑动方向
        if (dyConsumed > 0 && !isAnimatingout && child.getVisibility() == View.VISIBLE) {
            //fab  滑出去
            animateout(child);
        } else if (dyConsumed < 0 && child.getVisibility() != View.VISIBLE) {
            //fab滑进来
            animatein(child);

        }

    }

    private void animateout(final FloatingActionButton child) {
        //动画滑出  属性
        if (Build.VERSION.SDK_INT >= 14) {
 //动画的属性在这里可以更改我们的动画效果   这里添加了监听下面就不需要了
          ViewCompat.animate(child).scaleX(0.0f).scaleY(0.0f).setInterpolator(inInterpolator).withLayer().setListener(new ViewPropertyAnimatorListener() {
                @Override
                public void onAnimationStart(View view) {
                    isAnimatingout = true;
                }

                @Override
                public void onAnimationEnd(View view) {
                    isAnimatingout = false;
                    view.setVisibility(View.GONE);
                }

                @Override
                public void onAnimationCancel(View view) {
                    isAnimatingout = false;
                }
            }).start();
        } else {

        }
    }

    private void animatein(FloatingActionButton child) {
        child.setVisibility(View.VISIBLE);
        if (Build.VERSION.SDK_INT >= 14) {
            ViewCompat.animate(child).scaleX(1.0f).scaleY(1.0f).setInterpolator(inInterpolator).withLayer().setListener(null).start();
        }
    }
}

到现在我们的button就算是基本完成了。
如有错误欢迎斧正，谢谢。