FlooatアクションButtonの連動効果


Googleの新しいdesignバッグのFloat at ingAction Button ボタンは普通の円形のボタンだけではなく、ある空間をアンカーしてこの空間に従って連動します.xmlで設定すればいいです.
はい、http://demo.netfoucs.com/liyuanjinglyj/article/details/50441040いい文章を見ましたが、残念ながらよく書けませんでした.ここで整理します.
まず、アンカーポイントに関する属性を貼り付けます.
①app:fabSize:二つの採値、一つはmini、一つはnormalで、FABの大きさを定義するために用いられます.normalは正常サイズで、miniはコンパクトです.
②app:backgroundTint:FAB背景色は、StyleファイルにcolorAccentとして配置されています.
③app:presedTranslation Z :FABが押されると影が大きくなるアニメです.
④app:elevation:FABアイドル状態シャドウ効果です.
⑤app:rippleColor:クリック時のさざ波色は、波としても理解できます.style設定するなら、colorCotrol Highlightです.
⑥app:border Width:この属性は特に重要であり、0 dpを設定しないと4.1のsdkでFABは正方形として表示され、5.0以降のsdkには影効果がない.だからborder Width="0 dp"に設定します.
⑦ap:layout_アンチョー:FABのアンカーポイント、つまりどのコントロールを基準点として位置を設定しますか?
⑧ap:layout_ANchorrGravity:FABの相対的なアンカーポイントの位置を設定し、bottom、センター、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;
  }
}
より良いのはそのアンカーの特性を利用して、たとえばCollappingToolbar Layoutをアンカーして一緒に上下運動します.下には図付きCollappingToolbar Layoutがあります.
<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>//      
/>