安卓实现轮播图

安卓实现轮播图 一、实现纯颜色作为背景的轮播图 1.首先在主活动的xml文件下面添加一个ViewPager

<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 (mTouchListener != null) {
                    mTouchListener.onPagerTouch(false);
                }
                break;
        }
        return super.onTouchEvent(ev);
    }

4.将主活动xml文件下viewpager的标签替换为 刚才创建的类的Reference

<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">

    <com.example.carousellearning.MyViewPager
        android:id="@+id/content_pager"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        tools:ignore="MissingClass,MissingConstraints" />

androidx.constraintlayout.widget.ConstraintLayout>

5.在java文件下修改代码

private MyViewPager viewPager;

 private Runnable mLooperTask = new Runnable() {
        @Override
        public void run() {
            if (!mIsTouch) {
                //切换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);

        viewPager.SetOnViewPagerTouchListener(this);
    }


    @Override
    public void onPagerTouch(boolean isTouch) {
        mIsTouch = isTouch;
    }

六、给无线轮播图添加指示点 1.创建两个指示点的图标

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <size android:height="10px"
        android:width="10px"/>

    <solid android:color="#9F9B9B"/>

shape>

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <size android:height="40px"
        android:width="40px"/>

    <solid android:color="#F30707"/>

shape>

2.修改主活动xml的代码

<RelativeLayout 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="200dp"
    tools:context=".MainActivity">

    <com.example.carousellearning.MyViewPager
        android:id="@+id/content_pager"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        tools:ignore="MissingClass,MissingConstraints" />

    <LinearLayout
        android:id="@+id/points_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="horizontal"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="40px">

      LinearLayout>

RelativeLayout>

3.在java文件下添加一个新的方法，用来添加指示点

//添加小圆点，根据图片的个数来进行添加
    private void insertPoint() {
        for (int i = 0; i < sPics.size(); i++) {
            View point = new View(this);
            LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(40, 40);
            point.setBackground(getResources().getDrawable(R.drawable.shape_point_nornal));
            layoutParams.leftMargin = 20;
            point.setLayoutParams(layoutParams);
            pointContainer.addView(point);
        }
    }

4.覆写三个方法，用来实现指示点的监听事件

 @Override
    public void onPageSelected(int position) {
        //这个方法的调用就是viewpager停下来以后选中的位置
        int realPosition;
        if (mLooperPagerAdapter.getDataResultSizse() != 0) {
            realPosition = position % mLooperPagerAdapter.getDataResultSizse();
        } else {
            realPosition = 0;
        }
        setSelectedPoint(realPosition);
    }

    private void setSelectedPoint(int realPosition) {
        for (int i = 0; i < pointContainer.getChildCount(); i++) {
            View childAt = pointContainer.getChildAt(i);
            if (i != realPosition) {
                //若当前图片为选中，则就是白色
                childAt.setBackgroundResource(R.drawable.shape_point_nornal);
            } else {
                //当前图片位置和该图片的真实位置相同，就是选中了，就表现出红色
                childAt.setBackgroundResource(R.drawable.shape_point_selected);
            }
        }
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }

5.java文件下全部代码

public class MainActivity extends AppCompatActivity implements MyViewPager.OnViewPagerTouchListener, ViewPager.OnPageChangeListener {

    private MyViewPager 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;
    private boolean mIsTouch = false;
    private LinearLayout pointContainer;

    @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() {
            if (!mIsTouch) {
                //切换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.addOnPageChangeListener(this);

        //给viewpager添加适配器
        viewPager.setAdapter(mLooperPagerAdapter);

        viewPager.SetOnViewPagerTouchListener(this);
        pointContainer = findViewById(R.id.points_container);
        //根据图片个数添加点的个数
        insertPoint();
        //设置初始位置
        /**
         * 如果为true，就是要做动画，false就是不做动画
         */
        viewPager.setCurrentItem(mLooperPagerAdapter.getDataResultSizse() * 100, false);
    }

    //添加小圆点，根据图片的个数来进行添加
    private void insertPoint() {
        for (int i = 0; i < sPics.size(); i++) {
            View point = new View(this);
            LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(40, 40);
            point.setBackground(getResources().getDrawable(R.drawable.shape_point_nornal));
            layoutParams.leftMargin = 20;
            point.setLayoutParams(layoutParams);
            pointContainer.addView(point);
        }
    }


    @Override
    public void onPagerTouch(boolean isTouch) {
        mIsTouch = isTouch;
    }


    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageSelected(int position) {
        //这个方法的调用就是viewpager停下来以后选中的位置
        int realPosition;
        if (mLooperPagerAdapter.getDataResultSizse() != 0) {
            realPosition = position % mLooperPagerAdapter.getDataResultSizse();
        } else {
            realPosition = 0;
        }
        setSelectedPoint(realPosition);
    }

    private void setSelectedPoint(int realPosition) {
        for (int i = 0; i < pointContainer.getChildCount(); i++) {
            View childAt = pointContainer.getChildAt(i);
            if (i != realPosition) {
                //若当前图片为选中，则就是白色
                childAt.setBackgroundResource(R.drawable.shape_point_nornal);
            } else {
                //当前图片位置和该图片的真实位置相同，就是选中了，就表现出红色
                childAt.setBackgroundResource(R.drawable.shape_point_selected);
            }
        }
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }
}

对LayoutParams的详解 1.简介 ：

LayoutParams继承于Android.View.ViewGroup.LayoutParams相当于一个Layout的信息包，它封装了Layout的位置、高、宽等信息。

通俗地讲(这里借鉴了网上的一种说法)，LayoutParams类是用于child view(子视图)向parent view(父视图)传达自己的意愿的一个东西(孩子想变成什么样向其父亲说明)。举个栗子，子视图和父视图分别可以简单理解成一个LinearLayout 和该LinearLayout里边的一个 TextView 的关系， TextView 就算LinearLayout的子视图 child view。需要注意的是LayoutParams只是ViewGroup的一个内部类这里边这个也就是ViewGroup里边这个LayoutParams类是base class基类实际上每个不同的ViewGroup都有自己的LayoutParams子类。比如AbsListView.LayoutParams, AbsoluteLayout.LayoutParams, Gallery.LayoutParams, ViewGroup.MarginLayoutParams, WindowManager.LayoutParams等。

2.属性

ViewGroup.LayoutParams类只能简单的设置高height以及宽width两个基本的属性，宽和高都可以设置成三种值：

   1，一个确定的值；

   2，MATCH_PARENT；

   3，WRAP_CONTENT。

ViewGroup.MarginLayoutParams类是ViewGroup.LayoutParams的子类，顾名思义，它只能设置child View的margin属性信息。

 1、利用setMargins(left,top,right,bottom);

 2、利用MarginLayoutParams对象params方法单独设置.topMargin