Android-ViewPagerAdapter显示导航页(例)

1) 建立ViewPagerAdapter

public class ViewPagerAdapter extends PagerAdapter {


    private List<View> views;
    private Context context;

    public ViewPagerAdapter(List<View> views, Context context){
        //建立构造方法,传入views以及context;
        this.views = views;
        this.context = context;

    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        //当view不再使用时,销毁view;
        container.removeView(views.get(position));
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        //添加view;
        container.addView(views.get(position));
        return views.get(position);
    }

    @Override
    public int getCount() {
        //返回view的总数量;
        return views.size();
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return (view == object);
    }
}

2) 建立Guide Activity

public class Guide extends Activity {


    private ViewPager viewPager;
    private ViewPagerAdapter vpAdapter;
    private List<View> views; //存放需要显示的view

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.guide);

        initViews();
    }

    private void initViews() {
        LayoutInflater layoutInflater = LayoutInflater.from(this);

        //通过LayoutInflater实例化view
        views = new ArrayList<>();
        views.add(layoutInflater.inflate(R.layout.view_a,null));
        views.add(layoutInflater.inflate(R.layout.view_b,null));
        views.add(layoutInflater.inflate(R.layout.view_c,null));

        //找到viewpager,并绑定adapter
        vpAdapter = new ViewPagerAdapter(views,this);
        viewPager = (ViewPager) findViewById(R.id.viewpager);
        viewPager.setAdapter(vpAdapter);
    }
}

3) 建立guide.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

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

</RelativeLayout>

4) 建立各导航页面的资源文件
例如: view_a.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="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/a"/>

</LinearLayout>

---

添加页面的导航点

1) guide.xml中添加导航点图片并设置在底部

<LinearLayout

    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true" //基于父级控件底部
    android:gravity="center_horizontal"  //内容显示水平居中
    android:orientation="horizontal"
    >

    <ImageView
        android:id="@+id/iv1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/position"/>
    <ImageView
        android:id="@+id/iv2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/position"/>
    <ImageView
        android:id="@+id/iv3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/position"/>

</LinearLayout>

2) Guide Activity中添加导航点ImageView 并findViewById()

private ImageView[] dots;

private int[] ids = {R.id.iv1,R.id.iv2,R.id.iv3};



private void initDots(){

    dots = new ImageView[views.size()];
    for (int i = 0;i<views.size();i++){
        dots[i] = (ImageView) findViewById(ids[i]);
    }
}

3) Viewpager设置监听事件,并实现三个方法

viewPager.setOnPageChangeListener(this);

@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
    //当页面被滑动的时候被调用
}

@Override
public void onPageSelected(int position) {
    //当全新的页面被选中的时候被调用
    for (int i = 0;i<ids.length;i++){
        if(position == i){
       dots[i].setImageResource(R.drawable.position_selected);
        }else {
            dots[i].setImageResource(R.drawable.position);
        }
    }

}

@Override
public void onPageScrollStateChanged(int state) {
    //当滑动状态改变的时候被调用
}