【Android】如何实现启动APP时引导页、欢迎页功能之（一）引导页功能的实现

转载请加上链接http://blog.csdn.net/yuxunye85/article/details/74292237

    基本上APP在第一次启动时都有引导页，本人在做APP开发时想实现这一功能，当时还不大知晓这个功能的页的具体名字，因为一直是一个人在默默的自学。我在这里就简单的给个解释，引导页——就是APP在第一次启动时，引导用户操作，给予APP功能简单介绍的页面，一般都是APP第一次启动时才会出现，而后就不在出现。欢迎页——就是我们每次打开APP会出现的页面，接着才会自动跳转到主界面，其实现在这个欢迎页被各大厂商已经改成了广告欢迎页了

，京东、淘宝之类的APP每当我们打开时，就会显示一个广告，然后右上角还有个计时的3s-2s-1s,或者跳过，对的，其实这个就是欢迎页,称作广告欢迎页

。本方法介绍的目前是一种本地的欢迎和引导界面，想要通过服务器动态加载页面自己稍微改改就好。

一、引导页功的实现

         首先让我们来看看引导页的布局，有图片和下面的小圆点，  图片数量=小圆点的数量，且，小圆点的位置=图片的位置相等，当移动到哪个图片时就显示对应的点，我们是通过左右滑动来切换引导页面,并点击最后一张引导页跳转到主界面，且只在程序第一次启动时出现

’我们要解决以下几个关键点：

1、左右滑动切换页面 

2、底部中间位置小圆点的跟随图片位置而变化
3、点击引导页最后的最后一张实现跳转到主界面
4、只在程序第一次启动时出现（这个判断功能我会写在第下一篇博客里

1、首先我们谈谈布局界面

关于第一个关键点（左右滑动切换页面 ），我们用ViewPager作容器，实现左右滑动切换。那个小圆点我们用LinearLayout就可以布局。activity_guide.xml代码如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/activity_guide"
android:layout_width="match_parent"
android:layout_height="match_parent">

<android.support.v4.view.ViewPager
android:id="@+id/guide_ViewPager"
android:layout_width="match_parent"
android:layout_height="match_parent">
<requestFocus />
</android.support.v4.view.ViewPager>
<LinearLayout
android:id="@+id/dot_Layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:gravity="center"
android:layout_marginBottom="45dip"
>

</LinearLayout>

</RelativeLayout>

2、引导页面的适配器VpAdapter

package com.example.lushuai.caffeapp.adapter;
/**
* 引导页activity_Guide 的ViewPager适配器
*/
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

import java.util.ArrayList;

/**
* Created by Administrator on 2017/3/6.
*/

public class VpAdapter extends PagerAdapter {

private ArrayList<ImageView> imageViews;

public VpAdapter(ArrayList<ImageView> imageViews) {
this.imageViews = imageViews;
}

/**
* 获取当前要显示对象的数量
*/
@Override
public int getCount() {
// TODO Auto-generated method stub
return imageViews.size();
}

/**
* 判断是否用对象生成界面
*/
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
// TODO Auto-generated method stub
return arg0 == arg1;
}

/**
* 从ViewGroup中移除当前对象（图片）
*/
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(imageViews.get(position));
}

/**
* 当前要显示的对象（图片）
*/
@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(imageViews.get(position));
return imageViews.get(position);
}

}

3、下面来谈一谈关键代码
3.1、私有化（声明）变量当然是一开始我们就要做的

，其中将3张已经P好的引导页图片置于一个数组中，dotView就是底中部的小圆点，并且引入了我们已经写好的适配器VpAdapter。

private ViewPager vPager;
private VpAdapter vpAdapter;
private static  int[] imgs = {R.drawable.welcomepage1,R.drawable.welcomepage2, R.drawable.welcomepage3};
private ArrayList<ImageView>imageViews;
private ImageView[] dotViews;//小圆点

3.2、实现关键点3（点击引导页最后的最后一张实现跳转到主界面），点击----我们就要想到监听（Listener）事件，所以我们要在这里implements监听事件功能，我们的图片是放在vierpagerl里面的，所以是如下：

public class activity_Guide extends AppCompatActivity implements ViewPager.OnPageChangeListener

对于每张引导页的图片我们都是需要让他充满窗口的，在XML布局文件里我们已经设置了match_parent（完全匹配父控件），在这里我们再来通过这句话设置一下：

ViewPager.LayoutParams mParams = new ViewPager.LayoutParams();

接下来把引导页要显示的图片添加到集合中，以传递给适配器，用来显示图片。

@Override
private void initImages(){
//设置每一张图片都填充窗口
ViewPager.LayoutParams mParams = new ViewPager.LayoutParams();
imageViews = new ArrayList<ImageView>();

for(int i=0; i<imgs.length; i++)
{
ImageView iv = new ImageView(this);
iv.setLayoutParams(mParams);//设置布局
iv.setImageResource(imgs[i]);//为ImageView添加图片资源
iv.setScaleType(ImageView.ScaleType.FIT_XY);//这里也是一个图片的适配
imageViews.add(iv);
if (i == imgs.length -1 ){
//为最后一张图片添加点击事件
iv.setOnTouchListener(new View.OnTouchListener(){
@Override
public boolean onTouch(View v, MotionEvent event){
Intent toMainActivity = new Intent(activity_Guide.this, MainActivity.class);//跳转到主界面
startActivity(toMainActivity);
return true;

}
});
}

}

}

3.3、最后就是小圆点的实现，以及设置根据滑动页面的索引值，来设置小圆点的状态

我在这里是通过xml文件设置的简单小圆点，你也可以自己设置自己喜欢的颜色，或者自己p一个小圆点的图片也是可以的。此dotselector.xml文件放于drawable文件夹下面。设置了未选中状态和选中的状态的颜色，分别对应的是浅灰色和深灰色，代码如下

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="@drawable/focus_nomal" android:state_selected="false"/>
<item android:drawable="@drawable/focus_on" android:state_selected="true"/>
</selector>

以下是小圆点数量判断以及小圆点之间的间隔&小圆点默认启动显示的位置

private void initDots(){
LinearLayout layout = (LinearLayout)findViewById(R.id.dot_Layout);
LinearLayout.LayoutParams mParams = new LinearLayout.LayoutParams(20, 20);
mParams.setMargins(10, 0, 10,0);//设置小圆点左右之间的间隔
dotViews = new ImageView[imgs.length];
//判断小圆点的数量，从0开始，0表示第一个
for(int i = 0; i < imageViews.size(); i++)
{
ImageView imageView = new ImageView(this);
imageView.setLayoutParams(mParams);
imageView.setImageResource(R.drawable.dotselector);
if(i== 0)
{
imageView.setSelected(true);//默认启动时，选中第一个小圆点
}
else {
imageView.setSelected(false);
}
dotViews[i] = imageView;//得到每个小圆点的引用，用于滑动页面时，（onPageSelected方法中）更改它们的状态。
layout.addView(imageView);//添加到布局里面显示
}

}

下面就是小圆点功能最最最关键的代码，根据当前页面的索引值来设置小圆点的状态

public void onPageSelected(int arg0) {
for(int i = 0; i < dotViews.length; i++)
{
if(arg0 == i)
{
dotViews[i].setSelected(true);
}
else {
dotViews[i].setSelected(false);
}
}

写在最后关于mainfests文件的设置，我们引导页一般设置为全屏，所以我们先自定义样式风格，以下是mainfests代码。

<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity android:name=".activity.activity_Welcome"
android:theme="@style/FullScreen">
<intent-filter>
<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity android:name=".activity.MainActivity"/>
<activity android:name=".activity.activity_Guide"
android:theme="@style/FullScreen"/>
</application>自定义样式风格直接在styles.xml文件中加上下面功能代码就可以

<!-- 引导页-->
<style name="FullScreen" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowFullscreen">true</item>  //设置全屏
<item name="android:windowNoTitle">true</item> //设置没有状态栏
<item name="android:textSize">20sp</item>
<item name="android:textStyle">bold|italic</item>
</style>

效果预览图



Demo地址：http://download.csdn.net/detail/yuxunye85/9888504

转载请加上链接http://blog.csdn.net/yuxunye85/article/details/74292237

希望大家多多交流，共同学习共同进步；