2017-04-04 130 views
-3

我需要覆蓋的浮動操作菜單的按鍵佈局單擊像下面的例子:我需要覆蓋佈局上浮動操作菜單按鈕

https://media.giphy.com/media/CxCkzncaSIXII/giphy.gif

+0

你必須研究塔t,在這個網站中,我們會幫你解決代碼中的問題,無論如何我會分享一個可用的浮動菜單鏈接選擇作爲你的要求https://android-arsenal.com/search?q=Floating – Nithinlal

+1

你可以爲此創建您自己的自定義視圖。我在我的項目中也做了這些,但唯一不同的是菜單項從FAB以弧形方式打開。 –

+0

@AishwaryaTiwari你能爲我提供代碼嗎?這對我有幫助。謝謝。 :) –

回答

2

您可以使用此:

>FloatingActionButton

>android-floating-action-button

對於疊加層,您必須將FAB包裹到與父寬度和高度匹配的frameLayout上,然後更改其顏色。

玩得開心..

+1

感謝您的回答。我正在使用這個庫來進行浮動動作菜單,但是我需要在工廠點擊時使用黑色覆蓋。在GIF中,您可以在製造商點擊上看到黑色圖層。 –

+1

我認爲你應該嘗試將你的晶圓廠包裝到一個FrameLayout上,以匹配父級的寬度和高度,例如:http://stackoverflow.com/questions/27992058/floating-action-button-and-white-background –

2

MaterialArcMenu.java

public class MaterialArcMenu extends FrameLayout implements View.OnClickListener,MaterialArcMenuItem.OnClickArcMenuItemListener { 

    private float mRadius; 

    private FloatingActionButton mHintButton; 
    private FrameLayout.LayoutParams params; 
    private FrameLayout transparentFrame; 
    private boolean isExpanded; 
    private Context context; 
    private Animator mCurrentAnimator; 

    float translateX,translateY; 
    private float scaleRatio; 


    public MaterialArcMenu(Context context) { 
     super(context); 
     if (!isInEditMode()) { 
      init(context); 
     } 
    } 

    public MaterialArcMenu(Context context, AttributeSet attrs) { 
     super(context, attrs); 
     if (attrs != null) { 
      TypedArray a = getContext().obtainStyledAttributes(attrs, R.styleable.ArcLayout, 0, 0); 
      a.recycle(); 
     } 
     if (!isInEditMode()) { 
      init(context); 
     } 
    } 

    @TargetApi(Build.VERSION_CODES.LOLLIPOP) 
    private void init(Context context){ 
     this.context = context; 
     scaleRatio = 1.0f; 
     mRadius = getExactDp(R.dimen.d80dp); 
     transparentFrame = new FrameLayout(context); 
     params = new FrameLayout.LayoutParams(LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.MATCH_PARENT); 
     transparentFrame.setLayoutParams(params); 
     transparentFrame.setBackgroundResource(R.color.transparent); 
     transparentFrame.setAlpha(0.0f); 
     this.addView(transparentFrame, 0); 

     params = new FrameLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT); 
     params.gravity = Gravity.BOTTOM | Gravity.CENTER_HORIZONTAL; 
     params.setMargins(0, 0, 0, (int) getResources().getDimension(R.dimen.d80dp)); 
     mHintButton = new FloatingActionButton(context); 
     mHintButton.setImageResource(R.drawable.ic_action_new); 
     mHintButton.setBackgroundTintList(ColorStateList.valueOf(ContextCompat.getColor(context, R.color.colorPrimary))); 
     mHintButton.setScaleX(0.8f * scaleRatio); 
     mHintButton.setScaleY(0.8f * scaleRatio); 
     mHintButton.setLayoutParams(params); 
     this.addView(mHintButton); 
     mHintButton.setOnClickListener(this); 
     isExpanded = false; 
    } 

    public void setRadius(int radius){ 
     this.mRadius = radius; 
    } 

    public void addItem(MaterialArcMenuItem menuItem){ 
     params = new FrameLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT); 
     params.gravity = Gravity.BOTTOM | Gravity.CENTER_HORIZONTAL; 
     params.setMargins(0, 0, 0, (int) getResources().getDimension(R.dimen.d80dp)); 
     menuItem.setLayoutParams(params); 
     this.addView(menuItem); 
     menuItem.setAlpha(0.0f); 
     menuItem.setOnClickArcMenuItemListener(this); 
     mHintButton.bringToFront(); 
    } 

    @Override 
    public void onClick(View v) { 
     if (mCurrentAnimator == null) { 
      startHintButtonAnimation(v); 
      if (!isExpanded) { 
       startOpeningAnimation(); 
      } else { 
       startClosingAnimation(); 
      } 
     } 
    } 

    private void startOpeningAnimation(){ 
     isExpanded = true; 
     transparentFrame.setAlpha(0.2f); 
     ArrayList<ObjectAnimator> arrayListObjectAnimators = new ArrayList<ObjectAnimator>(); //ArrayList of ObjectAnimators 
     int itemCount = getChildCount()-2; 
     float radius = convertDpToPixel(mRadius); 
     float angle = 180.0f; 
     float paddingAngle = 180.0f /(itemCount-1); 
     angle = angle -paddingAngle; 
     long delay = 0; 
     for(int i=1;i<itemCount+1;i++){ 
      View view = getChildAt(i); 
      angle = (angle+paddingAngle); 
      translateX = (float) (0.0f + radius * Math.cos(angle * (Math.PI/180))); 
      translateY = (float) (0.0f + radius * Math.sin(angle * (Math.PI/180))); 

      float tranX = (float) (0.0f + (radius+20.0f) * Math.cos(angle * (Math.PI/180))); 
      float tranY = (float) (0.0f + (radius+20.0f) * Math.sin(angle * (Math.PI/180))); 

      PropertyValuesHolder alpha = PropertyValuesHolder.ofFloat(View.ALPHA, 0.0f, 1f); 
      ObjectAnimator alphaAnimator = ObjectAnimator.ofPropertyValuesHolder(view, alpha); 
      arrayListObjectAnimators.add(alphaAnimator); 

      PropertyValuesHolder transX = PropertyValuesHolder.ofFloat(View.TRANSLATION_X, 0, tranX); 
      PropertyValuesHolder transY = PropertyValuesHolder.ofFloat(View.TRANSLATION_Y, 0, tranY); 
      PropertyValuesHolder rotate = PropertyValuesHolder.ofFloat(View.ROTATION, 180, 360); 

      ObjectAnimator translateAnimator = ObjectAnimator.ofPropertyValuesHolder(view, transX, transY, rotate); 
      translateAnimator.setDuration(200); 
      translateAnimator.setStartDelay(delay); 
      translateAnimator.setInterpolator(new LinearInterpolator()); 
      arrayListObjectAnimators.add(translateAnimator); 

      PropertyValuesHolder aftertransX = PropertyValuesHolder.ofFloat(View.TRANSLATION_X, tranX, translateX); 
      PropertyValuesHolder aftertransY = PropertyValuesHolder.ofFloat(View.TRANSLATION_Y, tranY, translateY); 
      ObjectAnimator aftertranslateAnimator = ObjectAnimator.ofPropertyValuesHolder(view, aftertransX, aftertransY); 
      aftertranslateAnimator.setDuration(100); 
      aftertranslateAnimator.setStartDelay(200 + delay); 
      aftertranslateAnimator.setInterpolator(new LinearInterpolator()); 
      arrayListObjectAnimators.add(aftertranslateAnimator); 

      delay = delay + 50; 
      view.setTag(new Point(translateX, translateY)); 
     } 
     ObjectAnimator[] objectAnimators = arrayListObjectAnimators.toArray(new ObjectAnimator[arrayListObjectAnimators.size()]); 
     AnimatorSet animatorSet = new AnimatorSet(); 
     animatorSet.playTogether(objectAnimators); 
     animatorSet.setInterpolator(new LinearInterpolator()); 

     mCurrentAnimator = animatorSet; 
     animatorSet.addListener(new Animator.AnimatorListener() { 
      @Override 
      public void onAnimationStart(Animator animation) { 

      } 

      @Override 
      public void onAnimationEnd(Animator animation) { 
       mCurrentAnimator = null; 
      } 

      @Override 
      public void onAnimationCancel(Animator animation) { 

      } 

      @Override 
      public void onAnimationRepeat(Animator animation) { 

      } 
     }); 
     animatorSet.start(); 
     transparentFrame.setOnClickListener(new OnClickListener() { 
      @Override 
      public void onClick(View v) { 
       if (mCurrentAnimator == null) { 
        startClosingAnimation(); 
       } 
      } 
     }); 
    } 

    private void startClosingAnimation(){ 
     isExpanded = false; 
     ArrayList<ObjectAnimator> arrayListObjectAnimators = new ArrayList<ObjectAnimator>(); //ArrayList of ObjectAnimators 
     int itemCount = getChildCount()-2; 
     long delay = 0; 
     for(int i=itemCount;i>=1;i--){ 
      View view = getChildAt(i); 
      Point point = (Point) view.getTag(); 

      PropertyValuesHolder rotate = PropertyValuesHolder.ofFloat(View.ROTATION, 0, 180); 
      ObjectAnimator rotateAnimator = ObjectAnimator.ofPropertyValuesHolder(view,rotate); 
      rotateAnimator.setDuration(100); // 1 second 
      //rotateAnimator.setRepeatMode(ValueAnimator.INFINITE); 
      rotateAnimator.setStartDelay(delay); 
      rotateAnimator.setInterpolator(new LinearInterpolator()); 
      arrayListObjectAnimators.add(rotateAnimator); 

      PropertyValuesHolder transX = PropertyValuesHolder.ofFloat(View.TRANSLATION_X, point.getTranslateX(), 0); 
      PropertyValuesHolder transY = PropertyValuesHolder.ofFloat(View.TRANSLATION_Y, point.getTranslateY(), 0); 
      ObjectAnimator translateAnimator = ObjectAnimator.ofPropertyValuesHolder(view, transX, transY); 
      translateAnimator.setDuration(200); // 1 second 
      translateAnimator.setStartDelay(100 + delay); 
      translateAnimator.setInterpolator(new LinearInterpolator()); 
      arrayListObjectAnimators.add(translateAnimator); 

      PropertyValuesHolder alpha = PropertyValuesHolder.ofFloat(View.ALPHA, 1f, 0.0f); 
      ObjectAnimator alphaAnimator = ObjectAnimator.ofPropertyValuesHolder(view, alpha); 
      alphaAnimator.setStartDelay(300 + delay); // 1 second 
      arrayListObjectAnimators.add(alphaAnimator); 

      delay = delay + 50; 
     } 
     ObjectAnimator[] objectAnimators = arrayListObjectAnimators.toArray(new ObjectAnimator[arrayListObjectAnimators.size()]); 
     AnimatorSet animatorSet = new AnimatorSet(); 
     animatorSet.playTogether(objectAnimators); 
     animatorSet.setInterpolator(new LinearInterpolator()); 
     mCurrentAnimator = animatorSet; 
     animatorSet.addListener(new Animator.AnimatorListener() { 
      @Override 
      public void onAnimationStart(Animator animation) { 

      } 

      @Override 
      public void onAnimationEnd(Animator animation) { 
       transparentFrame.setAlpha(0.0f); 
       mCurrentAnimator = null; 
      } 

      @Override 
      public void onAnimationCancel(Animator animation) { 

      } 

      @Override 
      public void onAnimationRepeat(Animator animation) { 

      } 
     }); 
     animatorSet.start(); 
     transparentFrame.setOnClickListener(null); 
     transparentFrame.setClickable(false); 
    } 

    private void startHidingAnimation() { 
     isExpanded = false; 
     ArrayList<ObjectAnimator> arrayListObjectAnimators = new ArrayList<ObjectAnimator>(); //ArrayList of ObjectAnimators 
     int itemCount = getChildCount() - 2; 
     for (int i = itemCount; i >= 1; i--) { 
      View view = getChildAt(i); 
      Point point = (Point) view.getTag(); 
      PropertyValuesHolder alpha = PropertyValuesHolder.ofFloat(View.ALPHA, 1f, 0.0f); 
      ObjectAnimator alphaAnimator = ObjectAnimator.ofPropertyValuesHolder(view, alpha); 
      arrayListObjectAnimators.add(alphaAnimator); 

      PropertyValuesHolder transX = PropertyValuesHolder.ofFloat(View.TRANSLATION_X, point.getTranslateX(), 0); 
      PropertyValuesHolder transY = PropertyValuesHolder.ofFloat(View.TRANSLATION_Y, point.getTranslateY(), 0); 
      ObjectAnimator translateAnimator = ObjectAnimator.ofPropertyValuesHolder(view, transX, transY); 
      arrayListObjectAnimators.add(translateAnimator); 
     } 
     ObjectAnimator[] objectAnimators = arrayListObjectAnimators.toArray(new ObjectAnimator[arrayListObjectAnimators.size()]); 
     AnimatorSet animatorSet = new AnimatorSet(); 
     animatorSet.playTogether(objectAnimators); 
     animatorSet.setInterpolator(new AccelerateInterpolator()); 
     mCurrentAnimator = animatorSet; 
     animatorSet.addListener(new Animator.AnimatorListener() { 
      @Override 
      public void onAnimationStart(Animator animation) { 

      } 

      @Override 
      public void onAnimationEnd(Animator animation) { 
       transparentFrame.setAlpha(0.0f); 
       mCurrentAnimator = null; 
      } 

      @Override 
      public void onAnimationCancel(Animator animation) { 

      } 

      @Override 
      public void onAnimationRepeat(Animator animation) { 

      } 
     }); 
     animatorSet.start(); 
     transparentFrame.setOnClickListener(null); 
     transparentFrame.setClickable(false); 
    } 

    private void startHintButtonAnimation(View view){ 
     view.clearAnimation(); 
     RotateAnimation rotateAnimation = new RotateAnimation(0,360, view.getPivotX(),view.getPivotY()); 
     rotateAnimation.setDuration(200); 
     view.setAnimation(rotateAnimation); 
     rotateAnimation.start(); 
    } 

    @Override 
    public void onClickArcMenuItem() { 
     startHidingAnimation(); 
    } 

    @Override 
    public boolean isArcMenuAnimating() { 
     return mCurrentAnimator != null; 
    } 

    class Point{ 
     private float translateX; 
     private float translateY; 

     public Point(float translateX,float translateY){ 
      this.translateX = translateX; 
      this.translateY = translateY; 
     } 

     public float getTranslateX(){ 
      return translateX; 
     } 

     public float getTranslateY(){ 
      return translateY; 
     } 
    } 

public float getExactDp(int dimensionResource) { 
     return getContext().getResources().getDimension(dimensionResource)/context.getResources().getDisplayMetrics().density; 
    } 

public float convertDpToPixel(float dp){ 
     Resources resources = getContext().getResources(); 
     DisplayMetrics metrics = resources.getDisplayMetrics(); 
     float px = dp * ((float)metrics.densityDpi/DisplayMetrics.DENSITY_DEFAULT); 
     return px; 
    } 
} 

MaterialArcMenuItem.java

public class MaterialArcMenuItem extends FloatingActionButton { 

    private OnClickArcMenuItemListener onClickArcMenuItemListener; 
    private float scaleRatio; 

    public MaterialArcMenuItem(Context context, int imageResource) { 
     super(context); 
     init(imageResource, context); 
    } 

    public MaterialArcMenuItem(Context context, AttributeSet attrs,int imageResource) { 
     super(context, attrs); 
     init(imageResource, context); 
    } 

    public MaterialArcMenuItem(Context context, AttributeSet attrs, int defStyleAttr,int imageResource) { 
     super(context, attrs, defStyleAttr); 
     init(imageResource, context); 
    } 

    private void init(int imageResource, Context context) { 
     setImageResource(imageResource); 
     scaleRatio = 1.0f; 
     setBackgroundTintList(ColorStateList.valueOf(ContextCompat.getColor(context, R.color.colorPrimary))); 
     setScaleX(0.8f * scaleRatio); 
     setScaleY(0.8f * scaleRatio); 
    } 

    public void setOnClickArcMenuItemListener(OnClickArcMenuItemListener onClickArcMenuItemListener){ 
     this.onClickArcMenuItemListener = onClickArcMenuItemListener; 
    } 

    public void setArcMenuItemOnClickListener(final OnClickListener listener){ 
     this.setOnClickListener(new OnClickListener() { 
      @Override 
      public void onClick(View v) { 
       if (!onClickArcMenuItemListener.isArcMenuAnimating()) { 
        startArcMenuItemAnimation(v, listener); 
       } 
      } 
     }); 
    } 

    private void startArcMenuItemAnimation(final View view, final OnClickListener listener){ 
     PropertyValuesHolder transX = PropertyValuesHolder.ofFloat(View.SCALE_X, 0.8f * scaleRatio, 1.5f * scaleRatio); 
     PropertyValuesHolder transY = PropertyValuesHolder.ofFloat(View.SCALE_Y, 0.8f * scaleRatio, 1.5f * scaleRatio); 
     PropertyValuesHolder rotate = PropertyValuesHolder.ofFloat(View.ROTATION, 360, 0); 
     ObjectAnimator expandAnimator = ObjectAnimator.ofPropertyValuesHolder(view, transX, transY); 
     ObjectAnimator rotateAnimator = ObjectAnimator.ofPropertyValuesHolder(view,rotate); 
     //rotateAnimator.setRepeatMode(ValueAnimator.INFINITE); 

     AnimatorSet animatorSet = new AnimatorSet(); 
     animatorSet.setDuration(200); 
     animatorSet.playTogether(rotateAnimator, expandAnimator); 
     animatorSet.addListener(new Animator.AnimatorListener() { 
      @Override 
      public void onAnimationStart(Animator animation) { 

      } 

      @Override 
      public void onAnimationEnd(Animator animation) { 
       view.setScaleX(0.8f * scaleRatio); 
       view.setScaleY(0.8f * scaleRatio); 
       listener.onClick(view); 
       onClickArcMenuItemListener.onClickArcMenuItem(); 
      } 

      @Override 
      public void onAnimationCancel(Animator animation) { 

      } 

      @Override 
      public void onAnimationRepeat(Animator animation) { 

      } 
     }); 
     animatorSet.start(); 
    } 

    public interface OnClickArcMenuItemListener{ 
     public void onClickArcMenuItem(); 

     public boolean isArcMenuAnimating(); 
    } 
} 

添加項目&處理點擊:

MaterialArcMenuItem materialArcMenuItem = new MaterialArcMenuItem(this, R.drawable.your_icon); 
     arcMenu.addItem(materialArcMenuItem); 
     materialArcMenuItem.setArcMenuItemOnClickListener(new View.OnClickListener() { 
      @Override 
      public void onClick(View v) {} 
     }); 
+0

不完美但我用ViewAnimationUtils.createCircularReveal處理了上述效果。 –