Viewpager + 小点点导航的具体实现

Viewpager + 小点点导航的具体实现

 

Viewpager来实现广告展示效果肯定是不错的，配上小点点的分页导航肯定是标配，那么现在就来说一说具体是怎么样来实现的呢？

我们先看看效果图：

    

写完成之后觉得是非常简单的，实现的方式肯定也有很多种，那么我使用的其实是viewpager + viewgroup + view即可。Viewpager负责广告滑动，而viewgroup+ view则是负责下面的小点点导航。

 一、首先看他的布局文件

我们先看看布局：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:ignore="UselessParent" >
 
   <android.support.v4.view.ViewPager
        android:id="@+id/guidePages"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@+id/scrollview" />
 
   <LinearLayout
        android:id="@+id/viewGroup"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:gravity="center_horizontal"
        android:orientation="horizontal"
        android:layout_marginBottom="5dp"
        >
   </LinearLayout>
 
</RelativeLayout>

布局简单，是一个viewpager + viewgroup。然后我们在源码中将具体的view添加到viewgroup中去，这就实现了小点点的数媒与viewpager一致，并能在viewpager中fragment动态改变的时候也能自动改变。增强可拓展性！

 

在源码中不仅添加小点点，也为viewpager的滑动增加小点点的背景改变，也就是导航。当然如果想在小点点中做点击事件也是同样可以的，考虑一下焦点获取的问题就ok了。

二、参考源码

在源码中，我们可以参考如下代码：

public classMainActivity extends Activity {
 
    private ViewPager viewPager;
    private ArrayList<View> pageViews;
    private ImageView imageView;
    private ImageView[] imageViews;
    // 包裹滑动图片LinearLayout
    private ViewGroup main;
    // 包裹小圆点的LinearLayout
    private ViewGroup group;
    @SuppressWarnings("unused")
    privateArrayAdapter<View> pp;
 
    @Override
    public void onCreate(BundlesavedInstanceState) {
       super.onCreate(savedInstanceState);
 
       this.setContentView(R.layout.pager_layout);
      
       int[] img = new int[] { R.drawable.no1, R.drawable.no2, R.drawable.no3,
              R.drawable.no4, R.drawable.no5 };
       pageViews = newArrayList<View>();
       for (int i = 0; i < img.length; i++) {
           LinearLayoutlayout = newLinearLayout(this);
           LayoutParamsltp = newLayoutParams(LayoutParams.MATCH_PARENT,
                  LayoutParams.MATCH_PARENT);
           final ImageView imageView = new ImageView(this);
           imageView.setScaleType(ScaleType.CENTER_INSIDE);
           imageView.setImageResource(img[i]);
           layout.addView(imageView,ltp);
           pageViews.add(layout);
       }
      
       group = (ViewGroup)findViewById(R.id.viewGroup);
       viewPager = (ViewPager)findViewById(R.id.guidePages);
 
       /**
        * 有几张图片下面就显示几个小圆点
        */
       imageViews = new ImageView[pageViews.size()];
       LinearLayout.LayoutParamsmargin = newLinearLayout.LayoutParams(
              LinearLayout.LayoutParams.WRAP_CONTENT,
              LinearLayout.LayoutParams.WRAP_CONTENT);
       // 设置每个小圆点距离左边的间距
                  margin.setMargins(10,0, 0, 0);
       for (int i = 0; i < pageViews.size(); i++) {
           imageView = new ImageView(MainActivity.this);
           // 设置每个小圆点的宽高
           imageView.setLayoutParams(new LayoutParams(15, 15));
           imageViews[i] = imageView;
           if (i == 0) {
              // 默认选中第一张图片
              imageViews[i]
                     .setBackgroundResource(R.drawable.page_indicator_focused);
           }else{
              // 其他图片都设置未选中状态
              imageViews[i]
                     .setBackgroundResource(R.drawable.page_indicator_unfocused);
           }
           group.addView(imageViews[i], margin);
       }
       // 给viewpager设置适配器
       viewPager.setAdapter(new GuidePageAdapter());
       // 给viewpager设置监听事件
       viewPager.setOnPageChangeListener(newGuidePageChangeListener());
    }
 
    // 指引页面数据适配器
    class GuidePageAdapter extends PagerAdapter {
 
       @Override
       public int getCount() {
           return pageViews.size();
       }
 
       @Override
       public boolean isViewFromObject(Viewarg0, Object arg1) {
           return arg0 == arg1;
       }
 
       @Override
       public void destroyItem(View arg0, int arg1, Object arg2) {
           // TODO Auto-generated method stub
           ((ViewPager)arg0).removeView(pageViews.get(arg1));
       }
 
       @Override
       public ObjectinstantiateItem(View arg0, int arg1) {
           // TODO Auto-generated method stub
           ((ViewPager)arg0).addView(pageViews.get(arg1));
           return pageViews.get(arg1);
       }
 
    }
 
    // 指引页面更改事件监听器
    class GuidePageChangeListenerimplementsOnPageChangeListener {
 
       @Override
       public voidonPageScrollStateChanged(int arg0) {
           // TODO Auto-generated method stub
 
       }
 
       @Override
       public void onPageScrolled(int arg0, float arg1, int arg2) {
           // TODO Auto-generated method stub
 
       }
 
       @Override
       public void onPageSelected(int arg0) {
           // 遍历数组让当前选中图片下的小圆点设置颜色
           for (int i = 0; i < imageViews.length; i++) {
              imageViews[arg0]
                     .setBackgroundResource(R.drawable.page_indicator_focused);
 
              if (arg0 != i) {
                  imageViews[i]
                         .setBackgroundResource(R.drawable.page_indicator_unfocused);
              }
           }
       }
    }
}

至此就基本实现了广告viewpager+小点点导航的demo了。

 

源码下载：

（申明，这源码并非我自己的原创，因为效果差不多就给出来了，是有参考价值的）