高仿有赞微小店SplashView

从事android开发有段时间了，总是说该写写技术博客了，分享知识的同时也能从中知道自己的不足，有挫折才会有动力，有争吵才会有成长，大家一起共勉吧。

直接进入主题吧，前两天正好看见一款App，对里面的Splash View给吸引住了， 像我们一般的App一般不会在Splash View花费太多的时间折腾，小公司大都功能至上，体验次之。从一个App的每个设计细节往往能够窥探出公司对产品和客户的责任心，当然了，这个有点扯远了，整个功能倒不是很难，我们一起来分析分析吧，么么哒！

首先我们从平台上下载有赞微小店，将.apk后缀改成.zip解压到任意文件夹，文件夹内容如下：

在res里面会找到相应的资源，往往大点的公司美工都是很不错的，图片也切的比较精美。
拿到想要的资源后，来分析分析设计需求吧：
1：每个子图片都是相对性的布局在自己的位子，并且以动画的形式以一定的时间间隔进行展示，凸显层次感。
2：滑动的过程中，后面的背景图不会跟着一起滑动，滑动的过程中背景图的透明度会随着页面的左右滑动正比渐变，直至完整滑出页面。
3：每滑到新页面都会将旧页面进行隐藏，并以动画的形式展现新页面，凸显层次感。

大概就这么多了，运行效果图如下，加深大家的理解：

下面我们一起用代码来实现:
主布局代码activity_main.xml:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1">

            <RelativeLayout
                android:id="@+id/relativelayout_first"
                android:layout_width="300dp"
                android:layout_height="300dp"
                android:layout_centerInParent="true">

                <ImageView
                    android:id="@+id/start1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="20dp"
                    android:layout_marginTop="20dp"
                    android:src="@mipmap/img_guide_page_1_star"
                    android:visibility="gone" />

                <ImageView
                    android:id="@+id/start2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentRight="true"
                    android:layout_marginRight="45dp"
                    android:layout_marginTop="3dp"
                    android:src="@mipmap/img_guide_page_1_star"
                    android:visibility="gone" />

                <ImageView
                    android:id="@+id/start3"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentBottom="true"
                    android:layout_alignParentRight="true"
                    android:layout_marginBottom="25dp"
                    android:layout_marginRight="35dp"
                    android:src="@mipmap/img_guide_page_1_star"
                    android:visibility="gone" />

                <ImageView
                    android:id="@+id/first_page_img"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:src="@mipmap/img_guide_page_1" />
            </RelativeLayout>

            <RelativeLayout
                android:id="@+id/relativelayout_second"
                android:layout_width="300dp"
                android:layout_height="300dp"
                android:layout_centerInParent="true"
                android:background="@mipmap/img_guide_page_bg">

                <ImageView
                    android:id="@+id/second_bg1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerHorizontal="true"
                    android:layout_marginTop="50dp"
                    android:src="@mipmap/img_guide_page_3_icon1" />

                <ImageView
                    android:id="@+id/second_bg4"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentBottom="true"
                    android:layout_centerHorizontal="true"
                    android:layout_marginBottom="50dp"
                    android:src="@mipmap/img_guide_page_3_icon4" />

                <ImageView
                    android:id="@+id/second_bg2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentRight="true"
                    android:layout_marginRight="40dp"
                    android:layout_marginTop="80dp"
                    android:src="@mipmap/img_guide_page_3_icon2" />

                <ImageView
                    android:id="@+id/second_bg3"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentBottom="true"
                    android:layout_alignParentRight="true"
                    android:layout_marginBottom="80dp"
                    android:layout_marginRight="40dp"
                    android:src="@mipmap/img_guide_page_3_icon3" />

                <ImageView
                    android:id="@+id/second_bg5"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentBottom="true"
                    android:layout_marginBottom="80dp"
                    android:layout_marginLeft="40dp"
                    android:src="@mipmap/img_guide_page_3_icon5" />

                <ImageView
                    android:id="@+id/second_bg6"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="40dp"
                    android:layout_marginTop="80dp"
                    android:src="@mipmap/img_guide_page_3_icon6" />

                <ImageView
                    android:id="@+id/second_bg7"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:src="@mipmap/img_guide_page_3_icon7" />
            </RelativeLayout>

            <RelativeLayout
                android:id="@+id/relativelayout_third"
                android:layout_width="300dp"
                android:layout_height="300dp"
                android:layout_centerInParent="true"
                android:background="@mipmap/img_guide_page_bg">

                <ImageView
                    android:id="@+id/third_box"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerHorizontal="true"
                    android:layout_marginTop="30dp"
                    android:src="@mipmap/img_guide_page_4_box" />

                <ImageView
                    android:id="@+id/third_cash"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentBottom="true"
                    android:layout_alignParentRight="true"
                    android:layout_marginRight="15dp"
                    android:paddingBottom="40dp"
                    android:src="@mipmap/img_guide_page_4_cash" />

                <ImageView
                    android:id="@+id/third_arrow_2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentBottom="true"
                    android:layout_centerHorizontal="true"
                    android:layout_marginBottom="80dp"
                    android:src="@mipmap/img_guide_page_4_arrow_2" />

                <ImageView