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>


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




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

相关文章推荐

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

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

Splash界面的实现

第一天1 这一天主要的目的是splash界面的实现 关键词:判断用户的手机是否联网,加载主界面。 首先是xml文件的定义: <LinearLayout xmlns:android="http...

精选:深入理解 Docker 内部原理及网络配置

网络绝对是任何系统的核心,对于容器而言也是如此。Docker 作为目前最火的轻量级容器技术,有很多令人称道的功能,如 Docker 的镜像管理。然而,Docker的网络一直以来都比较薄弱,所以我们有必要深入了解Docker的网络知识,以满足更高的网络需求。

轻松实现类VC界面

Keyword coloring edit control点击打开链接 原文点击打开链接 源码点击打开链接 下图是一个类似VC的界面,左边、底下有两个可浮动、可变大小的控制窗口。许多朋友都希...
  • whucv
  • whucv
  • 2012-07-19 22:45
  • 1208

android splash界面实现

Splash界面作为启动界面,出现在MainActivity界面之前,一般用于介绍app的特点。

ViewPager实现简单的界面滑动

ViewPager的简单实现

轻松实现 自定义slidingMenu+viewPager+scrollView

轻松实现 自定义slidingMenu+viewPager+scrollView网上搜索了一些侧滑Menu的实现,不是太复杂就是太简单达不到一般项目需求。鉴于此,自己尝试写了一个slidingMenu...

DrawerLayout 抽屉菜单效果使用实例介绍

在我们使用安卓的很多app的时候,常常能看到类似抽屉开关样式的布局界面风格,它的实现方式也很简单,通过在xml文件中定义一些相关属性,便可以实现类似的效果。   DrawerLayout 抽屉菜单效果...

ViewPager简单实现

ViewPager在我们的开发中用到的非常多,现在基本每个页面都需要用到它,和ListView一样频繁; 下面先说一下最简单的使用:注意:ViewPager导包一定要导入Android Support...

iOS 实现简单的界面切换

iOS 实现简单的界面切换
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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