ViewPager进阶,轻松实现简拼的splash界面

原创 2015年11月20日 14:53:38

这是我们需要实现的效果图。刚开始我没想到用viewPager来实现,但是看了这篇博文,我觉得viewpager可以实现这个效果http://blog.csdn.net/lmj623565791/article/details/40411921/


开始有两个问题没搞懂:

1.viewpager可以在实现在显示一张图片的情况下,左右两边还可以各显示一半的图片吗?

2.viewpager滑动可以自定义动画效果吗?

因为上面两个问题,所以没想到viewpager这么强大


大神的博客里可以看到这么一个东西 pageTransformer

然后通过Viewpager.setPageTransformer(boolean reverseDrawingOrder, PageTransformer transformer) 设置ViewPager切换时的动画效果,太方便了。。。。。

下面代码对这个pageTransformer里的

transformPage(View page, float position)
做了解释, 另外我们可以通过translationX的方法将左右两边的view移动到屏幕里面来,移动的偏移量我随便写了个400。


class PageTransformerListener implements ViewPager.PageTransformer{

        private static final float MIN_SCALE = 0.4f;
        private static final float MIN_ALPHA = 0.5f;

        /**
         * position会根据view的移动而变化  比如当前有三个view 1,2,3
         * 2在中间的时候,那么view2的position 为 0;
         * 1在左边的时候,那么view1 的position为 -1;
         * 3在右边的时候 , 那么view3的position为1;
         *
         * 所以在view2移动的view3 值得变化范围就是 0---1
         * VIEW2移动的view1 值得变化范围是 0 ---  -1
         * 反之 1---0 , -1 --- 0
         *
         * @param page  移动的View对象
         * @param position   移动位置变化的值
         */
        @Override
        public void transformPage(View page, float position) {
            //设置偏移量  目的为了让左边的view(position = -1) 和 右边的view(position = 1)显示在屏幕上面,
            page.setTranslationX(-400 * position);

            //透明度变化
            float alpha = MIN_ALPHA * position;
            if(alpha < 0)
                alpha = 1.0f + alpha;
            else
                alpha = 1.0f - alpha;
            page.setAlpha(alpha);

            //Y轴缩放比
            float scaleY = MIN_SCALE * position;
            if(scaleY < 0)
                scaleY = 1.0f + scaleY;
            else
                scaleY = 1.0f - scaleY;
            page.setScaleY(scaleY);

        }
    }

最后贴上完整代码

activity部分代码:

public class SplashActivity extends AppCompatActivity {

    private ViewPager viewPager;
    private int color[] = {Color.BLUE, Color.GRAY, Color.GREEN, Color.RED, Color.YELLOW};
    private int drawable[] = {R.mipmap.mainpage_1, R.mipmap.mainpage_2, R.mipmap.mainpage_3, R.mipmap.mainpage_4, R.mipmap.mainpage_5};
    private List<View>views;

    private ImageView imageView[];

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

        initView();
    }

    private void initView() {

        viewPager = (ViewPager)super.findViewById(R.id.activity_splash_viewpager);
        views = new ArrayList<View>();
        for(int i =0; i< 5; i++){
            View view = LayoutInflater.from(this).inflate(R.layout.splash_viewpager_item, null);
            view.findViewById(R.id.splash_viewpager_item_iv_bg).setBackgroundResource(drawable[i]);
            TextView textView = (TextView)view.findViewById(R.id.splash_viewpager_item_tv_content);
            textView.setText( "Content " + i);
            views.add(view);
        }
        SplashViewPagerAdapter splashViewPagerAdapter = new SplashViewPagerAdapter(views);
        viewPager.setOffscreenPageLimit(2);       //缓存页数(左右都为两张)
        viewPager.setAdapter(splashViewPagerAdapter);
        viewPager.setPageTransformer(true, new PageTransformerListener()); //监听view滑动的位置变化

        imageView = new ImageView[5];
        imageView[0] = (ImageView)findViewById(R.id.activity_splash_dot0);
        imageView[1] = (ImageView)findViewById(R.id.activity_splash_dot1);
        imageView[2] = (ImageView)findViewById(R.id.activity_splash_dot2);
        imageView[3] = (ImageView)findViewById(R.id.activity_splash_dot3);
        imageView[4] = (ImageView)findViewById(R.id.activity_splash_dot4);

        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                imageView[position].setBackgroundResource(R.mipmap.intro_page_dot2);
                if(position>=1)
                    imageView[position - 1].setBackgroundResource(R.mipmap.intro_page_dot1);
                if(position < 4){
                    imageView[position + 1].setBackgroundResource(R.mipmap.intro_page_dot1);
                }
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }

    class PageTransformerListener implements ViewPager.PageTransformer{

        private static final float MIN_SCALE = 0.4f;
        private static final float MIN_ALPHA = 0.5f;

        /**
         * position会根据view的移动而变化  比如当前有三个view 1,2,3
         * 2在中间的时候,那么view2的position 为 0;
         * 1在左边的时候,那么view1 的position为 -1;
         * 3在右边的时候 , 那么view3的position为1;
         *
         * 所以在view2移动的view3 值得变化范围就是 0---1
         * VIEW2移动的view1 值得变化范围是 0 ---  -1
         * 反之 1---0 , -1 --- 0
         *
         * @param page  移动的View对象
         * @param position   移动位置变化的值
         */
        @Override
        public void transformPage(View page, float position) {
            //设置偏移量  目的为了让左边的view(position = -1) 和 右边的view(position = 1)显示在屏幕上面,
            page.setTranslationX(-400 * position);

            //透明度变化
            float alpha = MIN_ALPHA * position;
            if(alpha < 0)
                alpha = 1.0f + alpha;
            else
                alpha = 1.0f - alpha;
            page.setAlpha(alpha);

            //Y轴缩放比
            float scaleY = MIN_SCALE * position;
            if(scaleY < 0)
                scaleY = 1.0f + scaleY;
            else
                scaleY = 1.0f - scaleY;
            page.setScaleY(scaleY);

        }
    }
}

viewpagerAdapter:

public class SplashViewPagerAdapter extends PagerAdapter {

    private List<View> views;

    public SplashViewPagerAdapter(List<View> views){
        this.views = views;
    }

    @Override
    public int getCount() {
        return views.size();
    }

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

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView(views.get(position));
    }

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

}


xml部分代码:(activity_splash.xml)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:gravity="center"
    android:background="@mipmap/aboutbg"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v4.view.ViewPager
        android:id="@+id/activity_splash_viewpager"
        android:layout_width="fill_parent"
        android:layout_height="500dp" />

    <LinearLayout
        android:gravity="center"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/activity_splash_dot0"
            android:background="@mipmap/intro_page_dot2"
            android:layout_marginLeft="2dp"
            android:layout_marginRight="2dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <ImageView
            android:id="@+id/activity_splash_dot1"
            android:background="@mipmap/intro_page_dot1"
            android:layout_marginLeft="2dp"
            android:layout_marginRight="2dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <ImageView
            android:id="@+id/activity_splash_dot2"
            android:background="@mipmap/intro_page_dot1"
            android:layout_marginLeft="2dp"
            android:layout_marginRight="2dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <ImageView
            android:id="@+id/activity_splash_dot3"
            android:background="@mipmap/intro_page_dot1"
            android:layout_marginLeft="2dp"
            android:layout_marginRight="2dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <ImageView
            android:id="@+id/activity_splash_dot4"
            android:background="@mipmap/intro_page_dot1"
            android:layout_marginLeft="2dp"
            android:layout_marginRight="2dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </LinearLayout>

</LinearLayout>

splash_viewpager_item.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android:id="@+id/splash_viewpager_item_iv_bg"
        android:layout_centerInParent="true"
        android:layout_width="200dp"
        android:layout_height="400dp" />

    <TextView
        android:id="@+id/splash_viewpager_item_tv_content"
        android:layout_centerInParent="true"
        android:text="content"
        android:textSize="30sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</RelativeLayout>


最终效果:(偏移量设置太大了。。。可以设置小点)




版权声明:本文为博主原创文章,未经博主允许不得转载。

Android项目中的欢迎界面和引导页:动画和ViewPager

每个安卓的应用都会有欢迎界面和引导页,引导页一般只是在第一次进入或者更新应用进入的时候才会出现。我这里使用另外一种更加灵活和扩展性的方式来写这个小Demo,首先看一下效果图: 这个Demo可扩展的地...
  • linxi7
  • linxi7
  • 2016年05月13日 16:49
  • 2592

PopupWindow的各种用法(二)——使用PopupWindow做一个指引蒙板(带启动页,仿ViewPager滚动的引导页)

引言:接下来和大家分享一下用一个PopupWindow来做一个指引蒙板的效果。鉴于网上对于“指引蒙板”的实现例子不是太多(或者是我找不到更多的),而且好像有很多的例子都是用一个Frame布局+Frag...
  • u011070603
  • u011070603
  • 2015年08月06日 18:16
  • 1370

Android 1分钟教你打造酷炫的引导页(实现ViewPager淡入淡出切换)

转自http://blog.csdn.net/qq_22770457/article/details/52133288 纯手工自制的Android引导页,实现了Viewpager切换的淡入淡出(...
  • lty406910111
  • lty406910111
  • 2017年06月07日 14:12
  • 752

ViewPage滑动背景渐变效果的Splash主页面

package com.duguang.baseanimation.ui.splash.BackGroundColor; import com.duguang.baseanimation.R; i...
  • wangbadan007007
  • wangbadan007007
  • 2015年10月15日 11:39
  • 472

ViewPager 从入门到带你撸个启动页之Fragment+ViewPager(二)

上一篇我们分享了ViewPager的基本用法后,相信大家对ViewPager的使用已经有比较清晰的认识了,这篇我们准备来使用官方推荐的Fragment+ViewPager组合来实现上一篇的效果。Fra...
  • javazejian
  • javazejian
  • 2016年08月07日 10:45
  • 4624

ViewPager 16种切换动画,早晚能用到

相信很多同学都用过Viewpager但是,Viewpager提供的动画不能应对我们所有的需求,今天就给大家带来16+的动画效果,你可以用,更可以自定义...
  • AndroidMsky
  • AndroidMsky
  • 2015年12月10日 13:58
  • 6822

导航页面ViewPager和欢迎界面的实现

源码下载: 在activity_welcome.xml文件中,   xml version="1.0" encoding="utf-8"?> RelativeLayout xmlns:android=...
  • wo_ha
  • wo_ha
  • 2016年04月26日 14:01
  • 1156

安卓学习笔记之制作ViewPager欢迎界面

实现步骤 编写布局文件 编写ViewPAger适配器类 初始化ViewPage,设置适配器和滑动监听 初始化ViewPager数据源与页面矩形指示 对ViewPager的页面滑动事件做处理,达到矩形指...
  • qq_28261343
  • qq_28261343
  • 2016年07月06日 22:12
  • 1145

ViewPager之引导界面---实现欢迎引导页面

最近在看ViewPager,于是乎弄个引导界面来玩玩..... 引导界面,采用现在比较主流的方式:左右滑动加载;小圆点提示;在最后一个页面,点击button,进入功能界面 第一种: ViewFli...
  • h378588270
  • h378588270
  • 2014年12月23日 17:47
  • 6132

Android切换页面效果的实现二:WebView+ViewPager

前言: 由于第一种切换页面的效果不能满足项目的要求,于是又找到另外一种更简单好用的方法来实现,顿时感觉,做项目开发,找到一种合适的方法能够减少很多时间,(刚开始自己弄的时候还想着自己写手势识别的方...
  • dyllove98
  • dyllove98
  • 2013年07月31日 21:30
  • 8612
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ViewPager进阶,轻松实现简拼的splash界面
举报原因:
原因补充:

(最多只允许输入30个字)