安卓实现轮播图

Posted 2021-07-21 春招进大厂的梦想家

安卓实现轮播图

一、实现纯颜色作为背景的轮播图

1.首先在主活动的xml文件下面添加一个ViewPager

<?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.viewpager.widget.ViewPager
        android:id="@+id/content_pager"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        tools:ignore="MissingConstraints" />

</androidx.constraintlayout.widget.ConstraintLayout>

2.在主活动java文件下编写代码

package com.example.carousellearning;

import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager.widget.ViewPager;

import android.graphics.Color;
import android.os.Bundle;

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

public class MainActivity extends AppCompatActivity {

    private ViewPager viewPager;
    private looperpagerAdapter mLooperPagerAdapter;
    private static List<Integer> sColors = new ArrayList<>();

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

        initView();
        //准备一个random类来提供随机颜色
        Random random = new Random();

        //准备数据
        for (int i = 0; i < 5; i++) {
            sColors.add(Color.argb(random.nextInt(255),random.nextInt(255),random.nextInt(255),random.nextInt(255)));
        }

        //在适配器类中添加一个方法来设置数据
        mLooperPagerAdapter.setData(sColors);
        mLooperPagerAdapter.notifyDataSetChanged();
    }

    //绑定控件
    private void initView() {
        //首先找到这个控件
        viewPager = this.findViewById(R.id.content_pager);
        //设置一个数据适配器
        mLooperPagerAdapter = new looperpagerAdapter();
        //给viewpager添加适配器
        viewPager.setAdapter(mLooperPagerAdapter);
    }
}

代码已经很详细了，自己好好看注释

3.为ViewPager添加一个适配器

public class looperpagerAdapter extends PagerAdapter {

    //集合来存储
    private List<Integer> mColors = new ArrayList<>();

    @NonNull
    @NotNull
    @Override
    public Object instantiateItem(@NonNull @NotNull ViewGroup container, int position) {
        //设置一个imageview来充当载体
        ImageView imageView = new ImageView(container.getContext());
        //设置背景颜色
        imageView.setBackgroundColor(mColors.get(position));
        //设置完成后，把图片添加到容器里边
        container.addView(imageView);
        return imageView;
    }

    @Override
    public void destroyItem(@NonNull @NotNull ViewGroup container, int position, @NonNull @NotNull Object object) {
        container.removeView((View) object);
    }

    @Override
    public int getCount() {
        if (mColors != null) {
            return mColors.size();
        }
        return 0;
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }

    public void setData(List<Integer> sColors) {
        this.mColors = sColors;
    }
}

适配器流程：

1.首先创建一个类使之继承PagerAdapter；

2.实现其两个默认方法；

3.在覆写instantiateItem（）和destroyItem（）方法，一个初始化、一个摧毁；

4.instantiateItem（）里边设置一个imageview来作为载体，设置完成后把图片添加到容器里;

别的看注释，很详细了。

二、实现图片替换纯色

1.适配器里边做出改变

public class looperpagerAdapter extends PagerAdapter {

    //集合来存储
    private List<Integer> mPics = new ArrayList<>();

    @NonNull
    @NotNull
    @Override
    public Object instantiateItem(@NonNull @NotNull ViewGroup container, int position) {
        //设置一个imageview来充当载体
        ImageView imageView = new ImageView(container.getContext());
//        //设置背景颜色
//        imageView.setBackgroundColor(mColors.get(position));

        //设置图片
        imageView.setImageResource(mPics.get(position));

        //设置完成后，把图片添加到容器里边
        container.addView(imageView);
        return imageView;
    }

    @Override
    public void destroyItem(@NonNull @NotNull ViewGroup container, int position, @NonNull @NotNull Object object) {
        container.removeView((View) object);
    }

    @Override
    public int getCount() {
        if (mPics != null) {
            return mPics.size();
        }
        return 0;
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }

    public void setData(List<Integer> sColors) {
        this.mPics = sColors;
    }
}

2.在java文件中改变代码

public class MainActivity extends AppCompatActivity {

    private ViewPager viewPager;
    private looperpagerAdapter mLooperPagerAdapter;
    private static List<Integer> sPics = new ArrayList<>();

    static{
        sPics.add(R.mipmap.one);
        sPics.add(R.mipmap.two);
        sPics.add(R.mipmap.three);
        sPics.add(R.mipmap.four);
        sPics.add(R.mipmap.five);
    }

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

        initView();


//        //准备一个random类来提供随机颜色
//        Random random = new Random();
//
//        //准备数据
//        for (int i = 0; i < 5; i++) {
//            sPics.add(Color.argb(random.nextInt(255),random.nextInt(255),random.nextInt(255),random.nextInt(255)));
//        }

//        //在适配器类中添加一个方法来设置数据
//        mLooperPagerAdapter.setData(sPics);
//        mLooperPagerAdapter.notifyDataSetChanged();
    }

    //绑定控件
    private void initView() {
        //首先找到这个控件
        viewPager = this.findViewById(R.id.content_pager);
        //设置一个数据适配器
        mLooperPagerAdapter = new looperpagerAdapter();
        mLooperPagerAdapter.setData(sPics);
        //给viewpager添加适配器
        viewPager.setAdapter(mLooperPagerAdapter);
    }
}

设置一个静态代码块来往集合里边添加图片

三、实现轮播图的无限轮播

1.在适配器里边更改代码

public Object instantiateItem(@NonNull @NotNull ViewGroup container, int position) {
        //能够实现无限轮播
        int realPosition = position % mPics.size();

        //设置一个imageview来充当载体
        ImageView imageView = new ImageView(container.getContext());
//        //设置背景颜色
//        imageView.setBackgroundColor(mColors.get(position));

        //设置图片
        imageView.setImageResource(mPics.get(realPosition));

        //设置完成后，把图片添加到容器里边
        container.addView(imageView);
        return imageView;
    }

2.在适配器中添加一个方法，用来获得轮播图的长度

 public int getDataResultSizse(){
        if (mPics != null) {
            return mPics.size();
        }
        return 0;
    }

3.在java文件中更改代码

//绑定控件
    private void initView() {
        //首先找到这个控件
        viewPager = this.findViewById(R.id.content_pager);
        //设置一个数据适配器
        mLooperPagerAdapter = new looperpagerAdapter();
        mLooperPagerAdapter.setData(sPics);
        //给viewpager添加适配器
        viewPager.setAdapter(mLooperPagerAdapter);

        //设置初始位置
        /**
         * 如果为true，就是要做动画，false就是不做动画
         */
        viewPager.setCurrentItem(mLooperPagerAdapter.getDataResultSizse() * 100, false);
    }

四、实现轮播图的自动轮播

1.java文件下更改代码

public class MainActivity extends AppCompatActivity {

    private ViewPager viewPager;
    private looperpagerAdapter mLooperPagerAdapter;
    private static List<Integer> sPics = new ArrayList<>();

    static {
        sPics.add(R.mipmap.one);
        sPics.add(R.mipmap.two);
        sPics.add(R.mipmap.three);
        sPics.add(R.mipmap.four);
        sPics.add(R.mipmap.five);
    }

    private Handler handler;

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

        initView();


//        //准备一个random类来提供随机颜色
//        Random random = new Random();
//
//        //准备数据
//        for (int i = 0; i < 5; i++) {
//            sPics.add(Color.argb(random.nextInt(255),random.nextInt(255),random.nextInt(255),random.nextInt(255)));
//        }

//        //在适配器类中添加一个方法来设置数据
//        mLooperPagerAdapter.setData(sPics);
//        mLooperPagerAdapter.notifyDataSetChanged();


        handler = new Handler();
    }

    @Override
    public void onAttachedToWindow() {
        super.onAttachedToWindow();
        //当绑定这个窗口时
        handler.post(mLooperTask);
    }

    @Override
    public void onDetachedFromWindow() {
        super.onDetachedFromWindow();
        handler.removeCallbacks(mLooperTask);
    }

    private Runnable mLooperTask = new Runnable() {
        @Override
        public void run() {
            //切换viewpager里面的图片到下一个
            int currentItem = viewPager.getCurrentItem();
            /**
             * 这里要注意一下，++必须放在前面
             * 先进行自增运算，在进行赋值。
             * 布尔值设置为true表示是自动切换时有滑动效果，设置为false时没有滑动效果。
             */
            viewPager.setCurrentItem(++currentItem,true);
            //设置时间
            handler.postDelayed(this,2000);
        }
    };

    //绑定控件
    private void initView() {
        //首先找到这个控件
        viewPager = this.findViewById(R.id.content_pager);
        //设置一个数据适配器
        mLooperPagerAdapter = new looperpagerAdapter();
        mLooperPagerAdapter.setData(sPics);
        //给viewpager添加适配器
        viewPager.setAdapter(mLooperPagerAdapter);

        //设置初始位置
        /**
         * 如果为true，就是要做动画，false就是不做动画
         */
        viewPager.setCurrentItem(mLooperPagerAdapter.getDataResultSizse() * 100, false);
    }
}

首先实现一个Handler，来实现消息的传递;

覆写public void onAttachedToWindow()方法，表示绑定窗口时进行的操作;

覆写public void onDetachedFromWindow()，表示解除绑定窗口时进行的操作.

再来一个Runnable表示图片的切换和切换时间的设置.

具体代码的表示什么意思在注释里边已经很明确了，自己看注释就好

五、优化轮播图，实现手势控制是否自动轮播

1.首先创一个类使之继承ViewPager

public class MyViewPager extends ViewPager {

    private OnViewPagerTouchListener mTouchListener = null;

    public MyViewPager(@NonNull @NotNull Context context) {
        super(context);
    }

    public MyViewPager(@NonNull @NotNull Context context, @Nullable @org.jetbrains.annotations.Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        switch (ev.getAction()) {
            case MotionEvent.ACTION_DOWN:
                if (mTouchListener != null) {
                    mTouchListener.onPagerTouch(true);
                }
                break;
            case MotionEvent.ACTION_CANCEL:
            case MotionEvent.ACTION_UP:
                if (mTouchListener != null) {
                    mTouchListener.onPagerTouch(false);
                }
                break;
        }
        return super.onTouchEvent(ev);
    }

    public void SetOnViewPagerTouchListener(OnViewPagerTouchListener listener){
        this.mTouchListener = listener;
    }

    //设置一个接口进行轮播图是否=被触碰的监听
    public interface OnViewPagerTouchListener{
        void onPagerTouch(boolean isTouch);
    }
}

2.里边设置一个接口，用来监听是否轮播图是否被触碰;在设置一个方法用来将接口转化为可调用的实例化方法；

public void SetOnViewPagerTouchListener(OnViewPagerTouchListener listener){
        this.mTouchListener = listener;
    }

    //设置一个接口进行轮播图是否被触碰的监听
    public interface OnViewPagerTouchListener{
        void onPagerTouch(boolean isTouch);
    }

3.设置一个方法，用来设置触碰事件的具体实现

 @Override
    public boolean onTouchEvent(MotionEvent ev) {
        switch (ev.getAction()) {
            case MotionEvent.ACTION_DOWN:
                if (mTouchListener != null) {
                    mTouchListener.onPagerTouch(true);
                }
                break;
            case MotionEvent.ACTION_CANCEL:
            case MotionEvent.ACTION_UP:
                if (mTou
以上是关于安卓实现轮播图的主要内容，如果未能解决你的问题，请参考以下文章
 
 安卓中如何设置轮播图——banner
 安卓中如何设置轮播图——banner
 安卓轮播图怎么让到最后一张的时候来
 安卓笔记——轮播图
 js原生 JavaScript轮播图渐变淡入淡出效果实现（附代码）
 JS 轮播图（无缝连接的轮播图实现，含代码供参考）