利用ViewPager实现app的启动画面

最新推荐文章于 2021-06-01 06:27:37 发布

qiang_xi

最新推荐文章于 2021-06-01 06:27:37 发布

阅读量1.5k

点赞数 1

分类专栏： Android Android Studio 文章标签： viewPager实现启动画面

本文链接：https://blog.csdn.net/qiang_xi/article/details/49148749

版权

Android 同时被 2 个专栏收录

58 篇文章 1 订阅

订阅专栏

Android Studio

30 篇文章 0 订阅

订阅专栏

要实现的效果:

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
哦,忘了上效果图,现在补上,如下:

qiang_xi

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用ViewPager实现app的启动画面

要实现的效果:1,程序启动时进入启动画面2,依次滑动4个画面以后,点击最后一个画面中的"开始体验"按钮,进入到主界面,滑动的过程中,界面下方有指示器,指示已经滑动到哪张图片3,在主界面拦截后退按钮操作,让点击后退按钮后直接退出程序,而不回到启动动画话不多说,进入正题1,程序启动时进入启动画面:其实这个没什么好说的,只要在manifest.xml清单文件配置好启动界面即可
复制链接

扫一扫