Android中酷炫的引导页面

https://github.com/TangfeiJi/MyMovice 代码下载

先看下效果具体的使用介绍

在工程build.gradle配置脚本中buildscript和allprojects段中添加sdk 新maven仓库地址。如下图。

allprojects {
    repositories {
        google()
        jcenter()
        maven { url 'https://jitpack.io' }

    }
}

在工程App 对应build.gradle配置脚本dependencies段中添加SDK库依赖：

implementation 'com.github.TangfeiJi:Android-master:v1.0'

源码下载

完成上述就已经集成完毕了具体的就看代码了 这里贴出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:clipChildren="true"
    android:clipToPadding="true">

    <com.dev.sacot41.scviewpager.SCViewPager
        android:id="@+id/viewpager_main_activity"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        
        
    </com.dev.sacot41.scviewpager.SCViewPager>

    <ImageView
        android:id="@+id/img_bg"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@mipmap/one_bg" />

    <com.dev.sacot41.scviewpager.DotsView
        android:id="@+id/dotsview_main"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="100px"
        android:orientation="horizontal" />

    <ImageView
        android:id="@+id/imageview_main_activity_name_tag"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:src="@mipmap/pagerright"
        android:visibility="visible" />

    <ImageView
        android:id="@+id/imageview_main_activity_currently_work"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:src="@mipmap/pagerleft"
        android:visibility="visible" />

    <LinearLayout
        android:id="@+id/ll_one"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="220px"
        android:gravity="center"
        android:orientation="vertical"
        android:visibility="visible">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="We know that what you like"
            android:textColor="@color/white"
            android:textSize="42px" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="15px"
            android:text="你喜欢的我们都懂"
            android:textColor="@color/white"
            android:textSize="42px" />

    </LinearLayout>


    <ImageView
        android:id="@+id/imageview_main_activity_commonly"
        android:layout_width="1010px"
        android:layout_height="440px"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="410px"
        android:src="@mipmap/two_logo"
        android:visibility="visible" />


    <LinearLayout
        android:id="@+id/imageview_main_activity_django_python"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="220px"
        android:gravity="center"
        android:orientation="vertical"
        android:visibility="visible">

        <ImageView
            android:layout_width="124px"
            android:layout_height="115px"
            android:src="@mipmap/fliilogo" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="25px"
            android:text="We have everything you "
            android:textColor="@color/white"
            android:textSize="42px" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="15px"
            android:text="你想看的这里都有"
            android:textColor="@color/white"
            android:textSize="42px" />

    </LinearLayout>

    <ImageView
        android:id="@+id/img_right2"
        android:layout_width="550px"
        android:layout_height="478px"
        android:layout_marginLeft="430px"
        android:layout_marginTop="820px"
        android:src="@mipmap/right_two"
        android:visibility="visible"

        />

    <ImageView
        android:id="@+id/imageview_main_activity_why"
        android:layout_width="550px"
        android:layout_height="478px"
        android:layout_marginLeft="150px"
        android:layout_marginTop="620px"
        android:src="@mipmap/left_two"
        android:visibility="visible" />

    <ImageView
        android:id="@+id/imageview_main_activity_diploma"
        android:layout_width="550px"
        android:layout_height="478px"
        android:layout_marginLeft="425px"
        android:layout_marginTop="425px"
        android:src="@mipmap/right_one"
        android:visibility="visible" />

    <ImageView
        android:id="@+id/imageview_main_activity_but"
        android:layout_width="550px"
        android:layout_height="478px"
        android:layout_marginLeft="80px"
        android:layout_marginTop="270px"
        android:src="@mipmap/left_one"
        android:visibility="visible" />
    <LinearLayout
        android:visibility="visible"
        android:id="@+id/ll_three"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="220px"
        android:gravity="center"
        android:orientation="vertical"
        >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="All the stars are gather here"
            android:textColor="@color/white"
            android:textSize="42px" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="15px"
            android:text="明星大咖全网搜罗"
            android:textColor="@color/white"
            android:textSize="42px" />

    </LinearLayout>



    <ImageView
        android:layout_centerInParent="true"
        android:id="@+id/imageview_main_raspberry_pi"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/four_bg_logo"
        android:visibility="visible" />

    <ImageView
        android:layout_marginBottom="180px"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"
        android:id="@+id/imageview_main_connected_device"
        android:layout_width="440px"
        android:layout_height="130px"
        android:src="@mipmap/startbg"
        android:visibility="visible" />

</RelativeLayout>

代码操作

package com.example.mymovice;

import android.content.Intent;
import android.graphics.Point;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.view.WindowManager;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.widget.ImageView;
import android.widget.Toast;

import com.dev.sacot41.scviewpager.DotsView;
import com.dev.sacot41.scviewpager.SCPositionAnimation;
import com.dev.sacot41.scviewpager.SCViewAnimation;
import com.dev.sacot41.scviewpager.SCViewAnimationUtil;
import com.dev.sacot41.scviewpager.SCViewPager;
import com.dev.sacot41.scviewpager.SCViewPagerAdapter;

public class MainActivity extends FragmentActivity {

    private static final int NUM_PAGES = 4;      //滑动的页数

    private SCViewPager mViewPager;              //自定义的ViewPager
    private SCViewPagerAdapter mPageAdapter;      //适配器
    private DotsView mDotsView;                   //底部的滑块组件
    private int[] imgArray = {R.mipmap.one_bg, R.mipmap.two_bg, R.mipmap.three_bg, R.mipmap.four_bg};//背景图片资源
    private View raspberryView;                  //最后一张图片组件

    private ImageView img_bg;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        initView();
    }
    private void  initView(){
        getWindow().requestFeature(Window.FEATURE_ACTION_BAR);
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
        setContentView(R.layout.activity_welcome);
        img_bg = findViewById(R.id.img_bg);
        mViewPager = (SCViewPager) findViewById(R.id.viewpager_main_activity);
        mDotsView = (DotsView) findViewById(R.id.dotsview_main);
        mDotsView.setDotRessource(R.mipmap.dot_selected, R.mipmap.dot_unselected);
        mDotsView.setNumberOfPage(NUM_PAGES);
        mPageAdapter = new SCViewPagerAdapter(getSupportFragmentManager());
        mPageAdapter.setNumberOfPage(NUM_PAGES);
        mPageAdapter.setFragmentBackgroundColor(R.color.theme_100);
        mViewPager.setAdapter(mPageAdapter);

        mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            }
            @Override
            public void onPageSelected(int position) {
                mDotsView.selectDot(position);
                img_bg.setBackgroundResource(imgArray[position]);
                if (position == 3) {
                    Animation animation = new AlphaAnimation(0.1f, 1.0f);
                    animation.setDuration(3500);
                    raspberryView.setAnimation(animation);
                }
            }

            @Override
            public void onPageScrollStateChanged(int state) {
            }
        });

        final Point size = SCViewAnimationUtil.getDisplaySize(this);
//右边
        View nameTag = findViewById(R.id.imageview_main_activity_name_tag);
        SCViewAnimation nameTagAnimation = new SCViewAnimation(nameTag);

        nameTagAnimation.addPageAnimation(new SCPositionAnimation(this, 0, size.x, 0));
        mViewPager.addAnimation(nameTagAnimation);
//左边
        View currentlyWork = findViewById(R.id.imageview_main_activity_currently_work);
        SCViewAnimation currentlyWorkAnimation = new SCViewAnimation(currentlyWork);
        currentlyWorkAnimation.addPageAnimation(new SCPositionAnimation(this, 0, -size.x, 0));
        mViewPager.addAnimation(currentlyWorkAnimation);


//下边  参数的说明   （上下文，到那个页面，x轴的运动+右边 -左边，Y轴的运动+上 -下）
        View atSkex = findViewById(R.id.ll_one);
        SCViewAnimationUtil.prepareViewToGetSize(atSkex);
        SCViewAnimation atSkexAnimation = new SCViewAnimation(atSkex);
        atSkexAnimation.addPageAnimation(new SCPositionAnimation(getApplicationContext(), 0, 0, -(size.y - atSkex.getHeight())));
        atSkexAnimation.addPageAnimation(new SCPositionAnimation(getApplicationContext(), 1, -size.x, 0));
        mViewPager.addAnimation(atSkexAnimation);


        View djangoView = findViewById(R.id.imageview_main_activity_django_python);
        SCViewAnimation djangoAnimation = new SCViewAnimation(djangoView);
        djangoAnimation.startToPosition(null, -size.y);
        djangoAnimation.addPageAnimation(new SCPositionAnimation(this, 0, 0, size.y));
        djangoAnimation.addPageAnimation(new SCPositionAnimation(this, 1, 0, size.y));
        mViewPager.addAnimation(djangoAnimation);


        View commonlyView = findViewById(R.id.imageview_main_activity_commonly);
        SCViewAnimation commonlyAnimation = new SCViewAnimation(commonlyView);
        commonlyAnimation.startToPosition(size.x, null);
        commonlyAnimation.addPageAnimation(new SCPositionAnimation(this, 0, -size.x, 0));
        commonlyAnimation.addPageAnimation(new SCPositionAnimation(this, 1, -size.x, 0));
        mViewPager.addAnimation(commonlyAnimation);



        View butView = findViewById(R.id.imageview_main_activity_diploma);
        SCViewAnimation butAnimation = new SCViewAnimation(butView);
        butAnimation.startToPosition(-size.x, null);
        butAnimation.addPageAnimation(new SCPositionAnimation(this, 1, size.x, 0));
        butAnimation.addPageAnimation(new SCPositionAnimation(this, 2, -size.x, 0));
        mViewPager.addAnimation(butAnimation);

        View diplomeView = findViewById(R.id.imageview_main_activity_but);//
        SCViewAnimation diplomeAnimation = new SCViewAnimation(diplomeView);
        diplomeAnimation.startToPosition(null, size.y);
        diplomeAnimation.addPageAnimation(new SCPositionAnimation(this, 1, 0, -size.y));
        diplomeAnimation.addPageAnimation(new SCPositionAnimation(this, 2, 0, size.y));
        mViewPager.addAnimation(diplomeAnimation);

        View whyView = findViewById(R.id.img_right2);//左1
        SCViewAnimation whyAnimation = new SCViewAnimation(whyView);
        whyAnimation.startToPosition(null, -size.y);
        whyAnimation.addPageAnimation(new SCPositionAnimation(this, 1, 0, size.y));
        whyAnimation.addPageAnimation(new SCPositionAnimation(this, 2, 0, -size.y));
        mViewPager.addAnimation(whyAnimation);

        View whyView2 = findViewById(R.id.imageview_main_activity_why);
        SCViewAnimation whyAnimation2 = new SCViewAnimation(whyView2);
        whyAnimation2.startToPosition(size.x, null);
        whyAnimation2.addPageAnimation(new SCPositionAnimation(this, 1, -size.x, 0));
        whyAnimation2.addPageAnimation(new SCPositionAnimation(this, 2, size.x, 0));
        mViewPager.addAnimation(whyAnimation2);


        View ll_three = findViewById(R.id.ll_three);//
        SCViewAnimation ll_threeAnimation = new SCViewAnimation(ll_three);
        ll_threeAnimation.startToPosition(null, size.y);
        ll_threeAnimation.addPageAnimation(new SCPositionAnimation(this, 1, 0, -size.y));
        ll_threeAnimation.addPageAnimation(new SCPositionAnimation(this, 2, 0, size.y));
        mViewPager.addAnimation(ll_threeAnimation);



        raspberryView = findViewById(R.id.imageview_main_raspberry_pi);
        SCViewAnimation raspberryAnimation = new SCViewAnimation(raspberryView);
        raspberryAnimation.startToPosition(-size.x, null);
        raspberryAnimation.addPageAnimation(new SCPositionAnimation(this, 2, size.x, 0));
        raspberryAnimation.addPageAnimation(new SCPositionAnimation(this, 3, -size.x, 0));

        mViewPager.addAnimation(raspberryAnimation);


        View connectedDeviceView = findViewById(R.id.imageview_main_connected_device);
        SCViewAnimation connectedDeviceAnimation = new SCViewAnimation(connectedDeviceView);
        connectedDeviceAnimation.startToPosition((int) (size.x * 1.5), null);
        connectedDeviceAnimation.addPageAnimation(new SCPositionAnimation(this, 2, -(int) (size.x * 1.5), 0));
        connectedDeviceAnimation.addPageAnimation(new SCPositionAnimation(this, 3, -size.x, 0));
        mViewPager.addAnimation(connectedDeviceAnimation);
        connectedDeviceView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                Toast.makeText(MainActivity.this,"欢迎您点击",Toast.LENGTH_LONG).show();
            }
        });
    }
}