#Android学习# 简单的轮播图的实现[上]

自己学习 Android 也有一段时间了, 从大二的开学之初开始写 Android 程序，那时候自己真的什么都是不会，除了自己有一些 Java 基础之外，还好，感激当初坚持的自己，自己现在也可以独自写一些 Android 小程序了; 现在，哈哈，还有几天，哦，三天吧，我就是一名大三的学生了，在大三的日子里面，我会比较系统地学习 Android 知识，选择用时间沉淀自己，当然，我会把我学到的知识，整理成博客，毕竟，感觉自己比较喜欢写东西，哈哈…

Android 轮播图在很多的场景，都是可以遇见它们的身影，它们有挺多的特点的：
- 带有指示器
- 每一张图带有标题
- 可以手动向左，或者向右滑动
- 自动滑动

效果如下图

代码的实现逻辑

1. 在 .xml 文件里面添加布局

这个轮播框在 .xml 文件里面的布局组件还算是挺简单的，我就直接上代码吧，如果您有 Android 基础，应该不难看懂的;

“`xml

2. 在 MainActivity 文件中拿到相应的组件

我们需要拿到 ViewPager 以及灰色的 LieanerLayout 里面的组件，以便于后面对组件填充内容;

这也是直接上代码吧：

/*
    * 初始化组件
    * */
    public void initView(){
        viewPager = (ViewPager) findViewById(R.id.viewPager);//用于填充图片
        title = (TextView) findViewById(R.id.content);//用于填充标题
        point = (LinearLayout) findViewById(R.id.pointViews);//用于填充指示器原点
    }

3. 往空的轮播框里面填充数据

• 首先准备好三张以上的图片，最好五张吧，数量多，有利于调试得出实验结论; 把准备好的图片放在下面的包路径下面：

  

• 现在首先需要做的事情，是需要把图片填充并且在 ViewPager 展示出来。需要在 ViewPager 中展示数据，我们就需要继承实现一个 PageAdapter 的抽象类, 在 PagerAdapter 的源码里面介绍到，如果我们实现了这一个类，我们必须实现以下四个重要的方法;

  private class MyAdapter extends PagerAdapter{
        
        
          //返回需要显示的 view 个数
          @Override
          public int getCount() {
              return 0;
          }
  
          //返回 view 复用的规则
          @Override
          public boolean isViewFromObject(View view, Object object) {
              return false;
          }
  
          //返回需要展示的 view
          @Override
          public Object instantiateItem(ViewGroup container, int position) {
              return super.instantiateItem(container, position);
          }
  
          //销毁已经展示的 view
          @Override
          public void destroyItem(ViewGroup container, int position, Object object) {
              super.destroyItem(container, position, object);
          }
      }

  • 第一个 getCount() 方法，在一般的 Adapter 类里面都是可以找到的，它的作用主要是用来获取需要展示在 ViewPager 的 View 的总数;

  • 第二个方法 isViewFromObject(View view, Object object) 比较重要，因为它是返回 view 复用的规则; 要了解这个方法以怎样的方式复用 ViewPager，需要回到它的源码里面:

    /**
    * Determines whether a page View is associated with a specific key object
    * as returned by {@link #instantiateItem(ViewGroup, int)}. This method is
    * required for a PagerAdapter to function properly.
    *
    * @param view Page View to check for association with <code>object</code>
    * @param object Object to check for association with <code>view</code>
    * @return true if <code>view</code> is associated with the key object <code>object</code>
    */
    public abstract boolean isViewFromObject(View view, Object object);

    源码介绍到,方法 isViewFromObject() 是用来确定当前轮播框显示的 Page View 是否与方法 instantiateItem(ViewGroup, int) 返回来的 Object 相同，判断 Page View 与 Object 相同是通过他们自身的一个特殊的 key，当各自的两个 key 相同的时候，就可以在 viewPage 那里显示出对应的 page view了;

  • 第三个方法 instantiateItem(ViewGroup container, int position) 主要的作用是往 ViewGroup 这个容器里面添加 view （需要显示的），以及返回含有 View 的 Object 对象;

  • 第四个方法 destroyItem(ViewGroup container, int position, Object object) 也是比较重要的，它主要的作用是移除 ViewGroup 里面的已经展示过的 View，如果没有即时移除已经展示的 view 的话，会使程序崩溃的; 当 instantiateItem(ViewGroup container, int position) 这个方法放回一个 Object的时候，ViewPager 就是用这个作为 View 用来显示的;

• 现在需要往 MyAdapter 里面填充用来展示的数据。首先，我们应当拿到图片的资源 ID ，而且把这些图片资源 ID 用来创建用以展示的 ImageView 对象，再然后，把这些 ImageView 对象装载到 List 里面，方便填充到 MyAdapter 里面;代码如下面：

  /**
   * 初始化数据
   */
  public void initData() {
      //获取图片的id
      imageId = new int[]{R.mipmap.a, R.mipmap.b, R.mipmap.c, R.mipmap.d, R.mipmap.e};
  
      //把 mImageView 装在 mImageViewList列表里面;
      for (int i = 0; i < imageId.length; i++) {
          mImageView = new ImageView(this);
          mImageView.setBackgroundResource(imageId[i]);
  
          mImageViewList.add(mImageView);
      }
  }

• 现在有了数据，就可以往 MyAdpter 里面填充数据了，实现的逻辑如下：

  private class MyAdapter extends PagerAdapter {
        
        
  
      //返回需要显示的 view 个数
      @Override
      public int getCount() {
          return mImageViewList.size();
      }
  
      //返回 view 复用的规则
      @Override
      public boolean isViewFromObject(View view, Object object) {
          return view == object;
      }
  
      //返回需要展示的 view
      @Override
      public Object instantiateItem(ViewGroup container, int position) {
          int newPosition = position % mImageViewList.size();
          ImageView imageView = mImageViewList.get(newPosition);
          container.addView(imageView);
  
          return imageView;
      }
  
      //销毁已经展示的 view
      @Override
      public void destroyItem(ViewGroup container, int position, Object object) {
          //Log.d("测试destroyItem里面的 object", "destroyItem: " + object);
          container.removeView((View)object);
      }
  }

• 然后通过 viewPager 的 setAdapter() 方法把 上面的 MyAdapter 装载在里面：

  /**
   * 配置 viewPager
   */
  public void initMyAdapter(){
      viewPager.setAdapter(new MyAdapter());
  }

• 通过上面的代码逻辑，我们就可以得到下面的效果图了：
  

总结
目前我们实现了往 ViewPager 里面填充图片了，然后我接下来的博客文章将会带入每一个 View 带有指示器和标题，而且指示器、标题跟随者图片一起运动的效果，感谢谢各位的阅读…