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

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

<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.ViewPagerandroid: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<>();@Overrideprotected 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.为添加一个适配器

public class looperpagerAdapter extends PagerAdapter {//集合来存储private List<Integer> mColors = new ArrayList<>();@NonNull@NotNull@Overridepublic 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;}@Overridepublic void destroyItem(@NonNull @NotNull ViewGroup container, int position, @NonNull @NotNull Object object) {container.removeView((View) object);}@Overridepublic int getCount() {if (mColors != null) {return mColors.size();}return 0;}@Overridepublic boolean isViewFromObject(View view, Object object) {return view == object;}public void setData(List<Integer> sColors) {this.mColors = sColors;}
}

适配器流程：

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

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

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

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

别的看注释，很详细了。

二、实现图片替换纯色 1.适配器里边做出改变

public class looperpagerAdapter extends PagerAdapter {//集合来存储private List<Integer> mPics = new ArrayList<>();@NonNull@NotNull@Overridepublic 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;}@Overridepublic void destroyItem(@NonNull @NotNull ViewGroup container, int position, @NonNull @NotNull Object object) {container.removeView((View) object);}@Overridepublic int getCount() {if (mPics != null) {return mPics.size();}return 0;}@Overridepublic 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);}@Overrideprotected 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;@Overrideprotected 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();}@Overridepublic void onAttachedToWindow() {super.onAttachedToWindow();//当绑定这个窗口时handler.post(mLooperTask);}@Overridepublic void onDetachedFromWindow() {super.onDetachedFromWindow();handler.removeCallbacks(mLooperTask);}private Runnable mLooperTask = new Runnable() {@Overridepublic 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);}
}

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

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

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

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

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

五、优化轮播图，实现手势控制是否自动轮播 1.首先创一个类使之继承

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);}@Overridepublic 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.设置一个方法，用来设置触碰事件的具体实现

 @Overridepublic 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文件下的标签替换为 刚才创建的类的

<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.MyViewPagerandroid: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() {@Overridepublic 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);}@Overridepublic 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.MyViewPagerandroid:id="@+id/content_pager"android:layout_width="match_parent"android:layout_height="200dp"tools:ignore="MissingClass,MissingConstraints" /><LinearLayoutandroid: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.覆写三个方法，用来实现指示点的监听事件

 @Overridepublic 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);}}}@Overridepublic 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;@Overrideprotected 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();}@Overridepublic void onAttachedToWindow() {super.onAttachedToWindow();//当绑定这个窗口时handler.post(mLooperTask);}@Overridepublic void onDetachedFromWindow() {super.onDetachedFromWindow();handler.removeCallbacks(mLooperTask);}private Runnable mLooperTask = new Runnable() {@Overridepublic 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);}}@Overridepublic void onPagerTouch(boolean isTouch) {mIsTouch = isTouch;}@Overridepublic void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}@Overridepublic 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);}}}@Overridepublic void onPageScrollStateChanged(int state) {}
}

对的详解 1.简介 ：

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

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

2.属性

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

   1，一个确定的值；2，MATCH_PARENT；3，WRAP_CONTENT。

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

 1、利用setMargins(left,top,right,bottom);2、利用MarginLayoutParams对象params方法单独设置.topMargin