欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2023-12-11 11:50:34
现在刚下载的很多app应用第一次打开都会在进入主界面之前有导航页,用来展示公司logo,或者推广自身这款app。先上效果图: 首先解释一下:支持进入首页...

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

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

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>

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