Android ViewPager实现导航页效果

 效果

         源码地址

文章翻译自：https://www.cnblogs.com/aademeng/articles/6238933.html

代码 

 ---------------------------------- MainActivity ----------------------------------

public class MainActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener {

    //存放view的数组
    private ArrayList<View> mViewList;
    //适配器类
    private NavPagerAdapter mAdapter;
    //存放标题的数组
    private ArrayList<String> Titles;
    //PagerTabStrip
    private PagerTabStrip PagerTab;
    //ViewPager
    private ViewPager mViewPager;
    private TextView mJumpTv;
    private static final String TAG = "MainActivityLog";

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

        initData();
        initView();

    }

    /**
     * viewpager设置适配器
     * 显示视图
     */
    private void initView() {
        //取得ViewPager实例
        mViewPager = findViewById(R.id.ViewPager);
        mViewPager.setOnPageChangeListener(this);
        //取得ViewTabStrip实例 之前是没有用过ViewTabStrip的，试着用了一下，看了下效果
//        PagerTab = (PagerTabStrip) findViewById(R.id.PagerTab);
//        //设置Tab选中时的颜色
//        PagerTab.setTabIndicatorColor(getResources().getColor(R.color.black));
//        //设置Tab是否显示下划线
//        PagerTab.setDrawFullUnderline(true);
//        //设置Tab背景色
//        PagerTab.setBackgroundColor(getResources().getColor(R.color.white));
//        //设置Tab间的距离？我感觉是这样
//        PagerTab.setTextSpacing(50);

        //初始化适配器
//        mAdapter = new NavPagerAdapter(mViewList, Titles);
        mAdapter = new NavPagerAdapter(mViewList);

        mViewPager.setAdapter(mAdapter);

        mJumpTv.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "可以跳了", Toast.LENGTH_SHORT).show();
            }
        });

        //默认显示第1项
        SetTab(0);

    }
    /**
     * 初始化viewpager控件上
     * 需要显示的视图集合
     */
    private void initData() {

        mViewList = new ArrayList<>();
        LayoutInflater Inflater = LayoutInflater.from(this);
        mViewList.add(Inflater.inflate(R.layout.item_viewpaper_first, null));
        mViewList.add(Inflater.inflate(R.layout.item_viewpaper_second, null));
        mViewList.add(Inflater.inflate(R.layout.item_viewpaper_third, null));
        View view = Inflater.inflate(R.layout.item_viewpaper_fourth, null);
        mJumpTv = view.findViewById(R.id.jump_tv);
        mViewList.add(view);

        //初始化Titles
//        Titles = new ArrayList<String>();
//        Titles.add("Tab1");
//        Titles.add("Tab2");
//        Titles.add("Tab3");
//        Titles.add("Tab4");
    }
    /**
     * 设置默认显示的页数
     * 比如一共4页 就是 从0-3，按照下标来
     * @param index 页数集合的下标
     */
    public void SetTab(int index) {
        switch (index) {
            case 0:
                mViewPager.setCurrentItem(0);
                break;
            case 1:
                mViewPager.setCurrentItem(1);
                break;
            case 2:
                mViewPager.setCurrentItem(2);
                break;
        }

    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageSelected(int position) {
        SetTab(position);
        Log.d(TAG, "onPageSelected: position:" + position);

    }

    @Override
    public void onPageScrollStateChanged(int state) {

        Log.d(TAG, "onPageScrollStateChanged: state:" + state);

    }
}

  ---------------------------------- NavPagerAdapter ----------------------------------

/**
 * viewpager控件的适配器
 * 设置要加载的页面
 */
public class NavPagerAdapter extends PagerAdapter {

    //存放View的数组
    private ArrayList<View> Views;
    //存放Title的数组
    private ArrayList<String> Titles;


    public NavPagerAdapter(ArrayList<View> Views, ArrayList<String> Titles) {
        this.Views = Views;
        this.Titles = Titles;
    }

    public NavPagerAdapter(ArrayList<View> Views) {
        this.Views = Views;
    }

    //获取PageTitle
    @Override
    public CharSequence getPageTitle(int position) {
        if (Titles == null) {
            return "";
        } else if (Titles != null && Titles.size() == 0) {
            return "";
        }

        return Titles.get(position);
    }

    @Override
    public void destroyItem(View container, int position, Object object) {
        ((ViewPager) container).removeView(Views.get(position));
    }

    @Override
    public Object instantiateItem(View container, int position) {
        ((ViewPager) container).addView(Views.get(position), 0);
        return Views.get(position);
    }

    @Override
    public int getCount() {
        if (Views != null) {
            return Views.size();
        }
        return 0;
    }

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

}

  ---------------------------------- activity_main.xml ----------------------------------

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:background="#ffffff"
    tools:context=".MainActivity" >

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/ViewPager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center">
<!--        <androidx.viewpager.widget.PagerTabStrip-->
<!--            android:id="@+id/PagerTab"-->
<!--            android:layout_width="match_parent"-->
<!--            android:layout_height="wrap_content"-->
<!--            android:layout_gravity="top">-->
<!--        </androidx.viewpager.widget.PagerTabStrip>-->
    </androidx.viewpager.widget.ViewPager>


</RelativeLayout>

  ---------------------------------- item_viewpaper_first.xml ----------------------------------

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/holo_orange_dark">

    <ImageView
        android:id="@+id/ivFirstImage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:src="@mipmap/s_0_1" />

    <ImageView
        android:id="@+id/ivSecondImage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:src="@mipmap/s_0_2" />


    <ImageView
        android:id="@+id/ivFourthImage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/s_0_4" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:gravity="center"
        android:text="WEB ANALYTICS"
        android:textColor="@android:color/white"
        android:textSize="28sp" />

</RelativeLayout>

列出了其中一个item：item_viewpaper_first.xml，其他的item可以直接放个背景图查看效果。

 ---------------------------------- AndroidManifest.xml ----------------------------------

设置主题：

        <activity
            android:name=".MainActivity"
            android:theme="@style/Theme.AppCompat.Light.NoActionBar">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

​​​​​​​