笔记|ViewPager引导页,底部圆点导航

项目列表


首先新建一个class文件,名字为 MyPageAdapter.java
package com.example.smartwee; import android.content.Context; import android.view.View; import android.view.ViewGroup; import androidx.annotation.NonNull; import androidx.viewpager.widget.PagerAdapter; import java.util.List; public class MyPageAdapter extends PagerAdapter { private List views; private Context context; MyPageAdapter(List views,Context context){ this.context=context; this.views=views; } @Override public int getCount() { return views.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(views.get(position)); return views.get(position); }@Override public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) { container.removeView(views.get(position)); }}

创建布局文件,welcome_0,welcome_1welcome_2,welcome_3,welcome_4,
一共五个,代表有五页的引导,可以增加或减少,不过Welcom.java中的代码也需要更改
布局代码都是一样的,这里贴一个,使用scaleType让图片按比例填充,多余的裁剪


新建一个Activity,名字为 Welcome

package com.example.smartwee; import androidx.appcompat.app.AppCompatActivity; import androidx.viewpager.widget.ViewPager; import android.os.Bundle; import android.view.LayoutInflater; import android.view.View; import android.widget.ImageView; import java.util.ArrayList; import java.util.List; public class Welcome extends AppCompatActivity {private ViewPager viewPager; private ImageView iv1,iv2,iv3,iv4,iv5; private int[] pics={R.layout.welcome_0,R.layout.welcome_1,R.layout.welcome_2,R.layout.welcome_3,R.layout.welcome_4}; private List views; private MyPageAdapter pageAdapter; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_welcome); //获取控件 iv1 =findViewById(R.id.iv_1); iv2 =findViewById(R.id.iv_2); iv3 =findViewById(R.id.iv_3); iv4 =findViewById(R.id.iv_4); iv5 =findViewById(R.id.iv_5); viewPager=findViewById(R.id.viewPager); initView(); }private void initView() { //初始化圆点,让第一个点为true,其他的关闭 setDot(true,false,false,false,false); if (views == null) views = new ArrayList<>(); //判断初始化 for (int i =0; i < pics.length; i++){ View view = LayoutInflater.from(this).inflate(pics[i],null); views.add(view); //将pics中的布局添加至view中 } pageAdapter = new MyPageAdapter(views,this); //MyPageAdapter是开始时创建的名字,可以自己更改 viewPager.setAdapter(pageAdapter); //设置适配器//给viewpage添加监听事件 viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}@Override public void onPageSelected(int position) {//position的值代表你翻动到了第几页switch (position){ case 0: setDot(true,false,false,false,false); break; case 1: setDot(false,true,false,false,false); break; case 2: setDot(false,false,true,false,false); break; case 3: setDot(false,false,false,true,false); break; case 4: setDot(false,false,false,false,true); break; } }@Override public void onPageScrollStateChanged(int state) {} }); }private void setDot(boolean a,boolean b,boolean c,boolean d,boolean e) { if (a){ iv1.setImageResource(R.drawable.btn_select_t_12); }else { iv1.setImageResource(R.drawable.btn_select_f_12); } if (b){ iv2.setImageResource(R.drawable.btn_select_t_12); }else { iv2.setImageResource(R.drawable.btn_select_f_12); } if (c){ iv3.setImageResource(R.drawable.btn_select_t_12); }else { iv3.setImageResource(R.drawable.btn_select_f_12); } if (d){ iv4.setImageResource(R.drawable.btn_select_t_12); }else { iv4.setImageResource(R.drawable.btn_select_f_12); } if (e){ iv5.setImageResource(R.drawable.btn_select_t_12); }else { iv5.setImageResource(R.drawable.btn_select_f_12); }//图片t_12是一个12像素的绿点,我用ps画的,f_12是白色的 }}

启动前不要忘记在AndroidManifest.xml中更改启动页
笔记|ViewPager引导页,底部圆点导航
文章图片

启动效果:
【笔记|ViewPager引导页,底部圆点导航】笔记|ViewPager引导页,底部圆点导航
文章图片
笔记|ViewPager引导页,底部圆点导航
文章图片

    推荐阅读