Android代码隐藏动画按钮

时间:2015-06-16 15:43:53

标签: android

我需要制作这样的动画按钮,点击时包含其他按钮。

它开始

Begin

转换

Clicked

1 个答案:

答案 0 :(得分:1)

我们使用fabAction库:
编译' com.github.shell-software: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);
}

这就是我们制作动画的方式。希望它有效。