Android自定义弹出菜单+动画实现

最新推荐文章于 2024-05-07 09:50:13 发布
最新推荐文章于 2024-05-07 09:50:13 发布
阅读量1.6k 收藏 1
点赞数
分类专栏： Android 移动开发 文章标签： android 动画
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/crabisacoolboy/article/details/39638309
版权

看到网上一个Demo里面弹出菜单的动画效果很好看，自己就利用工作空余时间也写了一下。具体实现如下:

1 自定义一个显示Icon的ImageView,主要用来判断该ImageView是否需要放在父布局底部水平中心位置

   import android.content.Context;
import android.content.res.TypedArray;
import android.util.AttributeSet;
import android.widget.ImageView;


/**
 * Created by crab on 14-9-26.
 */
public class BottomCenterImageView extends ImageView {
    private boolean mLayoutParentBottomCenter=false;
    public BottomCenterImageView(Context context) {
        super(context);
    }


    public BottomCenterImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
        TypedArray a = context.getTheme().obtainStyledAttributes( attrs, R.styleable.HoriAnimationLayout,0, 0);
        mLayoutParentBottomCenter=a.getBoolean(R.styleable.HoriAnimationLayout_bottomCenter,false);
        a.recycle();
    }


    public BottomCenterImageView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        TypedArray a = context.obtainStyledAttributes(attrs,R.styleable.HoriAnimationLayout,defStyle,0);
        mLayoutParentBottomCenter=a.getBoolean(R.styleable.HoriAnimationLayout_bottomCenter,false);
        a.recycle();
    }
    public boolean isLayoutParentBottomCenter(){
        return mLayoutParentBottomCenter;
    }
}

2 建立一个容纳要显示ImageView的容器类

   import android.content.Context;
import android.util.AttributeSet;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.RotateAnimation;
import android.view.animation.TranslateAnimation;
import android.widget.LinearLayout;


/**
 * Created by crab on 14-9-26.
 */
public class HoriAnimationLayout extends LinearLayout{
    private int mTwoLineHeight=0;
    private int mOnewLineHeight=0;
    //是否有一个view放在该布局的底部水平中间位置
    private boolean mHasChildLayoutBottom=false;
    public static final int STATE_OPEN=0;
    public static final int STATE_CLOSE=1;
    private static final long ANIMATION_DURATION=500L;
    private int mState=STATE_CLOSE;
    public HoriAnimationLayout(Context context) {
        super(context);
        init(context);
    }


    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        BottomCenterImageView child=null;
        int count=getChildCount();
        for(int i=0;i<count;i++){
            child= (BottomCenterImageView) getChildAt(i);
            if(!child.isLayoutParentBottomCenter()){
                child.setVisibility(View.INVISIBLE);
            }else{
                child.setOnClickListener(new OnClickListener(){


                    @Override
                    public void onClick(View v) {
                        if(mState==STATE_CLOSE){
                            open();
                        }else{
                            close();
                        }
                    }
                });
            }
        }
    }


    public HoriAnimationLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }


    public HoriAnimationLayout(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init(context);
    }
    private void init(Context context){
        mOnewLineHeight=(int) getResources().getDimension(R.dimen.circle_icon_size);
        mTwoLineHeight=(int) getResources().getDimension(R.dimen.circle_anim_parent_height);
    }
    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        int childCount=getChildCount();
        if(childCount==0){
            throw new RuntimeException("请添加一个或者更多CircleAnimationImageView");
        }
        int gapCount=childCount-1;
        int gap=0;
        int leftOffset=0;
        BottomCenterImageView child=null;
        if(mHasChildLayoutBottom){
            gapCount=gapCount-1;
        }
        if(gapCount<=0){
            if(gapCount==-1){
                //只有一个并且需要直接布局到底部
                child= (BottomCenterImageView) getChildAt(0);
                child.layout((r-l)/2-child.getMeasuredWidth()/2,getMeasuredHeight()-child.getMeasuredHeight(),(r-l)/2+child.getMeasuredWidth()/2,getMeasuredHeight());
                return;
            }else if(gapCount==0){
                gap=(r-l)/2-mOnewLineHeight/2;
            }
        }else{
            gap=(r-l-(gapCount+1)*mOnewLineHeight)/gapCount;
        }
        for(int i=0;i<childCount;i++){
            child= (BottomCenterImageView) getChildAt(i);
            boolean isLayoutBottomCenter=child.isLayoutParentBottomCenter();
            if(isLayoutBottomCenter){
                child.layout((r-l)/2-child.getMeasuredWidth()/2,getMeasuredHeight()-child.getMeasuredHeight(),(r-l)/2+child.getMeasuredWidth()/2,getMeasuredHeight());
            }else{
                child.layout(leftOffset,0,leftOffset+child.getMeasuredWidth(),child.getMeasuredHeight());
                leftOffset=leftOffset+child.getMeasuredWidth()+gap;
            }
        }


    }


    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int width=MeasureSpec.getSize(widthMeasureSpec);
        int childCount=getChildCount();
        for(int i=0;i<childCount;i++){
            BottomCenterImageView child= (BottomCenterImageView) getChildAt(i);
            if(child.isLayoutParentBottomCenter()){
                mHasChildLayoutBottom=true;
            }
            int childMeasureSize=MeasureSpec.makeMeasureSpec(MeasureSpec.EXACTLY,mOnewLineHeight);
            child.measure(childMeasureSize,childMeasureSize);
        }
        int height=0;
        if(mHasChildLayoutBottom){
            height=mTwoLineHeight;
        }else{
            height=mOnewLineHeight;
        }
        setMeasuredDimension(width, height);
    }
    private void open(){
        if(mState==STATE_OPEN){
            return;
        }
        mState=STATE_OPEN;
        float dstX=getMeasuredWidth()/2-mOnewLineHeight/2;
        float dstY=getMeasuredHeight()-mOnewLineHeight;
        int childCount=getChildCount();
        Animation[] animations=new Animation[childCount];
        for(int i=0;i<childCount;i++) {
            final BottomCenterImageView child = (BottomCenterImageView) getChildAt(i);
            if(!child.isLayoutParentBottomCenter()) {
                float fromX = dstX - child.getLeft();
                float fromY = dstY - child.getTop();
                float toX = 0;
                float toY = 0;
                TranslateAnimation translateAnimation = new TranslateAnimation(Animation.ABSOLUTE, fromX, Animation.ABSOLUTE, toX,
                        Animation.ABSOLUTE, fromY, Animation.ABSOLUTE, toY);
                translateAnimation.setDuration(ANIMATION_DURATION);
                translateAnimation.setAnimationListener(new VisbleStateAniamtionListener(child, true));
                animations[i] = translateAnimation;
            }else{
                RotateAnimation rotateAnimation=new RotateAnimation(180,360,child.getWidth()/2,child.getHeight()/2);
                rotateAnimation.setDuration(ANIMATION_DURATION);
                rotateAnimation.setFillAfter(true);
                animations[i]=rotateAnimation;
            }
        }
        for(int i=0;i<childCount;i++){
            final BottomCenterImageView child = (BottomCenterImageView) getChildAt(i);
            child.startAnimation(animations[i]);
        }
    }
    private void close(){
        if(mState==STATE_CLOSE){
            return;
        }
        mState=STATE_CLOSE;
        float dstX=getMeasuredWidth()/2-mOnewLineHeight/2;
        float dstY=getMeasuredHeight()-mOnewLineHeight;
        int childCount=getChildCount();
        Animation[] animations=new Animation[childCount];
        for(int i=0;i<childCount;i++) {
            final BottomCenterImageView child = (BottomCenterImageView) getChildAt(i);
            if(!child.isLayoutParentBottomCenter()) {
                float fromX = 0;
                float fromY = 0;
                float toX = dstX - child.getLeft();
                float toY = dstY - child.getTop();
                TranslateAnimation translateAnimation = new TranslateAnimation(Animation.ABSOLUTE, fromX, Animation.ABSOLUTE, toX,
                        Animation.ABSOLUTE, fromY, Animation.ABSOLUTE, toY);
                translateAnimation.setDuration(ANIMATION_DURATION);
                translateAnimation.setAnimationListener(new VisbleStateAniamtionListener(child, false));
                animations[i] = translateAnimation;
            }else{
                RotateAnimation rotateAnimation=new RotateAnimation(0,180,child.getWidth()/2,child.getHeight()/2);
                rotateAnimation.setDuration(ANIMATION_DURATION);
                rotateAnimation.setFillAfter(true);
                animations[i]=rotateAnimation;
            }
        }
        for(int i=0;i<childCount;i++){
            final BottomCenterImageView child = (BottomCenterImageView) getChildAt(i);
            child.startAnimation(animations[i]);
        }
    }
    private class VisbleStateAniamtionListener implements Animation.AnimationListener{
        private View mView;
        private boolean mVisible;
        public VisbleStateAniamtionListener(View view,boolean visible){
            mView=view;
            mVisible=visible;
        }
        @Override
        public void onAnimationStart(Animation animation) {
            if(mView.getVisibility()!=View.VISIBLE){
                mView.setVisibility(View.VISIBLE);
            }
        }


        @Override
        public void onAnimationEnd(Animation animation) {
            if(mVisible){
                mView.setVisibility(View.VISIBLE);
            }else{
                mView.setVisibility(View.INVISIBLE);
            }
        }


        @Override
        public void onAnimationRepeat(Animation animation) {


        }
    }


}

3定义布局文件，用到的图片资源可以自己去网上下载，最好用园行图片

   <RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:customApp="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:background="#FFCCCCCC"
    android:layout_height="match_parent">


    <com.example.crab.mycameratest.HoriAnimationLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        >
        <com.example.crab.mycameratest.BottomCenterImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/pg_thrid_facebook_click"
            />
        <com.example.crab.mycameratest.BottomCenterImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/pg_thrid_kupan_click"
            />
        <com.example.crab.mycameratest.BottomCenterImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/pg_thrid_sina_click"
            />
        <com.example.crab.mycameratest.BottomCenterImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/pg_thrid_twitter_click"
            />
        <com.example.crab.mycameratest.BottomCenterImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/pg_thrid_qq_click"
            />
        <com.example.crab.mycameratest.BottomCenterImageView
            android:id="@+id/animationTrigger"
            customApp:bottomCenter="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/pg_thrid_qq_click"
            />
       </com.example.crab.mycameratest.HoriAnimationLayout>


</RelativeLayout>

4定义自己需要用到的一些自定义资源与样式

   dimens.xml

   <resources>
    <dimen name="circle_icon_size">40dp</dimen>
    <dimen name="circle_anim_parent_height">128dp</dimen>
</resources>

   attrs.xml

    <declare-styleable name="HoriAnimationLayout">
        <attr name="bottomCenter" format="boolean"/>
    </declare-styleable>

螃蟹变异了
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android自定义动态弹出菜单按钮（横向和弧形两种）
08-03
较简单的实现，有不足和实现的不到位的还请指教 属性动画处两种实现方式，注释中都有说明 ...学习和实现主要参考博客 http://blog.csdn.net/harvic880925?viewmode=contents 中自定义控件三部曲之动画篇的前面几篇
Android自定义PopWindow实现QQ、微信弹出菜单效果
01-20
本文将详细介绍如何自定义PopWindow来实现类似QQ和微信中的弹出菜单效果。 首先，理解PopWindow的基本概念。PopWindow是Android系统提供的一种轻量级窗口，它可以在Activity之上显示一个视图，通常用于快速操作或...
【Android UI设计与开发】第18期：滑动菜单栏（三）SlidingMenu动画效果的实现
热门推荐
我是一条寻水的鱼
07-07 2万+
经过上一篇文章的学习，相信大家对开源项目SlidingMenu的用法已经有了一个非常深入的了解，那么这一章博 主就来教大家滑动菜单栏滑动时动画效果的实现。博主这里用了三个不同动画效果的基础示例来教大家如何去实现，等 大家弄懂了之后完全可以做到举一反三，去实现更多不同的动画效果，让你的应用软件给用户带来眼前一亮的效果。     一、SlidingMenu动画效果示例一   1、示例一效
Android实现炫酷的底部菜单栏切换动画效果
y280903468的博客
11-12 3563
最近按照需求做了一个花里胡哨的首页底部菜单切换，我不会做GIF，传两张图看一下效果 点击不同的位置，底部Bar的凹陷位置会移动，同事选中的图标会上升，非选中的图标会下降，同时，图标的背景圆圈会做东升西落的动画效果。 实现原理：这个效果其实可以分解为三个动画，1、底部凹陷位置的移动。2、图标的上升与下降。3、背景圆圈的东升西落 图标上升下降的代码和背景运动的代码如下 priv...
2024年安卓最全Android 自定义加载动画Dialog弹窗(1)，2024年最新android自定义控件面试
最新发布
2401_84545618的博客
05-07 960
UI这块知识是现今使用者最多的。当年火爆一时的Android入门培训，学会这小块知识就能随便找到不错的工作了。不过很显然现在远远不够了，拒绝无休止的CV,亲自去项目实战，读源码，研究原理吧！
动画——Android弹出菜单动画
戒不掉的码瘾
11-14 1066
最近项目需要在底部按钮点击弹出菜单，再点击菜单隐藏，如下图： 先上代码：XML文件 直接将图片叠在一起，点击图片在最上面：&lt;RelativeLayout xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot; xmlns:tools=&quot;http://schemas.android.com/tools&quot; a
android一个弹出菜单的动画(一)
baidu_nod的专栏
08-06 2767
先上效果图: 先写Layout文件: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_paren
Android开发——菜单(Menu)-——上下文菜单（ContextMenu）、 弹出菜单（PopupMenu）
weixin_42857359的博客
03-13 4014
上下文菜单（ContextMenu） 长按某个view不放，就会在屏幕中间弹出ContextMenu。 一个Activity中间只可能有一个OptionMenu，但一个Activity中间有多个View，这些View都可以根据自己的需求设置自己的ContextMenu。 ...
android 弹出菜单动画,Android 二级动画弹出菜单-Fun言
weixin_34316162的博客
05-25 90
菜单资源文件如下：xmlns:android=”http://schemas.android.com/apk/res/android”android:id=”@+id/menubrowser”android:orientation=”vertical”android:layout_width=”fill_parent”android:layout_height=”fill_parent”andro...
Android中自定义PopupWindow实现弹出框并带有动画效果
09-01
在Android开发中，PopupWindow是一个非常实用的工具，它能够帮助开发者实现各种形式的弹出窗口，例如下拉菜单、提示信息等。本教程将详细讲解如何在Android中自定义PopupWindow来创建一个带有动画效果的弹出框。 ...
Android自定义底部弹出框ButtomDialog
08-25
Android自定义底部弹出框ButtomDialog需要使用动画来实现弹出和关闭的效果。首先，在res文件夹下创建一个anim文件夹，并在其中创建两个文件：slide_in_bottom.xml和slide_out_bottom.xml。slide_in_bottom.xml文件...
自定义菜单收起展开动画
05-05
自定义菜单收起展开动画
Android之用PopupWindow实现弹出菜单.rar
07-05
Android之用PopupWindow实现弹出菜单.rar
Android使用CoordinatorLayout实现底部弹出菜单
08-26
使用 CoordinatorLayout 实现底部弹出菜单的优点是可以提供更加灵活的交互方式，例如可以根据需要自定义菜单的弹出高度和动画效果。同时，CoordinatorLayout 还提供了多种其他的交互方式，例如滑动、折叠等，可以...
Android 点击按钮弹出菜单
julicliy的博客
03-22 6323
Android 点击按钮弹出菜单 效果图： 1、创建menu文件夹，新建main.xml文件 <?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android"> <item androi...
Android 弹框菜单系列之PopupMenu
shenggaofei的博客
06-07 6034
菜单之前是用户点击系统的菜单键才展示出来的，后来这个键渐渐被移除，菜单变成了点击任意的view都可以展示。菜单非为3种： 　　1.Options menu and action bar 选项菜单和操作栏 　　2.Context menu and contextual action mode上下文菜单和上下文动作模式 　　3.Popup menu弹出式菜单 一.效果图： 二.快速实现： 1.主函数代码： import android.annotation.SuppressLi...
Menu菜单、PopupWindow窗口和Animation动画
weixin_45697390的博客
02-21 468
Menu菜单和PopupWindow窗口常用菜单系统菜单上下文菜单弹出菜单实现方法XML布局文件Java代码 常用菜单 菜单 显示菜单 事件监听 系统菜单 onCreateOptionsMenu onOptionsItemSelected 上下文菜单 AlertDialog.Builder() setSingleChoiceItems() 系统菜单 首先需要在res下面创...
仿微信-界面动画(4)-PopupWindow/PopupMenue
CL
08-18 1031
PopupMenu代表弹出式菜单，它会在指定组件上弹出PopupMenu，默认情况下，PopupMenu会显示在该组件的下方或上方。PopupMenu可增加多个菜单项，并可为菜单项增加子菜单。使用PopupMenu创建菜单的步骤非常简单，只要如下步骤即可。调用new PopupMenu(Context context,View anchor)创建下拉菜单，anchor代表要激发该弹出菜单的组件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值