Android实现闪屏页面+视频引导页

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/printfcc/article/details/78452527

转载请注明出处：http://blog.csdn.net/printfcc/article/details/78452527 谢谢合作

前言

在日常使用app中我们会发现刚下载下来的app会出现一小段闪屏和视频引导页，当我们再次打开后引导页就不会再进入了，但这我们应该已经见怪不怪了，但是这个功能究竟怎么实现的呢？

需求+思路：

1.闪屏页面设置3秒后进入引导页或首页 （思路：可以使用handler来设置时间）
2.引导页设置3个页面最后一个页面有按钮可以点击进入首页 （思路 ：Viewpager + Fragment ）
3.当用户再次进入app不会进入引导页 （思路：利用原生数据储存类SharedPreferences记录和判断用户是否第一次打开）

实现：

1.我们实现的功能都需要有铺面全屏的效果所有我们先来写一个 BaseActivity让需要的 activity 来继承

/**
* Created by vveng on 2017/11/3 17: 02
*
* @mail: [email protected]
*/
public class WelcomeBaseActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
          /*透明状态栏*/
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            Window window = getWindow();
            window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
            window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
        }
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            Window window = getWindow();
            window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS
                    | WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
            window.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
                    | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
                    | View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
            window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
            window.setStatusBarColor(Color.TRANSPARENT);
            window.setNavigationBarColor(Color.TRANSPARENT);
        }
        setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);//设置不能横屏
    }
    /**
     *  启动页面代码，子类只需要用父类的这个方面，传入想要跳转的页面的class就好
     * @param activity
     */
    public void startToActivity(Class activity){
        Intent intent = new Intent();
        intent.setClass(this,activity);
        startActivity(intent);
    }
}

上面的代码我就不必多解释了，我们接下来继续看实现步骤

public class WelcomeActivity extends WelcomeBaseActivity {
   private ImageView mImageView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_welcome);
        mImageView = (ImageView) findViewById(R.id.welcome_image);
        //startAnimation();
        setHandler();
    }
    private void setHandler() {
        new  Handler().postDelayed(new Runnable() {
            @Override
            public void run() {
                SharedPreferences preferences= getSharedPreferences("count", Context.MODE_PRIVATE); // 存在则打开它，否则创建新的Preferences
                int count = preferences.getInt("count", 0); // 取出数据
                /**
                 *如果用户不是第一次使用则直接调转到显示界面,否则调转到引导界面
                 */
                if (count == 0) {
                    Intent intent1 = new Intent();
                   intent1.setClass(WelcomeActivity.this, WelcomeVideoActivity.class);
                    startActivity(intent1);
                    finish();
                } else {
                    Intent intent2 = new Intent();
                    intent2.setClass(WelcomeActivity.this, Main6Activity.class);
                    startActivity(intent2);
                    finish();
                }
                finish();
                //实例化Editor对象
                SharedPreferences.Editor editor = preferences.edit();
                //存入数据
                editor.putInt("count", 1); // 存入数据
                //提交修改
                editor.commit();
            }
        },3000);
    }
}

从上面可以看出我们在xml页面中只放置了一个ImageView控件，接着我们来看setHandler这个方法里，我们开启了一条线程来设置3秒的时间，注意看run()方法里面，我们利用getSharedPreferences(“count”, Context.MODE_PRIVATE);方法创建出 SharedPreferences，SharedPreferences是一键值对的方式去存储的，可以利用count这个key来拿出里面的值，这里getInt（）有两个参数，第一个是key名，第二个是当里面没有数据时返回上什么，这里设置为0. 当我们拿到count后就可以进行if判断，然后通过preferences.edit();去设置 键 count 里面的值将它改为1或者其他数，下次在进入if判断就不会跳入引导页啦。开心。

3.下面我们来看看引导页这边是怎么实现的，我们想要实现视频引导页可以用viewpager+Fragment来实现，先来看一下xml布局（上面由于xml布局只有一个控件我就不放啦）

public class WelcomeActivity extends WelcomeBaseActivity {
   private ImageView mImageView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_welcome);
        mImageView = (ImageView) findViewById(R.id.welcome_image);
        //startAnimation();
        setHandler();
    }
    private void setHandler() {
        new  Handler().postDelayed(new Runnable() {
            @Override
            public void run() {
                SharedPreferences preferences= getSharedPreferences("count", Context.MODE_PRIVATE); // 存在则打开它，否则创建新的Preferences
                int count = preferences.getInt("count", 0); // 取出数据
                /**
                 *如果用户不是第一次使用则直接调转到显示界面,否则调转到引导界面
                 */
                if (count == 0) {
                    Intent intent1 = new Intent();
                   intent1.setClass(WelcomeActivity.this, WelcomeVideoActivity.class);
                    startActivity(intent1);
                    finish();
                } else {
                    Intent intent2 = new Intent();
                    intent2.setClass(WelcomeActivity.this, Main6Activity.class);
                    startActivity(intent2);
                    finish();
                }
                finish();
                //实例化Editor对象
                SharedPreferences.Editor editor = preferences.edit();
                //存入数据
                editor.putInt("count", 1); // 存入数据
                //提交修改
                editor.commit();
            }
        },3000);
    }
}
  从上面可以看出我们在xml页面中只放置了一个ImageView控件，接着我们来看setHandler这个方法里，我们开启了一条线程来设置3秒的时间，注意看run()方法里面，我们利用getSharedPreferences("count", Context.MODE_PRIVATE);方法创建出 SharedPreferences，SharedPreferences是一键值对的方式去存储的，可以利用count这个key来拿出里面的值，这里getInt（）有两个参数，第一个是key名，第二个是当里面没有数据时返回上什么，这里设置为0. 当我们拿到count后就可以进行if判断，然后通过preferences.edit();去设置 键 count 里面的值将它改为1或者其他数，下次在进入if判断就不会跳入引导页啦。开心。

3.下面我们来看看引导页这边是怎么实现的，我们想要实现视频引导页可以用viewpager+Fragment来实现，先来看一下xml布局（上面由于xml布局只有一个控件我就不放啦）
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android";
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.v4.view.ViewPager
        android:id="@+id/video_viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </android.support.v4.view.ViewPager>
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="120dp"
        android:orientation="horizontal">
        <ImageView
            android:id="@+id/video_iv1"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:src="@mipmap/point_focus"/>
        <ImageView
            android:id="@+id/video_iv2"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_marginLeft="10dp"
            android:src="@mipmap/point_normal"/>
        <ImageView
            android:id="@+id/video_iv3"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_marginLeft="10dp"
            android:src="@mipmap/point_normal"/>
    </LinearLayout>
    <Button
        android:id="@+id/video_bt_start"
        android:layout_width="180dp"
        android:layout_height="40dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="50dp"
        android:background="@mipmap/bt_start"
        android:textColor="@android:color/white"
        android:visibility="gone"
        android:clickable="true"
       />
</RelativeLayout>

布局很简单，接着看activity的代码：

public class WelcomeVideoActivity extends WelcomeBaseActivity  {
    private ViewPager mViewPager;
    private ImageView mpoint1, mpoint2, mpoint3;
    private Button mButton;
    private ArrayList<Fragment> mFragments;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_video);
        initData();
        initView();
    }
    private void initView() {
        mButton = (Button) findViewById(R.id.video_bt_start);
        mViewPager = (ViewPager) findViewById(R.id.video_viewpager);
        mpoint1 = (ImageView) findViewById(R.id.video_iv1);
        mpoint2 = (ImageView) findViewById(R.id.video_iv2);
        mpoint3 = (ImageView) findViewById(R.id.video_iv3);
        mViewPager.setOffscreenPageLimit(3);
        mViewPager.setAdapter(new MyPagerAdapter(getSupportFragmentManager()));//
        mViewPager.addOnPageChangeListener(new MyPagerListener());//viewpager监听
        mButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(WelcomeVideoActivity.this, "111", Toast.LENGTH_SHORT).show();
                Intent intent = new Intent(WelcomeVideoActivity.this,Main6Activity.class);
                startActivity(intent);
                finish();
            }
        });
    }
    /**
     * 初始化数据，添加三个fragment
     */
    private void initData() {
        mFragments = new ArrayList<>();
        WelcomeFragment fragment1 = new WelcomeFragment();
        Bundle bundle1 = new Bundle();
        bundle1.putInt("index", 1);  //指定一个下标，好让滑动是执行下一个fragment
        fragment1.setArguments(bundle1);//注意要将bundel存入，不让在GuideActivity获取下标会出现空指针异常
        mFragments.add(fragment1);

        WelcomeFragment fragment2 = new WelcomeFragment();
        Bundle bundle2 = new Bundle();
        bundle2.putInt("index", 2);  //指定一个下标，好让滑动是执行下一个fragment
        fragment2.setArguments(bundle2);
        mFragments.add(fragment2);

        WelcomeFragment fragment3 = new WelcomeFragment();
        Bundle bundle3 = new Bundle();
        bundle3.putInt("index", 3);  //指定一个下标，好让滑动是执行下一个fragment
        fragment3.setArguments(bundle3);
        mFragments.add(fragment3);
    }
    //我们viewpager的适配器
    class MyPagerAdapter extends FragmentPagerAdapter {
        public MyPagerAdapter(FragmentManager fm) {
            super(fm);
        }
        @Override
        public Fragment getItem(int position) {
            return mFragments.get(position);
        }
        @Override
        public int getCount() {
            return mFragments.size();
        }
    }
    //设置viewpager的监听，来切换小圆点
    class MyPagerListener implements ViewPager.OnPageChangeListener {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        }
        @Override
        public void onPageSelected(int position) {
            mButton.setVisibility(View.GONE);
            mpoint1.setImageResource(R.mipmap.point_normal);
            mpoint2.setImageResource(R.mipmap.point_normal);
            mpoint3.setImageResource(R.mipmap.point_normal);
            if (position == 0) {
                mpoint1.setImageResource(R.mipmap.point_focus);
            } else if (position == 1) {
                mpoint2.setImageResource(R.mipmap.point_focus);
            } else {
                mpoint3.setImageResource(R.mipmap.point_focus);
                mButton.setVisibility(View.VISIBLE);
            }
        }
        @Override
        public void onPageScrollStateChanged(int state) {
        }
    }

}

上面的代码简单明了通过设置的适配器和监听来实现小圆点切换和显示当前的小视频，我们来看下WelcomeFragment里面的代码：

/**
* A simple {@link Fragment} subclass.
*/
public class WelcomeFragment extends Fragment {
    //构造出一个自定义控件
    private CustomizeVideo mVideo;
    public WelcomeFragment() {
        // Required empty public constructor
    }
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        mVideo = new CustomizeVideo(getContext());
        int index = getArguments().getInt("index");
        Uri uri;
        if(index == 1){ //这里的地址是指向本地的视频资源
            uri = Uri.parse("android.resource://" + getActivity().getPackageName() + "/" + R.raw.sp1);
        }else if(index ==2){
            uri = Uri.parse("android.resource://" + getActivity().getPackageName() + "/" + R.raw.sp2);
        }else {
            uri = Uri.parse("android.resource://" + getActivity().getPackageName() + "/" + R.raw.sp3);
        }
        mVideo.playVideo(uri);//播放
        return mVideo;
    }
    @Override
    public void onDestroy() {
        super.onDestroy();
        if(mVideo != null){
            mVideo.stopPlayback();
        }
    }
}

在frament中你有没有发现 CustomizeViedeo 这个控件，这个是我们重写了videoView的方法，来让我们播放小视频（ps：videoView支持的格式只有：3gp,mp4,avi）

/**
* Created by vveng on 2017/11/3 17: 21
*
* @mail: [email protected]
*/
public class CustomizeVideo extends VideoView {
    public CustomizeVideo(Context context) {
        super(context);
    }
    public CustomizeVideo(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
    public CustomizeVideo(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }
    /*
    protected void onMeasure (int widthMeasureSpec, int heightMeasureSpec);
    View调用此方法来确定本身和所包含内容的大小。此方法被measure(int,int)唤起，而且必须被子类重写以得到所包含内容的确切大小。
    注意：当重写此方法时，必须调用setMeasureDimension(int,int)来保存View的大小。如果没有做到，将会引发一个measure(int,int)抛出的IllegalStateException（非法状态错误）。超类onMeasure(int,int)可以被调用。
    编写基类的确认大小的方法，缺省情况下是根据其背景大小来确认，除非MeasureSepc允许有更大的高度或宽度。子类必须重写onMeasure(int,int)以得到对其内容大小的更准确的测量。
    若此方法被重写，它的子类需要确保其高度和宽度至少达到View所规定的最小值
   （可通过getSuggestedMinimumHeight()和getSuggestedMinimumWidth()得到）。
参数
        widthMeaureSpec           受上一层大小影响下的对水平空间的要求。可参看View.MeasureSpec。
        heightMeasureSpec         受上一层大小影响下的对垂直空间的要求。可参看View.MeasureSpec。

     */
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        setMeasuredDimension(MeasureSpec.getSize(widthMeasureSpec), MeasureSpec.getSize(heightMeasureSpec));
    }
    /**
     * 播放视频
     * @param uri
     */
    public void playVideo(Uri uri){
        if(uri == null){
            throw new IllegalArgumentException("uri can not be null");
        }
        /**设置播放路径*/
        setVideoURI(uri);
        /**开始播放*/
        start();
        setOnPreparedListener(new MediaPlayer.OnPreparedListener() {
            @Override
            public void onPrepared(MediaPlayer mp) {
                //设置循环播放
                mp.setLooping(true);
            }
        });
        setOnErrorListener(new MediaPlayer.OnErrorListener() {
            @Override
            public boolean onError(MediaPlayer mp, int what, int extra) {
                //错误监听
                return true;
            }
        });
    }
}

demo下载地址：http://download.csdn.net/download/printfcc/10104849