Android 左右滚动Banner

清溪-南柯

于 2024-08-11 03:50:49 发布

阅读量31

点赞数

文章标签： android

实现 Android 左右滚动 Banner 的完整指南

在 Android 开发中，实现一个左右滚动的 Banner 是一个常见的需求，特别是在展示图片或广告时。本文将详细介绍实现“Android 左右滚动 Banner”的整个流程和代码示例。

流程概述

在开始编码之前，我们需要明确实现左右滚动 Banner 的基本步骤。以下是实现的整体流程：

步骤编号	步骤描述	备注
1	创建项目	使用 Android Studio 创建新项目
2	添加库依赖	使用 ViewPager 和 PagerAdapter
3	设计布局	使用 XML 设计 Banner 布局
4	实现 Adapter	创建自定义 Adapter 来加载数据
5	编写功能逻辑	在 MainActivity 中实现逻辑
6	测试和优化	放置 Banner 数据并运行应用

以下是整个流程的甘特图表示：

详细步骤

第一步：创建项目

在 Android Studio 中选择 “New Project”，然后选择 “Empty Activity”，为你的项目命名，如 “BannerExample”。

第二步：添加库依赖

打开 build.gradle 文件，添加以下依赖：

第三步：设计布局

创建一个布局文件 activity_main.xml，其中包含一个 ViewPager2。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

第四步：实现 Adapter

接下来，我们创建一个自定义的 Adapter。新建一个 Java 类 BannerAdapter。

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

public class BannerAdapter extends RecyclerView.Adapter<BannerAdapter.BannerViewHolder> {

    private int[] images; // 存放图片资源ID

    // 构造函数
    public BannerAdapter(int[] images) {
        this.images = images;
    }

    @NonNull
    @Override
    public BannerViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext())
                .inflate(R.layout.banner_item, parent, false); // 加载单个 Item 布局
        return new BannerViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull BannerViewHolder holder, int position) {
        holder.imageView.setImageResource(images[position]); // 设置图片资源
    }

    @Override
    public int getItemCount() {
        return images.length; // 返回图片数量
    }

    public static class BannerViewHolder extends RecyclerView.ViewHolder {
        ImageView imageView; // 定义 ImageView

        public BannerViewHolder(@NonNull View itemView) {
            super(itemView);
            imageView = itemView.findViewById(R.id.bannerImage); // 绑定 ImageView
        }
    }
}

第五步：编写功能逻辑

在 MainActivity.java 中设置 ViewPager2 和 Adapter。

import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager2.widget.ViewPager2;

public class MainActivity extends AppCompatActivity {

    ViewPager2 viewPager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        viewPager = findViewById(R.id.viewPager);
        int[] images = {R.drawable.image1, R.drawable.image2, R.drawable.image3}; // 假设有三张图片
        BannerAdapter adapter = new BannerAdapter(images);
        viewPager.setAdapter(adapter); // 设置 Adapter
    }
}

第六步：测试和优化

请确保你的 banner_item.xml 文件存在，内容如下：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/bannerImage"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scaleType="centerCrop"/>
</FrameLayout>

ER图表示

在项目中，通常用到的主要类和其关系如下：

erDiagram
    BANNER {
        int id
        string image_path
    }
    VIEWPAGER {
        int id
        string layout
        BANNER* --|> VIEWPAGER : displays
    }