iis服务器助手广告广告
返回顶部
首页 > 资讯 > 移动开发 >Android列表实现单选点击缩放动画效果
  • 744
分享到

Android列表实现单选点击缩放动画效果

2024-04-02 19:04:59 744人浏览 泡泡鱼
摘要

recycleView单选的时候,一般的处理就是选中的item做个stroke或者字体颜色改变,但要提升用户体验就得加点动画了。也就是点击选中的元素放大,同时之前选中的item缩小,

recycleView单选的时候,一般的处理就是选中的item做个stroke或者字体颜色改变,但要提升用户体验就得加点动画了。也就是点击选中的元素放大,同时之前选中的item缩小,不便截gif图,只能放一张静态图,大家脑补脑补~

图中的CheckBox,代码实现其实是imageview,它的选中、取消也是有动画的,不是控制visible,而是通过改变图片透明度来实现选中取消的。

具体看代码:


import Android.animation.ObjectAnimator;
import android.animation.PropertyValuesHolder;
import android.view.View;
import android.widget.ImageView;
import com.chad.library.adapter.base.viewholder.BaseViewHolder;
import com.xxx.Wallpaper;
import org.jetbrains.annotations.NotNull;
import java.util.List;


public class ManageHomeBgAdapter extends BaseSingleSelectAdapter<Wallpaper> {

    public ManageHomeBgAdapter(List<Wallpaper> mList) {
        super(R.layout.m_item_manage_home_bg, mList, false);
    }

    @Override
    protected void convert(@NotNull BaseViewHolder baseViewHolder, Wallpaper wallInfo) {
        super.convert(baseViewHolder, wallInfo);
        baseViewHolder.setText(R.id.m_tv_item_home_bg_name, wallInfo.name);

        ImageView ivBg = baseViewHolder.getView(R.id.m_iv_item_home_bg);
        GlideUtil.loadRound(getContext(), wallInfo.url, ivBg, PixelUtil.dp2px(8));

        View iv = baseViewHolder.getView(R.id.m_iv_item_home_bg_sel);
        int position = baseViewHolder.getAdapterPosition();
        if (wallInfo.isSelected) {
            //选中动画
            PropertyValuesHolder vb1 = PropertyValuesHolder.ofFloat(View.SCALE_X, 0.5f, 1.3f, 1f);
            PropertyValuesHolder vb2 = PropertyValuesHolder.ofFloat(View.SCALE_Y, 0.5f, 1.3f, 1f);
            PropertyValuesHolder vb3 = PropertyValuesHolder.ofFloat(View.ALPHA, 0.5f, 1f);
            ObjectAnimator objectAnimator = ObjectAnimator.ofPropertyValuesHolder(iv, vb1, vb2, vb3);
            objectAnimator.setDuration(duration).start();

            //背景选中放大动画(理论上可以使用ItemAnimator实现,但我们这里只针对图片缩放,而不是整个item,所以采用view的动画实现)
            ivBg.animate().scaleX(1f).scaleY(1f)
                    .withEndAction(() -> ivBg.animate().scaleX(1.05f).scaleY(1.05f).setDuration(duration))
                    .setDuration(0).start();
        } else {
            //此处只对上次选择的item执行动画
            if (getLastSelIndex() >= 0 && getLastSelIndex() == position) {
                ObjectAnimator.ofFloat(iv, "alpha", 1f, 0).setDuration(duration).start();

                //背景取消选中动画
                ivBg.animate().scaleX(1.05f).scaleY(1.05f)
                        .withEndAction(() -> ivBg.animate().scaleX(1f).scaleY(1f).setDuration(duration))
                        .setDuration(0).start();
            } else {
                iv.setAlpha(0);
            }
        }
    }
}

对应的item布局,注意,最好用padding来实现item之间的间隙,不然放大后可能由于空间不足导致itemView显示不全:


<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:paddingBottom="7dp"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/m_iv_item_home_bg"
        android:layout_width="match_parent"
        android:layout_height="@dimen/item_wallpaper_h"
        android:scaleType="centerCrop"
        android:adjustViewBounds="true"
        android:paddingLeft="7dp"
        android:paddingRight="7dp"
        android:paddingTop="7dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:src="@mipmap/ic_mine_bg" />

    <ImageView
        android:id="@+id/m_iv_item_home_bg_sel"
        android:layout_width="15dp"
        android:layout_height="15dp"
        android:layout_marginBottom="10dp"
        android:alpha="0"
        app:layout_constraintBottom_toBottomOf="@+id/m_iv_item_home_bg"
        app:layout_constraintEnd_toEndOf="@+id/m_iv_item_home_bg"
        app:layout_constraintStart_toStartOf="@+id/m_iv_item_home_bg"
        android:src="@mipmap/ic_select_bg" />

    <TextView
        android:id="@+id/m_tv_item_home_bg_name"
        style="@style/text_second_s"
        android:paddingTop="9dp"
        app:layout_constraintEnd_toEndOf="@+id/m_iv_item_home_bg"
        app:layout_constraintStart_toStartOf="@+id/m_iv_item_home_bg"
        app:layout_constraintTop_toBottomOf="@+id/m_iv_item_home_bg"
        tools:text="壁纸1" />


</androidx.constraintlayout.widget.ConstraintLayout>

父类是我做的封装,方便其他地方用到,大家酌情参考一下:


import android.annotation.SuppressLint;
import android.view.View;
import androidx.annotation.NonNull;
import androidx.core.view.ViewCompat;

import com.chad.library.adapter.base.BaseQuickAdapter;
import com.chad.library.adapter.base.viewholder.BaseViewHolder;
import com.xxx.SelectableItem;

import org.jetbrains.annotations.Nullable;

import java.util.List;


public abstract class BaseSingleSelectAdapter<T extends SelectableItem> extends BaseQuickAdapter<T, BaseViewHolder> {
    private int selIndex = -1, lastSelIndex = -1;
    
    protected int duration = 300;
    
    protected float factor = 0.05f;

    private boolean showItemAni = true;

    public BaseSingleSelectAdapter(int layoutResId) {
        super(layoutResId);
    }

    public BaseSingleSelectAdapter(int layoutResId, @Nullable List<T> data) {
        super(layoutResId, data);
    }

    public BaseSingleSelectAdapter(int layoutResId, @Nullable List<T> data, boolean showItemAni) {
        super(layoutResId, data);
        this.showItemAni = showItemAni;
    }

    
    @Override
    protected void convert(@NonNull BaseViewHolder baseViewHolder, T t) {
        //选中动画
        if (t.isSelected) {
            selIndex = baseViewHolder.getAdapterPosition();
            if (showItemAni) scaleUp(baseViewHolder.itemView);
        } else {
            if (showItemAni) scaleDown(baseViewHolder.itemView);
        }
    }

    public @Nullable
    T selectOne(int index) {
        if (selIndex != index) {//不处理点击已选中的情况
            if (selIndex >= 0 && selIndex < getItemCount())
                getItem(selIndex).isSelected = false;
            if (index >= 0 && index < getItemCount()) {
                getItem(index).isSelected = true;
            }

            notifyItemChanged(selIndex);
            notifyItemChanged(index);

            lastSelIndex = selIndex;
            selIndex = index;
        }
        return getSelectItem();
    }

    @SuppressLint("NotifyDataSetChanged")
    public void selectNone() {
        if (selIndex >= 0 && selIndex < getData().size()) {
            getData().get(selIndex).isSelected = false;
            notifyItemChanged(selIndex);
        }else {
            for (T datum : getData()) {
                datum.isSelected = false;
            }
            notifyDataSetChanged();
        }
        selIndex = -1;
    }

    public @Nullable
    T getSelectItem() {
        return selIndex >= 0 && selIndex < getItemCount() ? getItem(selIndex) : null;
    }

    public int getSelectIndex() {
        return selIndex;
    }

    protected int getLastSelIndex() {
        return lastSelIndex;
    }

    protected void scaleUp(View view) {
        ViewCompat.animate(view)
                .setDuration(duration)
                .scaleX(1f + factor)
                .scaleY(1f + factor)
                .start();
    }

    protected void scaleDown(View view) {
        ViewCompat.animate(view)
                .setDuration(duration)
                .scaleX(1f)
                .scaleY(1f)
                .start();
    }
}

对应的选中通用实体类,用你自己的类继承SelectableItem即可:



public class SelectableItem {
    
    public boolean isSelected;

}

以上的BaseSingleSelectAdapter通用于列表单选场景,使用的时候继承即可,根据自己的业务来吧。

文中代码依赖第三方库:BaseRecyclerViewAdapterHelper,如果你用不到,用我贴的核心代码也能实现动效~

好啦,简单的选中动画就实现完成了,建议大家项目里面多用动画来提升用户体验。

总结

到此这篇关于Android列表实现单选点击缩放动画效果的文章就介绍到这了,更多相关Android列表点击缩放内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: Android列表实现单选点击缩放动画效果

本文链接: https://www.lsjlt.com/news/131721.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Android列表实现单选点击缩放动画效果
    recycleView单选的时候,一般的处理就是选中的item做个stroke或者字体颜色改变,但要提升用户体验就得加点动画了。也就是点击选中的元素放大,同时之前选中的item缩小,...
    99+
    2024-04-02
  • Android列表怎么实现单选点击缩放动画效果
    本篇内容介绍了“Android列表怎么实现单选点击缩放动画效果”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!recycleView单选的时候...
    99+
    2023-06-20
  • Android实现点击缩略图放大效果
    本文实例为大家分享了Android点击缩略图放大效果的具体代码,供大家参考,具体内容如下import android.animation.Animator;import android.animation.AnimatorListenerA...
    99+
    2023-05-30
    android 缩略图 放大
  • Android实现缩放动画
    本文实例为大家分享了Android实现缩放动画的具体代码,供大家参考,具体内容如下 核心方法 public void startAnimation(Animation animati...
    99+
    2024-04-02
  • css3怎么实现缩放动画效果
    这篇文章主要介绍css3怎么实现缩放动画效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完! css中,可利用“@keyframes”规则、animatio...
    99+
    2024-04-02
  • CSS3代码怎么实现点击放大动画效果
    本篇内容主要讲解“CSS3代码怎么实现点击放大动画效果”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“CSS3代码怎么实现点击放大动画效果”吧!代码如下<!DOCTYPE html...
    99+
    2023-07-04
  • Flutter Animation实现缩放和滑动动画效果
    本文实例为大家分享了Flutter Animation实现缩放和滑动动画的具体代码,供大家参考,具体内容如下 Animation对象是Flutter动画库中的一个核心类,它生成指导动...
    99+
    2024-04-02
  • Android基于reclyview实现列表回弹动画效果
    reclyview实现列表回弹动画效果,供大家参考,具体内容如下 1.reclyview列表布局文件 <com.example.demo1.ReboundLayout     ...
    99+
    2024-04-02
  • 小程序实现点击动画效果
    本文实例为大家分享了小程序实现点击动画效果的具体代码,供大家参考,具体内容如下 今天接到一个小程序优化需求,要实现一个点击的动画效果 考虑实现方法,使用css的transition...
    99+
    2024-04-02
  • Flutter怎么实现不同缩放动画效果
    本篇内容主要讲解“Flutter怎么实现不同缩放动画效果”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Flutter怎么实现不同缩放动画效果”吧!需求背景组件缩放可以向着一个方向进行缩放,放大列...
    99+
    2023-07-02
  • Flutter实现不同缩放动画效果详解
    目录需求背景可缩放组件介绍ScaleTransitionSizeTransitionAnimatedSizeAnimatedBuilder小结需求背景 组件缩放可以向着一个方向进行缩...
    99+
    2024-04-02
  • css3如何实现旋转缩放动画效果
    这篇文章主要介绍了css3如何实现旋转缩放动画效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。 方法:1、利用...
    99+
    2024-04-02
  • Android怎么实现点赞动画效果
    今天小编给大家分享一下Android怎么实现点赞动画效果的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。一、前言对接下来功能实...
    99+
    2023-06-29
  • Android如何实现带动画效果的可点击展开TextView
    这篇文章将为大家详细讲解有关Android如何实现带动画效果的可点击展开TextView,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。效果图: 收起(默认)效果:点击展开后的效果:源码: 布局:<x...
    99+
    2023-05-30
    android textview
  • CSS动画:如何实现元素的抖动缩放效果
    CSS动画:如何实现元素的抖动缩放效果在网页设计中,元素的动画效果能够增加用户的视觉体验,为平淡的页面增添活力。而CSS动画正是实现这些效果的强大工具之一。本文将详细介绍如何使用CSS动画实现元素的抖动缩放效果,并提供具体的代码示例供读者参...
    99+
    2023-11-21
    动画 CSS 缩放
  • CSS+jQuery实现的一个放大缩小动画效果
    今天帮朋友写了一些代码,自己觉得写着写着,好几个版本以后,有点满意,于是就贴出来。 都是定死了的。因为需求就只有4个元素。如果是要用CSS的class来处理,那就需要用到CSS3动画...
    99+
    2022-11-15
    jQuery+CSS 放大缩小动画
  • JetpackCompose实现列表和动画效果详解
    目录创建一个列表消息卡片可交互的动画效果创建一个列表消息卡片 到目前为止,我们只有一个消息的卡片,看上去有点单调,所以让我们来改善它,让它拥有多条信息。我们需要创建一个能够显示多条消...
    99+
    2024-04-02
  • 通过JetpackCompose实现双击点赞动画效果
    目录实现步骤先红色画个爱心点击事件加动画完整代码效果图实现步骤 先红色画个爱心 Icon( Icons.Filled.Favorite, "爱心", Modi...
    99+
    2024-04-02
  • Android实现列表元素动态效果
    目录前言AnimatedList 介绍元素的插入和删除使用 GlobalKey 获取 AnimatedListState总结前言 列表是移动应用中用得最多的组件了,我们也会经常对列表...
    99+
    2024-04-02
  • Android实现手势滑动和简单动画效果
    一、手势滑动Activity都具有响应触摸事件,也就是说只要触摸Activity,他都会回调一个onTouchEvent()方法。但是在这个方法里无法处理事件,需要配合使用手势识别器(GestureDetector)中的方法onTouchE...
    99+
    2023-05-31
    android 手势滑动 roi
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作