利用ViewPager实现app的启动画面

要实现的效果:

1,程序启动时进入启动画面

2,依次滑动4个画面以后,点击最后一个画面中的"开始体验"按钮,进入到主界面,滑动的过程中,界面下方有指示器,指示已经滑动到哪张图片

3,在主界面拦截后退按钮操作,让点击后退按钮后直接退出程序,而不回到启动动画

话不多说,进入正题

1,程序启动时进入启动画面:

其实这个没什么好说的,只要在manifest.xml清单文件配置好启动界面即可

2,依次滑动4个画面以后,点击最后一个画面中的"开始体验"按钮,进入到主界面,滑动的过程中,界面下方有指示器,指示已经滑动到哪张图片

这个是核心部分,能左右滑动的控件首先肯定想到ViewPager,同时界面下方还有图片指示器,用来指示具体滑动到哪张图片,所以还需要一个底部布局

并且最后一个画面中还有一个进入到主界面的按钮,到此,布局文件已经可以写出来了,如下代码:

主activity的布局文件:

<FrameLayout    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/viewPager"        android:layout_width="match_parent"        android:layout_height="match_parent"        />    <include layout="@layout/bottom_layout"        /></FrameLayout>

这里一定要注意,要使用FrameLayout作为根布局,不然下面的底部布局不会显示到画面的上方,FrameLayout 布局的作用就是一层一层的堆叠控件.

bottom_layout布局文件:

<?xml version="1.0" encoding="utf-8"?><LinearLayout    xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="horizontal"    android:gravity="center|bottom"    android:layout_marginBottom="30dp">    <ImageView        android:id="@+id/img_01"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:src="@drawable/normal"        android:layout_margin="2dp"        />    <ImageView        android:id="@+id/img_02"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:src="@drawable/normal"        android:layout_margin="2dp"        />    <ImageView        android:id="@+id/img_03"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:src="@drawable/normal"        android:layout_margin="2dp"        />    <ImageView        android:id="@+id/img_04"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:src="@drawable/normal"        android:layout_margin="2dp"        /></LinearLayout>

这样,就实现了图片占据全屏,并且图片上方显示图片指示器的效果

布局文件写好了,下面就是对Viewpager的具体控制,ViewPager说白了就是一个支持多页面滑动的控件,它里面可以放各种布局,然后左右滑动,存放布局也就是为ViewPager设置数据源,就要用到ViewPager的setAdapter(),同时要监听ViewPager的滑动过程,就要设置ViewPager的onPageChangedListener();大致说完了,之前说到最后一个界面上有个按钮,点击即进入主界面,那么肯定是要写他的监听事件了,这里要注意,要写这个button的监听事件,只有一种方式,就是在布局文件中的button节点下用android:onClick=" "来定义点击事件,其他方式设置点击事件没有效果,下面上代码:

package com.example.administrator.viewpagerdemo;import android.app.Activity;import android.content.Intent;import android.os.Bundle;import android.support.v4.view.PagerAdapter;import android.support.v4.view.ViewPager;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.ImageView;import java.util.ArrayList;import java.util.List;public class MainActivity extends Activity implements ViewPager.OnPageChangeListener {    private ViewPager viewPager;    private List<View> list = new ArrayList<>();    private ImageView img_01, img_02, img_03, img_04;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        initView();        /**         * viewPager是一个官方提供的支持多页面滑动的控件         */        viewPager = (ViewPager) findViewById(R.id.viewPager);        viewPager.setOnPageChangeListener(this);        initLayout();        //设置第一页为初始显示界面        viewPager.setCurrentItem(0);        img_01.setImageResource(R.drawable.pressed);    }    private void initView() {        img_01 = (ImageView) findViewById(R.id.img_01);        img_02 = (ImageView) findViewById(R.id.img_02);        img_03 = (ImageView) findViewById(R.id.img_03);        img_04 = (ImageView) findViewById(R.id.img_04);    }    //在这个方法里进行加载布局和为viewPager设置数据源    private void initLayout() {        View pic01_layout = LayoutInflater.from(this).inflate(R.layout.pic01_layout, null);        View pic02_layout = LayoutInflater.from(this).inflate(R.layout.pic02_layout, null);        View pic03_layout = LayoutInflater.from(this).inflate(R.layout.pic03_layout, null);        View pic04_layout = LayoutInflater.from(this).inflate(R.layout.pic04_layout, null);        //把四个布局加载到list集合里        list.add(pic01_layout);        list.add(pic02_layout);        list.add(pic03_layout);        list.add(pic04_layout);        viewPager.setAdapter(new PagerAdapter() {            //该方法是必须要重写的            @Override            public int getCount() {                return list.size();            }            //该方法是必须要重写的            @Override            public boolean isViewFromObject(View view, Object object) {                return view == object;            }            //这个方法用来初始化viewpager的item,即用来给viewpager填充数据的,如果不写,系统会报错            @Override            public Object instantiateItem(ViewGroup container, int position) {                View view = list.get(position);                container.addView(view);                return view;            }            //这个方法当viewpager的item被隐藏时调用,用来销毁被隐藏的item,如果不写,系统会报错            //用来移除指定position的item里的view,            @Override            public void destroyItem(ViewGroup container, int position, Object object) {                container.removeView(list.get(position));            }        });    }    //当前页面被滑动时触发该方法    @Override    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {        viewPager.setScrollContainer(true);    }    //当一个新页面被选中时触发该方法    @Override    public void onPageSelected(int position) {        viewPager.getCurrentItem();        resetImage();        switch (position) {            case 0:                img_01.setImageResource(R.drawable.pressed);                break;            case 1:                img_02.setImageResource(R.drawable.pressed);                break;            case 2:                img_03.setImageResource(R.drawable.pressed);                break;            case 3:                img_04.setImageResource(R.drawable.pressed);                break;        }    }    private void resetImage() {        img_01.setImageResource(R.drawable.normal);        img_02.setImageResource(R.drawable.normal);        img_03.setImageResource(R.drawable.normal);        img_04.setImageResource(R.drawable.normal);    }    //页面滑动状态监听,如用户拖动页面滑动,滑动停止等    @Override    public void onPageScrollStateChanged(int state) {        //可以在这里面写一些根据滑动状态变化的滑动动画    }    public void into(View view) {        Intent intent = new Intent(MainActivity.this, SecondActivity.class);        startActivityForResult(intent, 1);    }    @Override    protected void onActivityResult(int requestCode, int resultCode, Intent data) {        super.onActivityResult(requestCode, resultCode, data);        if (resultCode == 1)            finish();    }}

第四个画面的布局文件:

<?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:background="@drawable/pic04">    <Button        android:onClick="into"        android:layout_width="120dp"        android:layout_height="40dp"        android:layout_marginBottom="80dp"        android:textColor="@android:color/white"        android:layout_alignParentBottom="true"        android:layout_centerHorizontal="true"        android:text="开始体验"        android:background="@android:color/holo_blue_light"        /></RelativeLayout>

3,在主界面拦截后退按钮操作,让点击后退按钮后直接退出程序,而不回到启动动画

上面的代码已经可以实现90%的功能,但是有个问题,就是点击主界面的回退按钮,回到启动动画,而不是退出程序,那这肯定不是我们想要的,那么怎么解决呢?这就要拦截按钮按下的事件,系统默认按回退键回到上一界面,如果没有上一界面才会退出程序,我们要做的就是当按钮按下时直接退出程序,而不回到上一界面,代码如下:

 @Override    public boolean onKeyDown(int keyCode, KeyEvent event) {        System.out.println("keyCode" + keyCode);        if (keyCode == KeyEvent.KEYCODE_BACK){            setResult(1);            finish();        }        return true;    }

这里在finish之前调用了setResult()方法用来传递一个结果码给上一个界面,上一个界面收到这个结果码之后,也执行finish操作,这样就能实现按后退键退出程序功能,

以上3部分就完整的实现了利用ViewPager实现app的启动画面;如果还有不明白的,这里贴上源码地址,源码注释很详细,可以下载下载看看,我是用android studio编写的,所以下之前确认有没有安装android studio,资源需要1分才可以下载:

源码下载地址:http://download.csdn.net/detail/qiang_xi/9182733
哦,忘了上效果图,现在补上,如下: