Android开发之splash界面下详解及实例

现在刚下载的很多app应用第一次打开都会在进入主界面之前有导航页，用来展示公司logo，或者推广自身这款app。先上效果图：

首先解释一下：支持进入首页只能往右滑动，中间可以左右滑动，最后一张只能向前滑动，点击立即体验会进入主界面，点击跳过也会进入到主界面。接下来上代码。

1，在app/build.gradle中的闭包中加入：

compile 'cn.bingoogolapple:bga-banner:2.1.6@aar'
compile 'com.android.support:support-v4:24.1.0'

2，布局文件:activity_splash.xml。

<?xml version="1.0" encoding="utf-8"?>
<relativelayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  android:id="@+id/activity_splash"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  tools:context="com.gyq.cloudreader.splashactivity">

  <cn.bingoogolapple.bgabanner.bgaguidelinkagelayout style="@style/matchmatch">

    <cn.bingoogolapple.bgabanner.bgabanner
      android:id="@+id/banner_guide_background"
      style="@style/matchmatch"
      app:banner_pagechangeduration="1000"
      app:banner_pointautoplayable="false"
      app:banner_pointcontainerbackground="@android:color/transparent"
      app:banner_pointdrawable="@drawable/bga_banner_selector_point_hollow"
      app:banner_pointtopbottommargin="15dp"
      app:banner_transitioneffect="fade"/>

    <cn.bingoogolapple.bgabanner.bgabanner
      android:id="@+id/banner_guide_foreground"
      style="@style/matchmatch"
      app:banner_pagechangeduration="1000"
      app:banner_pointautoplayable="false"
      app:banner_pointcontainerbackground="@android:color/transparent"
      app:banner_pointdrawable="@drawable/bga_banner_selector_point_hollow"
      app:banner_pointtopbottommargin="15dp"
      app:banner_transitioneffect="alpha"/>
  </cn.bingoogolapple.bgabanner.bgaguidelinkagelayout>

  <textview
    android:id="@+id/tv_guide_skip"
    style="@style/wrapwrap"
    android:layout_alignparentright="true"
    android:layout_marginright="8dp"
    android:layout_margintop="8dp"
    android:clickable="true"
    android:padding="4dp"
    android:text="跳过 >"
    android:textcolor="@android:color/white"
    android:textsize="16sp"/>

  <button
    android:id="@+id/btn_guide_enter"
    style="@style/wrapwrap"
    android:layout_alignparentbottom="true"
    android:layout_centerhorizontal="true"
    android:layout_marginbottom="60dp"
    android:background="@drawable/selector_btn_test"
    android:padding="10dp"
    android:text="立即体验"
    android:textcolor="@android:color/white"
    android:textsize="20sp"
    android:visibility="gone"
    tools:visibility="visible"/>

</relativelayout>

3，逻辑代码，splashactivity.java

package com.gyq.cloudreader;

import android.content.intent;
import android.os.bundle;
import android.support.v7.app.appcompatactivity;

import cn.bingoogolapple.bgabanner.bgabanner;

/**
 * 引导界面
 */
public class splashactivity extends appcompatactivity {
  private bgabanner mbackgroundbanner;
  private bgabanner mforegroundbanner;
  @override
  protected void oncreate(bundle savedinstancestate) {
    super.oncreate(savedinstancestate);
    setcontentview(r.layout.activity_splash);

    initview();

    initlistener();

    processlogic();

  }

  private void initview() {
    mbackgroundbanner = (bgabanner)findviewbyid(r.id.banner_guide_background);
    mforegroundbanner = (bgabanner)findviewbyid(r.id.banner_guide_foreground);
  }

  private void initlistener() {
    mforegroundbanner.setenterskipviewidanddelegate(r.id.btn_guide_enter, r.id.tv_guide_skip, new bgabanner.guidedelegate() {
      @override
      public void onclickenterorskip() {
        startactivity(new intent(splashactivity.this, mainactivity.class));
        finish();
      }
    });

  }

  private void processlogic() {
    //设置数据源
    mbackgroundbanner.setdata(r.drawable.uoko_guide_background_1,r.drawable.uoko_guide_background_2,r.drawable.uoko_guide_background_3);
    mforegroundbanner.setdata(r.drawable.uoko_guide_foreground_1,r.drawable.uoko_guide_foreground_2,r.drawable.uoko_guide_foreground_3);
  }

  @override
  protected void onresume() {
    super.onresume();

    // 如果开发者的引导页主题是透明的，需要在界面可见时给背景 banner 设置一个白色背景，避免滑动过程中两个 banner 都设置透明度后能看到 launcher
    mbackgroundbanner.setbackgroundresource(android.r.color.white);
  }
}

小结：记得以前写一个这样的引导页，还需要自己手写半天，现在有开源啦！看上面的代码我想你应该已经知道了这个就是用的bgabanner来实现的。不过还有点小细节。

1，布局文件中的style=”@style/wrapwrap”，我们需要在values文件夹下新建一个styles_base.xml。

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">

  <style name="wrapmatch">
    <item name="android:layout_width">wrap_content</item>
    <item name="android:layout_height">match_parent</item>
  </style>

  <style name="matchwrap">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">wrap_content</item>
  </style>

  <style name="wrapwrap">
    <item name="android:layout_width">wrap_content</item>
    <item name="android:layout_height">wrap_content</item>
  </style>

  <style name="matchmatch">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">match_parent</item>
  </style>

  <style name="matchauto">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_weight">1</item>
    <item name="android:layout_height">0dp</item>
  </style>

  <style name="automatch">
    <item name="android:layout_width">0dp</item>
    <item name="android:layout_weight">1</item>
    <item name="android:layout_height">match_parent</item>
  </style>

  <style name="wrapauto">
    <item name="android:layout_width">wrap_content</item>
    <item name="android:layout_weight">1</item>
    <item name="android:layout_height">0dp</item>
  </style>

  <style name="autowrap">
    <item name="android:layout_width">0dp</item>
    <item name="android:layout_weight">1</item>
    <item name="android:layout_height">wrap_content</item>
  </style>

  <style name="wrapmatch.vertical">
    <item name="android:orientation">vertical</item>
  </style>

  <style name="wrapmatch.horizontal">
    <item name="android:orientation">horizontal</item>
  </style>

  <style name="matchwrap.vertical">
    <item name="android:orientation">vertical</item>
  </style>

  <style name="matchwrap.horizontal">
    <item name="android:orientation">horizontal</item>
  </style>

  <style name="wrapwrap.vertical">
    <item name="android:orientation">vertical</item>
  </style>

  <style name="wrapwrap.horizontal">
    <item name="android:orientation">horizontal</item>
  </style>

  <style name="matchmatch.vertical">
    <item name="android:orientation">vertical</item>
  </style>

  <style name="matchmatch.horizontal">
    <item name="android:orientation">horizontal</item>
  </style>

  <style name="matchauto.vertical">
    <item name="android:orientation">vertical</item>
  </style>

  <style name="matchauto.horizontal">
    <item name="android:orientation">horizontal</item>
  </style>

  <style name="automatch.vertical">
    <item name="android:orientation">vertical</item>
  </style>

  <style name="automatch.horizontal">
    <item name="android:orientation">horizontal</item>
  </style>

  <style name="wrapauto.vertical">
    <item name="android:orientation">vertical</item>
  </style>

  <style name="wrapauto.horizontal">
    <item name="android:orientation">horizontal</item>
  </style>

  <style name="autowrap.vertical">
    <item name="android:orientation">vertical</item>
  </style>

  <style name="autowrap.horizontal">
    <item name="android:orientation">horizontal</item>
  </style>

  <style name="matchone">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">1px</item>
  </style>

  <style name="onematch">
    <item name="android:layout_width">1px</item>
    <item name="android:layout_height">match_parent</item>
  </style>
</resources>

还有styles.xml文件中添加如下代码，这样可以整个屏幕显示：

<resources>

  <!-- base application theme. -->
  <style name="apptheme" parent="theme.appcompat.light.noactionbar">
    <!-- customize your theme here. -->
    <item name="colorprimary">@color/colorprimary</item>
    <item name="colorprimarydark">@color/colorprimarydark</item>
    <item name="coloraccent">@color/coloraccent</item>
  </style>

  <!--避免第一次进来白屏或黑屏-->
  <style name="apptheme.splash">
    <item name="windowactionbar">false</item>
    <item name="windownotitle">true</item>
    <item name="android:windowbackground">@android:color/transparent</item>
    <item name="android:colorbackgroundcachehint">@null</item>
    <item name="android:windowistranslucent">true</item>
    <item name="android:windowfullscreen">true</item>
    <item name="android:windowcontentoverlay">@null</item>
  </style>

</resources>

最后清单文件，注册splashactivity是写如下代码。

<activity android:name=".splashactivity"
      android:label="@string/app_name"
      android:screenorientation="portrait"
      android:theme="@style/apptheme.splash">
      <intent-filter>
        <action android:name="android.intent.action.main" />

        <category android:name="android.intent.category.launcher" />
      </intent-filter>
    </activity>

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！