利用ViewPager实现app的启动画面

要实现的效果:

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

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

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

话不多说,进入正题

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

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

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

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

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

主activity的布局文件:

<FrameLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"><android.support.v4.view.ViewPagerandroid: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"?>
<LinearLayoutxmlns: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"><ImageViewandroid:id="@+id/img_01"android:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@drawable/normal"android:layout_margin="2dp"/><ImageViewandroid:id="@+id/img_02"android:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@drawable/normal"android:layout_margin="2dp"/><ImageViewandroid:id="@+id/img_03"android:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@drawable/normal"android:layout_margin="2dp"/><ImageViewandroid: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;@Overrideprotected 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() {//该方法是必须要重写的@Overridepublic int getCount() {return list.size();}//该方法是必须要重写的@Overridepublic boolean isViewFromObject(View view, Object object) {return view == object;}//这个方法用来初始化viewpager的item,即用来给viewpager填充数据的,如果不写,系统会报错@Overridepublic Object instantiateItem(ViewGroup container, int position) {View view = list.get(position);container.addView(view);return view;}//这个方法当viewpager的item被隐藏时调用,用来销毁被隐藏的item,如果不写,系统会报错//用来移除指定position的item里的view,@Overridepublic void destroyItem(ViewGroup container, int position, Object object) {container.removeView(list.get(position));}});}//当前页面被滑动时触发该方法@Overridepublic void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {viewPager.setScrollContainer(true);}//当一个新页面被选中时触发该方法@Overridepublic 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);}//页面滑动状态监听,如用户拖动页面滑动,滑动停止等@Overridepublic void onPageScrollStateChanged(int state) {//可以在这里面写一些根据滑动状态变化的滑动动画}public void into(View view) {Intent intent = new Intent(MainActivity.this, SecondActivity.class);startActivityForResult(intent, 1);}@Overrideprotected void onActivityResult(int requestCode, int resultCode, Intent data) {super.onActivityResult(requestCode, resultCode, data);if (resultCode == 1)finish();}
}

第四个画面的布局文件:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:background="@drawable/pic04"><Buttonandroid: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%的功能,但是有个问题,就是点击主界面的回退按钮,回到启动动画,而不是退出程序,那这肯定不是我们想要的,那么怎么解决呢?这就要拦截按钮按下的事件,系统默认按回退键回到上一界面,如果没有上一界面才会退出程序,我们要做的就是当按钮按下时直接退出程序,而不回到上一界面,代码如下:

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

利用ViewPager实现app的启动画面相关推荐

iOS App的图标，启动画面及其它
注意: 最新的图标尺寸和文件名规格以Apple的文档为准:Technical Q&A QA1686: App Icons on iPad and iPhone .其中要注意,iTunesArt ...
VC四种程序启动画面的制作方法
使用启动画面一是可以减少等待程序加载过程中的枯燥感(尤其是一些大型程序):二是可以用来显示软件名称和版权等提示信息.怎样使用VC++制作应用程序的启动画面呢?本文提供四种方法,前三种适用于基于文档的应 ...
android studio 启动画面,Android Studio 利用Splash制作APP启动界面的方法
public class SplashActivity extends Activity { // private final int SPLASH_DISPLAY_LENGHT = 2000; // ...
从SplashScreen深度探讨App启动画面的前世今生
/ 今日科技快讯 / 近日,特斯拉公布了2021年第四季度以及全年汽车销售和交付数据.数据表示,特斯拉2021年第四季度交付了30.86万辆电动汽车,打破了之前的单季度纪录.就全年而言,特斯拉 ...
开机动画适配方案_2020 年 4 月前 App 启动画面、屏幕调整需按要求适配，否则存拒审风险！...
苹果此次在 WWDC19 针对 iOS13 UI 更新方面的会议上,提到了三个开发者不得不重视的问题,均规定 2020 年 4 月前需全部适配. 2020 年 4 月前 App 启动画面必须使用 La ...
android开发启动画面,Android开发笔记——如何正确实现App启动页
启动页在当前的Android APP中有着广泛的使用,在Material Design规范出来之前,Android官方是不推荐使用启动页的,理由是让用户在启动APP后干等是一种浪费时间的行为.Mate ...
android 开机动画实现,Android App启动画面实现
app打开时都会有个启动画面(一幅图.一个提示之类的),画面停留2-3秒,然后结束掉自己,启动要呈现的第一个activity. Handler的postDelayed方法就很适合实现这个功能.它相当于 ...
android 启动画面广告,浅谈APP启动界面广告
App启动页,也称闪屏页,最初是为缓解用户等待Web/iOS/Android App数据加载的焦虑情绪而出现,后被设计师巧妙用于品牌文化展示,服务特色介绍以及功能界面熟悉等平台进行设计,被赋予了更加丰 ...
android 开机动画尺寸,手机桌面应用图标和APP启动画面全尺寸
一.APP启动画面全尺寸所有图片必须为png格式如上传iOS AppStore,则必须提供1024px*1024px的图标. 或企业内部分发,则需提供57px*57px和512px*512px的图 ...
Android 12 新APP启动画面(SplashScreen API)简介源码分析
以往的启动画面默认情况下刚启动APP时会显示一会白色背景如果把这个启动背景设置为null,则一闪而过的白色会变成黑色如果把启动Activity设置为背景透明[< item name=&qu ...

利用ViewPager实现app的启动画面

利用ViewPager实现app的启动画面相关推荐

最新文章

热门文章