Android Swiper组件实现

android 实现组件,组件名为 swiper,不需要考虑无限循环的情况
这个组件通常用于:

引导页面的滚动
广告轮播图

在 Android 中实现一个简单的 Swiper 组件,可以使用 ViewPager2 或者 RecyclerView 来实现。ViewPager2 是 Google 推荐的用于实现页面滑动的组件,它比旧版的 ViewPager 更加灵活和强大。

下面是一个基于 ViewPager2 的简单 Swiper 组件的实现,适用于引导页面滚动和广告轮播图等场景。

1. 添加依赖

首先,在 build.gradle 文件中添加 ViewPager2 的依赖:

dependencies {
    implementation 'androidx.viewpager2:viewpager2:1.0.0'
}

2. 创建布局文件

res/layout/activity_main.xml 中定义 ViewPager2 和指示器(可选)。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

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

    <!-- 指示器 -->
    <LinearLayout
        android:id="@+id/indicatorLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:orientation="horizontal"
        android:padding="8dp">
    </LinearLayout>

</LinearLayout>

3. 创建 Adapter

创建一个 PagerAdapter 来为 ViewPager2 提供数据。假设我们展示的是图片资源。

import android.content.Context;
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 SwiperAdapter extends RecyclerView.Adapter<SwiperAdapter.SwiperViewHolder> {

    private Context context;
    private int[] imageResources;

    public SwiperAdapter(Context context, int[] imageResources) {
        this.context = context;
        this.imageResources = imageResources;
    }

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

    @Override
    public void onBindViewHolder(@NonNull SwiperViewHolder holder, int position) {
        holder.imageView.setImageResource(imageResources[position]);
    }

    @Override
    public int getItemCount() {
        return imageResources.length;
    }

    static class SwiperViewHolder extends RecyclerView.ViewHolder {
        ImageView imageView;

        public SwiperViewHolder(@NonNull View itemView) {
            super(itemView);
            imageView = itemView.findViewById(R.id.imageView);
        }
    }
}

4. 创建 Item 布局

res/layout/item_swiper.xml 中定义每个页面的布局,这里我们只展示一张图片。

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

5. 在 Activity 中使用 ViewPager2

MainActivity.java 中设置 ViewPager2 和指示器。

import android.graphics.Color;
import android.os.Bundle;
import android.view.Gravity;
import android.view.View;
import android.widget.FrameLayout;
import android.widget.LinearLayout;

import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager2.widget.ViewPager2;

public class MainActivity extends AppCompatActivity {

    private ViewPager2 viewPager;
    private LinearLayout indicatorLayout;
    private int[] images = {R.drawable.image1, R.drawable.image2, R.drawable.image3};

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

        viewPager = findViewById(R.id.viewPager);
        indicatorLayout = findViewById(R.id.indicatorLayout);

        // 设置 Adapter
        SwiperAdapter adapter = new SwiperAdapter(this, images);
        viewPager.setAdapter(adapter);

        // 初始化指示器
        setupIndicators(images.length);

        // 监听页面变化,更新指示器
        viewPager.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {
            @Override
            public void onPageSelected(int position) {
                super.onPageSelected(position);
                updateIndicator(position);
            }
        });
    }

    private void setupIndicators(int count) {
        for (int i = 0; i < count; i++) {
            View view = new View(this);
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(20, 20);
            params.setMargins(8, 0, 8, 0);
            view.setLayoutParams(params);
            view.setBackgroundResource(R.drawable.indicator_unselected);
            indicatorLayout.addView(view);
        }
        // 默认选中第一个
        updateIndicator(0);
    }

    private void updateIndicator(int position) {
        for (int i = 0; i < indicatorLayout.getChildCount(); i++) {
            View view = indicatorLayout.getChildAt(i);
            if (i == position) {
                view.setBackgroundResource(R.drawable.indicator_selected);
            } else {
                view.setBackgroundResource(R.drawable.indicator_unselected);
            }
        }
    }
}

6. 创建指示器样式

res/drawable/indicator_selected.xmlres/drawable/indicator_unselected.xml 中定义指示器的样式。

indicator_selected.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#FF4081" />
    <size android:width="20dp" android:height="20dp" />
</shape>

indicator_unselected.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#CCCCCC" />
    <size android:width="20dp" android:height="20dp" />
</shape>

7. 运行效果

运行应用后,你将看到一个简单的 Swiper 组件,支持左右滑动,并且底部有指示器显示当前页面的位置。

总结

这个 Swiper 组件使用了 ViewPager2 来实现页面滑动功能,并通过自定义的 RecyclerView.Adapter 来加载图片资源。指示器部分通过动态添加 View 来实现,并根据页面的变化来更新指示器的状态。

你可以根据需求进一步扩展这个组件,例如添加自动轮播、点击事件等功能。