IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 移动开发 -> Android案例手册 - 实现下多个按钮展开收缩动画工具类 -> 正文阅读

[移动开发]Android案例手册 - 实现下多个按钮展开收缩动画工具类

往期文章分享

本文约7.2千字,新手阅读需要12分钟,复习需要3分钟收藏随时查阅不再迷路

👉关于作者

众所周知,人生是一个漫长的流程,不断克服困难,不断反思前进的过程。在这个过程中会产生很多对于人生的质疑和思考,于是我决定将自己的思考,经验和故事全部分享出来,以此寻找共鸣 !!!
专注于Android/Unity和各种游戏开发技巧,以及各种资源分享(网站、工具、素材、源码、游戏等)
有什么需要欢迎私我,交流群让学习不再孤单

在这里插入图片描述

👉前提

这是小空坚持写的Android新手向系列,欢迎品尝。

大佬(√)

新手(√√√)

👉实践过程

今日实现一个小效果,自定义ViewGroup实现展开动画。先看效果图

动画-多个按钮伸缩和立体效果1.gif

我们从效果图中可以看到,动画有两种,其一是从上到下形式的展开动画,其二是从下到上形式的收缩动画。而且从图中我们也可知使用的是Y轴的移动动画(如果想要x轴同样的实现原理)。而且仔细看,按钮三在最低层,按钮二在中间,按钮一在最上层,这也符合现实逻辑。

首先我们创建个自定义ViewGroup,然后添加对应布局。本来想着封装好一些,以外部添加View的形式来做的,想想还是算了,本身就是个小思路记录就不那么“复杂”了。

image.png

自定义ViewGroup的布局xml,添加进三个测试按钮

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_centerHorizontal="true"> 
    <Button
        android:id="@+id/viewBtn3"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="@drawable/plxz_btn_n"
        android:text="3"
        android:textSize="16dp" />
    <Button
        android:id="@+id/viewBtn2"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="@drawable/plxz_btn_n"
        android:text="2"
        android:textSize="16dp" />
    <Button
        android:id="@+id/viewBtn1"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="@drawable/plxz_btn_n"
        android:text="1"
        android:textSize="16dp" />
</RelativeLayout>

😜Java版FloatPullDownViewJava

/**
 * @author akitaka
 * @filename FloatPullDownView
 * @describe 具有动画下滑的view    可封装  暂时为普通的自定义
 * @email 960576866@qq.com
 */
public class FloatPullDownViewJava extends RelativeLayout implements View.OnClickListener {
    private Context mContext;
    private List<Button> viewList = new ArrayList<>();
    //间隔距离
    private int spaceNumber = 130;

    public FloatPullDownViewJava(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        mContext = context;
        View root = LayoutInflater.from(context).inflate(R.layout.view_pulldown, this);
        ViewPulldownBinding viewPulldownBinding = ViewPulldownBinding.bind(root);
        viewPulldownBinding.viewBtn3.setOnClickListener(this);
        viewPulldownBinding.viewBtn2.setOnClickListener(this);
        viewPulldownBinding.viewBtn1.setOnClickListener(this);
        viewList.add(viewPulldownBinding.viewBtn3);
        viewList.add(viewPulldownBinding.viewBtn2);
        viewList.add(viewPulldownBinding.viewBtn1);
    }
    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.viewBtn3:
                Toast.makeText(mContext, "点击了按钮3", Toast.LENGTH_SHORT).show();
                break;
            case R.id.viewBtn2:
                Toast.makeText(mContext, "点击了按钮2", Toast.LENGTH_SHORT).show();
                break;
            case R.id.viewBtn1:
                Toast.makeText(mContext, "点击了按钮1", Toast.LENGTH_SHORT).show();
                break;
            default:
                break;
        }
    }
    /**
     * 菜单展开动画
     */
    public void startAnim() {
        for (int i = 1; i < viewList.size(); i++) {
            ObjectAnimator anim = ObjectAnimator.ofFloat(viewList.get(i), "translationY", 0F, i * spaceNumber);
            anim.setDuration(300);   //持续时间
            anim.setStartDelay(100);  //延迟多少开始
            anim.setInterpolator(new BounceInterpolator());
            anim.start();
        }
    }
    /**
     * 关闭动画
     */
    public void closeAnim() {
        for (int i = 1; i < viewList.size(); i++) {
            ObjectAnimator anim = ObjectAnimator.ofFloat(viewList.get(i), "translationY", i * spaceNumber, 0F);
            anim.setDuration(300);
            anim.setStartDelay(100);
            anim.setInterpolator(new DecelerateInterpolator());
            anim.start();
        }
    }
}

从代码中可看出也就用到了ObjectAnimator的动画知识,对View进行translationY位移动画(如果是x轴则为translationX),设置好动画时间和延迟时间,开始动画是从0移动到阶梯指定位置,结束动画是从阶梯指定位置回归到0。

😜Kotlin版FloatPullDownViewKotlin

/**
 * Created by akitaka on 2022-06-23.
 * @author akitaka
 * @filename FloatPullDownView
 * @describe
 * @email 960576866@qq.com
 */
class FloatPullDownViewKotlin : RelativeLayout, View.OnClickListener {
    constructor(context: Context?) : this(context, null)
    constructor(context: Context?, attrs: AttributeSet?) : this(context, attrs, 0)
    constructor(context: Context?, attrs: AttributeSet?, defStyleAttr: Int) : super(context, attrs, defStyleAttr)
    private var mContext: Context? = null
    private val viewList: MutableList<Button> = ArrayList()
    //间隔距离
    private val spaceNumbew = 130
 
    init {
        mContext = context
        LayoutInflater.from(context).inflate(R.layout.view_pulldown, this)
        viewBtn3.setOnClickListener(this)
        viewBtn2.setOnClickListener(this)
        viewBtn1.setOnClickListener(this)
        viewList.add(viewBtn3)
        viewList.add(viewBtn2)
        viewList.add(viewBtn1)
    }
    override fun onClick(v: View) {
        when (v.id) {
            R.id.viewBtn3 -> Toast.makeText(mContext, "点击了按钮3", Toast.LENGTH_SHORT).show()
            R.id.viewBtn2 -> Toast.makeText(mContext, "点击了按钮2", Toast.LENGTH_SHORT).show()
            R.id.viewBtn1 -> Toast.makeText(mContext, "点击了按钮1", Toast.LENGTH_SHORT).show()
            else -> {}
        }
    }
    /**
     * 菜单展开动画
     */
    fun startAnim() {
        for (i in viewList.indices) {
            val anim = ObjectAnimator.ofFloat(viewList[i], "translationY", 0f, (i * spaceNumbew).toFloat())
            anim.duration = 300 //持续时间
            anim.startDelay = 100 //延迟多少开始
            anim.interpolator = BounceInterpolator()
            anim.start()
        }
    }
    /**
     * 关闭动画
     */
    fun closeAnim() {
        for (i in viewList.indices) {
            val anim = ObjectAnimator.ofFloat(viewList[i], "translationY", (i * spaceNumbew).toFloat(), 0f)
            anim.duration = 300
            anim.startDelay = 100
            anim.interpolator = DecelerateInterpolator()
            anim.start()
        }
    }
}

布局中直接使用即可

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <Button
        android:id="@+id/btnAnim"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="点击展开收缩动画" />
    <cn.appstudy.customView.FloatPullDownViewJava
        android:id="@+id/testFloatPullDownView"
        android:layout_width="match_parent"
        android:layout_marginTop="60dp"
        android:layout_height="match_parent" />
</RelativeLayout>
class TempActivity : AppCompatActivity() {
    var isOpenAnim: Boolean = false
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_test)
        btnAnim.setOnClickListener {
            if (isOpenAnim) {
                isOpenAnim = false
                testFloatPullDownView.closeAnim()
            } else {
                isOpenAnim = true
                testFloatPullDownView.startAnim()
            }
        }
}

试验一下,点击,效果如开头效果图一样。

👉其他

📢作者:小空和小芝中的小空
📢转载说明-务必注明来源:https://zhima.blog.csdn.net/
📢这位道友请留步??,我观你气度不凡,谈吐间隐隐有王者霸气💚,日后定有一番大作为📝!!!旁边有点赞👍收藏🌟今日传你,点了吧,未来你成功??,我分文不取,若不成功??,也好回来找我。

温馨提示点击下方卡片获取更多意想不到的资源。
空名先生

  移动开发 最新文章
Vue3装载axios和element-ui
android adb cmd
【xcode】Xcode常用快捷键与技巧
Android开发中的线程池使用
Java 和 Android 的 Base64
Android 测试文字编码格式
微信小程序支付
安卓权限记录
知乎之自动养号
【Android Jetpack】DataStore
上一篇文章      下一篇文章      查看所有文章
加:2022-06-29 19:12:58  更:2022-06-29 19:14:41 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年3日历 -2024/3/29 1:10:24-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码