其他的不多说了!我们来看看效果吧
一、实现方式一:直接引入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); 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绘制底部导航栏的使用方式示例所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)