优雅高效实现Android 广告机图片视频轮播

Android

2022-11-03 17:42:34

Android 广告机上的图片和视频轮播：实现无缝切换的完整解决方案

痛点洞察：困扰无处不在，流畅轮播遥不可及

作为一名 Android 开发人员，在广告机上实现图片和视频轮播时，你是否曾饱受以下困扰的折磨：

视频首帧黑屏，破坏视觉体验。
切换界面后视频播放中断，影响用户参与度。
动态更新数据后轮播卡死，让项目交付困难重重。

这些问题不仅会影响用户体验，更会让你的项目难以交付。难道就没有完美的解决方案了吗？

方案探索：迎难而上，打造完美轮播盛宴

经过不懈探索，我们为你带来了完美的解决方案！我们将原作者的方案进行优化，结合了 thread 定时器和 handler 方法，大大提高了可操作性，避免了动态切换数据后轮播卡死的情况。

技术揭秘：步步为营，实现顺畅轮播

1. 布局设计：ViewPager 掌控全局

首先，我们需要创建一个 ViewPager 作为轮播控件，它可以轻松实现图片和视频的轮播切换。

2. 适配器编写：赋予轮播生命

其次，我们需要编写一个 ViewPager 的适配器，它负责提供轮播的数据和视图。

3. 播放控件：视频播放的舞台

第三，我们需要创建一个播放控件，它可以播放视频并处理各种播放事件。

4. 数据更新：动态轮播随心所欲

最后，我们需要考虑如何动态更新轮播的数据，以便在需要时轻松改变轮播的内容。

实战演练：动辄代码，见证轮播魅力

步骤一：导入依赖

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

步骤二：布局设计

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

步骤三：适配器编写

class MyAdapter extends RecyclerView.Adapter<MyViewHolder> {

    private List<Item> items;

    public MyAdapter(List<Item> items) {
        this.items = items;
    }

    @Override
    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        // 根据 viewType 创建不同的 ViewHolder
        if (viewType == ITEM_TYPE_IMAGE) {
            View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_image, parent, false);
            return new ImageViewHolder(view);
        } else {
            View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_video, parent, false);
            return new VideoViewHolder(view);
        }
    }

    @Override
    public void onBindViewHolder(MyViewHolder holder, int position) {
        // 根据不同的 ViewHolder 类型绑定数据
        Item item = items.get(position);
        if (holder instanceof ImageViewHolder) {
            ((ImageViewHolder) holder).imageView.setImageResource(item.getImageResId());
        } else {
            ((VideoViewHolder) holder).videoView.setVideoPath(item.getVideoPath());
        }
    }

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

    @Override
    public int getItemViewType(int position) {
        // 根据不同的 Item 类型返回不同的 viewType
        Item item = items.get(position);
        if (item instanceof ImageItem) {
            return ITEM_TYPE_IMAGE;
        } else {
            return ITEM_TYPE_VIDEO;
        }
    }
}

步骤四：播放控件

public class VideoPlayer extends AppCompatActivity {

    private VideoView videoView;
    private Handler handler;
    private Runnable runnable;

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

        videoView = findViewById(R.id.videoView);
        handler = new Handler();

        // 设置视频播放路径
        videoView.setVideoPath("path/to/video");

        // 设置视频播放监听器
        videoView.setOnPreparedListener(new MediaPlayer.OnPreparedListener() {
            @Override
            public void onPrepared(MediaPlayer mp) {
                // 视频准备就绪，开始播放
                videoView.start();

                // 启动定时器，每隔 1 秒检查视频是否播放结束
                runnable = new Runnable() {
                    @Override
                    public void run() {
                        if (videoView.isPlaying()) {
                            // 视频正在播放，继续检查
                            handler.postDelayed(this, 1000);
                        } else {
                            // 视频播放结束，停止定时器
                            handler.removeCallbacks(this);

                            // 跳转到下一个视频
                            viewPager.setCurrentItem(viewPager.getCurrentItem() + 1);
                        }
                    }
                };
                handler.postDelayed(runnable, 1000);
            }
        });
    }
}

步骤五：数据更新

public class MainActivity extends AppCompatActivity {

    private ViewPager2 viewPager;
    private MyAdapter adapter;

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

        viewPager = findViewById(R.id.viewPager);

        // 创建轮播数据
        List<Item> items = new ArrayList<>();
        items.add(new ImageItem(R.drawable.image1));
        items.add(new VideoItem("path/to/video1"));
        items.add(new ImageItem(R.drawable.image2));
        items.add(new VideoItem("path/to/video2"));

        // 创建轮播适配器
        adapter = new MyAdapter(items);

        // 设置轮播适配器
        viewPager.setAdapter(adapter);

        // 设置轮播自动播放
        viewPager.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {
            @Override
            public void onPageSelected(int position) {
                super.onPageSelected(position);

                // 如果当前页面是视频，则自动播放
                if (adapter.getItemViewType(position) == ITEM_TYPE_VIDEO) {
                    ((VideoViewHolder) viewPager.findViewHolderForAdapterPosition(position)).videoView.start();
                }
            }
        });
    }
}

附录：实战演练示例代码

// Item 基类
public abstract class Item {
}

// 图片 Item
public class ImageItem extends Item {

    private int imageResId;

    public ImageItem(int imageResId) {
        this.imageResId = imageResId;
    }

    public int getImageResId() {
        return imageResId;
    }
}

// 视频 Item
public class VideoItem extends Item {

    private String videoPath;

    public VideoItem(String videoPath) {
        this.videoPath = videoPath;
    }

    public String getVideoPath() {
        return videoPath;
    }
}

// ImageViewHolder
public class ImageViewHolder extends RecyclerView.ViewHolder {

    public ImageView imageView;

    public ImageViewHolder(View itemView) {
        super(itemView);

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

// VideoViewHolder
public class VideoViewHolder extends RecyclerView.ViewHolder {

    public VideoView videoView;

    public VideoViewHolder(View itemView) {
        super(itemView);

        videoView = itemView.findViewById(R.id.videoView);
    }
}