一步步构建 Android Carousel adapter

2023-12-23 14:22:26

Carousel 是一种在移动设备和平板电脑上显示内容的流行方式。它允许用户水平滚动一组项目，类似于旋转木马。在本文中，我们将演示如何使用 AndroidX ConstraintLayout 库中的 CarouselExperiments 项目构建一个简单的 Carousel。

先决条件

在开始之前，您需要确保已在开发环境中安装了以下软件：

Android Studio 4.2 或更高版本
Android SDK 30 或更高版本
Java 1.8 或更高版本

步骤 1：创建新项目

打开 Android Studio 并创建一个新的 Android 项目。
在 "新建项目" 对话框中，选择 "空活动" 模板。
为您的项目命名，然后单击 "下一步"。
选择 "API 30" 或更高版本作为目标 SDK 版本，然后单击 "下一步"。
选择 "无活动" 作为启动活动，然后单击 "完成"。

步骤 2：添加依赖项

在项目的 build.gradle 文件中添加以下依赖项：

dependencies {
    implementation 'androidx.constraintlayout:constraintlayout:2.1.0'
    implementation 'androidx.viewpager2:viewpager2:1.1.0-beta01'
    implementation 'com.tbuonomo.andrui:viewpagerdotsindicator:4.1.2'
}

步骤 3：创建布局文件

在项目的 res/layout 文件夹中创建一个新的布局文件，并将其命名为 activity_main.xml。将以下代码添加到文件中：

<?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:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toTopOf="@+id/dotIndicator"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <com.tbuonomo.andrui.viewpagerdotsindicator.DotsIndicator
        android:id="@+id/dotIndicator"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:gravity="center"
        app:dotsColor="@color/colorPrimary"
        app:dotsCornerRadius="4dp"
        app:dotsSize="10dp"
        app:dotsSpacing="10dp"
        app:dotsStrokeColor="@color/colorPrimaryDark"
        app:dotsStrokeWidth="2dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:numDots="3" />

</androidx.constraintlayout.widget.ConstraintLayout>

步骤 4：创建适配器

在项目的 java/包中创建一个新的类，并将其命名为 CarouselAdapter.java。将以下代码添加到文件中：

package com.example.androidcarouseldemo;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

import java.util.List;

public class CarouselAdapter extends RecyclerView.Adapter<CarouselAdapter.CarouselViewHolder> {

    private Context context;
    private List<CarouselItem> carouselItems;

    public CarouselAdapter(Context context, List<CarouselItem> carouselItems) {
        this.context = context;
        this.carouselItems = carouselItems;
    }

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

    @Override
    public void onBindViewHolder(@NonNull CarouselViewHolder holder, int position) {
        CarouselItem carouselItem = carouselItems.get(position);
        holder.imageView.setImageResource(carouselItem.getImage());
        holder.textView.setText(carouselItem.getTitle());
    }

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

    public static class CarouselViewHolder extends RecyclerView.ViewHolder {

        private ImageView imageView;
        private TextView textView;

        public CarouselViewHolder(@NonNull View itemView) {
            super(itemView);

            imageView = itemView.findViewById(R.id.imageView);
            textView = itemView.findViewById(R.id.textView);
        }
    }
}

步骤 5：创建数据模型

在项目的 java/包中创建一个新的类，并将其命名为 CarouselItem.java。将以下代码添加到文件中：

package com.example.androidcarouseldemo;

public class CarouselItem {

    private int image;
    private String title;

    public CarouselItem(int image, String title) {
        this.image = image;
        this.title = title;
    }

    public int getImage() {
        return image;
    }

    public void setImage(int image) {
        this.image = image;
    }

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }
}

步骤 6：创建活动

在项目的 java/包中创建一个新的类，并将其命名为 MainActivity.java。将以下代码添加到文件中：

package com.example.androidcarouseldemo;

import android.os.Bundle;
import android.view.View;

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

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    private ViewPager2 viewPager;
    private DotsIndicator dotIndicator;
    private List<CarouselItem> carouselItems;

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

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

        carouselItems = new ArrayList<>();
        carouselItems.add(new CarouselItem(R.drawable.image1, "Title 1"));
        carouselItems.add(new CarouselItem(R.drawable.image2, "Title 2"));
        carouselItems.add(new CarouselItem(R.drawable.image3, "Title 3"));

        CarouselAdapter carouselAdapter = new CarouselAdapter(this, carouselItems);
        viewPager.setAdapter(carouselAdapter);
        dotIndicator.attachToViewPager2(viewPager);

        viewPager.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {
            @Override
            public void onPageSelected(int position) {
                super.onPageSelected(position);

                dotIndicator.setSelectedDot(position);
            }
        });
    }
}