其他的不多说了！我们来看看效果吧
一、实现方式一：直接引入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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
评论(0)