Android 利用PagerView做引导页

xzw 2019-06-21

先看实际效果，这个是用了一个APP里面的图片，不是自己的图。

Android 利用PagerView做引导页

第一步：创建引导页的 Activity，先在引导页上的xml定义一个ViewPager和用于下面放置圆点导航的ViewImage。

<android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerInParent="true"
        android:background="#00000000">
    </android.support.v4.view.ViewPager>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="68dp"
        >

        <ImageView
            android:layout_width="12dp"
            android:layout_height="12dp"
            android:id="@+id/iv1"
            android:src="@drawable/abc_btn_radio_check"/>
        <ImageView
            android:layout_width="12dp"
            android:layout_height="12dp"
            android:id="@+id/iv2"
            android:src="@drawable/abc_btn_radio_nocheck"/>
        <ImageView
            android:layout_width="12dp"
            android:layout_height="12dp"
            android:id="@+id/iv3"
            android:src="@drawable/abc_btn_radio_nocheck"/>
        <ImageView
            android:layout_width="12dp"
            android:layout_height="12dp"
            android:id="@+id/iv4"
            android:src="@drawable/abc_btn_radio_nocheck"/>
    
    </LinearLayout>

第二步：创建一个继承自 PagerAdapter 的类。其中的内容也是分3个部分：
第1部分：构造函数
第2部分：加载、销毁View的方法
第3部分：自动生成的两个有返回值的方法

public class ViewPagerAdapter extends PagerAdapter {

    // 创建两个变量，作为参数传入构造方法
    private List<View> mViews;
    private Context mContext;


    public ViewPagerAdapter (List<View> views, Context context) {
        this.mViews = views;
        this.mContext = context;
    }

    // 根据 position 索引来销毁View
    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView(mViews.get(position));
    }

    // 加载 View
    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        container.addView(mViews.get(position));
        return mViews.get(position);
    }

    // 返回 View 集合的数量
    @Override
    public int getCount() {
        return mViews.size();
    }

    // 判断当前 View 是否我们需要的对象
    @Override
    public boolean isViewFromObject(View view, Object object) {
        return (view == object);
    }
}

第三步：回到刚才引导页的Activity，添加如下代码。

public class GuideActivity extends Activity implements ViewPager.OnPageChangeListener {

    private ViewPager mViewPager;
    private ViewPagerAdapter mViewPagerAdapter;
    private List<View> mViews;
    private ImageView[] mImageViews;
    private int[] mInts = new int[] {R.id.iv1, R.id.iv2, R.id.iv3, R.id.iv4};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // 去除引导页的标题栏
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        // 设置顶部状态栏为透明状态
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS, WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
        setContentView(R.layout.activity_guide);
        // 加载View视图
        initViews();
        // 加载底部圆点导航
        initPoint();
    }

    // 加载 View 视力
    private void initViews() {
        //第1步，创建一个View的集合，并动态加载n个View，添加进集合
        LayoutInflater inflater = LayoutInflater.from(this);
        mViews = new ArrayList<View>();
        mViews.add(inflater.inflate(R.layout.layout_guide_0, null));
        mViews.add(inflater.inflate(R.layout.layout_guide_1, null));
        mViews.add(inflater.inflate(R.layout.layout_guide_2, null));
        mViews.add(inflater.inflate(R.layout.layout_guide_3, null));
        ////第2步，为ViewAdapter装载这个集合
        mViewPagerAdapter = new ViewPagerAdapter(mViews, this);
        //第3步，给ViewPager设置ViewAdapter
        mViewPager = (ViewPager) findViewById(R.id.viewPager);
        mViewPager.setAdapter(mViewPagerAdapter);

        // 找到 Button，注意这个 Button 不是当前布局里的，这个按钮是在集合中最后一页的进入首页那个按钮
        // 所以得用 view 集合找到最后一页再 findViewById，不然会因找不到，导致空指针异常。
        Button btnEntryMain = (Button) mViews.get(3).findViewById(R.id.btnEntryMain);
        btnEntryMain.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Intent intent = new Intent(GuideActivity.this, MainActivity.class);
                startActivity(intent);
                finish();
            }
        });
        mViewPager.setOnPageChangeListener(this);
    }

    // 加载底部圆点导航
    private void initPoint() {
        mImageViews = new ImageView[mViews.size()];
        for (int i = 0; i < mViews.size(); i++) {
            mImageViews[i] = (ImageView) findViewById(mInts[i]);
        }
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    // 当Page被选中时解发的事，变换圆点导航
    @Override
    public void onPageSelected(int position) {
        for (int i = 0; i < mImageViews.length; i++) {
            if (position == i){
                mImageViews[i].setImageResource(R.drawable.abc_btn_radio_check);
            } else {
                mImageViews[i].setImageResource(R.drawable.abc_btn_radio_nocheck);
            }
        }
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }
}

第四步：这里开始创建要显示View的xml，这里用到了4个xml，都是一样的代码，唯独最后一个多添加了一个用于进入主Activity的Button，故只贴出最后一个xml的代码。

<android.support.percent.PercentRelativeLayout
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <ImageView
        android:id="@+id/ivFont"
        app:layout_widthPercent="60%"
        app:layout_heightPercent="30%"
        android:layout_centerInParent="true"
        android:layout_alignParentTop="true"
        android:layout_marginTop="70dp"
        android:src="@drawable/guide_p4_word"/>

    <ImageView
        android:id="@+id/ivImage"
        android:layout_below="@id/ivFont"
        app:layout_widthPercent="100%"
        app:layout_heightPercent="30%"
        android:src="@drawable/guide_p4_img"/>

    <Button
        android:id="@+id/btnEntryMain"
        app:layout_widthPercent="80%"
        android:layout_height="wrap_content"
        android:text="进入主程序"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="15dp"
        android:layout_centerHorizontal="true"
        android:textSize="20sp"
        android:background="#cac2c8"
        android:textColor="@color/colorPrimary"/>


</android.support.percent.PercentRelativeLayout>

这里用的布局是百分比布局，适配性还是不行，如果在特别大的屏幕，会有一点点的小偏差，待后期做整个Demo的时候再好好改改。

第五步，这里再创建一个Activity，用于进程序显示的第一个画面，可以放张图片或者广告之类的。

public class WelcomeActivity extends Activity {

    private static final int WAIT_TIME = 2000;
    private static final int ACT_HOME = 1000;
    private static final int ACT_GUIDE = 1001;
    private boolean mIsFirst = false;

    // 延时操作启动相关的 Activity，因为是在主线程，所以用 Handler
    private Handler mHandler = new Handler(){
        @Override
        public void handleMessage(Message msg) {
            switch(msg.what){
                case ACT_HOME:
                    goHome();
                    break;
                case ACT_GUIDE:
                    goGuide();
                    break;
                default:
                    break;
            }
        }
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // 去掉头部标题
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        // 设置头部状态栏透明（同色）
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS, WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
        setContentView(R.layout.activity_wecome);
        init();
    }

    // 根据 SharedPreferences 的 first 发送给 Handler 启动哪个 Activity
    private void init() {
        SharedPreferences sp = getPreferences(MODE_PRIVATE);
        //先去取isFirst的值，如果没有，表明是第一次取，第一次取肯定是true，所以这里给个默认值为 true
        mIsFirst = sp.getBoolean("first", true);
        if (!mIsFirst){
            // 有延时
            mHandler.sendEmptyMessageDelayed(ACT_HOME, WAIT_TIME);
        } else {
            // 直接启动
            mHandler.sendEmptyMessage(ACT_GUIDE);
            // 写入数据
            SharedPreferences.Editor editor = sp.edit();
            editor.putBoolean("first", false);
            editor.commit();
        }
    }

    // 启动主 Activity
    private void goHome() {
        Intent intent = new Intent(WelcomeActivity.this, MainActivity.class);
        startActivity(intent);
        finish();
    }

    // 启动引导页 Activity
    private void goGuide() {
        Intent intent = new Intent(WelcomeActivity.this, GuideActivity.class);
        startActivity(intent);
        finish();
    }
}

如果想简化一点，可以不必创建这个 Activity ，有另一种解决方法：
在style.xml 文件中新建一个style 主题

<style name="Theme.Start" parent="android:Theme">  
    <item name="android:windowBackground">@drawable/ic_launcher</item>  
    <item name="android:windowNoTitle">true</item>  
</style>

android:windowBackgrounds属性中添加自己的过场图片就好
在AndroidManifest.xml文件， 程序中第一个显示的界面添加这个主题

<application  
    android:allowBackup="true"  
    android:icon="@drawable/ic_launcher"  
    android:label="@string/app_name"  
    android:theme="@style/AppTheme" >  
    <activity  
        android:name=".ActLogo"  
        android:theme="@style/Theme.Start" >  
        <intent-filter>  
            <action android:name="android.intent.action.MAIN" />  
  
            <category android:name="android.intent.category.LAUNCHER" />  
        </intent-filter>  
    </activity>  
</application>

当然了，用这种方法的话，WelcomeActivity里的业务逻辑代码就得放进MainActivity里，看自己怎么去做，业务逻辑还是一样的。

另外做好后还是遇到了一个问题，就是在启动程序的时候会有1秒左右的空白，这个很好解决，在AndroidManifest.xml定义要启动的 Activity 里加上一个主题即可。

android:theme="@android:style/Theme.Translucent"
xzw

xzw

相关推荐

jQuery插件实现的页面功能介绍引导页效果

查看演示 下载源码Helloweba.com之前也有相关文章介绍：《构建一个用于产品介绍的WEB应用》，相信对有需要的朋友有帮助。本文将介绍另一款基于jQuery的页面引导页插件：pagewalkthrough.js，来看如何使用它。HTML首先记得加载所

89307547 / 0评论 2015-01-15

Android Advance - 收藏集 - 掘金

第二期 全球最大成人网站 PornHub 爬虫？？？- 掘金掘金日报主打分享优质深度技术内容，技术内容分：前端、后端、Android、iOS、产品设计、工具资源和一些有趣的东西。Android 引导页根据滑动切换逐渐改变背景色 - Android - 掘金

Palingenesis / 0评论 2019-06-21

安卓开发技术型 - 收藏集 - 掘金

NeverCrash 全局捕获 Crash - Android - 掘金NeverCrash for Android 一个全局捕获Crash的库。安卓指纹识别 SDK，兼容魅族和三星的 6.0 及以下系统 - Android - 掘金This is an

klb / 0评论 2019-06-21

SplashActivity 类似微博 引导页

import android.os.Bundle;import android.os.Handler;import android.view.View;private boolean first;private View view;private Cont

tcxingdechen / 0评论 2015-09-17

Android例子源码类似58同城的通过滑屏控制引导页

运行效果图如下，向右滑动屏幕，小人的小腿在跑呀跑呀！同志们不要搞错了哈~

源码在手 / 0评论 2015-05-23

phonegap2.0引导页无法显示解决办法

最近在项目中遇到一个phonegep引导页的问题。phonegap现在已经是升级到2点几了，可是我们的应用却还在使用1.4，于是下定决心将phonegap升级到2.0，升级方法就不在这里多做解释了，官方文档写的很清楚，但是打包后我发现我的应用无法显示引导页

jasonrenyu / 0评论 2012-09-28

jQuery插件pagewalkthrough实现引导页效果

现在很多网站不仅是介绍，更多的是有一些功能，怎么样让客户快速的知道网站有哪些功能呢？这里pagewalkthrough.js插件能帮我们实现，它是一个轻量级的jQuery插件，它可以帮助我们创建一个遮罩引导层，实现页面功能引导功能，引导完成显示页面内容。这

xiongfeng / 0评论 2019-04-21

work notes

本喵，一个快乐的web开发肥宅程序媛，参与过手机端、电视TV端、电脑端的开发。工作之余，总结了一些经验分享给大家～。对了，想要用position:fixed定位顶部导航栏的小伙伴听好了，木有用的，不要问我是怎么知道的QAQ……

Pinapps / 0评论 2018-05-24

浅谈启动页/广告页/引导页设计思想

用户第一次打开APP，第一眼看到的页面是启动页，启动页面主要是告诉用户“我”（产品）是谁，我是做什么的。一个好的启动页面设计会给用户留下良好的“第一印象”反之差的启动页面，会给用户留下差的印象。启动页好比男女相亲，初次见面自我介绍。通过三要素告诉用户“我是

读点儿设计 / 0评论 2018-01-24

ionic之应用首次启动引导页

用户首次启动app先进入引导页，localstroge记录状态，下次启动应用不再显示引导页。

编程爱好者联盟 / 0评论 2017-01-09