使用Viewpager实现带指示器的导航页

先来看一下最终效果

1.布局文件如下：

 <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.v4.view.ViewPager
            android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

        <LinearLayout
            android:id="@+id/guide_dots"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="30dp"
            android:gravity="center_horizontal"
            android:orientation="horizontal" />
    </RelativeLayout>

2.既然是ViewPager自然要自定义Adapter
代码如下：

package com.wzc.mydemo.adapter;

import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;

import java.util.List;

public class MyViewPagerAdapter extends PagerAdapter {
    private List<View> viewList;
    public MyViewPagerAdapter(List<View> data){
        this.viewList =data;
    }
    @Override
    public int getCount() {
        return viewList.size();
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }
    @Override
    public void destroyItem(ViewGroup container, int position,
                            Object object) {
        // TODO Auto-generated method stub
        container.removeView(viewList.get(position));
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        // TODO Auto-generated method stub
        container.addView(viewList.get(position));
        return viewList.get(position);
    }
}

很简单的一个自定义Adapter，那么接下来就是viewPager.setAdapter();

3.主函数如下：

package com.wzc.mydemo.activity;

import android.content.Context;
import android.content.res.Resources;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;

import java.util.ArrayList;
import java.util.List;

import butterknife.BindView;
import butterknife.ButterKnife;
import com.wzc.mydemo.MyPopupwindow;
import com.wzc.mydemo.R;
import com.wzc.mydemo.adapter.MyViewPagerAdapter;
import com.wzc.mydemo.untile.InitWindow;

public class MainActivity extends AppCompatActivity {
    private Context context;
    @BindView(R.id.viewpager)
    ViewPager viewPager;
    @BindView(R.id.guide_dots)
    LinearLayout ly_guide_dots;
    private List<View> imagedata;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        try {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            context = this;
            ButterKnife.bind(this);
            initView();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    private void initView() {
        try {
            imagedata = new ArrayList<View>();
            int[] images = new int[]{R.mipmap.one, R.mipmap.two, R.mipmap.three, R.mipmap.four};
            for (int i = 0; i < images.length; i++) {
                imagedata.add(initImage(images[i]));
            }
            initDots(images.length);
            MyViewPagerAdapter adapter = new MyViewPagerAdapter(imagedata);
            viewPager.setAdapter(adapter);
            //设置自动滚动
//            viewPager.setCurrentItem(0);
//            handler.sendEmptyMessageDelayed(0, 3 * 1000);
            viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
                @Override
                public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

                }

                @Override
                public void onPageSelected(int position) {
                    for (int i = 0; i < ly_guide_dots.getChildCount(); i++) {
                        if (i == position) {
                            ly_guide_dots.getChildAt(i).setSelected(true);
                        } else {
                            ly_guide_dots.getChildAt(i).setSelected(false);
                        }
                    }
                }

                @Override
                public void onPageScrollStateChanged(int state) {
                   /* switch (state) {
                        case ViewPager.SCROLL_STATE_DRAGGING:
                            handler.sendEmptyMessage(1);
                            break;
                        case ViewPager.SCROLL_STATE_IDLE:
                            handler.sendEmptyMessageDelayed(0, 3 * 1000);
                            break;
                        default:
                            break;
                    }*/
                }
            });
        } catch (Resources.NotFoundException e) {
            e.printStackTrace();
        }
    }

//根据图片数量加载点的数量，并默认设置第一个点为选中状态
    private void initDots(int length) {
        for (int j = 0; j < length; j++) {
            ly_guide_dots.addView(initDot());
        }
        ly_guide_dots.getChildAt(0).setSelected(true);
    }

    private View initDot() {
        return LayoutInflater.from(getApplicationContext()).inflate(R.layout.layout_dot, null);
    }

    private View initImage(int images) {
        View view = getLayoutInflater().inflate(R.layout.viewpager_item, null);
        ImageView imageView = (ImageView) view.findViewById(R.id.image);
        imageView.setImageResource(images);
        return view;
    }
}

4.指示器的item布局

<?xml version="1.0" encoding="utf-8"?>
<ImageButton xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/dot"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/dot_selector"
    android:background="@android:color/transparent"
    android:paddingLeft="10dp"
    android:paddingRight="10dp" />

5.在drawable文件夹下新建dot_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@mipmap/dian_down" android:state_selected="true"></item>
    <item android:drawable="@mipmap/dian_up" android:state_selected="false"></item>
</selector>

很简单的一个例子，就不上传源代码了。