一个案例教你简单地玩转 ViewPager(一)之带指示点的引导页

1,962 阅读3分钟

此文在我的个人网站,我的简书,我的CSDN博客
同时发布,请多多关注!

前言

上一周我整理了一下我自己的资料,写了篇Android自学资源大整合,看到不少童鞋喜欢和收藏了,所以我接下来会留意一些网站,博客,技术系列文章等等Android学习资源,持续更新那篇软文的,哈!希望大家能有推荐的,就在评论写下或者留言给我,壮大我们自学军团:D

嗯,按照惯例,又说了一通与此次主题无关的废话了。接下来我们直奔主题,拥抱一下ViewPager!解释不了这么多了,快上车!

ViewPager能用来干什么呢?我觉得可以有如下3点:


引导页


  • 通过ViewPaper+TabLayout+Fragment形成顶部带有标签的界面滑动

界面滑动


  • 通过自定义ViewPager,带有图片自动轮播效果的控件。

图片自动轮播


接下来我的案例将按上述的几点来一一展示,跟着我的步伐,一步两步来玩转ViewPager吧。

Talk is cheap,show u the code

一般应用第一次打开时,会有一个引导页的效果,但当第二次再打开的时候,将直接跳转到主页,所以这个Activity,就是用来做此判断的。代码也是比较简单。

  private boolean isFirst = false;//是否第一次打开App

    private Handler handler = new Handler();

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

    private void initData() {
        SharedPreferences sp = getSharedPreferences("WelcomeActivity", 0);
        isFirst = sp.getBoolean("isFirst",true);
        //判断是否第一次打开App,是的话跳转到引导页,否则跳转到主页
        if (isFirst) {
            handler.postDelayed(new Runnable() {
                @Override
                public void run() {
                    gotoStartActivity();
                }
            }, 2000);
            SharedPreferences.Editor editor = sp.edit();
            editor.putBoolean("isFirst",false);
            editor.commit();
        } else {
            handler.postDelayed(new Runnable() {
                @Override
                public void run() {
                    gotoMainActivity();
                }
            }, 2000);
        }
    }

    private void gotoMainActivity() {
        Intent intent = new Intent(WelcomeActivity.this, MainActivity.class);
        startActivity(intent);
        finish();
    }

    private void gotoStartActivity() {
        Intent intent = new Intent(WelcomeActivity.this, StartActivity.class);
        startActivity(intent);
        finish();
    }

在这个Activity下就是展示引导页的时候了,先看看布局文件代码。




    

    

    

        

        

        
    

ViwePager不用说啦,是这次的主角,而接下来那几个ImageView,是用来当指示点的,相信这大家都明白,这里我直接用控件来显示指示点,做法也是简单的。

 private ViewPager mViewPager;
    private List viewList = new ArrayList();
    private MyPagerAdapter myAdapter;

    private ImageView[] indicationPoint;//指示点控件
    private int[] points = {R.id.point1,R.id.point2,R.id.point3};

    private Button btnStart;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.start_layout);
        initData();
        initViews();
    }

    private void initData() {
        LayoutInflater inflater = LayoutInflater.from(this);
        viewList.add(inflater.inflate(R.layout.start1_layout,null));
        viewList.add(inflater.inflate(R.layout.start2_layout,null));
        viewList.add(inflater.inflate(R.layout.start3_layout,null));

        indicationPoint = new ImageView[viewList.size()];
        //实例化每个指示点控件
        for (int i=0; i

如果你熟悉ListView的用法,相信使用ViewPager时也会比较简单,因为其也是要设置一个PagerAdapter的适配器,将数据传递过去。这里注意的是:

  1. mViewPager.setPageTransformer(true, new DepthPageTransformer());这是在页面滑动的时候,起到一个动画效果。如果你想更换另一种效果,可以上google官方培训课程中,找到ViewPager,那里有相关的介绍,把上面的代码copy到你的项目中,再调用即可。
  2. btnStart = (Button) viewList.get(viewList.size()-1).findViewById(R.id.start);因为当你滑动到最后一张时,就要有个按钮跳转到主页吧,这里这个按钮控件id并不是在Activity的布局上,所以要在你最后一张页面上的布局获取其id。
private List viewList;

    public MyPagerAdapter(List viewList) {
        this.viewList = viewList;
    }

    // 更新视图
    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        container.addView(viewList.get(position));
        return viewList.get(position);
    }

    // 销毁某个元素时候调用
    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView(viewList.get(position));
    }

    //返回视图的个数
    @Override
    public int getCount() {
        return viewList.size();
    }

    // 判断是否是生成的对象
    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }

这是继承了PagerAdapter的一个适配器类,写法也是比较的简单。到这里,一个引导页也就完成啦!接下来就是怎样通过ViewPaper+TabLayout+Fragment形成带有标签的滑动页面吧。

待续

如果接着写下去的话,此文篇幅将会很长,没点耐心会越看越烦躁的,所以我还是分开来,写成一个系列吧,请关注,下一篇,一个案例教你简单地玩转ViewPager(二)之ViewPaper+TabLayout+Fragment顶部标签界面滑动。

小弟不才,还望多多指教!