▲ Android 自定义可收缩的菜单

▲ Android 自定义可收缩的菜单

先给各位大爷们看一下 我要实现的效果 =_=!
这里写图片描述

大家肯定会说这有什么难的?so easy 这不就是弄个渐变缩放动画 来显示固定好的 5个按钮嘛。

但是我这里要说的是通过计算来实现这个效果,很6的做法

实现原理
先根据圆的半径来定位每一张图片的位置

然后大家可以清晰的看出
X轴的移动距离 = radius sin(a)
Y轴的移动距离 = radius
cos(a) ————- radius 是半径,a是夹角的度数

这里写图片描述

实现过程
【1】先要确定这个a是多少度?
菜单的夹角和是90°,共有5个菜单项,相当于把90°分为4等份。一个夹角的度数大约是22° (90/4=22)
然后第一个菜单的夹角是0°,第二个菜单的夹角是22° 第三个菜单的夹角是(222)° ,第四个菜单的夹角是 (223)°,第五个菜单的夹角是(22*4)°

假设index表示当前位置的索引,从0开始,第一个索引就是0,第二个就是1… 所以当前菜单与Y轴之间的夹角就是(22*index)°

【2】如何计算对应的正弦值,余弦值?

这几个可以放心,因为Java中有个一Math类,该类有三个函数已经帮咱们处理好了

//对应弧度的正弦值
double sin (double d)

//对应弧度的余弦值
double cos (double d)

//对应弧度的正切值
double tan(double d)

**注意一点啊,这个三个函数输入的参数不是度数,而是度数对应的弧度值 **

啥叫弧度值? 如图↓ 画的太low =_=!
这里写图片描述

获取弧度有2中方法

第一种呢,Math类中Math.PI不仅代表圆周率π,也代表180°所对应的弧度值,所以Math.sin(Math.PI)就是180°的正弦值,/2就是90°的正玄值了。

第二种就是 根据度数来获取弧度值,Math中提供了一个函数

double toReadians(double angdeg)

代码实现

XML布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="10dp"
        android:layout_marginRight="10dp">

        <Button
            android:id="@+id/item1"
            android:layout_width="43dp"
            android:layout_height="43dp"
            android:layout_gravity="bottom|right"
            android:background="@mipmap/ice"
            android:visibility="gone" />
        <Button
            android:id="@+id/item2"
            android:layout_width="43dp"
            android:layout_height="43dp"
            android:layout_gravity="bottom|right"
            android:background="@mipmap/icb"
            android:visibility="gone" />

        <Button
            android:id="@+id/item3"
            android:layout_width="43dp"
            android:layout_height="43dp"
            android:layout_gravity="bottom|right"
            android:background="@mipmap/icc"
            android:visibility="gone" />

        <Button
            android:id="@+id/item4"
            android:layout_width="43dp"
            android:layout_height="43dp"
            android:layout_gravity="bottom|right"
            android:background="@mipmap/icd"
            android:visibility="gone" />

        <Button
            android:id="@+id/item5"
            android:layout_width="43dp"
            android:layout_height="43dp"
            android:layout_gravity="bottom|right"
            android:background="@mipmap/icf"
            android:visibility="gone" />


        <Button
            android:id="@+id/menu"
            android:layout_width="55dp"
            android:layout_height="55dp"
            android:layout_gravity="bottom|right"
            android:background="@mipmap/ica" />
    </FrameLayout>
</LinearLayout>

java代码 实现

  @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_animation_b);
        Button menu = findViewById(R.id.menu);
        item1 = findViewById(R.id.item1);
        item2 = findViewById(R.id.item2);
        item3 = findViewById(R.id.item3);
        item4 = findViewById(R.id.item4);
        item5 = findViewById(R.id.item5);
        menu.setOnClickListener(this);
        item1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this,"第一个条目",Toast.LENGTH_LONG).show();
            }
        });
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.menu:
                if (!mIsMenuOpen) {
                    mIsMenuOpen = true;
                    oPenMenu();
                } else {
                    mIsMenuOpen = false;
                    closeMenu();
                }
                break;
        }
    }

    private void oPenMenu() {
        doAnimateOpen(item1, 0, 5, 300);
        doAnimateOpen(item2, 1, 5, 300);
        doAnimateOpen(item3, 2, 5, 300);
        doAnimateOpen(item4, 3, 5, 300);
        doAnimateOpen(item5, 4, 5, 300);
    }

    private void doAnimateOpen(View view, int index, int total, int radius) {
        if (view.getVisibility() != View.VISIBLE) {
            view.setVisibility(View.VISIBLE);
        }
        double degree = Math.toRadians(90) / (total - 1) * index;
        int translationX = -(int) (radius * Math.sin(degree));
        int translationY = -(int) (radius * Math.cos(degree));
        AnimatorSet set = new AnimatorSet();
        //包括平移 缩放 透明 动画
        set.playTogether(ObjectAnimator.ofFloat(view, "translationX", 0, translationX),
                ObjectAnimator.ofFloat(view, "translationY", 0, translationY),
                ObjectAnimator.ofFloat(view, "scaleX", 0f, 1f),
                ObjectAnimator.ofFloat(view, "scaleY", 0f, 1f),
                ObjectAnimator.ofFloat(view, "alpha", 0f, 1f));
        set.setDuration(800).start();
    }

    private void closeMenu() {
        doAnimateClose(item1,0,5,300);
        doAnimateClose(item2,1,5,300);
        doAnimateClose(item3,2,5,300);
        doAnimateClose(item4,3,5,300);
        doAnimateClose(item5,4,5,300);
    }

    private void doAnimateClose(View view, int index, int total, int radius) {
        if (view.getVisibility()!=View.VISIBLE){
            view.setVisibility(View.VISIBLE);
        }
        double degree = Math.PI * index / ((total - 1) * 2);
        int translationX = -(int)(radius*Math.sin(degree));
        int translationY = -(int)(radius*Math.cos(degree));
        AnimatorSet set = new AnimatorSet();
        //包括平移 缩放 透明 动画
        set.playTogether(ObjectAnimator.ofFloat(view, "translationX", translationX,0),
                ObjectAnimator.ofFloat(view, "translationY", translationY,0),
                ObjectAnimator.ofFloat(view, "scaleX", 1f, 0.1f),
                ObjectAnimator.ofFloat(view, "scaleY", 1f, 0.1f),
                ObjectAnimator.ofFloat(view, "alpha", 1f, 0f));
        set.setDuration(800).start();
    }

最后是源码地址 https://download.csdn.net/download/macaopark/10658331

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/2844.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 简单查询plan

    简单查询plan

  • asp.net response.ContentType 下载文件的四种方法「建议收藏」

    asp.net response.ContentType 下载文件的四种方法「建议收藏」原址:http://www.cnblogs.com/xtgyiq/archive/2009/07/06/1517415.htmlprotectedvoidButton1_Click(objectsender,EventArgse)   { 1 protected void Button1_Click(object sender, Even

  • HTML&CSS实现经典登录注册页面

    HTML&CSS实现经典登录注册页面提要:本篇文章说的是一个简单的登录、注册页面用HTML结合css如何实现,包括两个页面的相互跳转,不包括对输入数据的处理,适合刚入门的新手小白。1、首先看一下最后的实现效果:首先是一个登录界面,点击“立即注册”会跳转到第二张图片,也就是注册界面,点击注册界面的“请登录”又会跳转回到第一个登录界面。2、下面看一下具体的代码实现(使用的开发工具是HBuilder,有非常强大的提示功能,…

  • php数据库常用函数

    php数据库常用函数

  • Linux内核移植_rom内核移植

    Linux内核移植_rom内核移植这两天在友善的tiny210的实验板上移植了linux内核,正好和大家分享,同时也算是做个记录吧!首先介绍一下开发环境吧,这个在做移植的时候还是挺重要的。主机linux:Fedora9 安装在VMware虚拟机上;开发板 :友善的tiny210,256M的FLASH;移植linux:LINUX-3.3.5;交叉编译环境:arm-linux-gcc-4.4.3这个是友善24

  • JAVA下载文件代码「建议收藏」

    JAVA下载文件代码「建议收藏」publicstaticHttpServletResponsedownload(Stringpath,HttpServletResponseresponse,StringfileName){try{//path是指欲下载的文件的路径。Filefile=newFile(path);…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号