其他的不多说了！我们来看看效果吧

一、实现方式一：直接引入compile方式

Add the dependency to your build.gradle:

compile ‘com.github.michaldrabik:tapbarmenu:1.0.5'

布局设计

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/dark_gray" tools:context=".MainActivity"> <!--中间按钮颜色--> <!--app:tbm_backgroundColor="@color/red"--> <!--是否初始进入页面就可以看到item图片--> <!--app:tbm_showItems="true"--> <!--中间按钮大小--> <!--app:tbm_buttonSize="30dp"--> <!--中间按钮位置--> <!--app:tbm_buttonPosition="center"--> <!--中间按钮位置左边距--> <!--app:tbm_buttonMarginLeft="0dp"--> <!--中间按钮位置右边距--> <!--app:tbm_buttonMarginRight="0dp"--> <!--中间按钮自定义图标打开状态。必须是一个向量可拉的动画。--> <!-- app:tbm_iconOpened="@drawable/icon"--> <!--中间按钮自定义图标关闭状态。必须是一个向量可拉的动画。--> <!--app:tbm_iconOpened="@drawable/icon"--> <!--中间按钮打卡item显示位置--> <!--app:tbm_menuAnchor="bottom"--> <com.michaldrabik.tapbarmenulib.TapBarMenu android:id="@+id/tapBarMenu" android:layout_width="match_parent" android:layout_height="56dp" android:layout_alignParentBottom="true" android:layout_marginBottom="24dp" app:tbm_backgroundColor="@color/red" app:tbm_buttonMarginLeft="0dp" app:tbm_buttonMarginRight="0dp" app:tbm_buttonPosition="center" app:tbm_buttonSize="30dp" app:tbm_iconClosed="@drawable/icon" app:tbm_iconOpened="@drawable/icon" app:tbm_menuAnchor="bottom" app:tbm_showItems="false"> <ImageView android:id="@+id/item1" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:paddingBottom="10dp" android:paddingTop="10dp" android:src="@drawable/ic_person" tools:visibility="visible" /> <ImageView android:id="@+id/item2" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:paddingBottom="10dp" android:paddingTop="10dp" android:src="@drawable/ic_location" /> <Space android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" /> <ImageView android:id="@+id/item3" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:paddingBottom="10dp" android:paddingTop="10dp" android:src="@drawable/ic_thumb_up" /> <ImageView android:id="@+id/item4" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:paddingBottom="10dp" android:paddingTop="10dp" android:src="@drawable/ic_thumb_down" /> </com.michaldrabik.tapbarmenulib.TapBarMenu> </RelativeLayout>

在Activity中的代码

import android.os.Bundle;import android.support.v7.app.AppCompatActivity;import android.util.Log;import android.view.View;import android.widget.Toast;import com.michaldrabik.tapbarmenulib.TapBarMenu;import butterknife.Bind;import butterknife.ButterKnife;import butterknife.OnClick;public class MainActivity extends AppCompatActivity { @Bind(R.id.tapBarMenu) TapBarMenu tapBarMenu; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ButterKnife.bind(this); } private boolean isClick = true; @OnClick(R.id.tapBarMenu) public void onMenuButtonClick() {// if (isClick) {// tapBarMenu.toggle();// isClick = false;// } tapBarMenu.toggle(); } @OnClick({R.id.item1, R.id.item2, R.id.item3, R.id.item4}) public void onMenuItemClick(View view) {// tapBarMenu.close(); switch (view.getId()) { case R.id.item1: Toast.makeText(this,"item1",Toast.LENGTH_LONG).show(); break; case R.id.item2: Toast.makeText(this,"item2",Toast.LENGTH_LONG).show(); break; case R.id.item3: Toast.makeText(this,"item3",Toast.LENGTH_LONG).show(); break; case R.id.item4: Toast.makeText(this,"item4",Toast.LENGTH_LONG).show(); break; } }}

到这里效果就基本实现了

二、实现方式二：引入Module方式

module中记得引入

compile ‘com.wnafee:vector-compat:1.0.5'

import android.animation.Animator;import android.animation.AnimatorListenerAdapter;import android.animation.AnimatorSet;import android.animation.ValueAnimator;import android.annotation.TargetApi;import android.content.Context;import android.content.res.TypedArray;import android.graphics.Canvas;import android.graphics.Paint;import android.graphics.Path;import android.graphics.drawable.Animatable;import android.graphics.drawable.Drawable;import android.os.Build;import android.support.annotation.NonNull;import android.support.v4.content.ContextCompat;import android.util.AttributeSet;import android.view.Gravity;import android.view.MotionEvent;import android.view.View;import android.view.ViewGroup;import android.view.animation.DecelerateInterpolator;import android.widget.LinearLayout;import com.wnafee.vector.compat.ResourcesCompat;/** * TapBar Menu Layout. * * @author Michal Drabik (michal.drabik0@gmail.com) on 2015-11-13. */public class TapBarMenu extends LinearLayout { public static final int BUTTON_POSITION_LEFT = 0; public static final int BUTTON_POSITION_CENTER = 1; public static final int BUTTON_POSITION_RIGHT = 2; public static final int MENU_ANCHOR_BOTTOM = 3; public static final int MENU_ANCHOR_TOP = 4; private static final DecelerateInterpolator DECELERATE_INTERPOLATOR = new DecelerateInterpolator(2.5f); private enum State { OPENED, CLOSED } private static final int LEFT = 0; private static final int RIGHT = 1; private static final int TOP = 2; private static final int BOTTOM = 3; private static final int RADIUS = 4; private AnimatorSet animatorSet = new AnimatorSet(); private ValueAnimator[] animator = new ValueAnimator[5]; private float[] button = new float[5]; private Path path = new Path(); private State state = State.CLOSED; private Paint paint; private int animationDuration; private float width; private float height; private float buttonLeftInitial; private float buttonRightInitial; private float yPosition; private Drawable iconOpenedDrawable; private Drawable iconClosedDrawable; private OnClickListener onClickListener; //Custom XML Attributes private int backgroundColor; private int buttonSize; private int buttonPosition; private int buttonMarginRight; private int buttonMarginLeft; private int menuAnchor; private boolean showMenuItems; public TapBarMenu(Context context, AttributeSet attrs) { super(context, attrs); init(attrs); } public TapBarMenu(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(attrs); } private void init(AttributeSet attrs) { setWillNotDraw(false); setupAttributes(attrs); setGravity(Gravity.CENTER); setupAnimators(); setupPaint(); } private void setupAttributes(AttributeSet attrs) { TypedArray typedArray = getContext().obtainStyledAttributes(attrs, R.styleable.TapBarMenu, 0, 0); if (typedArray.hasValue(R.styleable.TapBarMenu_tbm_iconOpened)) { iconOpenedDrawable = typedArray.getDrawable(R.styleable.TapBarMenu_tbm_iconOpened); } else { iconOpenedDrawable = ResourcesCompat.getDrawable(getContext(), R.drawable.icon_animated); } if (typedArray.hasValue(R.styleable.TapBarMenu_tbm_iconClosed)) { iconClosedDrawable = typedArray.getDrawable(R.styleable.TapBarMenu_tbm_iconClosed); } else { iconClosedDrawable = ResourcesCompat.getDrawable(getContext(), R.drawable.icon_close_animated); } backgroundColor = typedArray.getColor(R.styleable.TapBarMenu_tbm_backgroundColor, ContextCompat.getColor(getContext(), R.color.red)); buttonSize = typedArray.getDimensionPixelSize(R.styleable.TapBarMenu_tbm_buttonSize, getResources().getDimensionPixelSize(R.dimen.defaultButtonSize)); buttonMarginRight = typedArray.getDimensionPixelSize(R.styleable.TapBarMenu_tbm_buttonMarginRight, 0); buttonMarginLeft = typedArray.getDimensionPixelSize(R.styleable.TapBarMenu_tbm_buttonMarginLeft, 0); buttonPosition = typedArray.getInt(R.styleable.TapBarMenu_tbm_buttonPosition, BUTTON_POSITION_CENTER); menuAnchor = typedArray.getInt(R.styleable.TapBarMenu_tbm_menuAnchor, MENU_ANCHOR_BOTTOM); showMenuItems = typedArray.getBoolean(R.styleable.TapBarMenu_tbm_showItems, false); typedArray.recycle(); } private void setupAnimators() { for (int i = 0; i < 5; i++) { animator[i] = new ValueAnimator(); } animator[LEFT].addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator valueAnimator) { button[LEFT] = (float) valueAnimator.getAnimatedValue(); } }); animator[RIGHT].addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator valueAnimator) { button[RIGHT] = (float) valueAnimator.getAnimatedValue(); } }); animator[TOP].addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator valueAnimator) { button[TOP] = (float) valueAnimator.getAnimatedValue(); } }); animator[BOTTOM].addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator valueAnimator) { button[BOTTOM] = (float) valueAnimator.getAnimatedValue(); } }); animator[RADIUS].addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator valueAnimator) { button[RADIUS] = (float) valueAnimator.getAnimatedValue(); invalidate(); } }); animationDuration = getResources().getInteger(R.integer.animationDuration); animatorSet.setDuration(animationDuration); animatorSet.setInterpolator(DECELERATE_INTERPOLATOR); animatorSet.playTogether(animator); } private void setupMenuItems() { for (int i = 0; i < getChildCount(); i++) { getChildAt(i).setVisibility(showMenuItems ? VISIBLE : GONE); } } private void setupPaint() { paint = new Paint(); paint.setColor(backgroundColor); paint.setAntiAlias(true); } @Override protected void onAttachedToWindow() { super.onAttachedToWindow(); setupMenuItems(); } /** * Opens the menu if it's closed or close it if it's opened. */ public void toggle() { if (state == State.OPENED) close(); else open(); } /** * Open the menu. */ public void open() { state = State.OPENED; showIcons(true); animator[LEFT].setFloatValues(button[LEFT], 0); animator[RIGHT].setFloatValues(button[RIGHT], width); animator[RADIUS].setFloatValues(button[RADIUS], 0); animator[TOP].setFloatValues(button[TOP], 0); animator[BOTTOM].setFloatValues(button[BOTTOM], height); animatorSet.cancel(); animatorSet.start(); if (iconOpenedDrawable instanceof Animatable) { ((Animatable) iconOpenedDrawable).start(); } ViewGroup parentView = (ViewGroup) TapBarMenu.this.getParent(); this.animate() .y(menuAnchor == MENU_ANCHOR_BOTTOM ? parentView.getBottom() - height : 0) .setDuration(animationDuration) .setInterpolator(DECELERATE_INTERPOLATOR) .start(); } /** * Close the menu. */ public void close() { updateDimensions(width, height); state = State.CLOSED; showIcons(false); animator[LEFT].setFloatValues(0, button[LEFT]); animator[RIGHT].setFloatValues(width, button[RIGHT]); animator[RADIUS].setFloatValues(0, button[RADIUS]); animator[TOP].setFloatValues(0, button[TOP]); animator[BOTTOM].setFloatValues(height, button[BOTTOM]); animatorSet.cancel(); animatorSet.start(); if (iconClosedDrawable instanceof Animatable) { ((Animatable) iconClosedDrawable).start(); } this.animate() .y(yPosition) .setDuration(animationDuration) .setInterpolator(DECELERATE_INTERPOLATOR) .start(); } /** * @return True if menu is opened. False otherwise. */ public boolean isOpened() { return state == State.OPENED; } /** * Sets TapBarMenu's background color from given resource. * * @param colorResId Color resource id. For example: R.color.holo_blue_light */ public void setMenuBackgroundColor(int colorResId) { backgroundColor = ContextCompat.getColor(getContext(), colorResId); paint.setColor(backgroundColor); invalidate(); } /** * Set position of 'Open Menu' button. * * @param position One of: {@link #BUTTON_POSITION_CENTER}, {@link #BUTTON_POSITION_LEFT}, {@link #BUTTON_POSITION_RIGHT}. */ public void setButtonPosition(int position) { buttonPosition = position; invalidate(); } /** * Sets diameter of 'Open Menu' button. * * @param size Diameter in pixels. */ public void setButtonSize(int size) { buttonSize = size; invalidate(); } /** * Sets left margin for 'Open Menu' button. * * @param margin Left margin in pixels */ public void setButtonMarginLeft(int margin) { buttonMarginLeft = margin; } /** * Sets right margin for 'Open Menu' button. * * @param margin Right margin in pixels */ public void setButtonMarginRight(int margin) { buttonMarginRight = margin; } /** * Set anchor point of the menu. Can be either bottom or top. * * @param anchor One of: {@link #MENU_ANCHOR_BOTTOM}, {@link #MENU_ANCHOR_TOP}. */ public void setAnchor(int anchor) { menuAnchor = anchor; } /** * Sets the passed drawable as the drawable to be used in the open state. * * @param openDrawable The open state drawable */ public void setIconOpenDrawable(Drawable openDrawable) { this.iconOpenedDrawable = openDrawable; invalidate(); } /** * Sets the passed drawable as the drawable to be used in the closed state. * * @param closeDrawable The closed state drawable */ public void setIconCloseDrawable(Drawable closeDrawable) { this.iconClosedDrawable = closeDrawable; invalidate(); } /** * Sets the passed drawable as the drawable to be used in the open state. * * @param openDrawable The open state drawable */ public void setIconOpenedDrawable(Drawable openDrawable) { this.iconOpenedDrawable = openDrawable; invalidate(); } /** * Sets the passed drawable as the drawable to be used in the closed state. * * @param closeDrawable The closed state drawable */ public void setIconClosedDrawable(Drawable closeDrawable) { this.iconClosedDrawable = closeDrawable; invalidate(); } @Override public void setOnClickListener(OnClickListener listener) { onClickListener = listener; } @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); updateDimensions(w, h); yPosition = getY(); } @Override protected void onDraw(Canvas canvas) { canvas.drawPath(createRoundedRectPath(button[LEFT], button[TOP], button[RIGHT], button[BOTTOM], button[RADIUS], button[RADIUS], false), paint); if (state == State.CLOSED) { iconClosedDrawable.draw(canvas); } else { iconOpenedDrawable.draw(canvas); } } private void updateDimensions(float w, float h) { int ratio; width = w; height = h; button[RADIUS] = buttonSize; setButtonPosition(width); if (iconClosedDrawable instanceof Animatable) { ratio = 3; } else { ratio = 5; } float iconLeft = button[LEFT] + buttonSize / ratio; float iconTop = (height - buttonSize) / 2 + buttonSize / ratio; float iconRight = button[RIGHT] - buttonSize / ratio; float iconBottom = (height + buttonSize) / 2 - buttonSize / ratio; iconOpenedDrawable.setBounds((int) iconLeft, (int) iconTop, (int) iconRight, (int) iconBottom); iconClosedDrawable.setBounds((int) iconLeft, (int) iconTop, (int) iconRight, (int) iconBottom); } private void setButtonPosition(float width) { if (buttonPosition == BUTTON_POSITION_CENTER) { button[LEFT] = ((width / 2) - (buttonSize / 2)); } else if (buttonPosition == BUTTON_POSITION_LEFT) { button[LEFT] = 0; } else { button[LEFT] = width - buttonSize; } int padding = buttonMarginLeft - buttonMarginRight; button[LEFT] += padding; button[RIGHT] = button[LEFT] + buttonSize; button[TOP] = (height - buttonSize) / 2; button[BOTTOM] = (height + buttonSize) / 2; buttonLeftInitial = button[LEFT]; buttonRightInitial = button[RIGHT]; } private void showIcons(final boolean show) { for (int i = 0; i < getChildCount(); i++) { final View view = getChildAt(i); int translation = menuAnchor == MENU_ANCHOR_BOTTOM ? view.getHeight() : -view.getHeight(); if (show){ view.setTranslationY(Float.valueOf(translation)); }else { view.setTranslationY(0f); }// view.setTranslationY(show ? translation : 0f); view.setScaleX(show ? 0f : 1f); view.setScaleY(show ? 0f : 1f); view.setVisibility(VISIBLE); view.setAlpha(show ? 0f : 1f); view.animate() .scaleX(show ? 1f : 0f) .scaleY(show ? 1f : 0f) .translationY(0f) .alpha(show ? 1f : 0f) .setInterpolator(DECELERATE_INTERPOLATOR) .setDuration(show ? animationDuration / 2 : animationDuration / 3) .setStartDelay(show ? animationDuration / 3 : 0) .setListener(new AnimatorListenerAdapter() { @Override public void onAnimationEnd(Animator animation) { super.onAnimationEnd(animation); view.setVisibility(show ? VISIBLE : GONE); } }) .start(); } } private Path createRoundedRectPath(float left, float top, float right, float bottom, float rx, float ry, boolean conformToOriginalPost) { path.reset(); if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { return createRoundedRectPathApi21(path, left, top, right, bottom, rx, ry, conformToOriginalPost); } else { return createRoundedRectPathPreApi21(path, left, top, right, bottom, rx, ry, conformToOriginalPost); } } @TargetApi(Build.VERSION_CODES.LOLLIPOP) private Path createRoundedRectPathApi21(Path path, float left, float top, float right, float bottom, float rx, float ry, boolean conformToOriginalPost) { if (rx < 0) rx = 0; if (ry < 0) ry = 0; float width = right - left; float height = bottom - top; if (rx > width / 2) rx = width / 2; if (ry > height / 2) ry = height / 2; float widthMinusCorners = (width - (2 * rx)); float heightMinusCorners = (height - (2 * ry)); path.moveTo(right, top + ry); path.arcTo(right - 2 * rx, top, right, top + 2 * ry, 0, -90, false); path.rLineTo(-widthMinusCorners, 0); path.arcTo(left, top, left + 2 * rx, top + 2 * ry, 270, -90, false); path.rLineTo(0, heightMinusCorners); if (conformToOriginalPost) { path.rLineTo(0, ry); path.rLineTo(width, 0); path.rLineTo(0, -ry); } else { path.arcTo(left, bottom - 2 * ry, left + 2 * rx, bottom, 180, -90, false); path.rLineTo(widthMinusCorners, 0); path.arcTo(right - 2 * rx, bottom - 2 * ry, right, bottom, 90, -90, false); } path.rLineTo(0, -heightMinusCorners); path.close(); return path; } private Path createRoundedRectPathPreApi21(Path path, float left, float top, float right, float bottom, float rx, float ry, boolean conformToOriginalPost) { if (rx < 0) rx = 0; if (ry < 0) ry = 0; float width = right - left; float height = bottom - top; if (rx > width / 2) rx = width / 2; if (ry > height / 2) ry = height / 2; float widthMinusCorners = (width - (2 * rx)); float heightMinusCorners = (height - (2 * ry)); path.moveTo(right, top + ry); path.rQuadTo(0, -ry, -rx, -ry); path.rLineTo(-widthMinusCorners, 0); path.rQuadTo(-rx, 0, -rx, ry); path.rLineTo(0, heightMinusCorners); if (conformToOriginalPost) { path.rLineTo(0, ry); path.rLineTo(width, 0); path.rLineTo(0, -ry); } else { path.rQuadTo(0, ry, rx, ry); path.rLineTo(widthMinusCorners, 0); path.rQuadTo(rx, 0, rx, -ry); } path.rLineTo(0, -heightMinusCorners); path.close(); return path; } @Override public boolean onInterceptTouchEvent(MotionEvent event) { return (event.getX() > buttonLeftInitial && event.getX() < buttonRightInitial); } @Override public boolean onTouchEvent(@NonNull MotionEvent event) { if ((event.getX() > buttonLeftInitial && event.getX() < buttonRightInitial) && (event.getAction() == MotionEvent.ACTION_UP)) { if (onClickListener != null) { onClickListener.onClick(this); } } return true; } @Override protected void onDetachedFromWindow() { onDestroy(); super.onDetachedFromWindow(); } private void onDestroy() { iconOpenedDrawable = null; iconClosedDrawable = null; for (int i = 0; i < 5; i++) { animator[i] = null; } animator = null; button = null; onClickListener = null; }}

布局和代码与上面一致，module请下载：

链接：http://pan.baidu.com/s/1o8jlnpo

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。