android——ViewPager的使用

ViewPager可以切换多个视图。
以下面的例子来学习。关于底部的圆点的改变，所以要用到两张不同状态的圆点图片。

首先，创建4个简单的布局文件,这里就写一个，其他3个都类似。
layout1.xml

<?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">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="layout1"/>

</LinearLayout>

然后创建主布局，因为这个例子里，下面的四个圆点是位于4个布局的上方显示的，所以这里要用到帧布局。

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.john.test1.Main4Activity">

    <android.support.v4.view.ViewPager
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/viewPager"
        android:layout_gravity="center">
<!-- 导航条、标签-->
        <android.support.v4.view.PagerTabStrip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/pagerTab">

        </android.support.v4.view.PagerTabStrip>

    </android.support.v4.view.ViewPager>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_gravity="center|bottom"
        android:id="@+id/l">

        <ImageView
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:layout_gravity="center"
            android:src="@drawable/y1"/>

        <ImageView
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:layout_gravity="center"
            android:src="@drawable/y1"/>

        <ImageView
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:layout_gravity="center"
            android:src="@drawable/y1"/>

        <ImageView
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:layout_gravity="center"
            android:src="@drawable/y1"/>

    </LinearLayout>
</FrameLayout>

然后在MainActivity

package com.example.john.test1;

import android.graphics.Color;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.PagerTabStrip;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.Toast;

import java.util.ArrayList;

/**
 * viewPager
 */
public class Main4Activity extends AppCompatActivity implements ViewPager.OnPageChangeListener{

    private ViewPager viewPager;
    private PagerTabStrip pagerTabStrip;

    //标题
    String[] title = {"菜单1","菜单2","菜单3","菜单4"};

    private ArrayList<View> views = new ArrayList<>();

    private LinearLayout layout_point;
    private ImageView[] imageViews;
    private int currentIndex = 0;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main4);

        viewPager = (ViewPager)findViewById(R.id.viewPager);
        pagerTabStrip = (PagerTabStrip)findViewById(R.id.pagerTab);

        initViews();
        viewPager.setAdapter(new MyPagerAdapter());
        initPoint();
    }
    //初始化底部的圆点
    private void initPoint(){
        layout_point = (LinearLayout)findViewById(R.id.l);
        imageViews = new ImageView[views.size()];

        for(int i = 0 ;i<imageViews.length;i++){
            imageViews[i] = (ImageView)layout_point.getChildAt(i);
        }
        //默认设置第一个点被选中
        currentIndex = 0 ;
        imageViews[currentIndex].setImageResource(R.drawable.y2);
    }
    //初始化4个视图
    private void initViews(){
        views.add(getLayoutInflater().inflate(R.layout.layout1,null));
        views.add(getLayoutInflater().inflate(R.layout.layout2,null));
        views.add(getLayoutInflater().inflate(R.layout.layout3,null));
        views.add(getLayoutInflater().inflate(R.layout.layout4,null));

        //选项卡的背景颜色，指示条 的颜色，字体颜色
        pagerTabStrip.setBackgroundColor(Color.BLUE);
        pagerTabStrip.setTabIndicatorColor(Color.WHITE);
        pagerTabStrip.setTextColor(Color.GRAY);

        //viewPager的监听
        viewPager.addOnPageChangeListener(this);

    }
    //设置当前被选中的点
    public void setCurrentPoint(int position){
        if(currentIndex<0 || currentIndex == position|| currentIndex >imageViews.length-1){
            return;
        }
        imageViews[currentIndex].setImageResource(R.drawable.y1);
        imageViews[position].setImageResource(R.drawable.y2);
        currentIndex = position;
    }
    //页面滚动
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }
    //页面选中
    @Override
    public void onPageSelected(int position) {
        setCurrentPoint(position);
        Toast.makeText(this,"page--"+position,Toast.LENGTH_LONG).show();
    }
    //页面状态改变
    @Override
    public void onPageScrollStateChanged(int state) {

    }

    //viewPager的适配器
    class MyPagerAdapter extends PagerAdapter {
        @Override
        public int getCount() {
            return views.size();
        }
        //判断当前视图是否为返回的对象
        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }
        //实例化选项卡
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            //获得视图
            View v = views.get(position);
            //添加视图
            container.addView(v);
            return v;
        }
        //切换选项卡的时候销毁
        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView(views.get(position));
        }
        //获取标题
        @Override
        public CharSequence getPageTitle(int position) {
            return title[position];
        }
    }
}