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

最新推荐文章于 2024-08-27 10:42:28 发布

大帅Douk

最新推荐文章于 2024-08-27 10:42:28 发布

阅读量3.5w

点赞数 8

分类专栏： Android 文章标签： android 欢迎页引导页安卓开发 app

本文链接：https://blog.csdn.net/yuxunye85/article/details/74292237

版权

Android 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

转载请加上链接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>

效果预览图