FloatingActionButton 的联动效果

谷歌新design包的FloatingActionButton  按钮不仅仅是普通的圆形按钮，它可以锚住某个空间并跟随这个空间进行联动，只需要在xml进行配置即可

在http://demo.netfoucs.com/liyuanjinglyj/article/details/50441040看到一篇比较好的文章，可惜写的不清晰，在此理顺一下

先贴出和锚点有关的属性

①app:fabSize：两个取值，一个为mini,一个为normal,用来定义FAB大小的,normal为正常大小，mini为小巧。

②app:backgroundTint：FAB背景色，如果在Style文件中配置其为colorAccent。

③app:pressedTranslationZ :FAB被按下时候阴影增大的动画。

④app:elevation：FAB空闲状态阴影效果。

⑤app:rippleColor：点击时候的涟漪色，也可以理解为波浪，如果要style配置其为colorControlHighlight。

⑥app:borderWidth：该属性尤为重要，如果不设置0dp，那么在4.1的sdk上FAB会显示为正方形，而且在5.0以后的sdk没有阴影效果。所以设置为borderWidth="0dp"。

⑦app:layout_anchor：设置FAB的锚点，即以哪个控件为参照点设置位置。

⑧app:layout_anchorGravity：设置FAB相对锚点的位置，值有 bottom、center、right、left、top等。

首先在按钮本身添加如下属性

<android.support.design.widget.FloatingActionButton 
android:id="@+id/lyj_fab" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:layout_margin="16dp" 
app:layout_behavior="com.example.xxx.LyjBehavior" //指向一个Beheavor文件
app:target="@+id/lyj_framelayout" //指向要锚住的控件
android:src="@drawable/blog_tag_parent_expert"
 /> 

下面是要被锚住的控件

<FrameLayout 
android:id="@+id/lyj_framelayout" 
android:layout_width="match_parent" 
android:layout_height="wrap_content" 
app:layout_anchor="@id/coordinatorlayout" //锚住其父控件
app:layout_anchorGravity="bottom"
> 
</FrameLayout>

然后编写相关的Behavior动作

public class AlxBehavior extends CoordinatorLayout.Behavior { private int targetId;
//获取自定义属性值的ID
 public AlxBehavior(Context context, AttributeSet attrs) {
     super(context, attrs);
     TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.Follow);
     for (int i = 0; i < a.getIndexCount(); i++) {
         int attr = a.getIndex(i);
         if(a.getIndex(i) == R.styleable.Follow_target)
         {
             targetId = a.getResourceId(attr, -1);
         }
     }
     a.recycle();

 }

 //获取相对空间ID，并设置到其中
// @Override
 public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency)
 {
     return dependency.getId() == targetId;
 }
 //相对位置效果代码写在这里
  @Override public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency)
  {

      child.setY(dependency.getY()-170);//child不管dependency怎么移动，其都在dependency上面，也就是不管菜单有移动，FAB都在其上面
        return true;
  }
}

更好的利用其锚住的特性，比如锚住CollapsingToolbarLayout并跟随其一起上下运动，下面是一个带图的CollapsingToolbarLayout

<android.support.design.widget.AppBarLayout        
android:id="@+id/appbar"        
android:layout_width="match_parent"        
android:layout_height="200dp"       
android:fitsSystemWindows="true"        
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
> 
<android.support.design.widget.CollapsingToolbarLayout    
android:id="@+id/collapsing_toolbar"         
android:layout_width="match_parent"        
android:layout_height="match_parent"        
android:fitsSystemWindows="true"       
app:contentScrim="?attr/colorPrimary"       
app:expandedTitleMarginEnd="64dp"         
app:expandedTitleMarginStart="48dp"        
app:layout_scrollFlags="scroll|exitUntilCollapsed">       
    <android.support.v7.widget.Toolbar        
    android:id="@+id/toolbar"            
    android:layout_width="match_parent"         
    android:layout_height="?attr/actionBarSize"  
    app:layout_collapseMode="pin"        
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />        
    <ImageView           
     android:id="@+id/lyj_image"          
     android:layout_width="match_parent"        
     android:layout_height="200dp"        
     android:scaleType="centerCrop"         
     android:fitsSystemWindows="true"        
     android:src="@drawable/biz_live_foot_bg"             
     app:layout_collapseMode="parallax"                
/>      
  </android.support.design.widget.CollapsingToolbarLayout>  
  </android.support.design.widget.AppBarLayout>    

相应的浮动按钮

<android.support.design.widget.FloatingActionButton        android:id="@+id/lyj_showbut"    
    android:layout_width="wrap_content"      
    android:layout_height="wrap_content"     
    app:backgroundTint="#FF3030"   
    app:rippleColor="#FF4500"      
    android:src="@drawable/add_attention"   
    app:elevation="6dp"    
    app:fabSize="normal"     
    app:pressedTranslationZ="12dp"      
    app:borderWidth="0dp"    
    app:layout_anchor="@id/collapsing_toolbar"    //设置锚点
    app:layout_anchorGravity="bottom|center"<span style="white-space:pre">	</span>//设置相对位置
/>