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