android效果TapBarMenu绘制底部导航栏的使用方式示例

概述其他的不多说了！我们来看看效果吧     一、实现方式一：直接引入compile方式

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

     

一、实现方式一：直接引入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 ([email protected]) 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);  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],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) 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,conformToOriginalPost);  } } @TargetAPI(Build.VERSION_CODES.LolliPOP) private Path createRoundedRectPathAPI21(Path path,float left,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 + 2 * ry,-90,false);  path.rlineto(-wIDthMinusCorners,0);  path.arcTo(left,left + 2 * rx,270,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,180,false);   path.rlineto(wIDthMinusCorners,0);   path.arcTo(right - 2 * rx,90,false);  }  path.rlineto(0,-heightminusCorners);  path.close();  return path; } private Path createRoundedRectPathPreAPI21(Path path,top + ry);  path.rQuadTo(0,-ry,-rx,-ry);  path.rlineto(-wIDthMinusCorners,0);  path.rQuadTo(-rx,ry);  path.rlineto(0,-ry);  } else {   path.rQuadTo(0,ry);   path.rlineto(wIDthMinusCorners,0);   path.rQuadTo(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

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

总结

以上是内存溢出为你收集整理的android效果TapBarMenu绘制底部导航栏的使用方式示例全部内容，希望文章能够帮你解决android效果TapBarMenu绘制底部导航栏的使用方式示例所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。