1. 要使用ViewPager，必须要创建 PagerAdapter。 这里创建一个 ViewPagerAdapter来继承PagerAdapter
public class ViewPagerAdapter extends PagerAdapter{ private List<View> views; // 我们引导页的list private Context context; // 上下文 public ViewPagerAdapter(List<View> views, Context context) { this.views = views; this.context = context; } // 移除一个view @Override public void destroyItem(ViewGroup container, int position, Object object) { //super.destroyItem(container, position, object); container.removeView(views.get(position)); } // 加载一个view @Override public Object instantiateItem(ViewGroup container, int position) { container.addView(views.get(position)); return views.get(position); } @Override public int getCount() { // 必写的方法 返回当前views的数量 return this.views.size(); } @Override public boolean isViewFromObject(View view, Object object) { //必写的方法 判断当前的view是否是我们需要的对象 return (view == object); } }
2. 创建我们引导页的视图
<?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"> <!--filpInterval 设置View之间切换的时间间隔 （在androidStudio上面跑不起来 可以不需要） persistentDrawingCache 持久化绘画缓存 --> <android.support.v4.view.ViewPager android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#00000000" android:persistentDrawingCache="animation" android:id="@+id/viewpage" > </android.support.v4.view.ViewPager> </RelativeLayout>
3. 创建引导页的图片视图 one.xml和two.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/imageView"
android:background="@drawable/guide1"/> </LinearLayout>
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/imageView2" android:background="@drawable/guide2"/> </LinearLayout>
4. 在我们的activity中使用
1 public class Guide extends Activity{ 2 3 private ViewPager vp; 4 private ViewPagerAdapter vpAdapter; 5 private List<View> views; 6 7 8 protected void onCreate(Bundle savedInstanceState) { 9 super.onCreate(savedInstanceState); 10 setContentView(R.layout.guide);//加载guide.xml 视图 11 this.initView(); 12 13 System.out.println("onCreate"); 14 } 15 16 // 初始化view 17 public void initView() { 18 /* 19 * Inflater英文意思是膨胀，在Android中应该是扩展的意思吧。 20 LayoutInflater的作用类似于 findViewById(), 21 不同点是LayoutInflater是用来找layout文件夹下的xml布局文件，并且实例化！ 22 而 findViewById()是找具体某一个xml下的具体 widget控件(如:Button,TextView等)。 23 * 24 * */ 25 LayoutInflater inflater = LayoutInflater.from(this); 26 views = new ArrayList<View>(); 27 views.add(inflater.inflate(R.layout.one, null)); // 加载视图1 28 views.add(inflater.inflate(R.layout.two, null)); // 加载视图2 29 30 vpAdapter = new ViewPagerAdapter(views, this); // 创建我们的 adapter 31 vp = (ViewPager) findViewById(R.id.viewpage); 32 vp.setAdapter(vpAdapter); // viewpage绑定 adapter 33 } 34 }
5. 运行就有引导页的两张图片，可以来回切换。
6. 添加导航点
① 在原来的guide.xml中添加
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <!--filpInterval 设置View之间切换的时间间隔 （在androidStudio上面跑不起来 可以不需要） persistentDrawingCache 持久化绘画缓存 --> <android.support.v4.view.ViewPager android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#00000000" android:persistentDrawingCache="animation" android:id="@+id/viewpage" android:layout_alignParentTop="true" android:layout_alignParentStart="true"> </android.support.v4.view.ViewPager> <!-- 新添加的 放导航点用的 --> <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:gravity="center_horizontal" android:layout_marginBottom="19dp" android:layout_alignParentBottom="true" android:layout_alignParentStart="true"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/iv1" android:src="@drawable/login_selectd"/> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/iv2" android:src="@drawable/login_point"/> </LinearLayout> </RelativeLayout>
② 在原来的代码的基础上添加新的代码
public class Guide extends Activity implements ViewPager.OnPageChangeListener{ // 实现监听接口 private ViewPager vp; private ViewPagerAdapter vpAdapter; private List<View> views; // 导航点 private ImageView[] dots; private int[] ids = {R.id.iv1, R.id.iv2}; protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.guide);//加载guide.xml 视图 this.initView(); this.initDots(); System.out.println("onCreate"); } // 初始化view public void initView() { /* * Inflater英文意思是膨胀，在Android中应该是扩展的意思吧。 LayoutInflater的作用类似于 findViewById(), 不同点是LayoutInflater是用来找layout文件夹下的xml布局文件，并且实例化！ 而 findViewById()是找具体某一个xml下的具体 widget控件(如:Button,TextView等)。 * * */ LayoutInflater inflater = LayoutInflater.from(this); views = new ArrayList<View>(); views.add(inflater.inflate(R.layout.one, null)); // 加载视图1 views.add(inflater.inflate(R.layout.two, null)); // 加载视图2 vpAdapter = new ViewPagerAdapter(views, this); // 创建我们的 adapter vp = (ViewPager) findViewById(R.id.viewpage); vp.setAdapter(vpAdapter); // viewpage绑定 adapter vp.setOnPageChangeListener(this); // ViewPager 监听自己 } private void initDots() { // 初始化 我们的导航点 this.dots = new ImageView[this.views.size()]; for (int i=0; i<this.views.size(); i++) { dots[i] = (ImageView) this.findViewById(this.ids[i]); } } // 监听 页面滑动的方法 @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { for (int i=0; i<this.ids.length; i++) { if (position == i) { this.dots[i].setImageResource(R.drawable.login_selectd); // 变成选中的 } else { this.dots[i].setImageResource(R.drawable.login_point); //变成不选中的 } } } //选中 @Override public void onPageSelected(int position) { } // 滑动状态改变 @Override public void onPageScrollStateChanged(int state) { } }
7. 添加进入按钮
① 在two.xml中添加一个按钮
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/imageView2" android:background="@drawable/guide2" android:layout_alignParentTop="true" android:layout_alignParentEnd="true" /> <!-- 添加进去按钮 --> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:orientation="horizontal" android:gravity="center" > <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="进入" android:id="@+id/btn_start" /> </LinearLayout> </RelativeLayout>
② 监听按钮 进去MainActivity
public class Guide extends Activity implements ViewPager.OnPageChangeListener{ // 实现监听接口 private ViewPager vp; private ViewPagerAdapter vpAdapter; private List<View> views; // 导航点 private ImageView[] dots; private int[] ids = {R.id.iv1, R.id.iv2}; // 开始按钮 private Button bt; protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.guide);//加载guide.xml 视图 this.initView(); this.initDots(); System.out.println("onCreate"); } // 初始化view public void initView() { /* * Inflater英文意思是膨胀，在Android中应该是扩展的意思吧。 LayoutInflater的作用类似于 findViewById(), 不同点是LayoutInflater是用来找layout文件夹下的xml布局文件，并且实例化！ 而 findViewById()是找具体某一个xml下的具体 widget控件(如:Button,TextView等)。 * * */ LayoutInflater inflater = LayoutInflater.from(this); views = new ArrayList<View>(); views.add(inflater.inflate(R.layout.one, null)); // 加载视图1 views.add(inflater.inflate(R.layout.two, null)); // 加载视图2 vpAdapter = new ViewPagerAdapter(views, this); // 创建我们的 adapter vp = (ViewPager) findViewById(R.id.viewpage); vp.setAdapter(vpAdapter); // viewpage绑定 adapter vp.setOnPageChangeListener(this); // ViewPager 监听自己 // 进入按钮 this.bt = (Button) views.get(1).findViewById(R.id.btn_start); this.bt.setOnClickListener(new View.OnClickListener() { // 监听 @Override public void onClick(View v) { Intent i = new Intent(Guide.this, MainActivity.class); // 进去MainActivity startActivity(i); finish(); //销毁当前的Activity } }); } private void initDots() { // 初始化 我们的导航点 this.dots = new ImageView[this.views.size()]; for (int i=0; i<this.views.size(); i++) { dots[i] = (ImageView) this.findViewById(this.ids[i]); } } // 监听 页面滑动的方法 @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { for (int i=0; i<this.ids.length; i++) { if (position == i) { this.dots[i].setImageResource(R.drawable.login_selectd); // 变成选中的 } else { this.dots[i].setImageResource(R.drawable.login_point); //变成不选中的 } } } //选中 @Override public void onPageSelected(int position) { } // 滑动状态改变 @Override public void onPageScrollStateChanged(int state) { } }