android 卡片切换动效

原创

mob649e815a6b81 2023-07-19 13:41:50 ©著作权

文章标签 动效动画效果代码示例 文章分类 Android 移动开发

©著作权归作者所有：来自51CTO博客作者mob649e815a6b81的原创作品，请联系作者获取转载授权，否则将追究法律责任

Android 卡片切换动效

在移动应用程序中，卡片切换动效是一种常见且受欢迎的用户界面设计技术。通过使用动画和过渡效果，卡片切换动效可以为用户提供流畅且吸引人的界面交互体验。本文将介绍如何在 Android 应用程序中实现卡片切换动效，并给出相应的代码示例。

卡片切换动效实现原理

卡片切换动效通常使用 ViewPager2 和相关的动画效果来实现。ViewPager2 是 AndroidX 库中的一个组件，可以实现左右滑动切换不同的页面。为了实现卡片切换效果，我们可以通过以下步骤来实现：

创建一个 ViewPager2 对象，并将其添加到布局文件中。

<androidx.viewpager2.widget.ViewPager2
    android:id="@+id/viewPager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

创建一个 CardAdapter 类来管理卡片的数据和视图。

public class CardAdapter extends RecyclerView.Adapter<CardAdapter.CardViewHolder> {

    private List<Card> cards;

    public CardAdapter(List<Card> cards) {
        this.cards = cards;
    }

    @NonNull
    @Override
    public CardViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.card_item, parent, false);
        return new CardViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull CardViewHolder holder, int position) {
        Card card = cards.get(position);
        holder.bind(card);
    }

    @Override
    public int getItemCount() {
        return cards.size();
    }

    public class CardViewHolder extends RecyclerView.ViewHolder {

        private ImageView imageView;
        private TextView titleTextView;

        public CardViewHolder(@NonNull View itemView) {
            super(itemView);
            imageView = itemView.findViewById(R.id.cardImageView);
            titleTextView = itemView.findViewById(R.id.cardTitleTextView);
        }

        public void bind(Card card) {
            imageView.setImageResource(card.getImageResId());
            titleTextView.setText(card.getTitle());
        }
    }
}

在 Activity 或 Fragment 中，设置 ViewPager2 的 Adapter 和动画效果。

ViewPager2 viewPager = findViewById(R.id.viewPager);
CardAdapter adapter = new CardAdapter(cards);
viewPager.setAdapter(adapter);

CompositePageTransformer transformer = new CompositePageTransformer();
transformer.addTransformer(new MarginPageTransformer(16));
transformer.addTransformer(new ScaleInTransformer());
viewPager.setPageTransformer(transformer);

以上代码中，我们创建了一个 CardAdapter 对象，并将其设置为 ViewPager2 的 Adapter。然后，我们使用 CompositePageTransformer 为 ViewPager2 设置了两种动画效果：MarginPageTransformer 和 ScaleInTransformer。MarginPageTransformer 可以设置卡片之间的边距，而 ScaleInTransformer 可以设置卡片的缩放效果。