Android代碼隱藏動畫按鈕

Question

我需要製作一個像這樣的動畫按鈕，點擊時包含其他按鈕。

它開始

Begin

和改造

Clicked

Answer 1

我們使用fabAction庫：
編譯 'com.github.shell軟件：FAB：1.0.5'
https://github.com/shell-software/fab

我們的XML是這樣的：

<RelativeLayout 
     android:id="@+id/news_item_actions" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignParentBottom="true" 
     android:layout_alignParentRight="true" 
     android:layout_marginRight="@dimen/fab_margin" 
     android:layout_marginBottom="@dimen/fab_margin" 
     android:orientation="vertical" 
     android:visibility="visible" 
     > 
    <com.software.shell.fab.ActionButton 
     android:id="@+id/news_item_share_sms" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignParentTop="true" 
     android:layout_alignParentRight="true" 
     android:layout_marginTop="0dp" 
     app:button_color="@color/share_sms" 
     app:image="@drawable/share_button_sms" 
     /> 
    <com.software.shell.fab.ActionButton 
     android:id="@+id/news_item_share_email" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignParentTop="true" 
     android:layout_alignParentRight="true" 
     android:layout_marginTop="70dp" 
     app:button_color="@color/share_email" 
     app:image="@drawable/share_button_mail" 
     /> 
    <com.software.shell.fab.ActionButton 
     android:id="@+id/news_item_share_twitter" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignParentTop="true" 
     android:layout_alignParentRight="true" 
     android:layout_marginTop="140dp" 
     app:button_color="@color/share_twitter" 
     app:image="@drawable/share_button_twitter" 
     /> 
    <com.software.shell.fab.ActionButton 
     android:id="@+id/news_item_share_facebook" 
     android:layout_width="36dp" 
     android:layout_height="36dp" 
     android:paddingLeft="10dp" 
     android:paddingRight="10dp" 
     android:layout_alignParentTop="true" 
     android:layout_alignParentRight="true" 
     android:layout_marginTop="210dp" 
     app:button_color="@color/share_facebook" 
     app:image="@drawable/share_button_facebook" 
     /> 
     <com.software.shell.fab.ActionButton 
      android:id="@+id/news_item_share_dummy" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_alignParentTop="true" 
      android:layout_alignParentRight="true" 
      android:layout_marginTop="280dp" 
      app:button_color="@color/share_cancel" 
      app:image="@drawable/share_button_cancel" 
      /> 
</RelativeLayout> 

我們的Java代碼是這樣的：

final ActionButton actionButton = (ActionButton) findViewById(R.id.news_item_action_button); 
    final ActionButton actionCancelButton = (ActionButton) findViewById(R.id.news_item_action_cancel_button); 

    actionButton.setOnClickListener(new View.OnClickListener() { 
     @Override 
     public void onClick(View v) { 
      expand(findViewById(R.id.news_item_share_facebook), 1); 
      expand(findViewById(R.id.news_item_share_twitter), 2); 
      expand(findViewById(R.id.news_item_share_email), 3); 
      expand(findViewById(R.id.news_item_share_sms), 4); 
      actionCancelButton.setVisibility(View.VISIBLE); 
      actionButton.setVisibility(View.GONE); 

     } 
    }); 

    actionCancelButton.setOnClickListener(new View.OnClickListener() { 
     @Override 
     public void onClick(View v) { 
      collapse(findViewById(R.id.news_item_share_facebook), 1); 
      collapse(findViewById(R.id.news_item_share_twitter), 2); 
      collapse(findViewById(R.id.news_item_share_email), 3); 
      collapse(findViewById(R.id.news_item_share_sms), 4); 
      actionCancelButton.setVisibility(View.GONE); 
      actionButton.setVisibility(View.VISIBLE); 
     } 
    }); 

public void expand(final View v, int pos) { 
    v.setVisibility(View.VISIBLE); 
    RelativeLayout.LayoutParams paramsTemp = (RelativeLayout.LayoutParams)v.getLayoutParams(); 
    float d = getResources().getDisplayMetrics().density; 
    final int expectedMove = paramsTemp.topMargin - mMargins[pos-1];//(int)((ACTION_SIZE*pos) * d); 
    final int[] topMargin = {paramsTemp.topMargin,mMargins[pos-1]}; 
    Animation a = new Animation() 
    { 
     @Override 
     protected void applyTransformation(float interpolatedTime, Transformation t) { 
      RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams)v.getLayoutParams(); 
      if(interpolatedTime == 1){ 
       params.setMargins(params.leftMargin, topMargin[1],params.rightMargin,params.bottomMargin); 
       v.setLayoutParams(params); 
      }else{ 
       int addedMargin = (int)(expectedMove * interpolatedTime); 
       int marginTop = topMargin[0] - addedMargin; 
       params.setMargins(params.leftMargin, marginTop,params.rightMargin,params.bottomMargin); 
       v.setLayoutParams(params); 
      } 
     } 

     @Override 
     public boolean willChangeBounds() { 
      return true; 
     } 
    }; 

    // 1dp/ms 
    a.setInterpolator(new DecelerateInterpolator(1.0f)); 
    a.setDuration(750); 
    v.startAnimation(a); 
} 

/* 
* This method is use to animate the collapse of share actions in this activity. 
* @param (final View v) The view which will be expanded. 
*/ 
public void collapse(final View v, int pos) { 
    RelativeLayout.LayoutParams paramsTemp = (RelativeLayout.LayoutParams)v.getLayoutParams(); 
    final int[] topMargin = {paramsTemp.topMargin}; 
    float d = getResources().getDisplayMetrics().density; 
    final int expectedMove = (int)((ACTION_SIZE*pos) * d); 
    Animation a = new Animation() 
    { 
     @Override 
     protected void applyTransformation(float interpolatedTime, Transformation t) { 
      if(interpolatedTime == 1){ 
       v.setVisibility(View.GONE); 
      }else{ 
       RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams)v.getLayoutParams(); 
       int addedMargin = (int)(expectedMove * interpolatedTime); 
       int marginTop = topMargin[0] + addedMargin; 
       params.setMargins(params.leftMargin, marginTop,params.rightMargin,params.bottomMargin); 
       v.setLayoutParams(params); 
      } 
     } 

     @Override 
     public boolean willChangeBounds() { 
      return true; 
     } 
    }; 

    // 1dp/ms 
    a.setInterpolator(new AccelerateInterpolator(1.0f)); 
    a.setDuration(750); 
    v.startAnimation(a); 
} 

這就是我們如何使動畫作品。希望它有效。