效果图
一、activity_image_view_adapter.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/activity_main"
android:padding="16dp"
>
<androidx.viewpager.widget.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
/>
<!--添加布局，让划动View时知道是第几个-->
<LinearLayout
android:id="@+id/dot_layout"
android:layout_width="120dp"
android:layout_height="30dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="30dp"
android:orientation="horizontal"
android:gravity="center"
></LinearLayout>
</RelativeLayout>二、、ImageViewPagerAdapter.java
package com.example.viewpager;
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager.widget.PagerAdapter;
import androidx.viewpager.widget.ViewPager;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import java.util.ArrayList;
import java.util.List;
public class ImageViewPagerAdapter extends AppCompatActivity {
public static final int INIT_POSITION = 1;
private ViewPager mViewPager;
private List<View> mViews;
private ViewGroup mDotViewGroup;
//dot是ImageView，mDotViews存放dot视图
private List<ImageView> mDotViews=new ArrayList<>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_image_view_adapter);
mViewPager = (ViewPager)findViewById(R.id.view_pager);
mDotViewGroup=(ViewGroup)findViewById(R.id.dot_layout);
//初始化数据:将视图循环添加到List
mViews = new ArrayList<>();
/*第一种方法*/
// for (int index = 0; index < mLayoutIDs.length ; index++) {
// /* getLayoutInflater() 获取解析视图 */
// final View view = getLayoutInflater().inflate(mLayoutIDs[index], null);
// mViews.add(view);//快捷键：opt+cmd+V 提取参数
// }
/*第一种方法*/
/**
* 当划到某View时，它左边的左边的视图其实已经被销毁（destroyItem）
*/
// for (int index = 0; index < 100 ; index++) {
//
// ImageView imageView = new ImageView(this);
// imageView.setImageResource(R.drawable.orange_pic);//设置图片资源
//
// mViews.add(imageView);//添加到View数组中
// }
/*第二种方法*/
/**
* 在第一种方法的基础上，添加"知道划到第几个View"的功能
*/
for (int index = 0; index < mLayoutIDs.length ; index++) {
ImageView imageView = new ImageView(this);
imageView.setImageResource(R.drawable.orange_pic);//设置图片资源
mViews.add(imageView);//添加到View数组中
ImageView dot=new ImageView(this);
imageView.setImageResource(R.drawable.orange_pic);
dot.setMaxWidth(100);//因为R.drawable.orange_pic图片很大，所以需要限制它的宽度和高度
dot.setMaxHeight(100);
//设置宽高
LinearLayout.LayoutParams layoutParams=new LinearLayout.LayoutParams(80,80);
layoutParams.leftMargin=20;//相距20
//将布局参数设置进去
dot.setLayoutParams(layoutParams);
//设置不可用
dot.setEnabled(false);
//将dot加载进来
mDotViewGroup.addView(dot);
//把dot加载进来
mDotViews.add(dot);
}
//设置adapter
mViewPager.setAdapter(mPagerAdapter);//传入参数为PagerAdapter adpter,故在下面新建PagerAdapter
//假如视图总数只有4个，想让视图全部保存不销毁
mViewPager.setOffscreenPageLimit(4);//将某视图左边2个 右边2个全部保存起来
//设置当前页面为第1页
mViewPager.setCurrentItem(INIT_POSITION);
setDotViews(INIT_POSITION);
/**
* 当每一页被改变的时候，监听的回调
*/
mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
/**
* 滚动的时候
* @param position 当前唯一
* @param positionOffset 位置偏移
* @param positionOffsetPixels
*/
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
/**
* 被选中的页面
* @param position
*/
@Override
public void onPageSelected(int position) {
setDotViews(position);
}
/**
* 当滚动状态变化的时候
* @param state
*/
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
private void setDotViews(int position) {
for (int index = 0; index < mDotViews.size(); index++) {
mDotViews.get(index).setImageResource(position==index?R.drawable.ic_launcher_background:R.drawable.orange_pic);
}
}
PagerAdapter mPagerAdapter=new PagerAdapter() {
/**
* @return 返回要滑动的VIew的个数
*/
@Override
public int getCount() {
/*第一种方法*/
// return 100;
/*第二种方法*/
return 3;
}
/**
* 判断instantiateItem(ViewGroup, int)函数所返回来的Key
* 与一个页面视图是否是代表的同一个视图(即它俩是否是对应的，对应的表示同一个View)
* @param view
* @param object
* @return
*/
@Override
public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
return view==object;
}
/**
* 做了两件事，第一：将当前视图添加到container中，第二：返回当前（position的）View
* @param container 子项最外层布局
* @param position
* @return 当前视图
*/
@NonNull
@Override
public Object instantiateItem(@NonNull ViewGroup container, int position) {
/*
mViews.get(position) 找到当前视图
*/
View child=mViews.get(position);
container.addView(child);//把view加载进去了
return child;
}
/**
* 从当前container中删除指定位置（position）的View
* @param container
* @param position
* @param object
*/
@Override
public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
container.removeView(mViews.get(position));
}
};
}
三、代码解释
1、
public static final int INIT_POSITION = 1; private ViewPager mViewPager; private List<View> mViews; private ViewGroup mDotViewGroup; private List<ImageView> mDotViews=new ArrayList<>();
mViewPager：<androidx.viewpager.widget.ViewPager/>控件
mViews：View数组，装的是View（视图）
mDotViewGroup：UI组件是放置到一个专门的view容器中，这个View容器就是ViewGroup。ViewGroup的作用就是对添加进它的View组件进行布局。
mDotViews：ImageView数组,dot是ImageView，mDotViews存放dot视图
INIT_POSITION：初始页面
扫描二维码关注公众号，回复：
8974489 查看本文章
1.1
//设置当前页面为第1页
mViewPager.setCurrentItem(INIT_POSITION);
setDotViews(INIT_POSITION);
private void setDotViews(int position) {
for (int index = 0; index < mDotViews.size(); index++) {
mDotViews.get(index).setImageResource(position==index?R.drawable.ic_launcher_background:R.drawable.orange_pic);
}
}position==index?R.drawable.ic_launcher_background:R.drawable.orange_pic：
为了知道当前是划到第几个页面。当当前位置和index相等时，就加载R.drawable.ic_launcher_background，表示当前所在页面；否则，就加载R.drawable.orange_pic
2、初始化过程
2.1 初始化控件
mViewPager = (ViewPager)findViewById(R.id.view_pager);
mDotViewGroup=(ViewGroup)findViewById(R.id.dot_layout);
2.2 初始化数据:将视图循环添加到List
mViews = new ArrayList<>();
2.2.1 第一种方法初始化方法
//当划到某View时，它左边的左边的视图其实已经被销毁（destroyItem）
for (int index = 0; index < 100 ; index++) {
ImageView imageView = new ImageView(this);
imageView.setImageResource(R.drawable.orange_pic);//设置图片资源
mViews.add(imageView);//添加到View数组中
}【注意】
这里对应的PagerAdapter实现的getCount()方法应为：
/**
* @return 返回要滑动的VIew的个数
*/
@Override
public int getCount() {
/*第一种方法*/
return 100;
}2.2.2 第二种方法初始化方法：在第一种方法的基础上，添加"知道划到第几个View"的功能
for (int index = 0; index < 3 ; index++) {
ImageView imageView = new ImageView(this);//new一个ImageView，加载上下文环境
imageView.setImageResource(R.drawable.orange_pic);//设置图片资源
mViews.add(imageView);//添加到View数组中
ImageView dot=new ImageView(this);//再new一个ImageView
imageView.setImageResource(R.drawable.orange_pic);//设置的是dot的图片资源
dot.setMaxWidth(100);//因为R.drawable.orange_pic图片很大，所以需要限制它的宽度和高度
dot.setMaxHeight(100);
//设置dot的宽高
LinearLayout.LayoutParams layoutParams=new LinearLayout.LayoutParams(80,80);
layoutParams.leftMargin=20;//dot之间相距20
//将布局参数设置进去
dot.setLayoutParams(layoutParams);
//设置不可用？？？
dot.setEnabled(false);
//将dot加载进ViewGroup：对添加进它的View组件进行布局
mDotViewGroup.addView(dot);
//把dot加载进来ImageView数组
mDotViews.add(dot);
}
setEnabled：设置成true时，相当于激活了按钮，按钮的状态不再是死的，而是会对触摸或者点击产生反应，并且可以响应一些触发事件。 而设置成false时，按钮是灰色的，无论是否可点击,都无法响应任何触发事件
3、设置adapter
mViewPager.setAdapter(mPagerAdapter);
因为传入参数为PagerAdapter adpter,故在下面新建PagerAdapter
PagerAdapter mPagerAdapter=new PagerAdapter() {
/**
* @return 返回要滑动的VIew的个数
*/
@Override
public int getCount() {
/*第二种方法*/
return 3;
}
/**
* 判断instantiateItem(ViewGroup, int)函数所返回来的Key
* 与一个页面视图是否是代表的同一个视图(即它俩是否是对应的，对应的表示同一个View)
* @param view
* @param object
* @return
*/
@Override
public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
return view==object;
}
/**
* 做了两件事，第一：将当前视图添加到container中，第二：返回当前（position的）View
* @param container 子项最外层布局
* @param position
* @return 当前视图
*/
@NonNull
@Override
public Object instantiateItem(@NonNull ViewGroup container, int position) {
/*
mViews.get(position) 找到当前视图
*/
View child=mViews.get(position);
container.addView(child);//把view加载进去了
return child;
}
/**
* 从当前container中删除指定位置（position）的View
* @param container
* @param position
* @param object
*/
@Override
public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
container.removeView(mViews.get(position));
}
};4、 当每一页被改变的时候，监听的回调
mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
/**
* 滚动的时候
* @param position 当前唯一
* @param positionOffset 位置偏移
* @param positionOffsetPixels
*/
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
/**
* 被选中的页面
* @param position
*/
@Override
public void onPageSelected(int position) {
setDotViews(position);
}
/**
* 当滚动状态变化的时候
* @param state
*/
@Override
public void onPageScrollStateChanged(int state) {
}
}); private void setDotViews(int position) {
for (int index = 0; index < mDotViews.size(); index++) {
mDotViews.get(index).setImageResource(position==index?R.drawable.ic_launcher_background:R.drawable.orange_pic);
}
}