前言：
本篇是 Android 使用ViewPager实现基本的翻页效果 的升级版 添加了底部点点点图片的切换效果
一、首先是布局页面activity_main.xml
<?xml version="1.0" encoding="utf-8"?> <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="match_parent" android:background="#DFDFDF" tools:context=".MainActivity"> <androidx.viewpager.widget.ViewPager android:id="@+id/viewPager" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_margin="5dp" android:background="@color/white" /> <!--在java代码中添加点点图片--> <LinearLayout android:id="@+id/viewGroup" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:layout_marginBottom="8dp" android:orientation="horizontal" /> </RelativeLayout>
接下来是各个子页面，进行左右切换显示不同的内容carousel_first.xml，其余子页面同理
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="第一个页面" android:textSize="20sp" /> </LinearLayout>
二、创建MyPagerAdapter类继承与PagerAdapter ，这个PagerAdapter主要是viewpager的适配器,可以实现控件的滑动效果。里面具体重写的方法可以查看这篇文章 传送门
public class MyPagerAdapter extends PagerAdapter { private ArrayList<View> viewArrayList = new ArrayList<>(); public MyPagerAdapter(ArrayList<View> viewArrayList) { this.viewArrayList = viewArrayList; } @Override public int getCount() { return viewArrayList.size(); } @Override public boolean isViewFromObject(@NonNull View view, @NonNull Object object) { return view == object; } @NonNull @Override public Object instantiateItem(@NonNull ViewGroup container, int position) { container.addView(viewArrayList.get(position),0); return viewArrayList.get(position); } @Override public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) { container.removeView(viewArrayList.get(position)); } }
三、MainActivity.java 代码 注释已经在代码中详细给出
public class MainActivity extends AppCompatActivity { private MyPagerAdapter myPagerAdapter; private ViewPager viewPager; private LinearLayout viewGroup; private ArrayList<View> viewArrayList = new ArrayList<>(); @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); viewPager = findViewById(R.id.viewPager); viewGroup = findViewById(R.id.viewGroup); @SuppressLint("InflateParams") View carousel_first = LayoutInflater.from(this).inflate(R.layout.carousel_first, null); @SuppressLint("InflateParams") View carousel_second = LayoutInflater.from(this).inflate(R.layout.carousel_second, null); @SuppressLint("InflateParams") View carousel_third = LayoutInflater.from(this).inflate(R.layout.carousel_third, null); viewArrayList.add(carousel_first); viewArrayList.add(carousel_second); viewArrayList.add(carousel_third); //将点点的图添加到视图ViewGroup中 for (int i = 0; i < viewArrayList.size(); i++) { ImageView imageView = new ImageView(this); //设置图片的宽高 为10像素 imageView.setLayoutParams(new ViewGroup.LayoutParams(10, 10)); if (i == 0) { //第一个为默认选中状态 imageView.setImageResource(R.drawable.icon_page_select); } else { imageView.setImageResource(R.drawable.icon_page_normal); } LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT); params.leftMargin = 5; params.rightMargin = 5; viewGroup.addView(imageView, params); } myPagerAdapter = new MyPagerAdapter(viewArrayList); //设置缓存页数 viewPager.setOffscreenPageLimit(viewArrayList.size() - 1); viewPager.setAdapter(myPagerAdapter); //添加页面更改监听器 viewPager.addOnPageChangeListener(onPageChangeListener); } private ViewPager.OnPageChangeListener onPageChangeListener = new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override public void onPageSelected(int position) { //当新页面选中时调用此方法，position 为新选中页面的位置索引 //在所选页面的时候,点点图片也要发生变化 setImageBackground(position); } @Override public void onPageScrollStateChanged(int state) { } }; /** * 改变点点点的切换效果 * * @param selectItem 当前选中的页面索引 */ private void setImageBackground(int selectItem) { for (int i = 0; i < viewArrayList.size(); i++) { ImageView imageView = (ImageView) viewGroup.getChildAt(i); imageView.setBackground(null); if (i == selectItem) { imageView.setImageResource(R.drawable.icon_page_select); } else { imageView.setImageResource(R.drawable.icon_page_normal); } } } }
效果如图所示：
做个记录方便以后翻阅，有任何问题都可以在评论区指出~
